@bug-on/m3-expressive 1.2.1 → 1.2.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import * as React59 from 'react';
+import * as React61 from 'react';
 import { createContext, forwardRef, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, useReducer, useContext, useId, cloneElement, createElement } from 'react';
 import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -228,7 +228,7 @@ function applyTheme(sourceColorHex, mode = "light", root = document.documentElem
   const resolved = resolveMode(mode);
   const colors = generateM3Theme(sourceColorHex, resolved, options);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m68) => `-${m68.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
@@ -250,7 +250,7 @@ function createMd3ExpressiveTheme(options) {
 function schemeToCssVariables(scheme) {
   const result = {};
   for (const [key, value] of Object.entries(scheme)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m68) => `-${m68.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
     result[`--md-sys-color-${kebabKey}`] = value;
   }
   return result;
@@ -1087,8 +1087,8 @@ var RoundedPolygon = class _RoundedPolygon {
       );
       const mid = c.pointOnCurve(0.5);
       const md = distanceSquared(mid.x - this.centerX, mid.y - this.centerY);
-      const m68 = Math.max(ad, md);
-      if (m68 > maxDistSq) maxDistSq = m68;
+      const m71 = Math.max(ad, md);
+      if (m71 > maxDistSq) maxDistSq = m71;
     }
     const d = Math.sqrt(maxDistSq);
     return [
@@ -3159,7 +3159,7 @@ var SUBMENU_CONTAINER_VARIANTS = {
     transition: FAST_EFFECTS_TRANSITION
   }
 };
