@bug-on/m3-expressive 1.2.1 → 1.2.2

package/dist/buttons.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { Slot } from '@radix-ui/react-slot';
 import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion, useSpring, useTransform } from 'motion/react';
-import * as React14 from 'react';
+import * as React16 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -87,11 +87,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 = React14.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React16.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React14.useState(false);
-  React14.useEffect(() => {
+  const [ready, setReady] = React16.useState(false);
+  React16.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -136,7 +136,7 @@ var IndeterminateSvg = React14.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React14.memo(function DeterminateSvg2({
+var DeterminateSvg = React16.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -161,7 +161,7 @@ var DeterminateSvg = React14.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React14.forwardRef(
+var LoadingIndicator = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -276,7 +276,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React14.forwardRef(
+var CircularProgress = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -314,15 +314,15 @@ var CircularProgress = React14.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React14.useMemo(
+    const effectiveAmplitude = React16.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React14.useMemo(
+    const effectiveWavelength = React16.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React14.useMemo(
+    const wavyActivePath = React16.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -331,8 +331,8 @@ var CircularProgress = React14.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React14.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React14.useMemo(
+    const circumference = React16.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React16.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -521,9 +521,9 @@ var CircularProgress = React14.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React14.useState(0);
-  const observerRef = React14.useRef(null);
-  const ref = React14.useCallback((node) => {
+  const [width, setWidth] = React16.useState(0);
+  const observerRef = React16.useRef(null);
+  const ref = React16.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -537,7 +537,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -547,7 +547,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React14.useCallback(
+  return React16.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -561,7 +561,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React14.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React16.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -637,7 +637,7 @@ var FlatLinearTrack = React14.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React14.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React16.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -656,13 +656,13 @@ var WavyLinearTrack = React14.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React14.useId();
+  const titleId = React16.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React14.useRef(null);
-  const trackPathRef = React14.useRef(null);
+  const activePathRef = React16.useRef(null);
+  const trackPathRef = React16.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -833,7 +833,7 @@ var WavyLinearTrack = React14.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React14.forwardRef(
+var LinearProgress = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -874,10 +874,10 @@ var LinearProgress = React14.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React14.useRef(null);
+    const containerRef = React16.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React14.useState(false);
-    React14.useEffect(() => {
+    const [isRtl, setIsRtl] = React16.useState(false);
+    React16.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -885,16 +885,16 @@ var LinearProgress = React14.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React14.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React14.useMemo(
+    const effectiveAmplitude = React16.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React16.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React14.useMemo(
+    const shouldShowStop = React16.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React14.useMemo(
+    const stopSize = React16.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -967,14 +967,14 @@ var LinearProgress = React14.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React14.forwardRef((props, ref) => {
+var ProgressIndicator = React16.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 = React14.memo(function RippleItem2({
+var RippleItem = React16.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1018,14 +1018,17 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React14.useState([]);
-  const onPointerDown = React14.useCallback(
+  const [ripples, setRipples] = React16.useState([]);
+  const onPointerDown = React16.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 }
@@ -1033,7 +1036,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React14.useCallback((id) => {
+  const removeRipple = React16.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1289,7 +1292,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React14.forwardRef(
+var ButtonComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1301,6 +1304,7 @@ var ButtonComponent = React14.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -1322,6 +1326,7 @@ var ButtonComponent = React14.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -1351,9 +1356,9 @@ var ButtonComponent = React14.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React14.useMemo(() => {
+    const labelText = React16.useMemo(() => {
       if (asChild) {
-        const child = React14.Children.only(children);
+        const child = React16.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1361,8 +1366,8 @@ var ButtonComponent = React14.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = useMotionValue(animateRadius);
-    const asChildRef = React14.useRef(null);
-    const mergedRef = React14.useCallback(
+    const asChildRef = React16.useRef(null);
+    const mergedRef = React16.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -1371,14 +1376,14 @@ var ButtonComponent = React14.forwardRef(
       },
       [ref]
     );
-    React14.useEffect(() => {
+    React16.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React14.useEffect(() => {
+    React16.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1386,14 +1391,14 @@ var ButtonComponent = React14.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1421,10 +1426,11 @@ var ButtonComponent = React14.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,
@@ -1446,8 +1452,9 @@ var ButtonComponent = React14.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsx(
         m.span,
@@ -1458,27 +1465,28 @@ var ButtonComponent = React14.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 = React14.useCallback(
+    const handleAsChildPointerDown = React16.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React14.useCallback(() => {
+    const handleAsChildPointerUp = React16.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React14.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1488,7 +1496,7 @@ var ButtonComponent = React14.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React14.Children.only(children);
+      const child = React16.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -1505,7 +1513,7 @@ var ButtonComponent = React14.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React14.cloneElement(child, { children: innerContent })
+          children: React16.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -1534,13 +1542,343 @@ var ButtonComponent = React14.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React14.memo(ButtonComponent);
+var Button = React16.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 DISTRIBUTE_EASING_BEZIER = "cubic-bezier(0.2, 0.0, 0.0, 1.0)";
+var DISTRIBUTE_DURATION_MS = 350;
+var DEFAULT_EXPAND_RATIO = 0.3;
+var DEFAULT_FIXED_SIZE = 48;
+var DEFAULT_GAP = "0.5rem";
+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 React16.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 = React16.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] = React16.useState(null);
+    const [pressedIndex, setPressedIndex] = React16.useState(null);
+    const childrenArray = React16.useMemo(
+      () => React16.Children.toArray(children).filter(React16.isValidElement),
+      [children]
+    );
+    const count = childrenArray.length;
+    const isTextItem = React16.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 = React16.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 = React16.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 VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React14.forwardRef(
+var IconComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1606,7 +1944,7 @@ var IconComponent = React14.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React14.memo(IconComponent);
+var Icon = React16.memo(IconComponent);
 var BUTTON_GROUP_TOKENS = {
   standard: {
     betweenSpace: 12,
@@ -1662,7 +2000,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 }),
@@ -1691,8 +2028,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 = {
@@ -1708,13 +2043,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 = React14.memo(function AnimatedCheckLabel2({
+var AnimatedCheckLabel = React16.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -1790,43 +2119,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;
@@ -1837,9 +2132,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;
@@ -1866,19 +2158,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 = React14.forwardRef(
+var ButtonGroupComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1886,10 +2175,7 @@ var ButtonGroupComponent = React14.forwardRef(
       orientation = "horizontal",
       fullWidth = false,
       size,
-      morphingWidth = true,
-      activeMorphing = false,
       itemClassName,
-      expandedRatio = ButtonGroupDefaults.expandedRatio,
       showCheck = false,
       children,
       iconBehavior,
@@ -1901,99 +2187,26 @@ var ButtonGroupComponent = React14.forwardRef(
       "orientation",
       "fullWidth",
       "size",
-      "morphingWidth",
-      "activeMorphing",
       "itemClassName",
-      "expandedRatio",
       "showCheck",
       "children",
       "iconBehavior",
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React14.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React14.useState(
-      null
-    );
-    const rootRef = React14.useRef(null);
-    const setRootRef = React14.useCallback(
-      (node) => {
-        rootRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    );
-    const childrenArray = React14.useMemo(
-      () => React14.Children.toArray(children).filter(React14.isValidElement),
+    const [pressedIndex, setPressedIndex] = React16.useState(null);
+    const childrenArray = React16.useMemo(
+      () => React16.Children.toArray(children).filter(React16.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const groupSizeSignature = React14.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 = React14.useRef(groupSizeSignature);
-    React14.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;
-    React14.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 = React14.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 = React14.useMemo(
-      () => childrenArray.some(
-        (child) => child.props.selected
-      ),
-      [childrenArray]
-    );
-    const handlePointerLeaveAndUp = React14.useCallback(() => {
+    const handlePointerLeaveAndUp = React16.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",
@@ -2002,18 +2215,17 @@ var ButtonGroupComponent = React14.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,
@@ -2030,25 +2242,6 @@ var ButtonGroupComponent = React14.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(
@@ -2057,13 +2250,12 @@ var ButtonGroupComponent = React14.forwardRef(
             isPressed,
             itemSize,
             shapes,
-            flex,
             existingAnimate,
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const clonedElement = React14.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
-            key: (_b2 = element.key) != null ? _b2 : index,
+          const clonedElement = React16.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+            key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
             icon: explicitIcon,
@@ -2077,9 +2269,9 @@ var ButtonGroupComponent = React14.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);
@@ -2092,7 +2284,7 @@ var ButtonGroupComponent = React14.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React14.memo(ButtonGroupComponent);
+var ButtonGroup = React16.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -2147,9 +2339,9 @@ var COLOR_CLASSES = {
   }
 };
 function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
-  const [collapsed, setCollapsed] = React14.useState(false);
-  const lastScrollY = React14.useRef(0);
-  React14.useEffect(() => {
+  const [collapsed, setCollapsed] = React16.useState(false);
+  const lastScrollY = React16.useRef(0);
+  React16.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
     lastScrollY.current = window.scrollY;
     const handleScroll = () => {
@@ -2172,7 +2364,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React14.forwardRef(
+var ExtendedFABComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2218,10 +2410,10 @@ var ExtendedFABComponent = React14.forwardRef(
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
-    const localRef = React14.useRef(null);
-    React14.useImperativeHandle(ref, () => localRef.current);
-    const [dir, setDir] = React14.useState("ltr");
-    React14.useEffect(() => {
+    const localRef = React16.useRef(null);
+    React16.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React16.useState("ltr");
+    React16.useEffect(() => {
       var _a3;
       if (!localRef.current) return;
       const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
@@ -2242,7 +2434,7 @@ var ExtendedFABComponent = React14.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2252,7 +2444,7 @@ var ExtendedFABComponent = React14.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2360,8 +2552,8 @@ var ExtendedFABComponent = React14.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React14.cloneElement(
-          React14.Children.only(children),
+        children: React16.cloneElement(
+          React16.Children.only(children),
           { children: innerContent }
         )
       })
@@ -2405,7 +2597,7 @@ var ExtendedFABComponent = React14.forwardRef(
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
-var ExtendedFAB = React14.memo(ExtendedFABComponent);
+var ExtendedFAB = React16.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -2476,7 +2668,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React14.forwardRef(
+var FABComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2523,7 +2715,7 @@ var FABComponent = React14.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2533,7 +2725,7 @@ var FABComponent = React14.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2544,7 +2736,7 @@ var FABComponent = React14.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    const labelContent = asChild ? React14.Children.only(children).props.children : children;
+    const labelContent = asChild ? React16.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
@@ -2632,8 +2824,8 @@ var FABComponent = React14.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React14.cloneElement(
-          React14.Children.only(children),
+        children: React16.cloneElement(
+          React16.Children.only(children),
           { children: innerContent }
         )
       })
@@ -2670,7 +2862,7 @@ var FABComponent = React14.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React14.memo(FABComponent);
+var FAB = React16.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -2778,7 +2970,7 @@ function CloseIcon() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(AddIcon, {});
 }
-var ToggleFABComponent = React14.forwardRef(
+var ToggleFABComponent = React16.forwardRef(
   ({
     expanded,
     onToggle,
@@ -2796,7 +2988,7 @@ var ToggleFABComponent = React14.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);
-    React14.useEffect(() => {
+    React16.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = useTransform(
@@ -2804,12 +2996,12 @@ var ToggleFABComponent = React14.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React14.useState(expanded ? 1 : 0);
-    React14.useEffect(() => {
+    const [iconProgress, setIconProgress] = React16.useState(expanded ? 1 : 0);
+    React16.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React14.useCallback(() => {
+    const handleClick = React16.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxs(
@@ -2858,7 +3050,7 @@ var ToggleFABComponent = React14.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React14.memo(ToggleFABComponent);
+var ToggleFAB = React16.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -2873,7 +3065,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 = React14.useCallback(
+  const handleClick = React16.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -2883,7 +3075,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React14.useCallback(
+  const handleKeyDown = React16.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2925,7 +3117,7 @@ function FABMenuItem({
     borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
   };
   if (asChild) {
-    const child = React14.Children.only(children);
+    const child = React16.Children.only(children);
     return /* @__PURE__ */ jsx(m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsx(
       Slot,
       {
@@ -2937,7 +3129,7 @@ function FABMenuItem({
         onPointerDown,
         onKeyDown: handleKeyDown,
         className: containerClassName,
-        children: React14.cloneElement(child, { children: innerContent })
+        children: React16.cloneElement(child, { children: innerContent })
       }
     ) });
   }
@@ -2970,13 +3162,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React14.useId();
-  const menuId = React14.useId();
-  const toggleRef = React14.useRef(null);
-  const itemRefs = React14.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React14.useState(-1);
-  const reversedItems = React14.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React14.useCallback((index) => {
+  const fabId = React16.useId();
+  const menuId = React16.useId();
+  const toggleRef = React16.useRef(null);
+  const itemRefs = React16.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React16.useState(-1);
+  const reversedItems = React16.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React16.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -2985,8 +3177,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React14.useRef(false);
-  React14.useEffect(() => {
+  const wasExpandedRef = React16.useRef(false);
+  React16.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -3001,7 +3193,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React14.useCallback(
+  const handleMenuKeyDown = React16.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -3125,12 +3317,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 },
@@ -3223,7 +3442,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React14.forwardRef(
+var IconButtonComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3231,8 +3450,10 @@ var IconButtonComponent = React14.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
@@ -3247,8 +3468,10 @@ var IconButtonComponent = React14.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -3258,21 +3481,21 @@ var IconButtonComponent = React14.forwardRef(
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React14.useMemo(
+    const resolvedColorClass = React16.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React14.useMemo(
+    const outlineWidthClass = React16.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React14.useMemo(
+    const disabledBgClass = React16.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -3289,11 +3512,13 @@ var IconButtonComponent = React14.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 = React14.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -3303,7 +3528,7 @@ var IconButtonComponent = React14.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -3351,7 +3576,7 @@ var IconButtonComponent = React14.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: {
@@ -3359,9 +3584,9 @@ var IconButtonComponent = React14.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: asChild ? React14.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React16.Children.only(children).props.children : children
         }),
-        "content"
+        isSelected && selectedIcon ? "selected-content" : "content"
       ) })
     ] });
     const containerClassName = cn(
@@ -3370,12 +3595,13 @@ var IconButtonComponent = React14.forwardRef(
       outlineWidthClass,
       disabledBgClass,
       "overflow-hidden",
-      SIZE_STYLES2[size],
+      heightClass,
+      widthClass,
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
     if (asChild) {
-      const child = React14.Children.only(children);
+      const child = React16.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -3387,10 +3613,12 @@ var IconButtonComponent = React14.forwardRef(
           onClick: handleClick,
           onPointerDown,
           onKeyDown: handleKeyDown,
-          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          style: __spreadProps(__spreadValues({}, style), {
+            borderRadius: `${animateRadius}px`
+          }),
           className: containerClassName
         }, restProps), {
-          children: React14.cloneElement(child, { children: innerContent })
+          children: React16.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -3418,12 +3646,12 @@ var IconButtonComponent = React14.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React14.memo(IconButtonComponent);
-var SplitButtonContext = React14.createContext(null);
+var IconButton = React16.memo(IconButtonComponent);
+var SplitButtonContext = React16.createContext(null);
 function useSplitButtonContext() {
-  return React14.useContext(SplitButtonContext);
+  return React16.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React14.forwardRef(
+var SplitButtonLayoutComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -3440,10 +3668,10 @@ var SplitButtonLayoutComponent = React14.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React14.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React16.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React14.useMemo(
+    const contextValue = React16.useMemo(
       () => ({
         size,
         variant
@@ -3469,8 +3697,8 @@ var SplitButtonLayoutComponent = React14.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React14.memo(SplitButtonLayoutComponent);
-var StateLayer = React14.forwardRef(
+var SplitButtonLayout = React16.memo(SplitButtonLayoutComponent);
+var StateLayer = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
     let opacity = 0;
@@ -3722,7 +3950,7 @@ var splitButtonVariants = cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React14.forwardRef(
+var SplitButtonLeadingComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3761,9 +3989,9 @@ var SplitButtonLeadingComponent = React14.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] = React14.useState(false);
-    const [isFocused, setIsFocused] = React14.useState(false);
-    const [isPressed, setIsPressed] = React14.useState(false);
+    const [isHovered, setIsHovered] = React16.useState(false);
+    const [isFocused, setIsFocused] = React16.useState(false);
+    const [isPressed, setIsPressed] = React16.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";
@@ -3775,7 +4003,7 @@ var SplitButtonLeadingComponent = React14.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 = React14.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -3785,7 +4013,7 @@ var SplitButtonLeadingComponent = React14.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React14.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3793,19 +4021,19 @@ var SplitButtonLeadingComponent = React14.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3813,21 +4041,21 @@ var SplitButtonLeadingComponent = React14.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -3835,7 +4063,7 @@ var SplitButtonLeadingComponent = React14.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    const labelContent = asChild ? React14.Children.only(children).props.children : children;
+    const labelContent = asChild ? React16.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(
@@ -3892,8 +4120,8 @@ var SplitButtonLeadingComponent = React14.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React14.cloneElement(
-          React14.Children.only(children),
+        children: React16.cloneElement(
+          React16.Children.only(children),
           { children: innerContent }
         )
       })
@@ -3926,16 +4154,16 @@ var SplitButtonLeadingComponent = React14.forwardRef(
   }
 );
 SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
-var SplitButtonLeading = React14.memo(SplitButtonLeadingComponent);
-var FilledSplitButtonLeading = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonLeading = React16.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonLeading.displayName = "FilledSplitButtonLeading";
-var TonalSplitButtonLeading = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonLeading = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonLeading.displayName = "TonalSplitButtonLeading";
-var ElevatedSplitButtonLeading = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonLeading = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonLeading.displayName = "ElevatedSplitButtonLeading";
-var OutlinedSplitButtonLeading = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonLeading = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
-var SplitButtonTrailingComponent = React14.forwardRef(
+var SplitButtonTrailingComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3978,9 +4206,9 @@ var SplitButtonTrailingComponent = React14.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] = React14.useState(false);
-    const [isFocused, setIsFocused] = React14.useState(false);
-    const [isPressed, setIsPressed] = React14.useState(false);
+    const [isHovered, setIsHovered] = React16.useState(false);
+    const [isFocused, setIsFocused] = React16.useState(false);
+    const [isPressed, setIsPressed] = React16.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const prefersReducedMotion = useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -3992,12 +4220,12 @@ var SplitButtonTrailingComponent = React14.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 = React14.useCallback(() => {
+    const handleToggle = React16.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React14.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4005,19 +4233,19 @@ var SplitButtonTrailingComponent = React14.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4025,21 +4253,21 @@ var SplitButtonTrailingComponent = React14.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4108,8 +4336,8 @@ var SplitButtonTrailingComponent = React14.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React14.cloneElement(
-          React14.Children.only(children),
+        children: React16.cloneElement(
+          React16.Children.only(children),
           { children: innerContent }
         )
       })
@@ -4144,16 +4372,16 @@ var SplitButtonTrailingComponent = React14.forwardRef(
   }
 );
 SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
-var SplitButtonTrailing = React14.memo(SplitButtonTrailingComponent);
-var FilledSplitButtonTrailing = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonTrailing = React16.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailing.displayName = "FilledSplitButtonTrailing";
-var TonalSplitButtonTrailing = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailing = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailing.displayName = "TonalSplitButtonTrailing";
-var ElevatedSplitButtonTrailing = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailing = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailing.displayName = "ElevatedSplitButtonTrailing";
-var OutlinedSplitButtonTrailing = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailing = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
-var SplitButtonTrailingUncheckableComponent = React14.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4190,9 +4418,9 @@ var SplitButtonTrailingUncheckableComponent = React14.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] = React14.useState(false);
-    const [isFocused, setIsFocused] = React14.useState(false);
-    const [isPressed, setIsPressed] = React14.useState(false);
+    const [isHovered, setIsHovered] = React16.useState(false);
+    const [isFocused, setIsFocused] = React16.useState(false);
+    const [isPressed, setIsPressed] = React16.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
@@ -4203,7 +4431,7 @@ var SplitButtonTrailingUncheckableComponent = React14.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 = React14.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4211,19 +4439,19 @@ var SplitButtonTrailingUncheckableComponent = React14.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4231,21 +4459,21 @@ var SplitButtonTrailingUncheckableComponent = React14.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4312,18 +4540,18 @@ var SplitButtonTrailingUncheckableComponent = React14.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React14.memo(
+var SplitButtonTrailingUncheckable = React16.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+var FilledSplitButtonTrailingUncheckable = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailingUncheckable.displayName = "FilledSplitButtonTrailingUncheckable";
-var TonalSplitButtonTrailingUncheckable = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailingUncheckable = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailingUncheckable.displayName = "TonalSplitButtonTrailingUncheckable";
-var ElevatedSplitButtonTrailingUncheckable = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailingUncheckable = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailingUncheckable.displayName = "ElevatedSplitButtonTrailingUncheckable";
-var OutlinedSplitButtonTrailingUncheckable = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailingUncheckable = React16.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailingUncheckable.displayName = "OutlinedSplitButtonTrailingUncheckable";
 
-export { BUTTON_COLOR_TOKENS, BUTTON_GROUP_TOKENS, BUTTON_SIZE_TOKENS, Button, ButtonGroup, ButtonGroupDefaults, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, IconButton, LEADING_ICON_SIZE_FOR_SIZE, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, SPLIT_BUTTON_CHEVRON_SPRING, SPLIT_BUTTON_RADIUS_SPRING, SPLIT_BUTTON_TOKENS, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, splitButtonVariants };
+export { BUTTON_COLOR_TOKENS, BUTTON_GROUP_TOKENS, BUTTON_SIZE_TOKENS, Button, ButtonDistribute, ButtonGroup, ButtonGroupDefaults, DEFAULT_EXPAND_RATIO, DEFAULT_FIXED_SIZE, DEFAULT_GAP, DISTRIBUTE_DURATION_MS, DISTRIBUTE_EASING_BEZIER, DISTRIBUTE_RADIUS_TOKENS, DISTRIBUTE_SPRING_TRANSITION, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, IconButton, LEADING_ICON_SIZE_FOR_SIZE, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, SPLIT_BUTTON_CHEVRON_SPRING, SPLIT_BUTTON_RADIUS_SPRING, SPLIT_BUTTON_TOKENS, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, splitButtonVariants };
 //# sourceMappingURL=buttons.mjs.map
 //# sourceMappingURL=buttons.mjs.map