-var MenuContext = React59.createContext({
+var MenuContext = React61.createContext({
   variant: "baseline",
   colorVariant: "standard",
   menuPrimitive: "dropdown",
@@ -3175,15 +3175,15 @@ function MenuProvider({
   onOpenChange,
   children
 }) {
-  const value = React59.useMemo(
+  const value = React61.useMemo(
     () => ({ variant, colorVariant, menuPrimitive, open, onOpenChange }),
     [variant, colorVariant, menuPrimitive, open, onOpenChange]
   );
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children });
 }
 function useMenuContext() {
-  const ctx = React59.useContext(MenuContext);
-  return React59.useMemo(
+  const ctx = React61.useContext(MenuContext);
+  return React61.useMemo(
     () => __spreadProps(__spreadValues({}, ctx), {
       isStatic: ctx.menuPrimitive === "static",
       menuVariant: ctx.variant
@@ -3298,7 +3298,7 @@ function ContextMenu({
   variant = "baseline",
   colorVariant = "standard"
 }) {
-  const [open, setOpen] = React59.useState(false);
+  const [open, setOpen] = React61.useState(false);
   return /* @__PURE__ */ jsx(
     MenuProvider,
     {
@@ -3312,12 +3312,12 @@ function ContextMenu({
   );
 }
 ContextMenu.displayName = "ContextMenu";
-var ContextMenuTrigger = React59.forwardRef((_a, ref) => {
+var ContextMenuTrigger = React61.forwardRef((_a, ref) => {
   var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
   return /* @__PURE__ */ jsx(RxContextMenu.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
 });
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
-var ContextMenuContent = React59.forwardRef(
+var ContextMenuContent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -3365,10 +3365,10 @@ var ContextMenuContent = React59.forwardRef(
       className
     );
     const flattenChildren = (nodes) => {
-      return React59.Children.toArray(nodes).reduce(
+      return React61.Children.toArray(nodes).reduce(
         (acc, child) => {
-          if (React59.isValidElement(child)) {
-            if (child.type === React59.Fragment) {
+          if (React61.isValidElement(child)) {
+            if (child.type === React61.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -3387,7 +3387,7 @@ var ContextMenuContent = React59.forwardRef(
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
       const enhancedChildren = validChildren.map(
-        (child, i) => React59.cloneElement(
+        (child, i) => React61.cloneElement(
           child,
           {
             index: i,
@@ -3451,12 +3451,12 @@ function Menu(_a) {
   ]);
   var _a2;
   const resolvedVariant = (_a2 = variant != null ? variant : menuVariant) != null ? _a2 : "baseline";
-  const [internalOpen, setInternalOpen] = React59.useState(
+  const [internalOpen, setInternalOpen] = React61.useState(
     () => defaultOpen != null ? defaultOpen : false
   );
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const handleOpenChange = React59.useCallback(
+  const handleOpenChange = React61.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       controlledOnOpenChange == null ? void 0 : controlledOnOpenChange(next);
@@ -3483,12 +3483,12 @@ function Menu(_a) {
   );
 }
 Menu.displayName = "Menu";
-var MenuTrigger = React59.forwardRef((_a, ref) => {
+var MenuTrigger = React61.forwardRef((_a, ref) => {
   var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
   return /* @__PURE__ */ jsx(DropdownMenu.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
 });
 MenuTrigger.displayName = "MenuTrigger";
-var MenuContent = React59.forwardRef(
+var MenuContent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -3542,10 +3542,10 @@ var MenuContent = React59.forwardRef(
       className
     );
     const flattenChildren = (nodes) => {
-      return React59.Children.toArray(nodes).reduce(
+      return React61.Children.toArray(nodes).reduce(
         (acc, child) => {
-          if (React59.isValidElement(child)) {
-            if (child.type === React59.Fragment) {
+          if (React61.isValidElement(child)) {
+            if (child.type === React61.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -3564,7 +3564,7 @@ var MenuContent = React59.forwardRef(
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
       const enhancedChildren = validChildren.map(
-        (child, i) => React59.cloneElement(child, {
+        (child, i) => React61.cloneElement(child, {
           index: i,
           count: groupCount,
           isGapVariant: isExpressiveGap
@@ -3619,7 +3619,7 @@ var MenuContent = React59.forwardRef(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuDivider = React59.forwardRef(
+var MenuDivider = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     const { menuVariant } = useMenuContext();
@@ -3650,7 +3650,7 @@ function getGroupPosition(index, count) {
 function getGroupActiveShape(position) {
   return GROUP_SHAPES[`${position}Active`];
 }
-var MenuGroup = React59.forwardRef(
+var MenuGroup = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -3680,15 +3680,15 @@ var MenuGroup = React59.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] = React59.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
     const currentShape = isStatic || isHovered ? activeShape : GROUP_SHAPES.inactive;
-    const handlePointerEnter = React59.useCallback(() => setIsHovered(true), []);
-    const handlePointerLeave = React59.useCallback(() => setIsHovered(false), []);
+    const handlePointerEnter = React61.useCallback(() => setIsHovered(true), []);
+    const handlePointerLeave = React61.useCallback(() => setIsHovered(false), []);
     const flattenChildren = (children2) => {
-      return React59.Children.toArray(children2).reduce(
+      return React61.Children.toArray(children2).reduce(
         (acc, child) => {
-          if (React59.isValidElement(child)) {
-            if (child.type === React59.Fragment) {
+          if (React61.isValidElement(child)) {
+            if (child.type === React61.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -3706,7 +3706,7 @@ var MenuGroup = React59.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 React59.cloneElement(child, {
+      return React61.cloneElement(child, {
         itemPosition: itemPosition2,
         colorVariant
       });
@@ -3782,7 +3782,7 @@ var VARIANT_FONT = {
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React59.forwardRef(
+var IconComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -3848,14 +3848,14 @@ var IconComponent = React59.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React59.memo(IconComponent);
+var Icon = React61.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 = React59.forwardRef(
+var MenuItem = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4057,31 +4057,31 @@ function SubMenu({
 }) {
   const { colorVariant: contextColorVariant, menuPrimitive } = useMenuContext();
   const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
-  const [open, setOpen] = React59.useState(false);
-  const openTimerRef = React59.useRef(null);
-  const closeTimerRef = React59.useRef(
+  const [open, setOpen] = React61.useState(false);
+  const openTimerRef = React61.useRef(null);
+  const closeTimerRef = React61.useRef(
     null
   );
-  const clearTimers = React59.useCallback(() => {
+  const clearTimers = React61.useCallback(() => {
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
   }, []);
-  const handleTriggerPointerEnter = React59.useCallback(() => {
+  const handleTriggerPointerEnter = React61.useCallback(() => {
     clearTimers();
     openTimerRef.current = setTimeout(() => setOpen(true), hoverOpenDelay);
   }, [hoverOpenDelay, clearTimers]);
-  const handleTriggerPointerLeave = React59.useCallback(() => {
+  const handleTriggerPointerLeave = React61.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  const handleContentPointerEnter = React59.useCallback(() => {
+  const handleContentPointerEnter = React61.useCallback(() => {
     clearTimers();
   }, [clearTimers]);
-  const handleContentPointerLeave = React59.useCallback(() => {
+  const handleContentPointerLeave = React61.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  React59.useEffect(() => () => clearTimers(), [clearTimers]);
+  React61.useEffect(() => () => clearTimers(), [clearTimers]);
   const Sub3 = menuPrimitive === "context" ? RxContextMenu.Sub : DropdownMenu.Sub;
   const SubTrigger3 = menuPrimitive === "context" ? RxContextMenu.SubTrigger : DropdownMenu.SubTrigger;
   const SubContent3 = menuPrimitive === "context" ? RxContextMenu.SubContent : DropdownMenu.SubContent;
@@ -4093,7 +4093,7 @@ function SubMenu({
         className: "w-full outline-none",
         onPointerEnter: handleTriggerPointerEnter,
         onPointerLeave: handleTriggerPointerLeave,
-        children: React59.isValidElement(trigger) ? React59.cloneElement(trigger, {
+        children: React61.isValidElement(trigger) ? React61.cloneElement(trigger, {
           isSubTrigger: true,
           // Auto-add chevron if missing
           trailingIcon: trigger.props.trailingIcon || /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 20 })
@@ -4170,7 +4170,7 @@ function SubMenuContent({
   );
 }
 SubMenuContent.displayName = "SubMenuContent";
-var VerticalMenuDivider = React59.forwardRef((_a, ref) => {
+var VerticalMenuDivider = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, index, count, isGapVariant } = _b, props = __objRest(_b, ["className", "index", "count", "isGapVariant"]);
   return /* @__PURE__ */ jsx(
     "hr",
@@ -4190,7 +4190,7 @@ var VerticalMenuDivider = React59.forwardRef((_a, ref) => {
 });
 VerticalMenuDivider.displayName = "VerticalMenuDivider";
 var VerticalMenuGroup = MenuGroup;
-var VerticalMenuContent = React59.forwardRef(
+var VerticalMenuContent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4207,10 +4207,10 @@ var VerticalMenuContent = React59.forwardRef(
     const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
     const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
     const flattenChildren = (children2) => {
-      return React59.Children.toArray(children2).reduce(
+      return React61.Children.toArray(children2).reduce(
         (acc, child) => {
-          if (React59.isValidElement(child)) {
-            if (child.type === React59.Fragment) {
+          if (React61.isValidElement(child)) {
+            if (child.type === React61.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -4227,7 +4227,7 @@ var VerticalMenuContent = React59.forwardRef(
     const validChildren = flattenChildren(children);
     const groupCount = validChildren.length;
     const enhancedChildren = validChildren.map(
-      (child, i) => React59.cloneElement(child, {
+      (child, i) => React61.cloneElement(child, {
         index: i,
         count: groupCount,
         isGapVariant: separatorStyle === "gap"
@@ -4264,13 +4264,13 @@ var VerticalMenuContent = React59.forwardRef(
   }
 );
 VerticalMenuContent.displayName = "VerticalMenuContent";
-var VerticalMenu = React59.forwardRef((_a, ref) => {
+var VerticalMenu = React61.forwardRef((_a, ref) => {
   var _b = _a, { children, colorVariant = "standard", className } = _b, props = __objRest(_b, ["children", "colorVariant", "className"]);
-  const noop = React59.useCallback(() => {
+  const noop = React61.useCallback(() => {
   }, []);
   const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
-  const containerRef = React59.useRef(null);
-  const mergedRef = React59.useCallback(
+  const containerRef = React61.useRef(null);
+  const mergedRef = React61.useCallback(
     (node) => {
       containerRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -4279,7 +4279,7 @@ var VerticalMenu = React59.forwardRef((_a, ref) => {
     },
     [ref]
   );
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       var _a2;
       if (!containerRef.current) return;
@@ -4362,7 +4362,7 @@ var VerticalMenu = React59.forwardRef((_a, ref) => {
 });
 VerticalMenu.displayName = "VerticalMenu";
 function detectSeparatorStyle(children) {
-  const child = React59.Children.toArray(children).find(React59.isValidElement);
+  const child = React61.Children.toArray(children).find(React61.isValidElement);
   if (child) {
     const style = child.props.separatorStyle;
     if (style) return style;
@@ -4443,11 +4443,11 @@ function AppBarColumn({
   maxItemCount,
   className
 }) {
-  const containerRef = React59.useRef(null);
-  const [visibleCount, setVisibleCount] = React59.useState(
+  const containerRef = React61.useRef(null);
+  const [visibleCount, setVisibleCount] = React61.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -4495,11 +4495,11 @@ function AppBarColumn({
   );
 }
 function AppBarRow({ items, maxItemCount, className }) {
-  const containerRef = React59.useRef(null);
-  const [visibleCount, setVisibleCount] = React59.useState(
+  const containerRef = React61.useRef(null);
+  const [visibleCount, setVisibleCount] = React61.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -4553,12 +4553,12 @@ function useAppBarScroll({
   collapsedHeight = 64,
   expandedHeight = 112
 } = {}) {
-  const [isScrolled, setIsScrolled] = React59.useState(false);
-  const [collapsedFraction, setCollapsedFraction] = React59.useState(0);
-  const [isHidden, setIsHidden] = React59.useState(false);
-  const prevScrollYRef = React59.useRef(0);
+  const [isScrolled, setIsScrolled] = React61.useState(false);
+  const [collapsedFraction, setCollapsedFraction] = React61.useState(0);
+  const [isHidden, setIsHidden] = React61.useState(false);
+  const prevScrollYRef = React61.useRef(0);
   const hideThreshold = 64;
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     var _a;
     const scrollDistance = expandedHeight - collapsedHeight;
     const getScrollY = () => {
@@ -4679,7 +4679,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = useMotionValue(0);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -5020,7 +5020,7 @@ function SearchAppBar({
 }) {
   var _a, _b;
   const shouldReduceMotion = useReducedMotion();
-  const [isSearchOpen, setIsSearchOpen] = React59.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React61.useState(false);
   const { isScrolled } = useAppBarScroll({
     scrollElement,
     behavior: scrollBehavior === "exitUntilCollapsed" ? "pinned" : scrollBehavior
@@ -5134,8 +5134,8 @@ function SearchView({
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React59.useRef(null);
-  React59.useEffect(() => {
+  const inputRef = React61.useRef(null);
+  React61.useEffect(() => {
     const timer = window.setTimeout(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -5405,9 +5405,9 @@ function formatBadgeLabel(children, max) {
   return "";
 }
 function detectBadgeHasContent(badge) {
-  return React59.isValidElement(badge) && badge.props.children != null;
+  return React61.isValidElement(badge) && badge.props.children != null;
 }
-var BadgeImpl = React59.forwardRef(
+var BadgeImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -5461,7 +5461,7 @@ var BadgeImpl = React59.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-var Badge = React59.memo(BadgeImpl);
+var Badge = React61.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -5527,11 +5527,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 = React59.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React61.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React59.useState(false);
-  React59.useEffect(() => {
+  const [ready, setReady] = React61.useState(false);
+  React61.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -5576,7 +5576,7 @@ var IndeterminateSvg = React59.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React59.memo(function DeterminateSvg2({
+var DeterminateSvg = React61.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -5601,7 +5601,7 @@ var DeterminateSvg = React59.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React59.forwardRef(
+var LoadingIndicator = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -5716,7 +5716,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React59.forwardRef(
+var CircularProgress = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -5754,15 +5754,15 @@ var CircularProgress = React59.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React59.useMemo(
+    const effectiveAmplitude = React61.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React59.useMemo(
+    const effectiveWavelength = React61.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React59.useMemo(
+    const wavyActivePath = React61.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -5771,8 +5771,8 @@ var CircularProgress = React59.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React59.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React59.useMemo(
+    const circumference = React61.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React61.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -5961,9 +5961,9 @@ var CircularProgress = React59.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React59.useState(0);
-  const observerRef = React59.useRef(null);
-  const ref = React59.useCallback((node) => {
+  const [width, setWidth] = React61.useState(0);
+  const observerRef = React61.useRef(null);
+  const ref = React61.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -5977,7 +5977,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -5987,7 +5987,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React59.useCallback(
+  return React61.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -6001,7 +6001,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React59.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React61.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -6077,7 +6077,7 @@ var FlatLinearTrack = React59.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React59.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React61.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -6096,13 +6096,13 @@ var WavyLinearTrack = React59.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React59.useId();
+  const titleId = React61.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React59.useRef(null);
-  const trackPathRef = React59.useRef(null);
+  const activePathRef = React61.useRef(null);
+  const trackPathRef = React61.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -6273,7 +6273,7 @@ var WavyLinearTrack = React59.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React59.forwardRef(
+var LinearProgress = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -6314,10 +6314,10 @@ var LinearProgress = React59.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React59.useRef(null);
+    const containerRef = React61.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React59.useState(false);
-    React59.useEffect(() => {
+    const [isRtl, setIsRtl] = React61.useState(false);
+    React61.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -6325,16 +6325,16 @@ var LinearProgress = React59.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React59.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React59.useMemo(
+    const effectiveAmplitude = React61.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React61.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React59.useMemo(
+    const shouldShowStop = React61.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React59.useMemo(
+    const stopSize = React61.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -6407,14 +6407,14 @@ var LinearProgress = React59.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React59.forwardRef((props, ref) => {
+var ProgressIndicator = React61.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React59.memo(function RippleItem2({
+var RippleItem = React61.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -6458,14 +6458,17 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React59.useState([]);
-  const onPointerDown = React59.useCallback(
+  const [ripples, setRipples] = React61.useState([]);
+  const onPointerDown = React61.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -6473,7 +6476,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React59.useCallback((id) => {
+  const removeRipple = React61.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -6704,7 +6707,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React59.forwardRef(
+var ButtonComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6716,6 +6719,7 @@ var ButtonComponent = React59.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -6737,6 +6741,7 @@ var ButtonComponent = React59.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -6766,9 +6771,9 @@ var ButtonComponent = React59.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React59.useMemo(() => {
+    const labelText = React61.useMemo(() => {
       if (asChild) {
-        const child = React59.Children.only(children);
+        const child = React61.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -6776,8 +6781,8 @@ var ButtonComponent = React59.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = useMotionValue(animateRadius);
-    const asChildRef = React59.useRef(null);
-    const mergedRef = React59.useCallback(
+    const asChildRef = React61.useRef(null);
+    const mergedRef = React61.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6786,14 +6791,14 @@ var ButtonComponent = React59.forwardRef(
       },
       [ref]
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -6801,14 +6806,14 @@ var ButtonComponent = React59.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -6836,10 +6841,11 @@ var ButtonComponent = React59.forwardRef(
       layout: BUTTON_SHAPE_MORPH_SPRING,
       default: SPRING_TRANSITION
     };
+    const activeIcon = isSelected && selectedIcon ? selectedIcon : icon;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: (loading || icon && iconPosition === "leading") && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: (loading || activeIcon && iconPosition === "leading") && /* @__PURE__ */ jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
@@ -6861,8 +6867,9 @@ var ButtonComponent = React59.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsx(
         m.span,
@@ -6873,27 +6880,28 @@ var ButtonComponent = React59.forwardRef(
           children: labelText
         }
       ),
-      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: icon && iconPosition === "trailing" && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !loading && activeIcon && iconPosition === "trailing" && /* @__PURE__ */ jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
           ariaHidden: true,
           transition: sharedTransition,
-          children: icon
-        }
+          children: activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) })
     ] });
-    const handleAsChildPointerDown = React59.useCallback(
+    const handleAsChildPointerDown = React61.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React59.useCallback(() => {
+    const handleAsChildPointerUp = React61.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -6903,7 +6911,7 @@ var ButtonComponent = React59.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React59.Children.only(children);
+      const child = React61.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -6920,7 +6928,7 @@ var ButtonComponent = React59.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React59.cloneElement(child, { children: innerContent })
+          children: React61.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -6949,7 +6957,333 @@ var ButtonComponent = React59.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React59.memo(ButtonComponent);
+var Button = React61.memo(ButtonComponent);
+
+// src/ui/buttons/button-distribute/button-distribute-tokens.ts
+var DISTRIBUTE_SPRING_TRANSITION = {
+  type: "spring",
+  stiffness: 300,
+  damping: 30,
+  mass: 0.8
+};
+var DEFAULT_EXPAND_RATIO = 0.3;
+var DISTRIBUTE_RADIUS_TOKENS = {
+  xs: { circleRadius: 16, pillRadius: 16, pressedRadius: 8 },
+  sm: { circleRadius: 20, pillRadius: 20, pressedRadius: 10 },
+  md: { circleRadius: 28, pillRadius: 28, pressedRadius: 16 },
+  lg: { circleRadius: 48, pillRadius: 48, pressedRadius: 28 },
+  xl: { circleRadius: 68, pillRadius: 68, pressedRadius: 40 }
+};
+var DISTRIBUTE_HEIGHT_TOKENS = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+function useDistributeWeights({
+  count,
+  weights,
+  activeIndex,
+  expandRatio = DEFAULT_EXPAND_RATIO,
+  mode = "dynamic",
+  isTextItem
+}) {
+  return React61.useMemo(() => {
+    if (count <= 0) return [];
+    if (mode === "mixed") {
+      const baseWeights2 = new Array(count).fill(0).map((_, idx) => {
+        if (idx === 0 || idx === count - 1) return 0;
+        return weights && weights[idx] !== void 0 ? weights[idx] : 1;
+      });
+      if (activeIndex === null || activeIndex < 0 || activeIndex >= count || count === 1) {
+        return baseWeights2;
+      }
+      const result2 = [...baseWeights2];
+      const expandAmount2 = expandRatio * 1.5;
+      if (activeIndex === 0) {
+        result2[0] = expandAmount2;
+        for (let i = 1; i < count - 1; i++) {
+          result2[i] = Math.max(0.5, baseWeights2[i] - expandRatio * 0.4);
+        }
+      } else if (activeIndex === count - 1) {
+        result2[count - 1] = expandAmount2;
+        for (let i = 1; i < count - 1; i++) {
+          result2[i] = Math.max(0.5, baseWeights2[i] - expandRatio * 0.4);
+        }
+      } else {
+        result2[activeIndex] = baseWeights2[activeIndex] + expandRatio;
+        for (let i = 1; i < count - 1; i++) {
+          if (i !== activeIndex) {
+            result2[i] = Math.max(0.5, baseWeights2[i] - expandRatio * 0.5);
+          }
+        }
+      }
+      return result2;
+    }
+    let baseWeights;
+    if (weights && weights.length === count) {
+      baseWeights = [...weights];
+    } else if (mode === "dynamic" && count === 3) {
+      baseWeights = [1, 2, 1];
+    } else {
+      baseWeights = new Array(count).fill(1);
+    }
+    if (activeIndex === null || activeIndex < 0 || activeIndex >= count || count === 1) {
+      return baseWeights;
+    }
+    const totalWeight = baseWeights.reduce((acc, w) => acc + w, 0);
+    const activeBaseWeight = baseWeights[activeIndex];
+    const expandAmount = expandRatio * totalWeight;
+    const minWeights = baseWeights.map((w, idx) => {
+      if (isTextItem == null ? void 0 : isTextItem[idx]) {
+        return Math.max(0.75, w * 0.65);
+      }
+      return 0.4;
+    });
+    const shrinkCapacity = baseWeights.map(
+      (w, idx) => idx === activeIndex ? 0 : Math.max(0, w - minWeights[idx])
+    );
+    const totalCapacity = shrinkCapacity.reduce((acc, cap) => acc + cap, 0);
+    const result = [...baseWeights];
+    if (totalCapacity > 0) {
+      const actualExpand = Math.min(expandAmount, totalCapacity);
+      result[activeIndex] = activeBaseWeight + actualExpand;
+      for (let i = 0; i < count; i++) {
+        if (i !== activeIndex) {
+          const shrinkAmount = actualExpand * (shrinkCapacity[i] / totalCapacity);
+          result[i] = Math.max(minWeights[i], baseWeights[i] - shrinkAmount);
+        }
+      }
+    }
+    return result;
+  }, [count, weights, activeIndex, expandRatio, mode, isTextItem]);
+}
+var ButtonDistribute = React61.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      mode = "dynamic",
+      weights,
+      expandRatio = 0.3,
+      expandOnHover = false,
+      fixedSize = 48,
+      leadingSize,
+      trailingSize,
+      gap = "0.5rem",
+      size = "sm",
+      itemClassName,
+      children,
+      onMouseLeave
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "mode",
+      "weights",
+      "expandRatio",
+      "expandOnHover",
+      "fixedSize",
+      "leadingSize",
+      "trailingSize",
+      "gap",
+      "size",
+      "itemClassName",
+      "children",
+      "onMouseLeave"
+    ]);
+    var _a2, _b2;
+    const [activeIndex, setActiveIndex] = React61.useState(null);
+    const [pressedIndex, setPressedIndex] = React61.useState(null);
+    const childrenArray = React61.useMemo(
+      () => React61.Children.toArray(children).filter(React61.isValidElement),
+      [children]
+    );
+    const count = childrenArray.length;
+    const isTextItem = React61.useMemo(() => {
+      return childrenArray.map((child) => {
+        const childEl = child;
+        if (typeof childEl.props.children === "string") return true;
+        if (Array.isArray(childEl.props.children)) {
+          return childEl.props.children.some(
+            (c) => typeof c === "string" && c.trim().length > 0
+          );
+        }
+        return false;
+      });
+    }, [childrenArray]);
+    const calculatedWeights = useDistributeWeights({
+      count,
+      weights,
+      activeIndex,
+      expandRatio,
+      mode,
+      isTextItem
+    });
+    const handleGroupMouseLeave = React61.useCallback(
+      (e) => {
+        setActiveIndex(null);
+        setPressedIndex(null);
+        onMouseLeave == null ? void 0 : onMouseLeave(e);
+      },
+      [onMouseLeave]
+    );
+    const resolvedGap = typeof gap === "number" ? `${gap}px` : gap;
+    const effectiveLeadingSize = typeof (leadingSize != null ? leadingSize : fixedSize) === "number" ? `${leadingSize != null ? leadingSize : fixedSize}px` : leadingSize != null ? leadingSize : fixedSize;
+    const effectiveTrailingSize = typeof (trailingSize != null ? trailingSize : fixedSize) === "number" ? `${trailingSize != null ? trailingSize : fixedSize}px` : trailingSize != null ? trailingSize : fixedSize;
+    const radiusTokens = (_a2 = DISTRIBUTE_RADIUS_TOKENS[size]) != null ? _a2 : DISTRIBUTE_RADIUS_TOKENS.sm;
+    const heightClass = (_b2 = DISTRIBUTE_HEIGHT_TOKENS[size]) != null ? _b2 : DISTRIBUTE_HEIGHT_TOKENS.sm;
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+      "fieldset",
+      __spreadProps(__spreadValues({
+        ref,
+        onMouseLeave: handleGroupMouseLeave,
+        onPointerCancel: () => setPressedIndex(null),
+        className: cn(
+          "inline-flex flex-row items-center border-none p-0 m-0 box-border overflow-hidden select-none w-full",
+          heightClass,
+          className
+        ),
+        style: __spreadValues({
+          gap: resolvedGap
+        }, style)
+      }, restProps), {
+        children: childrenArray.map((child, index) => {
+          var _a3, _b3, _c, _d, _e, _f;
+          const isFirst = index === 0;
+          const isLast = index === count - 1;
+          const childElement = child;
+          const isActive = activeIndex === index;
+          const isPressed = pressedIndex === index;
+          const isSquish = isActive || isPressed;
+          let flexStyle = {};
+          let targetFlexBasis = 0;
+          const parsePx = (val) => {
+            if (typeof val === "number") return val;
+            const parsed = Number.parseFloat(val);
+            return Number.isNaN(parsed) ? 48 : parsed;
+          };
+          const leadingPx = parsePx(effectiveLeadingSize);
+          const trailingPx = parsePx(effectiveTrailingSize);
+          const leadingCompressedPx = Math.max(
+            40,
+            Math.round(leadingPx * (1 - expandRatio))
+          );
+          const trailingCompressedPx = Math.max(
+            40,
+            Math.round(trailingPx * (1 - expandRatio))
+          );
+          if (mode === "dynamic" || mode === "fixed") {
+            const currentWeight = (_a3 = calculatedWeights[index]) != null ? _a3 : 1;
+            flexStyle = {
+              flexGrow: currentWeight,
+              flexShrink: 1,
+              flexBasis: 0,
+              minWidth: 0
+            };
+            targetFlexBasis = 0;
+          } else if (mode === "mixed") {
+            const currentWeight = (_b3 = calculatedWeights[index]) != null ? _b3 : 0;
+            if (isFirst) {
+              targetFlexBasis = activeIndex !== null && activeIndex > 0 ? `${leadingCompressedPx}px` : effectiveLeadingSize;
+              flexStyle = {
+                flexBasis: targetFlexBasis,
+                flexGrow: currentWeight,
+                flexShrink: 0,
+                minWidth: 0
+              };
+            } else if (isLast) {
+              targetFlexBasis = activeIndex !== null && activeIndex < count - 1 ? `${trailingCompressedPx}px` : effectiveTrailingSize;
+              flexStyle = {
+                flexBasis: targetFlexBasis,
+                flexGrow: currentWeight,
+                flexShrink: 0,
+                minWidth: 0
+              };
+            } else {
+              targetFlexBasis = 0;
+              flexStyle = {
+                flexBasis: 0,
+                flexGrow: (_c = calculatedWeights[index]) != null ? _c : 1,
+                flexShrink: 1,
+                minWidth: 0
+              };
+            }
+          }
+          const handleMouseEnter = (e) => {
+            var _a4, _b4;
+            if (expandOnHover) {
+              setActiveIndex(index);
+            }
+            (_b4 = (_a4 = childElement.props).onMouseEnter) == null ? void 0 : _b4.call(_a4, e);
+          };
+          const handleFocus = (e) => {
+            var _a4, _b4;
+            setActiveIndex(index);
+            (_b4 = (_a4 = childElement.props).onFocus) == null ? void 0 : _b4.call(_a4, e);
+          };
+          const handlePointerDown = (e) => {
+            var _a4, _b4;
+            setPressedIndex(index);
+            setActiveIndex(index);
+            (_b4 = (_a4 = childElement.props).onPointerDown) == null ? void 0 : _b4.call(_a4, e);
+          };
+          const handlePointerUp = (e) => {
+            var _a4, _b4;
+            setPressedIndex(null);
+            if (!expandOnHover) {
+              setActiveIndex(null);
+            }
+            (_b4 = (_a4 = childElement.props).onPointerUp) == null ? void 0 : _b4.call(_a4, e);
+          };
+          const handleClick = (e) => {
+            var _a4, _b4;
+            setPressedIndex(null);
+            if (!expandOnHover) {
+              setActiveIndex(null);
+            }
+            (_b4 = (_a4 = childElement.props).onClick) == null ? void 0 : _b4.call(_a4, e);
+          };
+          const clonedChild = React61.cloneElement(childElement, {
+            size: (_d = childElement.props.size) != null ? _d : size,
+            className: cn(
+              "w-full! h-full! justify-center items-center flex-1 rounded-[inherit]! px-3! sm:px-4!",
+              childElement.props.className
+            )
+          });
+          return /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layout: true,
+              initial: false,
+              animate: {
+                flexGrow: (_f = flexStyle.flexGrow) != null ? _f : 1,
+                flexBasis: targetFlexBasis,
+                borderRadius: isSquish ? radiusTokens.pressedRadius : radiusTokens.pillRadius
+              },
+              transition: __spreadProps(__spreadValues({}, DISTRIBUTE_SPRING_TRANSITION), {
+                borderRadius: BUTTON_RADIUS_SPRING
+              }),
+              onMouseEnter: handleMouseEnter,
+              onFocus: handleFocus,
+              onPointerDown: handlePointerDown,
+              onPointerUp: handlePointerUp,
+              onClick: handleClick,
+              className: cn(
+                "relative inline-flex items-center justify-center shrink-0 min-w-0 overflow-hidden h-full",
+                itemClassName
+              ),
+              style: flexStyle,
+              children: clonedChild
+            },
+            (_e = childElement.key) != null ? _e : index
+          );
+        })
+      })
+    ) });
+  }
+);
+ButtonDistribute.displayName = "ButtonDistribute";
 var BUTTON_GROUP_TOKENS = {
   connected: {
     // 40dp / 2.5rem
@@ -6992,7 +7326,6 @@ function buildConnectedShapes(size, defaultCorners, pressedCorners) {
   };
 }
 var ButtonGroupDefaults = {
-  expandedRatio: 0.15,
   connectedLeadingButtonShapes: (size) => buildConnectedShapes(
     size,
     (o, i) => ({ tl: o, tr: i, br: i, bl: o }),
@@ -7021,8 +7354,6 @@ var ButtonGroupDefaults = {
   )
 };
 var PILL_BORDER_RADIUS = 9999;
-var MIN_FLEX_GROW = 0.01;
-var PADDING_EXPAND_MULTIPLIER = 4;
 var CHECK_ICON_SIZE = 24;
 var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
@@ -7038,13 +7369,7 @@ var CHECK_ICON_MOTION = {
   damping: 34,
   mass: 0.75
 };
-var WIDTH_MORPH_SPRING = {
-  type: "spring",
-  stiffness: 360,
-  damping: 38,
-  mass: 0.85
-};
-var AnimatedCheckLabel = React59.memo(function AnimatedCheckLabel2({
+var AnimatedCheckLabel = React61.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -7120,43 +7445,9 @@ function resolveIconAndLabel(element, isSelected, itemSize, showCheck, iconBehav
   }
   return { icon, label };
 }
-function resolveFlexTargets(variant, orientation, isSelected, isPressed, hasSelected, count, fullWidth, activeMorphing, morphingWidth, expandedRatio, basePx) {
-  const increment = expandedRatio * PADDING_EXPAND_MULTIPLIER;
-  if (activeMorphing) {
-    const isFlexLayout = fullWidth || variant === "connected" && orientation === "horizontal";
-    if (isFlexLayout) {
-      if (isSelected) return { flexGrow: 1 + expandedRatio };
-      if (hasSelected && count > 1)
-        return {
-          flexGrow: Math.max(MIN_FLEX_GROW, 1 - expandedRatio / (count - 1))
-        };
-      return { flexGrow: 1 };
-    }
-    if (isSelected)
-      return { paddingInline: `calc(${basePx} + ${increment}rem)` };
-    if (hasSelected && count > 1) {
-      const decrement = increment / (count - 1);
-      return { paddingInline: `calc(${basePx} - ${decrement}rem)` };
-    }
-    return { paddingInline: basePx };
-  }
-  if (morphingWidth && variant === "standard") {
-    if (fullWidth) return { flexGrow: isPressed ? 1 + expandedRatio : 1 };
-    return {
-      paddingInline: isPressed ? `calc(${basePx} + ${increment}rem)` : basePx
-    };
-  }
-  return {};
-}
-function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex, existingAnimate, existingWhileTap) {
+function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, existingAnimate, existingWhileTap) {
   var _a, _b;
   const props = { animate: __spreadValues({}, existingAnimate) };
-  if (flex.flexGrow !== void 0) {
-    props.animate.flexGrow = flex.flexGrow;
-  }
-  if (flex.paddingInline !== void 0) {
-    props.animate.paddingInline = flex.paddingInline;
-  }
   if (variant === "standard") {
     const pressedRadius = (_a = PRESSED_RADIUS_MAP[itemSize]) != null ? _a : PRESSED_RADIUS_MAP.sm;
     const itemSizeTokens = (_b = BUTTON_SIZE_TOKENS[itemSize]) != null ? _b : BUTTON_SIZE_TOKENS.sm;
@@ -7167,9 +7458,6 @@ function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex
     }, existingWhileTap);
     props.transition = {
       borderRadius: BUTTON_RADIUS_SPRING,
-      flexGrow: WIDTH_MORPH_SPRING,
-      paddingInline: WIDTH_MORPH_SPRING,
-      layout: WIDTH_MORPH_SPRING,
       default: BUTTON_SHAPE_MORPH_SPRING
     };
     props.layout = true;
@@ -7196,19 +7484,16 @@ function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex
       borderBottomLeftRadius: shapes.pressed.bl
     }, existingWhileTap);
     props.transition = __spreadProps(__spreadValues({}, BUTTON_SHAPE_MORPH_SPRING), {
-      flexGrow: WIDTH_MORPH_SPRING,
-      paddingInline: WIDTH_MORPH_SPRING,
       borderTopLeftRadius: BUTTON_RADIUS_SPRING,
       borderTopRightRadius: BUTTON_RADIUS_SPRING,
       borderBottomRightRadius: BUTTON_RADIUS_SPRING,
-      borderBottomLeftRadius: BUTTON_RADIUS_SPRING,
-      layout: WIDTH_MORPH_SPRING
+      borderBottomLeftRadius: BUTTON_RADIUS_SPRING
     });
     props.layout = true;
   }
   return props;
 }
-var ButtonGroupComponent = React59.forwardRef(
+var ButtonGroupComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7216,10 +7501,7 @@ var ButtonGroupComponent = React59.forwardRef(
       orientation = "horizontal",
       fullWidth = false,
       size,
-      morphingWidth = true,
-      activeMorphing = false,
       itemClassName,
-      expandedRatio = ButtonGroupDefaults.expandedRatio,
       showCheck = false,
       children,
       iconBehavior,
@@ -7231,99 +7513,26 @@ var ButtonGroupComponent = React59.forwardRef(
       "orientation",
       "fullWidth",
       "size",
-      "morphingWidth",
-      "activeMorphing",
       "itemClassName",
-      "expandedRatio",
       "showCheck",
       "children",
       "iconBehavior",
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React59.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React59.useState(
-      null
-    );
-    const rootRef = React59.useRef(null);
-    const setRootRef = React59.useCallback(
-      (node) => {
-        rootRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    );
-    const childrenArray = React59.useMemo(
-      () => React59.Children.toArray(children).filter(React59.isValidElement),
+    const [pressedIndex, setPressedIndex] = React61.useState(null);
+    const childrenArray = React61.useMemo(
+      () => React61.Children.toArray(children).filter(React61.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const groupSizeSignature = React59.useMemo(
-      () => `${childrenArray.map((child, index) => {
-        var _a2, _b2, _c, _d, _e;
-        const element = child;
-        const label = typeof element.props.children === "string" || typeof element.props.children === "number" ? element.props.children : (_a2 = element.key) != null ? _a2 : index;
-        return [
-          (_b2 = element.key) != null ? _b2 : index,
-          (_d = (_c = element.props.size) != null ? _c : size) != null ? _d : "",
-          label,
-          Boolean(element.props.icon),
-          (_e = element.props.className) != null ? _e : ""
-        ].join(":");
-      }).join("|")}|${variant}|${orientation}|${showCheck}`,
-      [childrenArray, orientation, showCheck, size, variant]
-    );
-    const groupSizeSignatureRef = React59.useRef(groupSizeSignature);
-    React59.useLayoutEffect(() => {
-      if (groupSizeSignatureRef.current !== groupSizeSignature) {
-        groupSizeSignatureRef.current = groupSizeSignature;
-        setLockedGroupSize(null);
-      }
-    }, [groupSizeSignature]);
-    const hasExplicitGroupSize = orientation === "horizontal" ? (style == null ? void 0 : style.width) !== void 0 || (style == null ? void 0 : style.inlineSize) !== void 0 : (style == null ? void 0 : style.height) !== void 0 || (style == null ? void 0 : style.blockSize) !== void 0;
-    const shouldLockGroupSize = activeMorphing && !fullWidth && !hasExplicitGroupSize && count > 1;
-    React59.useLayoutEffect(() => {
-      if (!shouldLockGroupSize) {
-        if (lockedGroupSize !== null) setLockedGroupSize(null);
-        return;
-      }
-      if (lockedGroupSize !== null) return;
-      const node = rootRef.current;
-      if (!node) return;
-      const rect = node.getBoundingClientRect();
-      const nextSize = orientation === "horizontal" ? rect.width : rect.height;
-      if (nextSize > 0) {
-        setLockedGroupSize(Math.ceil(nextSize * 100) / 100);
-      }
-    }, [lockedGroupSize, orientation, shouldLockGroupSize]);
-    const groupStyle = React59.useMemo(() => {
-      const nextStyle = __spreadValues({}, style);
-      if (shouldLockGroupSize && lockedGroupSize !== null) {
-        if (orientation === "horizontal") {
-          nextStyle.inlineSize = `${lockedGroupSize}px`;
-        } else {
-          nextStyle.blockSize = `${lockedGroupSize}px`;
-        }
-      }
-      return nextStyle;
-    }, [lockedGroupSize, orientation, shouldLockGroupSize, style]);
-    const hasSelected = React59.useMemo(
-      () => childrenArray.some(
-        (child) => child.props.selected
-      ),
-      [childrenArray]
-    );
-    const handlePointerLeaveAndUp = React59.useCallback(() => {
+    const handlePointerLeaveAndUp = React61.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsx(
       "fieldset",
       __spreadProps(__spreadValues({
-        ref: setRootRef,
+        ref,
         className: cn(
           "inline-flex p-0 m-0 border-none max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
           orientation === "vertical" ? "flex-col items-stretch overflow-y-auto overflow-x-hidden" : "flex-row overflow-x-auto overflow-y-hidden",
@@ -7332,18 +7541,17 @@ var ButtonGroupComponent = React59.forwardRef(
           fullWidth && orientation === "vertical" && "h-full",
           className
         ),
-        style: groupStyle,
+        style,
         onPointerLeave: handlePointerLeaveAndUp,
         onPointerUp: handlePointerLeaveAndUp
       }, props), {
         children: childrenArray.map((child, index) => {
-          var _a2, _b2;
+          var _a2;
           const element = child;
           const isSelected = element.props.selected === true;
           const isFirst = index === 0;
           const isLast = index === count - 1;
           const itemSize = size || element.props.size || "sm";
-          const basePx = ((_a2 = BUTTON_SIZE_TOKENS[itemSize]) == null ? void 0 : _a2.leadingSpace) || "1rem";
           const isPressed = pressedIndex === index;
           const { icon: explicitIcon, label: explicitLabel } = resolveIconAndLabel(
             element,
@@ -7360,25 +7568,6 @@ var ButtonGroupComponent = React59.forwardRef(
             isLast,
             itemSize
           );
-          const flex = resolveFlexTargets(
-            variant,
-            orientation,
-            isSelected,
-            isPressed,
-            hasSelected,
-            count,
-            fullWidth,
-            activeMorphing,
-            morphingWidth,
-            expandedRatio,
-            basePx
-          );
-          const dynamicStyle = __spreadValues({}, element.props.style);
-          if (flex.flexGrow !== void 0 && fullWidth) {
-            dynamicStyle.flexBasis = 0;
-            dynamicStyle.flexShrink = 1;
-            dynamicStyle.minWidth = 0;
-          }
           const existingAnimate = typeof element.props.animate === "object" && !Array.isArray(element.props.animate) ? element.props.animate : {};
           const existingWhileTap = typeof element.props.whileTap === "object" && !Array.isArray(element.props.whileTap) ? element.props.whileTap : {};
           const motionProps = buildMotionProps(
@@ -7387,13 +7576,12 @@ var ButtonGroupComponent = React59.forwardRef(
             isPressed,
             itemSize,
             shapes,
-            flex,
             existingAnimate,
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const clonedElement = React59.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
-            key: (_b2 = element.key) != null ? _b2 : index,
+          const clonedElement = React61.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+            key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
             icon: explicitIcon,
@@ -7407,9 +7595,9 @@ var ButtonGroupComponent = React59.forwardRef(
               connectedClasses,
               "focus-visible:z-10 hover:z-10 relative min-w-0",
               orientation === "vertical" && "w-full",
+              fullWidth && "flex-1",
               itemClassName
             ),
-            style: dynamicStyle,
             onPointerDown: (e) => {
               setPressedIndex(index);
               if (element.props.onPointerDown) element.props.onPointerDown(e);
@@ -7422,7 +7610,7 @@ var ButtonGroupComponent = React59.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React59.memo(ButtonGroupComponent);
+var ButtonGroup = React61.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -7477,9 +7665,9 @@ var COLOR_CLASSES = {
   }
 };
 function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
-  const [collapsed, setCollapsed] = React59.useState(false);
-  const lastScrollY = React59.useRef(0);
-  React59.useEffect(() => {
+  const [collapsed, setCollapsed] = React61.useState(false);
+  const lastScrollY = React61.useRef(0);
+  React61.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
     lastScrollY.current = window.scrollY;
     const handleScroll = () => {
@@ -7502,7 +7690,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React59.forwardRef(
+var ExtendedFABComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7548,10 +7736,10 @@ var ExtendedFABComponent = React59.forwardRef(
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
-    const localRef = React59.useRef(null);
-    React59.useImperativeHandle(ref, () => localRef.current);
-    const [dir, setDir] = React59.useState("ltr");
-    React59.useEffect(() => {
+    const localRef = React61.useRef(null);
+    React61.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React61.useState("ltr");
+    React61.useEffect(() => {
       var _a3;
       if (!localRef.current) return;
       const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
@@ -7572,7 +7760,7 @@ var ExtendedFABComponent = React59.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -7582,7 +7770,7 @@ var ExtendedFABComponent = React59.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -7690,8 +7878,8 @@ var ExtendedFABComponent = React59.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React59.cloneElement(
-          React59.Children.only(children),
+        children: React61.cloneElement(
+          React61.Children.only(children),
           { children: innerContent }
         )
       })
@@ -7735,7 +7923,7 @@ var ExtendedFABComponent = React59.forwardRef(
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
-var ExtendedFAB = React59.memo(ExtendedFABComponent);
+var ExtendedFAB = React61.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -7806,7 +7994,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React59.forwardRef(
+var FABComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7853,7 +8041,7 @@ var FABComponent = React59.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -7863,7 +8051,7 @@ var FABComponent = React59.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -7874,7 +8062,7 @@ var FABComponent = React59.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    const labelContent = asChild ? React59.Children.only(children).props.children : children;
+    const labelContent = asChild ? React61.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
@@ -7962,8 +8150,8 @@ var FABComponent = React59.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React59.cloneElement(
-          React59.Children.only(children),
+        children: React61.cloneElement(
+          React61.Children.only(children),
           { children: innerContent }
         )
       })
@@ -8000,7 +8188,7 @@ var FABComponent = React59.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React59.memo(FABComponent);
+var FAB = React61.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -8108,7 +8296,7 @@ function CloseIcon2() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon2, {}) : /* @__PURE__ */ jsx(AddIcon, {});
 }
-var ToggleFABComponent = React59.forwardRef(
+var ToggleFABComponent = React61.forwardRef(
   ({
     expanded,
     onToggle,
@@ -8126,7 +8314,7 @@ var ToggleFABComponent = React59.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = useSpring(expanded ? 1 : 0, springConfig);
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = useTransform(
@@ -8134,12 +8322,12 @@ var ToggleFABComponent = React59.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React59.useState(expanded ? 1 : 0);
-    React59.useEffect(() => {
+    const [iconProgress, setIconProgress] = React61.useState(expanded ? 1 : 0);
+    React61.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React59.useCallback(() => {
+    const handleClick = React61.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxs(
@@ -8188,7 +8376,7 @@ var ToggleFABComponent = React59.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React59.memo(ToggleFABComponent);
+var ToggleFAB = React61.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -8203,7 +8391,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 = React59.useCallback(
+  const handleClick = React61.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -8213,7 +8401,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -8255,7 +8443,7 @@ function FABMenuItem({
     borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
   };
   if (asChild) {
-    const child = React59.Children.only(children);
+    const child = React61.Children.only(children);
     return /* @__PURE__ */ jsx(m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsx(
       Slot,
       {
@@ -8267,7 +8455,7 @@ function FABMenuItem({
         onPointerDown,
         onKeyDown: handleKeyDown,
         className: containerClassName,
-        children: React59.cloneElement(child, { children: innerContent })
+        children: React61.cloneElement(child, { children: innerContent })
       }
     ) });
   }
@@ -8300,13 +8488,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React59.useId();
-  const menuId = React59.useId();
-  const toggleRef = React59.useRef(null);
-  const itemRefs = React59.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React59.useState(-1);
-  const reversedItems = React59.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React59.useCallback((index) => {
+  const fabId = React61.useId();
+  const menuId = React61.useId();
+  const toggleRef = React61.useRef(null);
+  const itemRefs = React61.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React61.useState(-1);
+  const reversedItems = React61.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React61.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -8315,8 +8503,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React59.useRef(false);
-  React59.useEffect(() => {
+  const wasExpandedRef = React61.useRef(false);
+  React61.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -8331,7 +8519,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React59.useCallback(
+  const handleMenuKeyDown = React61.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -8455,12 +8643,39 @@ function FABMenu({
     )
   ] });
 }
-var SIZE_STYLES2 = {
-  xs: "h-8 w-8",
-  sm: "h-10 w-10",
-  md: "h-14 w-14",
-  lg: "h-24 w-24",
-  xl: "h-[8.5rem] w-[8.5rem]"
+var SIZE_HEIGHT_STYLES = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+var WIDTH_SIZE_STYLES = {
+  xs: {
+    default: "w-8",
+    narrow: "w-8",
+    wide: "w-12"
+  },
+  sm: {
+    default: "w-10",
+    narrow: "w-12",
+    wide: "w-[3.25rem]"
+  },
+  md: {
+    default: "w-14",
+    narrow: "w-12",
+    wide: "w-[4.5rem]"
+  },
+  lg: {
+    default: "w-24",
+    narrow: "w-16",
+    wide: "w-32"
+  },
+  xl: {
+    default: "w-[8.5rem]",
+    narrow: "w-[6.5rem]",
+    wide: "w-[11.5rem]"
+  }
 };
 var SIZE_ICON3 = {
   xs: { cls: "size-5", px: 20 },
@@ -8553,7 +8768,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React59.forwardRef(
+var IconButtonComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8561,8 +8776,10 @@ var IconButtonComponent = React59.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
@@ -8577,8 +8794,10 @@ var IconButtonComponent = React59.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -8588,21 +8807,21 @@ var IconButtonComponent = React59.forwardRef(
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React59.useMemo(
+    const resolvedColorClass = React61.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React59.useMemo(
+    const outlineWidthClass = React61.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React59.useMemo(
+    const disabledBgClass = React61.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -8619,11 +8838,13 @@ var IconButtonComponent = React59.forwardRef(
     const defaultIconPx = sizeIcon.px;
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -8633,7 +8854,7 @@ var IconButtonComponent = React59.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -8681,7 +8902,7 @@ var IconButtonComponent = React59.forwardRef(
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
-            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]",
             iconSize != null ? void 0 : iconClass
           ),
           style: {
@@ -8689,9 +8910,9 @@ var IconButtonComponent = React59.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: asChild ? React59.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React61.Children.only(children).props.children : children
         }),
-        "content"
+        isSelected && selectedIcon ? "selected-content" : "content"
       ) })
     ] });
     const containerClassName = cn(
@@ -8700,12 +8921,13 @@ var IconButtonComponent = React59.forwardRef(
       outlineWidthClass,
       disabledBgClass,
       "overflow-hidden",
-      SIZE_STYLES2[size],
+      heightClass,
+      widthClass,
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
     if (asChild) {
-      const child = React59.Children.only(children);
+      const child = React61.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -8717,10 +8939,12 @@ var IconButtonComponent = React59.forwardRef(
           onClick: handleClick,
           onPointerDown,
           onKeyDown: handleKeyDown,
-          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          style: __spreadProps(__spreadValues({}, style), {
+            borderRadius: `${animateRadius}px`
+          }),
           className: containerClassName
         }, restProps), {
-          children: React59.cloneElement(child, { children: innerContent })
+          children: React61.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -8748,12 +8972,12 @@ var IconButtonComponent = React59.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React59.memo(IconButtonComponent);
-var SplitButtonContext = React59.createContext(null);
+var IconButton = React61.memo(IconButtonComponent);
+var SplitButtonContext = React61.createContext(null);
 function useSplitButtonContext() {
-  return React59.useContext(SplitButtonContext);
+  return React61.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React59.forwardRef(
+var SplitButtonLayoutComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -8770,10 +8994,10 @@ var SplitButtonLayoutComponent = React59.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React59.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React61.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React59.useMemo(
+    const contextValue = React61.useMemo(
       () => ({
         size,
         variant
@@ -8799,8 +9023,8 @@ var SplitButtonLayoutComponent = React59.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React59.memo(SplitButtonLayoutComponent);
-var StateLayer = React59.forwardRef(
+var SplitButtonLayout = React61.memo(SplitButtonLayoutComponent);
+var StateLayer = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
     let opacity = 0;
@@ -9052,7 +9276,7 @@ var splitButtonVariants = cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React59.forwardRef(
+var SplitButtonLeadingComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9091,9 +9315,9 @@ var SplitButtonLeadingComponent = React59.forwardRef(
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [isPressed, setIsPressed] = React59.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [isPressed, setIsPressed] = React61.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const typographyClass = (_c = BUTTON_TYPOGRAPHY_TOKENS[actualSize]) != null ? _c : BUTTON_TYPOGRAPHY_TOKENS.sm;
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -9105,7 +9329,7 @@ var SplitButtonLeadingComponent = React59.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = `${outerRadius}px ${innerCornerRadius}px ${innerCornerRadius}px ${outerRadius}px`;
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -9115,7 +9339,7 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -9123,19 +9347,19 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React59.useCallback(
+    const handlePointerUp = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React59.useCallback(() => {
+    const handlePointerEnter = React61.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React59.useCallback(
+    const handlePointerLeave = React61.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -9143,21 +9367,21 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React59.useCallback(
+    const handlePointerCancel = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React59.useCallback(
+    const handleFocus = React61.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React59.useCallback(
+    const handleBlur = React61.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -9165,7 +9389,7 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    const labelContent = asChild ? React59.Children.only(children).props.children : children;
+    const labelContent = asChild ? React61.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(
@@ -9222,8 +9446,8 @@ var SplitButtonLeadingComponent = React59.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React59.cloneElement(
-          React59.Children.only(children),
+        children: React61.cloneElement(
+          React61.Children.only(children),
           { children: innerContent }
         )
       })
@@ -9256,16 +9480,16 @@ var SplitButtonLeadingComponent = React59.forwardRef(
   }
 );
 SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
-var SplitButtonLeading = React59.memo(SplitButtonLeadingComponent);
-var FilledSplitButtonLeading = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonLeading = React61.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonLeading.displayName = "FilledSplitButtonLeading";
-var TonalSplitButtonLeading = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonLeading = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonLeading.displayName = "TonalSplitButtonLeading";
-var ElevatedSplitButtonLeading = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonLeading = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonLeading.displayName = "ElevatedSplitButtonLeading";
-var OutlinedSplitButtonLeading = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonLeading = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
-var SplitButtonTrailingComponent = React59.forwardRef(
+var SplitButtonTrailingComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9308,9 +9532,9 @@ var SplitButtonTrailingComponent = React59.forwardRef(
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [isPressed, setIsPressed] = React59.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [isPressed, setIsPressed] = React61.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const prefersReducedMotion2 = useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -9322,12 +9546,12 @@ var SplitButtonTrailingComponent = React59.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = checked ? `${outerRadius}px ${outerRadius}px ${outerRadius}px ${outerRadius}px` : `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
-    const handleToggle = React59.useCallback(() => {
+    const handleToggle = React61.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -9335,19 +9559,19 @@ var SplitButtonTrailingComponent = React59.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React59.useCallback(
+    const handlePointerUp = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React59.useCallback(() => {
+    const handlePointerEnter = React61.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React59.useCallback(
+    const handlePointerLeave = React61.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -9355,21 +9579,21 @@ var SplitButtonTrailingComponent = React59.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React59.useCallback(
+    const handlePointerCancel = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React59.useCallback(
+    const handleFocus = React61.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React59.useCallback(
+    const handleBlur = React61.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -9438,8 +9662,8 @@ var SplitButtonTrailingComponent = React59.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React59.cloneElement(
-          React59.Children.only(children),
+        children: React61.cloneElement(
+          React61.Children.only(children),
           { children: innerContent }
         )
       })
@@ -9474,16 +9698,16 @@ var SplitButtonTrailingComponent = React59.forwardRef(
   }
 );
 SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
-var SplitButtonTrailing = React59.memo(SplitButtonTrailingComponent);
-var FilledSplitButtonTrailing = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonTrailing = React61.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailing.displayName = "FilledSplitButtonTrailing";
-var TonalSplitButtonTrailing = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailing = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailing.displayName = "TonalSplitButtonTrailing";
-var ElevatedSplitButtonTrailing = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailing = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailing.displayName = "ElevatedSplitButtonTrailing";
-var OutlinedSplitButtonTrailing = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailing = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
-var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9520,9 +9744,9 @@ var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [isPressed, setIsPressed] = React59.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [isPressed, setIsPressed] = React61.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
@@ -9533,7 +9757,7 @@ var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -9541,19 +9765,19 @@ var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React59.useCallback(
+    const handlePointerUp = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React59.useCallback(() => {
+    const handlePointerEnter = React61.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React59.useCallback(
+    const handlePointerLeave = React61.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -9561,21 +9785,21 @@ var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React59.useCallback(
+    const handlePointerCancel = React61.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React59.useCallback(
+    const handleFocus = React61.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React59.useCallback(
+    const handleBlur = React61.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -9642,16 +9866,16 @@ var SplitButtonTrailingUncheckableComponent = React59.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React59.memo(
+var SplitButtonTrailingUncheckable = React61.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+var FilledSplitButtonTrailingUncheckable = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailingUncheckable.displayName = "FilledSplitButtonTrailingUncheckable";
-var TonalSplitButtonTrailingUncheckable = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailingUncheckable = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailingUncheckable.displayName = "TonalSplitButtonTrailingUncheckable";
-var ElevatedSplitButtonTrailingUncheckable = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailingUncheckable = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailingUncheckable.displayName = "ElevatedSplitButtonTrailingUncheckable";
-var OutlinedSplitButtonTrailingUncheckable = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailingUncheckable = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailingUncheckable.displayName = "OutlinedSplitButtonTrailingUncheckable";
 var SHADOW = {
   level0: "none",
@@ -9711,7 +9935,7 @@ function useCardElevation(variant, disabled) {
     }
   };
 }
-var CardImpl = React59.forwardRef(
+var CardImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9759,7 +9983,7 @@ var CardImpl = React59.forwardRef(
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
     if (asChild) {
-      const child = React59.Children.only(children);
+      const child = React61.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
         child.props.children
@@ -9774,7 +9998,7 @@ var CardImpl = React59.forwardRef(
           onPointerDown,
           onClick
         }, props), {
-          children: React59.cloneElement(child, { children: innerContent })
+          children: React61.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -9831,7 +10055,7 @@ var CardImpl = React59.forwardRef(
   }
 );
 CardImpl.displayName = "Card";
-var Card = React59.memo(CardImpl);
+var Card = React61.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";
@@ -9845,7 +10069,7 @@ var NEXT_STATE = {
   checked: "indeterminate",
   indeterminate: "unchecked"
 };
-var CheckboxVisual = React59.memo(function CheckboxVisual2({
+var CheckboxVisual = React61.memo(function CheckboxVisual2({
   isSelected,
   isIndeterminate,
   containerBg,
@@ -9916,7 +10140,7 @@ var CheckboxVisual = React59.memo(function CheckboxVisual2({
   );
 });
 function useMergedRef2(externalRef, internalRef) {
-  return React59.useCallback(
+  return React61.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -9929,7 +10153,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React59.forwardRef(
+var CheckboxComponent = React61.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -9951,20 +10175,20 @@ var CheckboxComponent = React59.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React59.useId();
+    const generatedId = React61.useId();
     const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
-    const [internalState, setInternalState] = React59.useState(
+    const [internalState, setInternalState] = React61.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] = React59.useState([]);
-    const removeRipple = React59.useCallback(
+    const [ripples, setRipples] = React61.useState([]);
+    const removeRipple = React61.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React59.useCallback(
+    const onPointerDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -9978,7 +10202,7 @@ var CheckboxComponent = React59.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React59.useCallback(
+    const handleChange = React61.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -10004,9 +10228,9 @@ var CheckboxComponent = React59.forwardRef(
         onCheckedChange
       ]
     );
-    const inputRef = React59.useRef(null);
+    const inputRef = React61.useRef(null);
     const mergedRef = useMergedRef2(ref, inputRef);
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = effectiveState === "indeterminate";
       }
@@ -10131,13 +10355,13 @@ var CheckboxComponent = React59.forwardRef(
   }
 );
 CheckboxComponent.displayName = "Checkbox";
-var Checkbox = React59.memo(CheckboxComponent);
-var TriStateCheckboxComponent = React59.forwardRef((_a, ref) => {
+var Checkbox = React61.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React61.forwardRef((_a, ref) => {
   var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
   return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
 });
 TriStateCheckboxComponent.displayName = "TriStateCheckbox";
-var TriStateCheckbox = React59.memo(TriStateCheckboxComponent);
+var TriStateCheckbox = React61.memo(TriStateCheckboxComponent);
 function CheckIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -10231,7 +10455,7 @@ var chipVariants = cva(
     defaultVariants: { variant: "assist" }
   }
 );
-var ChipImpl = React59.forwardRef(
+var ChipImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "assist",
@@ -10271,7 +10495,7 @@ var ChipImpl = React59.forwardRef(
     const showCheckmark = isFilter && selected;
     const hasTrailingContent = !!trailingIcon || !!onRemove;
     const hasLeadingContent = isFilter || !!resolvedLeadingIcon;
-    const paddingClass = React59.useMemo(
+    const paddingClass = React61.useMemo(
       () => cn(
         !isInput && !hasLeadingContent && !hasTrailingContent && "px-4",
         !isInput && hasLeadingContent && !hasTrailingContent && "pl-2 pr-4",
@@ -10284,7 +10508,7 @@ var ChipImpl = React59.forwardRef(
       ),
       [isInput, hasLeadingContent, hasTrailingContent]
     );
-    const stateClass = React59.useMemo(
+    const stateClass = React61.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",
@@ -10295,7 +10519,7 @@ var ChipImpl = React59.forwardRef(
       ),
       [isFilter, isInput, selected, elevated, disabled]
     );
-    const leadingIconColorClass = React59.useMemo(
+    const leadingIconColorClass = React61.useMemo(
       () => cn(
         (variant === "assist" || variant === "suggestion") && "text-m3-primary",
         isFilter && !selected && "text-m3-primary",
@@ -10376,7 +10600,7 @@ var ChipImpl = React59.forwardRef(
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
     if (asChild) {
-      const child = React59.Children.only(children);
+      const child = React61.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
         mainContent,
@@ -10428,7 +10652,7 @@ var ChipImpl = React59.forwardRef(
           onPointerDown,
           className: containerClass
         }, strippedProps), {
-          children: React59.cloneElement(child, { children: innerContent })
+          children: React61.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -10524,8 +10748,8 @@ var ChipImpl = React59.forwardRef(
   }
 );
 ChipImpl.displayName = "Chip";
-var Chip = React59.memo(ChipImpl);
-var ScrollArea = React59.forwardRef(
+var Chip = React61.memo(ChipImpl);
+var ScrollArea = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10546,15 +10770,15 @@ var ScrollArea = React59.forwardRef(
       "viewportRef",
       "viewportProps"
     ]);
-    const [isTouchDevice, setIsTouchDevice] = React59.useState(false);
-    React59.useEffect(() => {
+    const [isTouchDevice, setIsTouchDevice] = React61.useState(false);
+    React61.useEffect(() => {
       if (typeof window !== "undefined") {
         setIsTouchDevice(
           "ontouchstart" in window || navigator.maxTouchPoints > 0
         );
       }
     }, []);
-    const resolvedType = React59.useMemo(() => {
+    const resolvedType = React61.useMemo(() => {
       if (type === "hover" && isTouchDevice) {
         return "scroll";
       }
@@ -10605,7 +10829,7 @@ var ScrollArea = React59.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React59.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Scrollbar,
@@ -10635,7 +10859,7 @@ var ScrollAreaScrollbar = React59.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
-var ScrollAreaCorner = React59.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React61.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Corner,
@@ -10815,6 +11039,75 @@ function CodeBlock({
   );
 }
 
+// src/ui/date-time-pickers/shared/animation-tokens.ts
+var PICKER_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 16 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var CALENDAR_SLIDE_VARIANTS = {
+  enterFromRight: {
+    x: "100%",
+    opacity: 0
+  },
+  enterFromLeft: {
+    x: "-100%",
+    opacity: 0
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exitToLeft: {
+    x: "-100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  },
+  exitToRight: {
+    x: "100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_SELECTOR_ANIM = {
+  initial: { opacity: 0, scale: 0.95, y: -6 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 6,
+    transition: { duration: 0.1, ease: "easeIn" }
+  }
+};
+var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
+
 // src/ui/date-time-pickers/shared/calendar-model.ts
 var startOfDayUTC = (ms) => {
   const d = new Date(ms);
@@ -10941,13 +11234,13 @@ var DatePickerInput = ({
   locale,
   className
 }) => {
-  const inputId = React59.useId();
+  const inputId = React61.useId();
   const errorId = `${inputId}-error`;
-  const placeholder = React59.useMemo(() => {
+  const placeholder = React61.useMemo(() => {
     if (locale == null ? void 0 : locale.startsWith("vi")) return "DD/MM/YYYY";
     return "MM/DD/YYYY";
   }, [locale]);
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       if (e.key === "Enter") {
         const parsed = parseDateInput(value);
@@ -10956,11 +11249,11 @@ var DatePickerInput = ({
     },
     [value, onCommit]
   );
-  const handleBlur = React59.useCallback(() => {
+  const handleBlur = React61.useCallback(() => {
     const parsed = parseDateInput(value);
     onCommit(parsed);
   }, [value, onCommit]);
-  const handleChange = React59.useCallback(
+  const handleChange = React61.useCallback(
     (e) => {
       let raw = e.target.value.replace(/\D/g, "");
       if (raw.length > 8) raw = raw.slice(0, 8);
@@ -11006,60 +11299,6 @@ var DatePickerInput = ({
   ] }) }) });
 };
 DatePickerInput.displayName = "DatePickerInput";
-
-// src/ui/date-time-pickers/shared/animation-tokens.ts
-var PICKER_OVERLAY_ANIM = {
-  initial: { opacity: 0 },
-  animate: {
-    opacity: 1,
-    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
-  },
-  exit: {
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var PICKER_CONTENT_ANIM = {
-  initial: { opacity: 0, scale: 0.85, y: 16 },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: DEFAULT_SPATIAL_SPRING
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.95,
-    y: 8,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var CALENDAR_SLIDE_VARIANTS = {
-  enterFromRight: {
-    x: "100%",
-    opacity: 0
-  },
-  enterFromLeft: {
-    x: "-100%",
-    opacity: 0
-  },
-  center: {
-    x: 0,
-    opacity: 1,
-    transition: FAST_SPATIAL_SPRING
-  },
-  exitToLeft: {
-    x: "-100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  },
-  exitToRight: {
-    x: "100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
 var DayCell = ({
   day,
   selectedMs,
@@ -11108,11 +11347,11 @@ var DayCell = ({
     // Disabled
     isDisabled && "opacity-[0.38]"
   );
-  const handleClick = React59.useCallback(() => {
+  const handleClick = React61.useCallback(() => {
     if (isDisabled) return;
     onSelect(utcMs);
   }, [isDisabled, utcMs, onSelect]);
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -11148,7 +11387,7 @@ var DayCell = ({
 };
 DayCell.displayName = "DayCell";
 var WeekdayRow = ({ locale }) => {
-  const names = React59.useMemo(() => getWeekdayNames(locale), [locale]);
+  const names = React61.useMemo(() => getWeekdayNames(locale), [locale]);
   return /* @__PURE__ */ jsx("tr", { className: "grid grid-cols-7 mb-1", children: names.map((name, i) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -11175,7 +11414,7 @@ var CalendarGrid = ({
   const d = new Date(displayedMonthMs);
   const year = d.getUTCFullYear();
   const month = d.getUTCMonth();
-  const weeks = React59.useMemo(
+  const weeks = React61.useMemo(
     () => getWeeksInMonth(year, month, locale.weekStartsOn),
     [year, month, locale.weekStartsOn]
   );
@@ -11259,16 +11498,16 @@ var CalendarHeader = ({
   }).format(date);
   const yearLabel = String(date.getUTCFullYear());
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[length:var(--md-typescale-label-large-size,14px)] font-[number:var(--md-typescale-label-large-weight,500)] text-m3-on-surface-variant", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-[length:var(--md-typescale-headline-large-size,32px)] font-[number:var(--md-typescale-headline-large-weight,400)] text-m3-on-surface-variant", children: headline }),
-    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "-mx-2 flex min-h-10 items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-(length:--md-typescale-headline-large-size,32px) font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant", children: headline }),
+    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-center gap-0.5", children: [
       activeSelector === null && /* @__PURE__ */ jsx(
         IconButton,
         {
           onClick: onPrev,
           "aria-label": "Previous month",
           disabled: !canNavigatePrev,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
         }
       ),
@@ -11290,7 +11529,7 @@ var CalendarHeader = ({
               {
                 name: "arrow_drop_down",
                 className: cn(
-                  "text-[20px]",
+                  "text-[20px] transition-transform duration-200",
                   activeSelector === "month" && "rotate-180"
                 )
               }
@@ -11304,7 +11543,7 @@ var CalendarHeader = ({
           onClick: onNext,
           "aria-label": "Next month",
           disabled: !canNavigateNext,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
         }
       ),
@@ -11315,7 +11554,7 @@ var CalendarHeader = ({
             onClick: onPreviousYear,
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -11337,7 +11576,7 @@ var CalendarHeader = ({
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px]",
+                    "text-[20px] transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -11351,7 +11590,7 @@ var CalendarHeader = ({
             onClick: onNextYear,
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -11360,7 +11599,7 @@ var CalendarHeader = ({
           {
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsx(Icon, { name: "keyboard" })
           }
         )
@@ -11371,7 +11610,7 @@ var CalendarHeader = ({
       {
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
-        size: "sm",
+        size: "xs",
         className: "self-end",
         children: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" })
       }
@@ -11389,15 +11628,15 @@ var MonthPickerList = ({
   locale,
   onMonthSelect
 }) => {
-  const selectedRef = React59.useRef(null);
-  React59.useEffect(() => {
+  const selectedRef = React61.useRef(null);
+  React61.useEffect(() => {
     var _a, _b;
     (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
       block: "center",
       behavior: "instant"
     });
   }, []);
-  const months = React59.useMemo(
+  const months = React61.useMemo(
     () => Array.from({ length: 12 }, (_, month) => month),
     []
   );
@@ -11442,12 +11681,12 @@ var YearPickerList = ({
   selectableDates,
   onYearSelect
 }) => {
-  const selectedRef = React59.useRef(null);
-  const years = React59.useMemo(() => {
+  const selectedRef = React61.useRef(null);
+  const years = React61.useMemo(() => {
     const [min, max] = yearRange;
     return Array.from({ length: max - min + 1 }, (_, index) => min + index);
   }, [yearRange]);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     var _a, _b;
     (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
       block: "center",
@@ -11518,17 +11757,17 @@ var DatePicker = ({
     navigateToMonth,
     setDisplayMode
   } = state;
-  const [activeSelector, setActiveSelector] = React59.useState(null);
-  const [slideDirection, setSlideDirection] = React59.useState(null);
-  const handlePrev = React59.useCallback(() => {
+  const [activeSelector, setActiveSelector] = React61.useState(null);
+  const [slideDirection, setSlideDirection] = React61.useState(null);
+  const handlePrev = React61.useCallback(() => {
     setSlideDirection("prev");
     navigateMonth2("prev");
   }, [navigateMonth2]);
-  const handleNext = React59.useCallback(() => {
+  const handleNext = React61.useCallback(() => {
     setSlideDirection("next");
     navigateMonth2("next");
   }, [navigateMonth2]);
-  const handleYearSelect = React59.useCallback(
+  const handleYearSelect = React61.useCallback(
     (year) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(year, d.getUTCMonth());
@@ -11536,7 +11775,7 @@ var DatePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const handleMonthSelect = React59.useCallback(
+  const handleMonthSelect = React61.useCallback(
     (month) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(d.getUTCFullYear(), month);
@@ -11544,11 +11783,11 @@ var DatePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const [inputValue, setInputValue] = React59.useState(
+  const [inputValue, setInputValue] = React61.useState(
     () => selectedDateMs !== null ? formatInputDate(selectedDateMs) : ""
   );
-  const [inputError, setInputError] = React59.useState();
-  const handleInputCommit = React59.useCallback(
+  const [inputError, setInputError] = React61.useState();
+  const handleInputCommit = React61.useCallback(
     (ms) => {
       if (ms === null && inputValue.length > 0) {
         setInputError("Invalid date");
@@ -11634,9 +11873,12 @@ var DatePicker = ({
                 "input-mode"
               )
             ) : activeSelector === "month" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   MonthPickerList,
@@ -11649,9 +11891,12 @@ var DatePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   YearPickerList,
@@ -11813,9 +12058,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React59.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React61.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React59.forwardRef((_a, ref) => {
+var DialogOverlay = React61.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
     m.div,
@@ -11826,7 +12071,7 @@ var DialogOverlay = React59.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React59.forwardRef((_a, ref) => {
+var DialogContent = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Content,
@@ -11866,7 +12111,7 @@ var DialogContent = React59.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React59.forwardRef((_a, ref) => {
+var DialogIcon = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -11889,7 +12134,7 @@ var DialogHeader = (_a) => {
   return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React59.forwardRef((_a, ref) => {
+var DialogTitle = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Title,
@@ -11904,7 +12149,7 @@ var DialogTitle = React59.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React59.forwardRef((_a, ref) => {
+var DialogDescription = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Description,
@@ -11916,7 +12161,7 @@ var DialogDescription = React59.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React59.forwardRef((_a, ref) => {
+var DialogBody = React61.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsx(
     ScrollArea,
@@ -11947,7 +12192,7 @@ var DialogFooter = (_a) => {
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = RadixDialog.Close;
-var DialogFullScreenContent = React59.forwardRef(
+var DialogFullScreenContent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12095,17 +12340,17 @@ var DateRangePicker = ({
     navigateToMonth,
     setDisplayMode
   } = state;
-  const [activeSelector, setActiveSelector] = React59.useState(null);
-  const [slideDirection, setSlideDirection] = React59.useState(null);
-  const handlePrev = React59.useCallback(() => {
+  const [activeSelector, setActiveSelector] = React61.useState(null);
+  const [slideDirection, setSlideDirection] = React61.useState(null);
+  const handlePrev = React61.useCallback(() => {
     setSlideDirection("prev");
     navigateMonth2("prev");
   }, [navigateMonth2]);
-  const handleNext = React59.useCallback(() => {
+  const handleNext = React61.useCallback(() => {
     setSlideDirection("next");
     navigateMonth2("next");
   }, [navigateMonth2]);
-  const handleYearSelect = React59.useCallback(
+  const handleYearSelect = React61.useCallback(
     (year) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(year, d.getUTCMonth());
@@ -12113,7 +12358,7 @@ var DateRangePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const handleMonthSelect = React59.useCallback(
+  const handleMonthSelect = React61.useCallback(
     (month) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(d.getUTCFullYear(), month);
@@ -12121,7 +12366,7 @@ var DateRangePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const formatShort = React59.useCallback(
+  const formatShort = React61.useCallback(
     (ms) => {
       if (ms === null) return "\u2014";
       return formatDate(ms, locale, {
@@ -12187,9 +12432,12 @@ var DateRangePicker = ({
             className: "relative flex-1 overflow-hidden",
             style: { minHeight: "296px" },
             children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeSelector === "month" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   MonthPickerList,
@@ -12202,9 +12450,12 @@ var DateRangePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
-              "div",
+              m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsx(
                   YearPickerList,
@@ -12726,16 +12977,16 @@ var InputField = ({
   onBlur,
   className
 }) => {
-  const [inputText, setInputText] = React59.useState(
+  const [inputText, setInputText] = React61.useState(
     String(value).padStart(2, "0")
   );
-  const inputRef = React59.useRef(null);
-  React59.useEffect(() => {
+  const inputRef = React61.useRef(null);
+  React61.useEffect(() => {
     if (!isFocused) {
       setInputText(String(value).padStart(2, "0"));
     }
   }, [value, isFocused]);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     var _a, _b;
     if (isFocused) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -12825,7 +13076,7 @@ var InputField = ({
 };
 var TimeInput = ({ state, className }) => {
   const { is24hour, setHourInput, setMinuteInput, setSelection } = state;
-  const [focusedField, setFocusedField] = React59.useState(null);
+  const [focusedField, setFocusedField] = React61.useState(null);
   const handleHourAutoAdvance = () => {
     setFocusedField("minute");
     setSelection("minute");
@@ -13019,17 +13270,17 @@ var ClockDial = ({
     setMinute,
     setSelection
   } = state;
-  const displayAngle = React59.useMemo(() => {
+  const displayAngle = React61.useMemo(() => {
     if (selection === "hour") {
       return valueToAngle(hour, "hour");
     }
     return valueToAngle(minute, "minute");
   }, [selection, hour, minute]);
-  const selectorPos = React59.useMemo(
+  const selectorPos = React61.useMemo(
     () => getSelectorPosition(displayAngle, selection, is24hour, isPm),
     [displayAngle, selection, is24hour, isPm]
   );
-  const trackEnd = React59.useMemo(() => {
+  const trackEnd = React61.useMemo(() => {
     const dx = selectorPos.x - CENTER;
     const dy = selectorPos.y - CENTER;
     const length = Math.hypot(dx, dy);
@@ -13039,13 +13290,13 @@ var ClockDial = ({
       y: selectorPos.y - dy / length * HANDLE_RADIUS
     };
   }, [selectorPos]);
-  const numbers = React59.useMemo(() => {
+  const numbers = React61.useMemo(() => {
     if (selection === "minute") return buildMinuteNumbers();
     if (is24hour) return buildHour24Numbers();
     return buildHour12Numbers();
   }, [selection, is24hour]);
-  const isDragging = React59.useRef(false);
-  const svgRef = React59.useRef(null);
+  const isDragging = React61.useRef(false);
+  const svgRef = React61.useRef(null);
   const getSVGPoint = (e) => {
     const svg = svgRef.current;
     if (!svg) return { x: e.clientX, y: e.clientY };
@@ -13195,8 +13446,8 @@ var getAutoLayout = () => {
   return innerWidth >= 600 && innerHeight >= 300 && innerWidth >= innerHeight ? "horizontal" : "vertical";
 };
 var useResolvedLayout = (layout) => {
-  const [autoLayout, setAutoLayout] = React59.useState("vertical");
-  React59.useEffect(() => {
+  const [autoLayout, setAutoLayout] = React61.useState("vertical");
+  React61.useEffect(() => {
     if (layout !== "auto") return;
     const updateLayout = () => setAutoLayout(getAutoLayout());
     updateLayout();
@@ -13373,7 +13624,7 @@ var TimePickerDialog = ({
 TimePickerDialog.displayName = "TimePickerDialog";
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
-var isValidMinuteInput = (m68) => m68 >= 0 && m68 <= 59;
+var isValidMinuteInput = (m71) => m71 >= 0 && m71 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -13409,8 +13660,8 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = useCallback((m68) => {
-    const clamped = clamp(m68, 0, 59);
+  const setMinute = useCallback((m71) => {
+    const clamped = clamp(m71, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
@@ -13424,10 +13675,10 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = useCallback((m68) => {
-    setMinuteInputState(m68);
-    if (isValidMinuteInput(m68)) {
-      setMinuteState(m68);
+  const setMinuteInput = useCallback((m71) => {
+    setMinuteInputState(m71);
+    if (isValidMinuteInput(m71)) {
+      setMinuteState(m71);
     }
   }, []);
   const setSelection = useCallback((mode) => {
@@ -13508,7 +13759,7 @@ function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4
   }
   return d;
 }
-var DividerImpl = React59.forwardRef(
+var DividerImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "full-bleed",
@@ -13628,7 +13879,7 @@ var DividerImpl = React59.forwardRef(
   }
 );
 DividerImpl.displayName = "Divider";
-var Divider = React59.memo(DividerImpl);
+var Divider = React61.memo(DividerImpl);
 var MD3_DRAWER_SPRING = DEFAULT_SPATIAL_SPRING;
 var MD3_DRAWER_ANIM = {
   initial: { y: "100%", opacity: 0.6 },
@@ -13660,7 +13911,7 @@ var DrawerPortal = ({
   open,
   children
 }) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: open && children }) });
-var DrawerOverlay = React59.forwardRef((_a, ref) => {
+var DrawerOverlay = React61.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
     m.div,
@@ -13671,7 +13922,7 @@ var DrawerOverlay = React59.forwardRef((_a, ref) => {
   ) }));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React59.forwardRef(
+var DrawerContent = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13750,7 +14001,7 @@ var DrawerFooter = (_a) => {
   return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
 };
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React59.forwardRef((_a, ref) => {
+var DrawerTitle = React61.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Title,
@@ -13764,7 +14015,7 @@ var DrawerTitle = React59.forwardRef((_a, ref) => {
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React59.forwardRef((_a, ref) => {
+var DrawerDescription = React61.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Description,
@@ -13775,8 +14026,8 @@ var DrawerDescription = React59.forwardRef((_a, ref) => {
   );
 });
 DrawerDescription.displayName = "DrawerDescription";
-var ListContext = React59.createContext(null);
-var useListContext = () => React59.useContext(ListContext);
+var ListContext = React61.createContext(null);
+var useListContext = () => React61.useContext(ListContext);
 var LIST_TOKENS = {
   oneLineHeight: 56,
   twoLineHeight: 72,
@@ -13841,9 +14092,9 @@ function resolveItemId(item) {
   return String(item);
 }
 function isListItem(child) {
-  return React59.isValidElement(child) && child.props != null && typeof child.props === "object" && "value" in child.props;
+  return React61.isValidElement(child) && child.props != null && typeof child.props === "object" && "value" in child.props;
 }
-var ListImpl = React59.forwardRef(
+var ListImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13874,12 +14125,12 @@ var ListImpl = React59.forwardRef(
       "innerRadius",
       "children"
     ]);
-    const listRef = React59.useRef(null);
-    const [draggedOrder, setDraggedOrder] = React59.useState(
+    const listRef = React61.useRef(null);
+    const [draggedOrder, setDraggedOrder] = React61.useState(
       null
     );
-    React59.useImperativeHandle(ref, () => listRef.current);
-    const [selectedState, setSelectedState] = React59.useState(
+    React61.useImperativeHandle(ref, () => listRef.current);
+    const [selectedState, setSelectedState] = React61.useState(
       () => {
         var _a2;
         const initialValue = (_a2 = value != null ? value : defaultValue) != null ? _a2 : [];
@@ -13889,13 +14140,13 @@ var ListImpl = React59.forwardRef(
       }
     );
     const isControlled = value !== void 0;
-    const selectedValues = React59.useMemo(() => {
+    const selectedValues = React61.useMemo(() => {
       if (isControlled) {
         return new Set(Array.isArray(value) ? value : value ? [value] : []);
       }
       return selectedState;
     }, [isControlled, value, selectedState]);
-    const onItemChange = React59.useCallback(
+    const onItemChange = React61.useCallback(
       (itemValue, selected) => {
         const nextSet = new Set(selectedValues);
         if (selectionMode === "single-select") {
@@ -13927,11 +14178,11 @@ var ListImpl = React59.forwardRef(
         coordinateGetter: sortableKeyboardCoordinates
       })
     );
-    const itemIds = React59.useMemo(
+    const itemIds = React61.useMemo(
       () => items ? items.map(resolveItemId) : [],
       [items]
     );
-    const currentOrder = React59.useMemo(
+    const currentOrder = React61.useMemo(
       () => draggedOrder || itemIds,
       [draggedOrder, itemIds]
     );
@@ -13991,20 +14242,20 @@ var ListImpl = React59.forwardRef(
       }
       (_a2 = focusableItems[nextIndex]) == null ? void 0 : _a2.focus();
     };
-    const childrenArray = React59.Children.toArray(children);
+    const childrenArray = React61.Children.toArray(children);
     const listItemCount = childrenArray.filter(isListItem).length;
     let currentListItemIndex = 0;
-    const processedChildren = React59.Children.map(children, (child) => {
+    const processedChildren = React61.Children.map(children, (child) => {
       if (!isListItem(child)) return child;
       const childValue = child.props.value;
       const index = reorderable && currentOrder.length > 0 ? currentOrder.indexOf(String(childValue)) : currentListItemIndex;
       currentListItemIndex++;
-      return React59.cloneElement(
+      return React61.cloneElement(
         child,
         { _listIndex: index }
       );
     });
-    const contextValue = React59.useMemo(
+    const contextValue = React61.useMemo(
       () => ({
         selectionMode,
         variant,
@@ -14028,7 +14279,7 @@ var ListImpl = React59.forwardRef(
         innerRadius
       ]
     );
-    const dndId = React59.useId();
+    const dndId = React61.useId();
     const isListbox = selectionMode === "single-select" || selectionMode === "multi-select";
     const role = isListbox ? "listbox" : "list";
     const ariaMultiselectable = selectionMode === "multi-select" ? true : void 0;
@@ -14075,13 +14326,13 @@ var ListImpl = React59.forwardRef(
   }
 );
 ListImpl.displayName = "List";
-var List = React59.memo(ListImpl);
+var List = React61.memo(ListImpl);
 var INSET_CLASSES = {
   icon: "pl-[56px]",
   avatar: "pl-[72px]",
   custom: "pl-4"
 };
-var ListDividerImpl = React59.forwardRef(
+var ListDividerImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, inset = false, insetType = "avatar" } = _b, props = __objRest(_b, ["className", "inset", "insetType"]);
     const insetClass = inset ? INSET_CLASSES[insetType] : "";
@@ -14106,13 +14357,13 @@ var ListDividerImpl = React59.forwardRef(
   }
 );
 ListDividerImpl.displayName = "ListDivider";
-var ListDivider = React59.memo(ListDividerImpl);
+var ListDivider = React61.memo(ListDividerImpl);
 var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
-var RadioGroupContext = React59.createContext(
+var RadioGroupContext = React61.createContext(
   null
 );
 function useMergedRef3(externalRef, internalRef) {
-  return React59.useCallback(
+  return React61.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -14125,7 +14376,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React59.memo(function RadioVisual2({
+var RadioVisual = React61.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -14178,7 +14429,7 @@ var RadioVisual = React59.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React59.forwardRef(
+var RadioButtonComponent = React61.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -14197,23 +14448,23 @@ var RadioButtonComponent = React59.forwardRef(
     required: requiredProp
   }, ref) => {
     var _a, _b;
-    const group = React59.useContext(RadioGroupContext);
+    const group = React61.useContext(RadioGroupContext);
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React59.useId();
+    const generatedId = React61.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] = React59.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React61.useState(defaultSelected);
     const isControlled = selected !== void 0;
     const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
-    const [ripples, setRipples] = React59.useState([]);
-    const removeRipple = React59.useCallback(
+    const [ripples, setRipples] = React61.useState([]);
+    const removeRipple = React61.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React59.useCallback(
+    const onPointerDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -14227,12 +14478,12 @@ var RadioButtonComponent = React59.forwardRef(
       },
       [disabled]
     );
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const onPointerEnter = React59.useCallback(() => {
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const onPointerEnter = React61.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const onPointerLeave = React59.useCallback(() => setIsHovered(false), []);
-    const handleChange = React59.useCallback(
+    const onPointerLeave = React61.useCallback(() => setIsHovered(false), []);
+    const handleChange = React61.useCallback(
       (_e) => {
         if (disabled || onClick === null) return;
         if (group) {
@@ -14246,7 +14497,7 @@ var RadioButtonComponent = React59.forwardRef(
       },
       [disabled, onClick, group, value, isControlled]
     );
-    const inputRef = React59.useRef(null);
+    const inputRef = React61.useRef(null);
     const mergedRef = useMergedRef3(ref, inputRef);
     const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
     const stateLayerClass = cn(
@@ -14357,8 +14608,8 @@ var RadioButtonComponent = React59.forwardRef(
   }
 );
 RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React59.memo(RadioButtonComponent);
-var RadioGroupComponent = React59.forwardRef(
+var RadioButton = React61.memo(RadioButtonComponent);
+var RadioGroupComponent = React61.forwardRef(
   ({
     name,
     value: valueProp,
@@ -14373,19 +14624,19 @@ var RadioGroupComponent = React59.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React59.useState(defaultValue);
+    const [internalValue, setInternalValue] = React61.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React59.useCallback(
+    const handleValueChange = React61.useCallback(
       (val) => {
         if (!isControlled) setInternalValue(val);
         onValueChange == null ? void 0 : onValueChange(val);
       },
       [isControlled, onValueChange]
     );
-    const groupRef = React59.useRef(null);
+    const groupRef = React61.useRef(null);
     const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React59.useCallback(
+    const onKeyDown = React61.useCallback(
       (e) => {
         var _a, _b;
         if (disabled) return;
@@ -14409,7 +14660,7 @@ var RadioGroupComponent = React59.forwardRef(
       },
       [disabled, handleValueChange]
     );
-    const contextValue = React59.useMemo(
+    const contextValue = React61.useMemo(
       () => ({
         name,
         selectedValue,
@@ -14444,7 +14695,7 @@ var RadioGroupComponent = React59.forwardRef(
   }
 );
 RadioGroupComponent.displayName = "RadioGroup";
-var RadioGroup = React59.memo(RadioGroupComponent);
+var RadioGroup = React61.memo(RadioGroupComponent);
 
 // src/ui/switch/switch.tokens.ts
 var SwitchTokens = {
@@ -14536,7 +14787,7 @@ function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
   if (icons) return true;
   return showOnlySelectedIcon && checked;
 }
-var SwitchVisual = React59.memo(function SwitchVisual2({
+var SwitchVisual = React61.memo(function SwitchVisual2({
   checked,
   disabled,
   isPressed,
@@ -14656,7 +14907,7 @@ var SwitchVisual = React59.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React59.forwardRef(
+var SwitchComponent = React61.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -14674,16 +14925,16 @@ var SwitchComponent = React59.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const [isPressed, setIsPressed] = React59.useState(false);
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [ripples, setRipples] = React59.useState([]);
-    const generatedId = React59.useId();
+    const [isPressed, setIsPressed] = React61.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [ripples, setRipples] = React61.useState([]);
+    const generatedId = React61.useId();
     const switchId = label ? `switch-${generatedId}` : void 0;
-    const handleClick = React59.useCallback(() => {
+    const handleClick = React61.useCallback(() => {
       if (!disabled) onCheckedChange(!checked);
     }, [disabled, checked, onCheckedChange]);
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === " " || e.key === "Enter") {
@@ -14693,7 +14944,7 @@ var SwitchComponent = React59.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -14708,19 +14959,19 @@ var SwitchComponent = React59.forwardRef(
       },
       [disabled]
     );
-    const handlePointerUp = React59.useCallback(() => {
+    const handlePointerUp = React61.useCallback(() => {
       setIsPressed(false);
     }, []);
-    const handlePointerEnter = React59.useCallback(() => {
+    const handlePointerEnter = React61.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const handlePointerLeave = React59.useCallback(() => {
+    const handlePointerLeave = React61.useCallback(() => {
       setIsHovered(false);
       setIsPressed(false);
     }, []);
-    const handleFocus = React59.useCallback(() => setIsFocused(true), []);
-    const handleBlur = React59.useCallback(() => setIsFocused(false), []);
-    const removeRipple = React59.useCallback(
+    const handleFocus = React61.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React61.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React61.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
@@ -14805,7 +15056,7 @@ var SwitchComponent = React59.forwardRef(
   }
 );
 SwitchComponent.displayName = "Switch";
-var Switch = React59.memo(SwitchComponent);
+var Switch = React61.memo(SwitchComponent);
 
 // src/ui/lists/list-utils.ts
 function getListItemHeight(hasOverline, supportingTextLines) {
@@ -14945,7 +15196,7 @@ function renderSwitchTrailing({
   trailingClass
 }) {
   const isSelectingMode = selectionMode === "single-select" || selectionMode === "multi-select";
-  const switchElement = React59.isValidElement(trailingContent) ? (() => {
+  const switchElement = React61.isValidElement(trailingContent) ? (() => {
     const trailingProps = trailingContent.props;
     const checkedValue = !isSelectingMode && trailingProps.checked !== void 0 ? trailingProps.checked : isSelected;
     const disabledValue = trailingProps.disabled !== void 0 ? disabled || trailingProps.disabled : disabled;
@@ -14956,7 +15207,7 @@ function renderSwitchTrailing({
         onItemChange(value, checked);
       }
     };
-    return React59.cloneElement(
+    return React61.cloneElement(
       trailingContent,
       { checked: checkedValue, disabled: disabledValue, onCheckedChange }
     );
@@ -14981,7 +15232,7 @@ function renderSwitchTrailing({
     )
   );
 }
-var ListItemImpl = React59.forwardRef(
+var ListItemImpl = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -15037,9 +15288,9 @@ var ListItemImpl = React59.forwardRef(
     });
     const reorderable = (_e = context == null ? void 0 : context.reorderable) != null ? _e : false;
     const isSelected = selected !== void 0 ? selected : (_f = context == null ? void 0 : context.selectedValues.has(value)) != null ? _f : false;
-    const [isHovered, setIsHovered] = React59.useState(false);
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [isPressed, setIsPressed] = React59.useState(false);
+    const [isHovered, setIsHovered] = React61.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [isPressed, setIsPressed] = React61.useState(false);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
@@ -15051,8 +15302,8 @@ var ListItemImpl = React59.forwardRef(
       transition,
       isDragging
     } = useSortable({ id: value, disabled: !reorderable });
-    const itemRef = React59.useRef(null);
-    const setRefs = React59.useCallback(
+    const itemRef = React61.useRef(null);
+    const setRefs = React61.useCallback(
       (node) => {
         itemRef.current = node;
         setNodeRef(node);
@@ -15505,12 +15756,12 @@ var ListItemImpl = React59.forwardRef(
   }
 );
 ListItemImpl.displayName = "ListItem";
-var ListItem = React59.memo(ListItemImpl);
-var NavigationBarContext = React59.createContext({ variant: "flexible" });
+var ListItem = React61.memo(ListItemImpl);
+var NavigationBarContext = React61.createContext({ variant: "flexible" });
 function cloneIconWithFill(icon, selected) {
-  if (!React59.isValidElement(icon)) return icon;
+  if (!React61.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React59.cloneElement(
+    return React61.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -15518,7 +15769,7 @@ function cloneIconWithFill(icon, selected) {
   return icon;
 }
 function ActivePill() {
-  const { activeIndicatorTransition } = React59.useContext(NavigationBarContext);
+  const { activeIndicatorTransition } = React61.useContext(NavigationBarContext);
   return /* @__PURE__ */ jsx(
     m.div,
     {
@@ -15556,7 +15807,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationBarItemComponent = React59.forwardRef(
+var NavigationBarItemComponent = React61.forwardRef(
   ({
     selected,
     icon,
@@ -15567,13 +15818,17 @@ var NavigationBarItemComponent = React59.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, itemLayout, itemClassName: contextItemClassName } = React59.useContext(NavigationBarContext);
+    const {
+      variant,
+      itemLayout,
+      itemClassName: contextItemClassName
+    } = React61.useContext(NavigationBarContext);
     const isForcedHorizontal = itemLayout === "horizontal";
     const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -15684,7 +15939,7 @@ var NavigationBarItemComponent = React59.forwardRef(
   }
 );
 NavigationBarItemComponent.displayName = "NavigationBarItem";
-var NavigationBarItem = React59.memo(NavigationBarItemComponent);
+var NavigationBarItem = React61.memo(NavigationBarItemComponent);
 var navContainerVariants = cva(
   "flex items-center justify-center select-none transition-transform duration-300 z-50",
   {
@@ -15710,7 +15965,7 @@ var navContainerVariants = cva(
     }
   }
 );
-var NavigationBarComponent = React59.forwardRef(
+var NavigationBarComponent = React61.forwardRef(
   ({
     variant = "flexible",
     itemLayout,
@@ -15724,11 +15979,11 @@ var NavigationBarComponent = React59.forwardRef(
     className,
     style
   }, ref) => {
-    const [isVisible, setIsVisible] = React59.useState(true);
-    const lastScrollY = React59.useRef(
+    const [isVisible, setIsVisible] = React61.useState(true);
+    const lastScrollY = React61.useRef(
       typeof window !== "undefined" ? window.scrollY : 0
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (typeof window === "undefined" || !hideOnScroll) {
         setIsVisible(true);
         return;
@@ -15771,7 +16026,12 @@ var NavigationBarComponent = React59.forwardRef(
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       NavigationBarContext.Provider,
       {
-        value: { variant, itemLayout, activeIndicatorTransition, itemClassName },
+        value: {
+          variant,
+          itemLayout,
+          activeIndicatorTransition,
+          itemClassName
+        },
         children: /* @__PURE__ */ jsx(
           m.nav,
           {
@@ -15804,8 +16064,8 @@ var NavigationBarComponent = React59.forwardRef(
   }
 );
 NavigationBarComponent.displayName = "NavigationBar";
-var NavigationBar = React59.memo(NavigationBarComponent);
-var NavigationRailContext = React59.createContext({ variant: "collapsed", labelVisibility: "labeled" });
+var NavigationBar = React61.memo(NavigationBarComponent);
+var NavigationRailContext = React61.createContext({ variant: "collapsed", labelVisibility: "labeled" });
 var MD3_MODAL_TRANSITION = {
   type: "tween",
   ease: [0.05, 0.7, 0.1, 1],
@@ -15837,9 +16097,9 @@ var railContainerVariants = cva(
   }
 );
 function cloneIconWithFill2(icon, selected) {
-  if (!React59.isValidElement(icon)) return icon;
+  if (!React61.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React59.cloneElement(
+    return React61.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -15862,7 +16122,7 @@ function setFocusedItem(items, index) {
   }
 }
 function ActivePill2({ layoutId, disableInitial = false }) {
-  const { activeIndicatorTransition } = React59.useContext(NavigationRailContext);
+  const { activeIndicatorTransition } = React61.useContext(NavigationRailContext);
   return /* @__PURE__ */ jsx(
     m.div,
     {
@@ -15898,7 +16158,7 @@ function IconContainer2({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React59.forwardRef(
+var NavigationRailItemComponent = React61.forwardRef(
   ({
     selected,
     icon,
@@ -15909,18 +16169,18 @@ var NavigationRailItemComponent = React59.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, labelVisibility } = React59.useContext(
+    const { variant, labelVisibility } = React61.useContext(
       NavigationRailContext
     );
     const isExpanded = variant === "expanded" || variant === "modal";
     const isModal = variant === "modal";
     const enableLayout = !isModal;
-    const activePillId = `rail-pill-${React59.useId()}`;
+    const activePillId = `rail-pill-${React61.useId()}`;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
     const showLabel = isExpanded || labelVisibility === "labeled" || labelVisibility === "auto" && selected;
-    const handleClick = React59.useCallback(
+    const handleClick = React61.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -16022,9 +16282,9 @@ var NavigationRailItemComponent = React59.forwardRef(
   }
 );
 NavigationRailItemComponent.displayName = "NavigationRailItem";
-var NavigationRailItem = React59.memo(NavigationRailItemComponent);
+var NavigationRailItem = React61.memo(NavigationRailItemComponent);
 function useRoving(navRef) {
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     if (!navRef.current) return;
     const items = getMenuItems(navRef.current);
     const selected = items.find(
@@ -16034,7 +16294,7 @@ function useRoving(navRef) {
     const firstFocusable = selected != null ? selected : items[0];
     if (firstFocusable) firstFocusable.tabIndex = 0;
   }, [navRef]);
-  return React59.useCallback(
+  return React61.useCallback(
     (e) => {
       if (!navRef.current) return;
       const items = getMenuItems(navRef.current);
@@ -16062,7 +16322,7 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React59.forwardRef(
+var NavigationRailComponent = React61.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
@@ -16082,9 +16342,9 @@ var NavigationRailComponent = React59.forwardRef(
     const isXr = variant === "xr";
     const isSpatial = isXr && fabPlacement === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
-    const navRef = React59.useRef(null);
+    const navRef = React61.useRef(null);
     const handleKeyDown = useRoving(navRef);
-    const setRefs = React59.useCallback(
+    const setRefs = React61.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -16175,7 +16435,7 @@ var NavigationRailComponent = React59.forwardRef(
               children: fab
             }
           ),
-          React59.cloneElement(
+          React61.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -16217,7 +16477,7 @@ var NavigationRailComponent = React59.forwardRef(
   }
 );
 NavigationRailComponent.displayName = "NavigationRail";
-var NavigationRail = React59.memo(NavigationRailComponent);
+var NavigationRail = React61.memo(NavigationRailComponent);
 function useSearchKeyboard({
   active,
   onActiveChange,
@@ -16226,14 +16486,14 @@ function useSearchKeyboard({
   itemCount,
   onSelectSuggestion
 }) {
-  const [activeIndex, setActiveIndex] = React59.useState(-1);
-  const resetKeyRef = React59.useRef(`${active}:${query}`);
+  const [activeIndex, setActiveIndex] = React61.useState(-1);
+  const resetKeyRef = React61.useRef(`${active}:${query}`);
   const currentKey = `${active}:${query}`;
   if (resetKeyRef.current !== currentKey) {
     resetKeyRef.current = currentKey;
     setActiveIndex(-1);
   }
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       if (!active) return;
       switch (e.key) {
@@ -16273,7 +16533,7 @@ function useSearchKeyboard({
       query
     ]
   );
-  const resetActiveIndex = React59.useCallback(() => {
+  const resetActiveIndex = React61.useCallback(() => {
     setActiveIndex(-1);
   }, []);
   return { activeIndex, handleKeyDown, resetActiveIndex };
@@ -16341,10 +16601,10 @@ function AnimatedPlaceholder({
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const containerRef = React59.useRef(null);
-  const spanRef = React59.useRef(null);
-  const [xOffset, setXOffset] = React59.useState(0);
-  const recalculate = React59.useCallback(() => {
+  const containerRef = React61.useRef(null);
+  const spanRef = React61.useRef(null);
+  const [xOffset, setXOffset] = React61.useState(0);
+  const recalculate = React61.useCallback(() => {
     const container = containerRef.current;
     const span = spanRef.current;
     if (!container || !span || textAlign === "left") {
@@ -16359,10 +16619,10 @@ function AnimatedPlaceholder({
       setXOffset(Math.max(0, containerWidth - textWidth));
     }
   }, [textAlign]);
-  React59.useLayoutEffect(() => {
+  React61.useLayoutEffect(() => {
     recalculate();
   }, [recalculate]);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(recalculate);
@@ -16431,10 +16691,10 @@ function SearchBar({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React59.useRef(null);
-  const prevActiveRef = React59.useRef(active);
-  const isRestoringFocusRef = React59.useRef(false);
-  React59.useEffect(() => {
+  const inputRef = React61.useRef(null);
+  const prevActiveRef = React61.useRef(active);
+  const isRestoringFocusRef = React61.useRef(false);
+  React61.useEffect(() => {
     var _a;
     let rafId;
     if (prevActiveRef.current === true && active === false) {
@@ -16553,7 +16813,7 @@ function SearchBar({
     ) })
   );
 }
-var SearchContext = React59.createContext(null);
+var SearchContext = React61.createContext(null);
 function SearchProvider({
   children,
   value
@@ -16561,7 +16821,7 @@ function SearchProvider({
   return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
 }
 function useSearch() {
-  const context = React59.useContext(SearchContext);
+  const context = React61.useContext(SearchContext);
   if (!context) {
     return { listboxId: "", activeIndex: -1 };
   }
@@ -16588,7 +16848,7 @@ function useClickOutside(handler, enabled = true) {
   return ref;
 }
 function useSearchViewFocus(inputRef, active) {
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     if (!active) return;
     let raf2;
     const raf1 = requestAnimationFrame(() => {
@@ -16662,7 +16922,7 @@ function SearchViewDocked({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React59.useRef(null);
+  const inputRef = React61.useRef(null);
   useSearchViewFocus(inputRef, active);
   const dropdownRef = useClickOutside(() => {
     onActiveChange(false);
@@ -16808,10 +17068,10 @@ function SearchViewFullScreen({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React59.useRef(null);
+  const inputRef = React61.useRef(null);
   useSearchViewFocus(inputRef, active);
-  const [mounted, setMounted] = React59.useState(false);
-  React59.useEffect(() => {
+  const [mounted, setMounted] = React61.useState(false);
+  React61.useEffect(() => {
     setMounted(true);
   }, []);
   const handleFormSubmit = (e) => {
@@ -16969,10 +17229,10 @@ function SearchComponent({
   className,
   viewClassName
 }) {
-  const generatedId = React59.useId();
+  const generatedId = React61.useId();
   const searchId = id != null ? id : generatedId;
   const listboxId = `${searchId}-listbox`;
-  const itemCount = React59.Children.count(children);
+  const itemCount = React61.Children.count(children);
   const { activeIndex, handleKeyDown } = useSearchKeyboard({
     active,
     onActiveChange,
@@ -17347,7 +17607,7 @@ function ShapeSvg({
   );
 }
 var INDICATOR = "h-1 w-8 rounded-full bg-m3-on-surface-variant/40";
-var DragHandle = React59.forwardRef(
+var DragHandle = React61.forwardRef(
   ({ className, onCycle, "aria-label": ariaLabel }, ref) => {
     const isInteractive = Boolean(onCycle);
     if (isInteractive) {
@@ -17900,7 +18160,7 @@ function resolveMaxHeight(maxHeight, snapPoints) {
     return ABSOLUTE_MAX_HEIGHT;
   return maxHeight;
 }
-var BottomSheet = React59.forwardRef(
+var BottomSheet = React61.forwardRef(
   ({
     isOpen,
     onClose,
@@ -17933,27 +18193,27 @@ var BottomSheet = React59.forwardRef(
       isModal: false,
       maxHeight: resolveMaxHeight(maxHeight, snapPoints)
     });
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       const node = scope.current;
       if (node) {
         node.snapTo = snapTo;
       }
     }, [snapTo, scope]);
-    const [mounted, setMounted] = React59.useState(false);
-    React59.useEffect(() => {
+    const [mounted, setMounted] = React61.useState(false);
+    React61.useEffect(() => {
       setMounted(true);
     }, []);
-    const resolvedDividers = React59.useMemo(
+    const resolvedDividers = React61.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    const resolvedSheetMaxWidth = React59.useMemo(() => {
+    const resolvedSheetMaxWidth = React61.useMemo(() => {
       if (sheetMaxWidth === void 0)
         return "var(--m3-bottom-sheet-max-width, 640px)";
       if (typeof sheetMaxWidth === "number") return `${sheetMaxWidth}px`;
       return sheetMaxWidth;
     }, [sheetMaxWidth]);
-    const mergedRef = React59.useCallback(
+    const mergedRef = React61.useCallback(
       (node) => {
         scope(node);
         if (typeof ref === "function") ref(node);
@@ -18037,7 +18297,7 @@ var SCRIM_ANIM = {
   },
   exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }
 };
-var Scrim = React59.forwardRef(
+var Scrim = React61.forwardRef(
   ({ onClick, className, style }, ref) => /* @__PURE__ */ jsx(
     m.div,
     __spreadValues({
@@ -18069,7 +18329,7 @@ function resolveSheetMaxWidth(value) {
   if (typeof value === "number") return `${value}px`;
   return value;
 }
-var BottomSheetModal = React59.forwardRef(
+var BottomSheetModal = React61.forwardRef(
   ({
     isOpen,
     onClose,
@@ -18108,21 +18368,21 @@ var BottomSheetModal = React59.forwardRef(
       isModal: true,
       maxHeight: resolveMaxHeight2(maxHeight, snapPoints)
     });
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       const node = scope.current;
       if (node) {
         node.snapTo = snapTo;
       }
     }, [snapTo, scope]);
-    const resolvedDividers = React59.useMemo(
+    const resolvedDividers = React61.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    const resolvedSheetMaxWidth = React59.useMemo(
+    const resolvedSheetMaxWidth = React61.useMemo(
       () => resolveSheetMaxWidth(sheetMaxWidth),
       [sheetMaxWidth]
     );
-    const mergedRef = React59.useCallback(
+    const mergedRef = React61.useCallback(
       (node) => {
         scope(node);
         if (typeof ref === "function") ref(node);
@@ -18213,7 +18473,7 @@ var BottomSheetModal = React59.forwardRef(
 );
 BottomSheetModal.displayName = "BottomSheetModal";
 var COPLANAR_TRANSITION = `margin ${getMotionTransitionCSS("default", "spatial")}`;
-var SideSheet = React59.forwardRef(
+var SideSheet = React61.forwardRef(
   ({
     isOpen,
     children,
@@ -18229,16 +18489,16 @@ var SideSheet = React59.forwardRef(
     divider,
     scrollAreaProps
   }, ref) => {
-    const sheetAnim = React59.useMemo(() => buildSideSheetAnim(edge), [edge]);
-    const [mounted, setMounted] = React59.useState(false);
-    React59.useEffect(() => {
+    const sheetAnim = React61.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const [mounted, setMounted] = React61.useState(false);
+    React61.useEffect(() => {
       setMounted(true);
     }, []);
-    const resolvedDividers = React59.useMemo(
+    const resolvedDividers = React61.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       const sibling = coplanarSiblingRef == null ? void 0 : coplanarSiblingRef.current;
       if (!sibling) return;
       sibling.style.transition = COPLANAR_TRANSITION;
@@ -18302,7 +18562,7 @@ var SideSheet = React59.forwardRef(
   }
 );
 SideSheet.displayName = "SideSheet";
-var SideSheetModal = React59.forwardRef(
+var SideSheetModal = React61.forwardRef(
   ({
     isOpen,
     onClose,
@@ -18317,8 +18577,8 @@ var SideSheetModal = React59.forwardRef(
     divider,
     scrollAreaProps
   }, ref) => {
-    const sheetAnim = React59.useMemo(() => buildSideSheetAnim(edge), [edge]);
-    const resolvedDividers = React59.useMemo(
+    const sheetAnim = React61.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const resolvedDividers = React61.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
@@ -18577,7 +18837,7 @@ var SLIDER_INDICATOR_TRANSITION = {
   stiffness: 450,
   damping: 32
 };
-var ValueIndicator = React59.memo(function ValueIndicator2({
+var ValueIndicator = React61.memo(function ValueIndicator2({
   value,
   visible,
   orientation,
@@ -18624,7 +18884,7 @@ var ValueIndicator = React59.memo(function ValueIndicator2({
     "value-indicator"
   ) });
 });
-var SliderThumb = React59.memo(function SliderThumb2({
+var SliderThumb = React61.memo(function SliderThumb2({
   value,
   percent,
   min,
@@ -18656,11 +18916,11 @@ var SliderThumb = React59.memo(function SliderThumb2({
     [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
   };
   const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-  const [isDragging, setIsDragging] = React59.useState(false);
-  const [isHovered, setIsHovered] = React59.useState(false);
-  const [isFocused, setIsFocused] = React59.useState(false);
-  const pointerIdRef = React59.useRef(null);
-  const thumbRef = React59.useRef(null);
+  const [isDragging, setIsDragging] = React61.useState(false);
+  const [isHovered, setIsHovered] = React61.useState(false);
+  const [isFocused, setIsFocused] = React61.useState(false);
+  const pointerIdRef = React61.useRef(null);
+  const thumbRef = React61.useRef(null);
   const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
   const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
     position: "absolute"
@@ -18675,7 +18935,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     transform: "translate(-50%, 50%)",
     zIndex
   });
-  const getDeltaFromPointer = React59.useCallback(
+  const getDeltaFromPointer = React61.useCallback(
     (e) => {
       const trackEl = trackRef.current;
       if (!trackEl) return percent;
@@ -18702,7 +18962,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     },
     [isHorizontal, max, min, percent, step, trackRef, trackSize]
   );
-  const handlePointerDown = React59.useCallback(
+  const handlePointerDown = React61.useCallback(
     (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -18713,7 +18973,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     },
     [disabled]
   );
-  const handlePointerMove = React59.useCallback(
+  const handlePointerMove = React61.useCallback(
     (e) => {
       if (!isDragging || e.pointerId !== pointerIdRef.current) return;
       const newValue = getDeltaFromPointer(e.nativeEvent);
@@ -18721,7 +18981,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     },
     [isDragging, getDeltaFromPointer, onValueChange]
   );
-  const handlePointerUp = React59.useCallback(
+  const handlePointerUp = React61.useCallback(
     (e) => {
       if (e.pointerId !== pointerIdRef.current) return;
       e.currentTarget.releasePointerCapture(e.pointerId);
@@ -18731,7 +18991,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     },
     [onValueChangeEnd, value]
   );
-  const handleKeyDown = React59.useCallback(
+  const handleKeyDown = React61.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Home") {
@@ -18835,7 +19095,7 @@ var SliderThumb = React59.memo(function SliderThumb2({
     }
   );
 });
-var RangeTrack = React59.memo(function RangeTrack2({
+var RangeTrack = React61.memo(function RangeTrack2({
   startPercent,
   endPercent,
   trackSize,
@@ -19080,7 +19340,7 @@ var RangeTrack = React59.memo(function RangeTrack2({
     }
   );
 });
-var RangeSliderComponent = React59.forwardRef(
+var RangeSliderComponent = React61.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -19104,7 +19364,7 @@ var RangeSliderComponent = React59.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] = React59.useState([
+    const [internalValue, setInternalValue] = React61.useState([
       defaultStart,
       defaultEnd
     ]);
@@ -19118,10 +19378,10 @@ var RangeSliderComponent = React59.forwardRef(
     const endValue = snap(coerce(resolvedValue[1]));
     const startPercent = toPercent(startValue);
     const endPercent = toPercent(endValue);
-    const [topThumb, setTopThumb] = React59.useState("end");
-    const trackRef = React59.useRef(null);
+    const [topThumb, setTopThumb] = React61.useState("end");
+    const trackRef = React61.useRef(null);
     const minGap = step > 0 ? step : (max - min) / 1e3;
-    const handleStartChange = React59.useCallback(
+    const handleStartChange = React61.useCallback(
       (newStart) => {
         setTopThumb("start");
         const clamped = Math.min(newStart, endValue - minGap);
@@ -19133,7 +19393,7 @@ var RangeSliderComponent = React59.forwardRef(
       },
       [controlledValue, coerce, endValue, minGap, onValueChange, snap]
     );
-    const handleEndChange = React59.useCallback(
+    const handleEndChange = React61.useCallback(
       (newEnd) => {
         setTopThumb("end");
         const clamped = Math.max(newEnd, startValue + minGap);
@@ -19145,15 +19405,15 @@ var RangeSliderComponent = React59.forwardRef(
       },
       [controlledValue, coerce, minGap, onValueChange, snap, startValue]
     );
-    const handleStartChangeEnd = React59.useCallback(
+    const handleStartChangeEnd = React61.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
       [endValue, onValueChangeEnd]
     );
-    const handleEndChangeEnd = React59.useCallback(
+    const handleEndChangeEnd = React61.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
       [onValueChangeEnd, startValue]
     );
-    const handleTrackPointerDown = React59.useCallback(
+    const handleTrackPointerDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -19197,7 +19457,7 @@ var RangeSliderComponent = React59.forwardRef(
         trackSize
       ]
     );
-    const id = React59.useId();
+    const id = React61.useId();
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -19277,7 +19537,7 @@ var RangeSliderComponent = React59.forwardRef(
   }
 );
 RangeSliderComponent.displayName = "RangeSlider";
-var RangeSlider = React59.memo(RangeSliderComponent);
+var RangeSlider = React61.memo(RangeSliderComponent);
 function getHorizontalRadius(isLeading, innerR, outerR) {
   if (isLeading) {
     return {
@@ -19316,7 +19576,7 @@ var allInnerRadius = (innerR) => ({
   borderTopRightRadius: innerR,
   borderBottomRightRadius: innerR
 });
-var InsetIcon = React59.memo(function InsetIcon2({
+var InsetIcon = React61.memo(function InsetIcon2({
   icon,
   isOnActiveSegment,
   position,
@@ -19410,7 +19670,7 @@ function Ticks({
     return /* @__PURE__ */ jsx("div", { style, "aria-hidden": "true" }, tick);
   }) });
 }
-var SliderTrack = React59.memo(function SliderTrack2({
+var SliderTrack = React61.memo(function SliderTrack2({
   percent,
   trackSize,
   orientation,
@@ -19445,8 +19705,8 @@ var SliderTrack = React59.memo(function SliderTrack2({
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
   const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
   const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-  const [trackWidth, setTrackWidth] = React59.useState(0);
-  React59.useLayoutEffect(() => {
+  const [trackWidth, setTrackWidth] = React61.useState(0);
+  React61.useLayoutEffect(() => {
     const el = trackRef.current;
     if (!el || !hasAnyInsetIcon) return;
     setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
@@ -19463,8 +19723,8 @@ var SliderTrack = React59.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 = React59.useRef(1 - percent <= iconThreshold);
-  const leadingActiveRef = React59.useRef(percent > iconThreshold);
+  const trailingActiveRef = React61.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React61.useRef(percent > iconThreshold);
   const trailingPercent = 1 - percent;
   if (trailingActiveRef.current) {
     if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
@@ -19971,7 +20231,7 @@ var SliderTrack = React59.memo(function SliderTrack2({
     }
   );
 });
-var SliderComponent = React59.forwardRef(
+var SliderComponent = React61.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -20000,7 +20260,7 @@ var SliderComponent = React59.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const midpoint = min + (max - min) / 2;
     const initialValue = defaultValue != null ? defaultValue : midpoint;
-    const [internalValue, setInternalValue] = React59.useState(initialValue);
+    const [internalValue, setInternalValue] = React61.useState(initialValue);
     const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
     const { coerce, snap, toPercent, ticks } = useSliderMath({
       min,
@@ -20009,8 +20269,8 @@ var SliderComponent = React59.forwardRef(
     });
     const safeValue = snap(coerce(resolvedValue));
     const percent = toPercent(safeValue);
-    const trackRef = React59.useRef(null);
-    const handleValueChange = React59.useCallback(
+    const trackRef = React61.useRef(null);
+    const handleValueChange = React61.useCallback(
       (newValue) => {
         const clamped = snap(coerce(newValue));
         if (controlledValue === void 0) {
@@ -20020,13 +20280,13 @@ var SliderComponent = React59.forwardRef(
       },
       [coerce, controlledValue, onValueChange, snap]
     );
-    const handleValueChangeEnd = React59.useCallback(
+    const handleValueChangeEnd = React61.useCallback(
       (newValue) => {
         onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
       },
       [coerce, onValueChangeEnd, snap]
     );
-    const handleTrackPointerDown = React59.useCallback(
+    const handleTrackPointerDown = React61.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -20061,7 +20321,7 @@ var SliderComponent = React59.forwardRef(
         trackSize
       ]
     );
-    const id = React59.useId();
+    const id = React61.useId();
     const thumbId = `slider-thumb-${id}`;
     const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
     const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
@@ -20133,7 +20393,7 @@ var SliderComponent = React59.forwardRef(
   }
 );
 SliderComponent.displayName = "Slider";
-var Slider = React59.memo(SliderComponent);
+var Slider = React61.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -20175,9 +20435,9 @@ function toSnackbarData(item) {
   return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
 }
 function useSnackbarState() {
-  const [current, setCurrent] = React59.useState(null);
-  const queueRef = React59.useRef([]);
-  const showSnackbar = React59.useCallback(
+  const [current, setCurrent] = React61.useState(null);
+  const queueRef = React61.useRef([]);
+  const showSnackbar = React61.useCallback(
     (visuals) => {
       return new Promise((resolve) => {
         const item = { visuals, resolve };
@@ -20190,14 +20450,14 @@ function useSnackbarState() {
     },
     []
   );
-  const _dismiss = React59.useCallback((result) => {
+  const _dismiss = React61.useCallback((result) => {
     setCurrent((prev) => {
       if (prev) prev.resolve(result);
       const next = queueRef.current.shift();
       return next ? toSnackbarData(next) : null;
     });
   }, []);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     return () => {
       for (const item of queueRef.current) {
         item.resolve(RESULT.DISMISSED);
@@ -20207,7 +20467,7 @@ function useSnackbarState() {
   }, []);
   return { current, showSnackbar, _dismiss };
 }
-var Snackbar = React59.memo(function Snackbar2({
+var Snackbar = React61.memo(function Snackbar2({
   data,
   className
 }) {
@@ -20221,15 +20481,15 @@ var Snackbar = React59.memo(function Snackbar2({
   } = visuals;
   const reducedMotion = useReducedMotion();
   const durationMs = resolveDuration(duration);
-  React59.useEffect(() => {
+  React61.useEffect(() => {
     const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
     return () => clearTimeout(timer);
   }, [resolve, durationMs]);
-  const handleAction = React59.useCallback(
+  const handleAction = React61.useCallback(
     () => resolve(RESULT.ACTION),
     [resolve]
   );
-  const handleDismiss = React59.useCallback(
+  const handleDismiss = React61.useCallback(
     () => resolve(RESULT.DISMISSED),
     [resolve]
   );
@@ -20297,7 +20557,7 @@ var Snackbar = React59.memo(function Snackbar2({
 Snackbar.displayName = "Snackbar";
 function SnackbarHost({ state, className }) {
   const { current, _dismiss } = state;
-  const wrappedData = React59.useMemo(() => {
+  const wrappedData = React61.useMemo(() => {
     if (!current) return null;
     return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
   }, [current, _dismiss]);
@@ -20315,12 +20575,12 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React59.createContext(
+var SnackbarContext = React61.createContext(
   null
 );
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React59.useMemo(
+  const contextValue = React61.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -20331,15 +20591,15 @@ function SnackbarProvider({ children }) {
 }
 SnackbarProvider.displayName = "SnackbarProvider";
 function useSnackbar() {
-  const ctx = React59.useContext(SnackbarContext);
+  const ctx = React61.useContext(SnackbarContext);
   if (!ctx) {
     throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
   }
   return ctx;
 }
-var TabsContext = React59.createContext(null);
+var TabsContext = React61.createContext(null);
 function useTabsContext() {
-  const ctx = React59.useContext(TabsContext);
+  const ctx = React61.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>."
@@ -20347,7 +20607,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React59.forwardRef(
+var TabsComponent = React61.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -20356,35 +20616,35 @@ var TabsComponent = React59.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React59.useState(defaultValue);
+    const [internalValue, setInternalValue] = React61.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const handleValueChange = React59.useCallback(
+    const handleValueChange = React61.useCallback(
       (newValue) => {
         if (!isControlled) setInternalValue(newValue);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [isControlled, onValueChange]
     );
-    const [focusedValue, setFocusedValue] = React59.useState(value);
-    React59.useEffect(() => {
+    const [focusedValue, setFocusedValue] = React61.useState(value);
+    React61.useEffect(() => {
       setFocusedValue(value);
     }, [value]);
-    const [tabValues, setTabValues] = React59.useState([]);
-    const registerTab = React59.useCallback((tabValue) => {
+    const [tabValues, setTabValues] = React61.useState([]);
+    const registerTab = React61.useCallback((tabValue) => {
       setTabValues((prev) => {
         if (prev.includes(tabValue)) return prev;
         return [...prev, tabValue];
       });
     }, []);
-    const unregisterTab = React59.useCallback((tabValue) => {
+    const unregisterTab = React61.useCallback((tabValue) => {
       setTabValues((prev) => prev.filter((v) => v !== tabValue));
     }, []);
-    const hasAutoSelected = React59.useRef(false);
-    const [disabledValues, setDisabledValues] = React59.useState(
+    const hasAutoSelected = React61.useRef(false);
+    const [disabledValues, setDisabledValues] = React61.useState(
       /* @__PURE__ */ new Set()
     );
-    const markTabDisabled = React59.useCallback(
+    const markTabDisabled = React61.useCallback(
       (tabValue, disabled) => {
         setDisabledValues((prev) => {
           const next = new Set(prev);
@@ -20398,7 +20658,7 @@ var TabsComponent = React59.forwardRef(
       },
       []
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -20413,9 +20673,9 @@ var TabsComponent = React59.forwardRef(
         setFocusedValue(firstEnabled);
       }
     }, [tabValues, disabledValues, isControlled, value]);
-    const id = React59.useId();
+    const id = React61.useId();
     const layoutGroupId = `tabs-${id}`;
-    const contextValue = React59.useMemo(
+    const contextValue = React61.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -20446,12 +20706,12 @@ var TabsComponent = React59.forwardRef(
   }
 );
 TabsComponent.displayName = "Tabs";
-var Tabs = React59.memo(TabsComponent);
-var TabsListContext = React59.createContext(
+var Tabs = React61.memo(TabsComponent);
+var TabsListContext = React61.createContext(
   null
 );
 function useTabsListContext() {
-  const ctx = React59.useContext(TabsListContext);
+  const ctx = React61.useContext(TabsListContext);
   return ctx != null ? ctx : { variant: "primary", scrollable: false };
 }
 
@@ -20535,7 +20795,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React59.forwardRef(
+var TabComponent = React61.forwardRef(
   ({
     value,
     icon,
@@ -20565,9 +20825,9 @@ var TabComponent = React59.forwardRef(
     const isFocused = focusedValue === value;
     const hasIcon = icon != null;
     const isStackedIcon = hasIcon && !inlineIcon;
-    const buttonRef = React59.useRef(null);
-    const isFirstMount = React59.useRef(true);
-    const mergedRef = React59.useCallback(
+    const buttonRef = React61.useRef(null);
+    const isFirstMount = React61.useRef(true);
+    const mergedRef = React61.useCallback(
       (node) => {
         buttonRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -20575,15 +20835,15 @@ var TabComponent = React59.forwardRef(
       },
       [ref]
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       registerTab(value);
       return () => unregisterTab(value);
     }, [value, registerTab, unregisterTab]);
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       markTabDisabled(value, disabled);
       return () => markTabDisabled(value, false);
     }, [value, disabled, markTabDisabled]);
-    const handleKeyDown = React59.useCallback(
+    const handleKeyDown = React61.useCallback(
       (e) => {
         const isRtl = buttonRef.current ? getComputedStyle(buttonRef.current).direction === "rtl" : false;
         const enabledValues = tabValues.filter((v) => !disabledValues.has(v));
@@ -20637,7 +20897,7 @@ var TabComponent = React59.forwardRef(
         autoActivate
       ]
     );
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -20646,7 +20906,7 @@ var TabComponent = React59.forwardRef(
         buttonRef.current.focus({ preventScroll: true });
       }
     }, [isFocused]);
-    React59.useEffect(() => {
+    React61.useEffect(() => {
       if (!isActive || !scrollable || !buttonRef.current) return;
       const btn = buttonRef.current;
       let container = btn.parentElement;
@@ -20783,8 +21043,8 @@ var TabComponent = React59.forwardRef(
   }
 );
 TabComponent.displayName = "Tab";
-var Tab = React59.memo(TabComponent);
-var TabsContentComponent = React59.forwardRef(
+var Tab = React61.memo(TabComponent);
+var TabsContentComponent = React61.forwardRef(
   ({ value, className, children }, ref) => {
     var _a;
     const { value: selectedValue, layoutGroupId } = useTabsContext();
@@ -20818,8 +21078,8 @@ var TabsContentComponent = React59.forwardRef(
   }
 );
 TabsContentComponent.displayName = "TabsContent";
-var TabsContent = React59.memo(TabsContentComponent);
-var TabsListComponent = React59.forwardRef(
+var TabsContent = React61.memo(TabsContentComponent);
+var TabsListComponent = React61.forwardRef(
   ({
     variant,
     scrollable = false,
@@ -20830,12 +21090,12 @@ var TabsListComponent = React59.forwardRef(
   }, ref) => {
     const { layoutGroupId, value, setFocusedValue } = useTabsContext();
     const listLayoutId = `${layoutGroupId}-list`;
-    const listContextValue = React59.useMemo(
+    const listContextValue = React61.useMemo(
       () => ({ variant, scrollable }),
       [variant, scrollable]
     );
     const bgColor = backgroundColor != null ? backgroundColor : "var(--md-sys-color-surface)";
-    const handleBlur = React59.useCallback(
+    const handleBlur = React61.useCallback(
       (e) => {
         const listEl = e.currentTarget;
         if (listEl.contains(e.relatedTarget)) return;
@@ -20884,7 +21144,7 @@ var TabsListComponent = React59.forwardRef(
   }
 );
 TabsListComponent.displayName = "TabsList";
-var TabsList = React59.memo(TabsListComponent);
+var TabsList = React61.memo(TabsListComponent);
 var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
@@ -20942,10 +21202,10 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
     variant: "body-md"
   }
 });
-var Text = React59.forwardRef(
+var Text = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, as: Component, color, weight, style } = _b, props = __objRest(_b, ["className", "variant", "as", "color", "weight", "style"]);
-    const defaultComponent = React59.useMemo(() => {
+    const defaultComponent = React61.useMemo(() => {
       const v = variant ? String(variant).toLowerCase() : "";
       if (v.startsWith("display") || v.startsWith("headline")) return "h1";
       if (v.startsWith("title")) return "h2";
@@ -20964,11 +21224,11 @@ var Text = React59.forwardRef(
   }
 );
 Text.displayName = "Text";
-var ToolbarContext = React59.createContext(
+var ToolbarContext = React61.createContext(
   null
 );
 function useToolbarContext() {
-  return React59.useContext(ToolbarContext);
+  return React61.useContext(ToolbarContext);
 }
 
 // src/ui/text-field/text-field.tokens.ts
@@ -21008,7 +21268,7 @@ var TF_TYPOGRAPHY = {
 var TF_CLASSES = {
   // Prefix / Suffix
   prefixSuffix: "text-base text-[var(--md-sys-color-on-surface-variant)] select-none shrink-0"};
-var ActiveIndicator = React59.memo(function ActiveIndicator2({
+var ActiveIndicator = React61.memo(function ActiveIndicator2({
   isFocused,
   isError,
   isDisabled,
@@ -21055,7 +21315,7 @@ function getLabelColor(isFloated, isFocused, isError, isDisabled) {
   if (isFloated && isFocused) return TF_COLORS.primary;
   return TF_COLORS.onSurfaceVariant;
 }
-var FloatingLabel = React59.memo(function FloatingLabel2({
+var FloatingLabel = React61.memo(function FloatingLabel2({
   text,
   isFloated,
   isFocused,
@@ -21114,7 +21374,7 @@ var FloatingLabel = React59.memo(function FloatingLabel2({
   );
 });
 FloatingLabel.displayName = "FloatingLabel";
-var LeadingIcon = React59.memo(function LeadingIcon2({
+var LeadingIcon = React61.memo(function LeadingIcon2({
   children,
   isError,
   isDisabled
@@ -21138,7 +21398,7 @@ function getOutlineColor(isFocused, isError, isHovered, isDisabled) {
   if (isHovered) return TF_COLORS.inputText;
   return TF_COLORS.outline;
 }
-var OutlineContainer = React59.memo(function OutlineContainer2({
+var OutlineContainer = React61.memo(function OutlineContainer2({
   isFloated,
   isFocused,
   isError,
@@ -21237,7 +21497,7 @@ var OutlineContainer = React59.memo(function OutlineContainer2({
   );
 });
 OutlineContainer.displayName = "OutlineContainer";
-var PrefixSuffix = React59.memo(function PrefixSuffix2({
+var PrefixSuffix = React61.memo(function PrefixSuffix2({
   text,
   type,
   visible,
@@ -21279,7 +21539,7 @@ function AnimatedText({
     motionKey
   );
 }
-var SupportingText = React59.memo(function SupportingText2({
+var SupportingText = React61.memo(function SupportingText2({
   supportingText,
   errorText,
   isError,
@@ -21390,7 +21650,7 @@ function ClearIcon() {
     }
   );
 }
-var TrailingIcon = React59.memo(function TrailingIcon2({
+var TrailingIcon = React61.memo(function TrailingIcon2({
   mode,
   children,
   value,
@@ -21456,7 +21716,7 @@ var TrailingIcon = React59.memo(function TrailingIcon2({
 });
 TrailingIcon.displayName = "TrailingIcon";
 var LINE_HEIGHT_PX = 24;
-var TextFieldComponent = React59.forwardRef(
+var TextFieldComponent = React61.forwardRef(
   ({
     // Core
     variant = "filled",
@@ -21524,30 +21784,30 @@ var TextFieldComponent = React59.forwardRef(
     const isInToolbar = !!toolbarContext;
     const resolvedDense = isInToolbar ? true : dense;
     const resolvedLabel = isInToolbar ? void 0 : label;
-    const generatedId = React59.useId();
+    const generatedId = React61.useId();
     const inputId = idProp != null ? idProp : `tf-${generatedId}`;
     const supportingId = `${inputId}-supporting`;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = React59.useState(defaultValue);
+    const [internalValue, setInternalValue] = React61.useState(defaultValue);
     const currentValue = isControlled ? valueProp : internalValue;
-    const [isFocused, setIsFocused] = React59.useState(false);
-    const [showPassword, setShowPassword] = React59.useState(false);
+    const [isFocused, setIsFocused] = React61.useState(false);
+    const [showPassword, setShowPassword] = React61.useState(false);
     const resolvedInputType = type === "password" && showPassword ? "text" : type;
-    const [nativeError, setNativeError] = React59.useState("");
-    const [labelWidth, setLabelWidth] = React59.useState(0);
+    const [nativeError, setNativeError] = React61.useState("");
+    const [labelWidth, setLabelWidth] = React61.useState(0);
     const hasValue = currentValue.length > 0;
     const isFloated = isFocused || hasValue;
     const isError = errorProp || !!nativeError || maxLength !== void 0 && currentValue.length > maxLength;
     const containerHeight = resolvedDense ? TF_SIZE.denseHeight : TF_SIZE.height;
     const showAsterisk = required && !noAsterisk;
-    const inputRef = React59.useRef(null);
-    const labelSpanRef = React59.useRef(null);
-    React59.useLayoutEffect(() => {
+    const inputRef = React61.useRef(null);
+    const labelSpanRef = React61.useRef(null);
+    React61.useLayoutEffect(() => {
       if (labelSpanRef.current) {
         setLabelWidth(labelSpanRef.current.offsetWidth);
       }
     }, []);
-    React59.useLayoutEffect(() => {
+    React61.useLayoutEffect(() => {
       if (type !== "textarea" || !inputRef.current) return;
       const textarea = inputRef.current;
       if (autoResize) {
@@ -21559,7 +21819,7 @@ var TextFieldComponent = React59.forwardRef(
       }
       textarea.style.overflowY = "hidden";
     }, [type, autoResize, maxRows, currentValue]);
-    const handleValueChange = React59.useCallback(
+    const handleValueChange = React61.useCallback(
       (newValue) => {
         var _a2, _b;
         if (!isControlled) setInternalValue(newValue);
@@ -21568,7 +21828,7 @@ var TextFieldComponent = React59.forwardRef(
       },
       [isControlled]
     );
-    const handleChange = React59.useCallback(
+    const handleChange = React61.useCallback(
       (e) => {
         const newVal = e.target.value;
         handleValueChange(newVal);
@@ -21576,14 +21836,14 @@ var TextFieldComponent = React59.forwardRef(
       },
       [handleValueChange, onChange]
     );
-    const handleFocus = React59.useCallback(
+    const handleFocus = React61.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React59.useCallback(
+    const handleBlur = React61.useCallback(
       (e) => {
         setIsFocused(false);
         const el = inputRef.current;
@@ -21596,7 +21856,7 @@ var TextFieldComponent = React59.forwardRef(
       },
       [onBlur]
     );
-    const handleClear = React59.useCallback(() => {
+    const handleClear = React61.useCallback(() => {
       var _a2;
       handleValueChange("");
       onChange == null ? void 0 : onChange("", {
@@ -21604,12 +21864,12 @@ var TextFieldComponent = React59.forwardRef(
       });
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [handleValueChange, onChange]);
-    const handlePasswordToggle = React59.useCallback(() => {
+    const handlePasswordToggle = React61.useCallback(() => {
       var _a2;
       setShowPassword((prev) => !prev);
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
-    React59.useImperativeHandle(
+    React61.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -21855,7 +22115,7 @@ var TextFieldComponent = React59.forwardRef(
   }
 );
 TextFieldComponent.displayName = "TextField";
-var TextField = React59.memo(TextFieldComponent);
+var TextField = React61.memo(TextFieldComponent);
 
 // src/ui/typography/typography-key-tokens.ts
 var TypographyKeyTokens = /* @__PURE__ */ ((TypographyKeyTokens2) => {
@@ -22817,7 +23077,7 @@ function getToolbarColors(variant = "standard", customColors) {
       return standardFloatingToolbarColors;
   }
 }
-var BottomDockedToolbar = React59.forwardRef(
+var BottomDockedToolbar = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standard",
@@ -22850,8 +23110,8 @@ var BottomDockedToolbar = React59.forwardRef(
     const { scrollY } = useScroll(
       scrollContainerRef ? { container: scrollContainerRef } : void 0
     );
-    const [isHidden, setIsHidden] = React59.useState(false);
-    const lastScrollY = React59.useRef(0);
+    const [isHidden, setIsHidden] = React61.useState(false);
+    const lastScrollY = React61.useRef(0);
     useMotionValueEvent(scrollY, "change", (latest) => {
       if (!hideOnScroll) return;
       const diff = latest - lastScrollY.current;
@@ -23000,15 +23260,15 @@ function buildSlotVariants(xHidden, yHidden, isHorizontal) {
   };
 }
 function applyItemClassName(nodes, itemClassName) {
-  return React59.Children.map(nodes, (child) => {
-    if (!React59.isValidElement(child)) return child;
+  return React61.Children.map(nodes, (child) => {
+    if (!React61.isValidElement(child)) return child;
     const element = child;
-    return React59.cloneElement(element, {
+    return React61.cloneElement(element, {
       className: cn(element.props.className, itemClassName)
     });
   });
 }
-var FloatingToolbarBase = React59.forwardRef(
+var FloatingToolbarBase = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       expanded,
@@ -23120,7 +23380,9 @@ var FloatingToolbarBase = React59.forwardRef(
                       isHorizontal ? "flex-row h-full" : "flex-col w-full",
                       isStringPadding ? contentPadding : isHorizontal ? "px-2" : "py-2"
                     ),
-                    style: __spreadValues({ gap: itemGap }, isStringPadding ? {} : contentPadding),
+                    style: __spreadValues({
+                      gap: itemGap
+                    }, isStringPadding ? {} : contentPadding),
                     children: [
                       /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && startContent && /* @__PURE__ */ jsx(
                         m.div,
@@ -23178,11 +23440,11 @@ var FloatingToolbarBase = React59.forwardRef(
   }
 );
 FloatingToolbarBase.displayName = "FloatingToolbarBase";
-var HorizontalFloatingToolbar = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
+var HorizontalFloatingToolbar = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
 HorizontalFloatingToolbar.displayName = "HorizontalFloatingToolbar";
-var VerticalFloatingToolbar = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "vertical" }, props)));
+var VerticalFloatingToolbar = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "vertical" }, props)));
 VerticalFloatingToolbar.displayName = "VerticalFloatingToolbar";
-var FloatingToolbarWithFabBase = React59.forwardRef(
+var FloatingToolbarWithFabBase = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       expanded,
@@ -23310,9 +23572,9 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
   }
 );
 FloatingToolbarWithFabBase.displayName = "FloatingToolbarWithFabBase";
-var HorizontalFloatingToolbarWithFab = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
+var HorizontalFloatingToolbarWithFab = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
 HorizontalFloatingToolbarWithFab.displayName = "HorizontalFloatingToolbarWithFab";
-var VerticalFloatingToolbarWithFab = React59.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "vertical" }, props)));
+var VerticalFloatingToolbarWithFab = React61.forwardRef((props, ref) => /* @__PURE__ */ jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "vertical" }, props)));
 VerticalFloatingToolbarWithFab.displayName = "VerticalFloatingToolbarWithFab";
 var ToolbarDivider = ({
   orientation: propsOrientation,
@@ -23348,7 +23610,7 @@ var VARIANT_TO_COLOR_STYLE = {
   tonal: "tonal",
   filled: "filled"
 };
-var ToolbarIconButton = React59.forwardRef(
+var ToolbarIconButton = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
@@ -23484,7 +23746,7 @@ var MOTION_PROP_KEYS2 = [
   "layoutId",
   "onLayoutAnimationComplete"
 ];
-var ToolbarToggleButton = React59.forwardRef(
+var ToolbarToggleButton = React61.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
@@ -23521,7 +23783,7 @@ var ToolbarToggleButton = React59.forwardRef(
     } = useRippleState({
       disabled: Boolean(disabled) || !ripple
     });
-    const handlePointerDown = React59.useCallback(
+    const handlePointerDown = React61.useCallback(
       (e) => {
         if (!disabled && ripple) {
           handleRipplePointerDown(e);
@@ -23542,7 +23804,7 @@ var ToolbarToggleButton = React59.forwardRef(
       context == null ? void 0 : context.itemClassName,
       className
     );
-    const whileTapConfig = React59.useMemo(
+    const whileTapConfig = React61.useMemo(
       () => ({
         scale: pressScale,
         x: pressBounceOffset ? [
@@ -23556,7 +23818,7 @@ var ToolbarToggleButton = React59.forwardRef(
       }),
       [pressScale, pressBounceOffset]
     );
-    const transitionConfig = React59.useMemo(
+    const transitionConfig = React61.useMemo(
       () => ({
         scale: FAST_SPATIAL_SPRING,
         x: {
@@ -23581,7 +23843,7 @@ var ToolbarToggleButton = React59.forwardRef(
       children && (typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("span", { children }) : children)
     ] });
     if (asChild) {
-      const child = React59.Children.only(children);
+      const child = React61.Children.only(children);
       const childContent = child.props.children;
       const innerChildContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         ripple && /* @__PURE__ */ jsx(
@@ -23618,7 +23880,7 @@ var ToolbarToggleButton = React59.forwardRef(
           className: combinedClassName,
           onPointerDown: handlePointerDown
         }, strippedProps), {
-          children: React59.cloneElement(child, { children: innerChildContent })
+          children: React61.cloneElement(child, { children: innerChildContent })
         })
       ) });
     }
@@ -24222,7 +24484,7 @@ function TooltipBox({
         onKeyDown: handleKeyDown,
         "aria-label": ariaLabel,
         "aria-describedby": state.isVisible ? tooltipId : void 0,
-        children: React59.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
+        children: React61.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
       }
     ),
     mounted && createPortal(
@@ -24252,6 +24514,6 @@ function TooltipBox({
   ] });
 }
 
-export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, getToolbarColors, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonDistribute, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, getToolbarColors, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map