@bug-on/m3-expressive 1.2.1 → 1.2.2

package/dist/buttons.js

@@ -3,7 +3,7 @@
 
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('motion/react');
-var React14 = require('react');
+var React16 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
+var React16__namespace = /*#__PURE__*/_interopNamespace(React16);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -109,11 +109,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__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React16__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React14__namespace.useState(false);
-  React14__namespace.useEffect(() => {
+  const [ready, setReady] = React16__namespace.useState(false);
+  React16__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -158,7 +158,7 @@ var IndeterminateSvg = React14__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React14__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React16__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -183,7 +183,7 @@ var DeterminateSvg = React14__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React14__namespace.forwardRef(
+var LoadingIndicator = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -298,7 +298,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React14__namespace.forwardRef(
+var CircularProgress = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -336,15 +336,15 @@ var CircularProgress = React14__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React14__namespace.useMemo(
+    const effectiveAmplitude = React16__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React14__namespace.useMemo(
+    const effectiveWavelength = React16__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React14__namespace.useMemo(
+    const wavyActivePath = React16__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -353,8 +353,8 @@ var CircularProgress = React14__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React14__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React14__namespace.useMemo(
+    const circumference = React16__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React16__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -543,9 +543,9 @@ var CircularProgress = React14__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React14__namespace.useState(0);
-  const observerRef = React14__namespace.useRef(null);
-  const ref = React14__namespace.useCallback((node) => {
+  const [width, setWidth] = React16__namespace.useState(0);
+  const observerRef = React16__namespace.useRef(null);
+  const ref = React16__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -559,7 +559,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React14__namespace.useEffect(() => {
+  React16__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -569,7 +569,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React14__namespace.useCallback(
+  return React16__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -583,7 +583,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React14__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React16__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -659,7 +659,7 @@ var FlatLinearTrack = React14__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React14__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -678,13 +678,13 @@ var WavyLinearTrack = React14__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React14__namespace.useId();
+  const titleId = React16__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React14__namespace.useRef(null);
-  const trackPathRef = React14__namespace.useRef(null);
+  const activePathRef = React16__namespace.useRef(null);
+  const trackPathRef = React16__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React14__namespace.useEffect(() => {
+  React16__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -855,7 +855,7 @@ var WavyLinearTrack = React14__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React14__namespace.forwardRef(
+var LinearProgress = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -896,10 +896,10 @@ var LinearProgress = React14__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React14__namespace.useRef(null);
+    const containerRef = React16__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React14__namespace.useState(false);
-    React14__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React16__namespace.useState(false);
+    React16__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -907,16 +907,16 @@ var LinearProgress = React14__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React14__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React14__namespace.useMemo(
+    const effectiveAmplitude = React16__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React16__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React14__namespace.useMemo(
+    const shouldShowStop = React16__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React14__namespace.useMemo(
+    const stopSize = React16__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -989,14 +989,14 @@ var LinearProgress = React14__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React14__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React16__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React14__namespace.memo(function RippleItem2({
+var RippleItem = React16__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1040,14 +1040,17 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React14__namespace.useState([]);
-  const onPointerDown = React14__namespace.useCallback(
+  const [ripples, setRipples] = React16__namespace.useState([]);
+  const onPointerDown = React16__namespace.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 }
@@ -1055,7 +1058,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React14__namespace.useCallback((id) => {
+  const removeRipple = React16__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1311,7 +1314,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React14__namespace.forwardRef(
+var ButtonComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1323,6 +1326,7 @@ var ButtonComponent = React14__namespace.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -1344,6 +1348,7 @@ var ButtonComponent = React14__namespace.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -1373,9 +1378,9 @@ var ButtonComponent = React14__namespace.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React14__namespace.useMemo(() => {
+    const labelText = React16__namespace.useMemo(() => {
       if (asChild) {
-        const child = React14__namespace.Children.only(children);
+        const child = React16__namespace.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1383,8 +1388,8 @@ var ButtonComponent = React14__namespace.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = react.useMotionValue(animateRadius);
-    const asChildRef = React14__namespace.useRef(null);
-    const mergedRef = React14__namespace.useCallback(
+    const asChildRef = React16__namespace.useRef(null);
+    const mergedRef = React16__namespace.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -1393,14 +1398,14 @@ var ButtonComponent = React14__namespace.forwardRef(
       },
       [ref]
     );
-    React14__namespace.useEffect(() => {
+    React16__namespace.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React14__namespace.useEffect(() => {
+    React16__namespace.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1408,14 +1413,14 @@ var ButtonComponent = React14__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14__namespace.useCallback(
+    const handleClick = React16__namespace.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14__namespace.useCallback(
+    const handleKeyDown = React16__namespace.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1443,10 +1448,11 @@ var ButtonComponent = React14__namespace.forwardRef(
       layout: BUTTON_SHAPE_MORPH_SPRING,
       default: SPRING_TRANSITION
     };
+    const activeIcon = isSelected && selectedIcon ? selectedIcon : icon;
     const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
       /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "popLayout", children: (loading || icon && iconPosition === "leading") && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "wait", children: (loading || activeIcon && iconPosition === "leading") && /* @__PURE__ */ jsxRuntime.jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
@@ -1468,8 +1474,9 @@ var ButtonComponent = React14__namespace.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsxRuntime.jsx(
         react.m.span,
@@ -1480,27 +1487,28 @@ var ButtonComponent = React14__namespace.forwardRef(
           children: labelText
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "popLayout", children: icon && iconPosition === "trailing" && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "wait", children: !loading && activeIcon && iconPosition === "trailing" && /* @__PURE__ */ jsxRuntime.jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
           ariaHidden: true,
           transition: sharedTransition,
-          children: icon
-        }
+          children: activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) })
     ] });
-    const handleAsChildPointerDown = React14__namespace.useCallback(
+    const handleAsChildPointerDown = React16__namespace.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React14__namespace.useCallback(() => {
+    const handleAsChildPointerUp = React16__namespace.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React14__namespace.useCallback(
+    const handlePointerDown = React16__namespace.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1510,7 +1518,7 @@ var ButtonComponent = React14__namespace.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React14__namespace.Children.only(children);
+      const child = React16__namespace.Children.only(children);
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactSlot.Slot,
         __spreadProps(__spreadValues({
@@ -1527,7 +1535,7 @@ var ButtonComponent = React14__namespace.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React14__namespace.cloneElement(child, { children: innerContent })
+          children: React16__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -1556,13 +1564,343 @@ var ButtonComponent = React14__namespace.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React14__namespace.memo(ButtonComponent);
+var Button = React16__namespace.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__namespace.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__namespace.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__namespace.useState(null);
+    const [pressedIndex, setPressedIndex] = React16__namespace.useState(null);
+    const childrenArray = React16__namespace.useMemo(
+      () => React16__namespace.Children.toArray(children).filter(React16__namespace.isValidElement),
+      [children]
+    );
+    const count = childrenArray.length;
+    const isTextItem = React16__namespace.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__namespace.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__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.jsx(
+            react.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__namespace.forwardRef(
+var IconComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1628,7 +1966,7 @@ var IconComponent = React14__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React14__namespace.memo(IconComponent);
+var Icon = React16__namespace.memo(IconComponent);
 var BUTTON_GROUP_TOKENS = {
   standard: {
     betweenSpace: 12,
@@ -1684,7 +2022,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 }),
@@ -1713,8 +2050,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__ */ jsxRuntime.jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
@@ -1730,13 +2065,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__namespace.memo(function AnimatedCheckLabel2({
+var AnimatedCheckLabel = React16__namespace.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -1812,43 +2141,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;
@@ -1859,9 +2154,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;
@@ -1888,19 +2180,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__namespace.forwardRef(
+var ButtonGroupComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1908,10 +2197,7 @@ var ButtonGroupComponent = React14__namespace.forwardRef(
       orientation = "horizontal",
       fullWidth = false,
       size,
-      morphingWidth = true,
-      activeMorphing = false,
       itemClassName,
-      expandedRatio = ButtonGroupDefaults.expandedRatio,
       showCheck = false,
       children,
       iconBehavior,
@@ -1923,99 +2209,26 @@ var ButtonGroupComponent = React14__namespace.forwardRef(
       "orientation",
       "fullWidth",
       "size",
-      "morphingWidth",
-      "activeMorphing",
       "itemClassName",
-      "expandedRatio",
       "showCheck",
       "children",
       "iconBehavior",
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React14__namespace.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React14__namespace.useState(
-      null
-    );
-    const rootRef = React14__namespace.useRef(null);
-    const setRootRef = React14__namespace.useCallback(
-      (node) => {
-        rootRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    );
-    const childrenArray = React14__namespace.useMemo(
-      () => React14__namespace.Children.toArray(children).filter(React14__namespace.isValidElement),
+    const [pressedIndex, setPressedIndex] = React16__namespace.useState(null);
+    const childrenArray = React16__namespace.useMemo(
+      () => React16__namespace.Children.toArray(children).filter(React16__namespace.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const groupSizeSignature = React14__namespace.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__namespace.useRef(groupSizeSignature);
-    React14__namespace.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__namespace.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__namespace.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__namespace.useMemo(
-      () => childrenArray.some(
-        (child) => child.props.selected
-      ),
-      [childrenArray]
-    );
-    const handlePointerLeaveAndUp = React14__namespace.useCallback(() => {
+    const handlePointerLeaveAndUp = React16__namespace.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsxRuntime.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",
@@ -2024,18 +2237,17 @@ var ButtonGroupComponent = React14__namespace.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,
@@ -2052,25 +2264,6 @@ var ButtonGroupComponent = React14__namespace.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(
@@ -2079,13 +2272,12 @@ var ButtonGroupComponent = React14__namespace.forwardRef(
             isPressed,
             itemSize,
             shapes,
-            flex,
             existingAnimate,
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const clonedElement = React14__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
-            key: (_b2 = element.key) != null ? _b2 : index,
+          const clonedElement = React16__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+            key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
             icon: explicitIcon,
@@ -2099,9 +2291,9 @@ var ButtonGroupComponent = React14__namespace.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);
@@ -2114,7 +2306,7 @@ var ButtonGroupComponent = React14__namespace.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React14__namespace.memo(ButtonGroupComponent);
+var ButtonGroup = React16__namespace.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -2169,9 +2361,9 @@ var COLOR_CLASSES = {
   }
 };
 function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
-  const [collapsed, setCollapsed] = React14__namespace.useState(false);
-  const lastScrollY = React14__namespace.useRef(0);
-  React14__namespace.useEffect(() => {
+  const [collapsed, setCollapsed] = React16__namespace.useState(false);
+  const lastScrollY = React16__namespace.useRef(0);
+  React16__namespace.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
     lastScrollY.current = window.scrollY;
     const handleScroll = () => {
@@ -2194,7 +2386,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React14__namespace.forwardRef(
+var ExtendedFABComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2240,10 +2432,10 @@ var ExtendedFABComponent = React14__namespace.forwardRef(
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
-    const localRef = React14__namespace.useRef(null);
-    React14__namespace.useImperativeHandle(ref, () => localRef.current);
-    const [dir, setDir] = React14__namespace.useState("ltr");
-    React14__namespace.useEffect(() => {
+    const localRef = React16__namespace.useRef(null);
+    React16__namespace.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React16__namespace.useState("ltr");
+    React16__namespace.useEffect(() => {
       var _a3;
       if (!localRef.current) return;
       const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
@@ -2264,7 +2456,7 @@ var ExtendedFABComponent = React14__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14__namespace.useCallback(
+    const handleClick = React16__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2274,7 +2466,7 @@ var ExtendedFABComponent = React14__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14__namespace.useCallback(
+    const handleKeyDown = React16__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2382,8 +2574,8 @@ var ExtendedFABComponent = React14__namespace.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React14__namespace.cloneElement(
-          React14__namespace.Children.only(children),
+        children: React16__namespace.cloneElement(
+          React16__namespace.Children.only(children),
           { children: innerContent }
         )
       })
@@ -2427,7 +2619,7 @@ var ExtendedFABComponent = React14__namespace.forwardRef(
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
-var ExtendedFAB = React14__namespace.memo(ExtendedFABComponent);
+var ExtendedFAB = React16__namespace.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -2498,7 +2690,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React14__namespace.forwardRef(
+var FABComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2545,7 +2737,7 @@ var FABComponent = React14__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React14__namespace.useCallback(
+    const handleClick = React16__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2555,7 +2747,7 @@ var FABComponent = React14__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14__namespace.useCallback(
+    const handleKeyDown = React16__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2566,7 +2758,7 @@ var FABComponent = React14__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    const labelContent = asChild ? React14__namespace.Children.only(children).props.children : children;
+    const labelContent = asChild ? React16__namespace.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
       /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
@@ -2654,8 +2846,8 @@ var FABComponent = React14__namespace.forwardRef(
         }),
         className: containerClassName
       }, restProps), {
-        children: React14__namespace.cloneElement(
-          React14__namespace.Children.only(children),
+        children: React16__namespace.cloneElement(
+          React16__namespace.Children.only(children),
           { children: innerContent }
         )
       })
@@ -2692,7 +2884,7 @@ var FABComponent = React14__namespace.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React14__namespace.memo(FABComponent);
+var FAB = React16__namespace.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -2800,7 +2992,7 @@ function CloseIcon() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {});
 }
-var ToggleFABComponent = React14__namespace.forwardRef(
+var ToggleFABComponent = React16__namespace.forwardRef(
   ({
     expanded,
     onToggle,
@@ -2818,7 +3010,7 @@ var ToggleFABComponent = React14__namespace.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
-    React14__namespace.useEffect(() => {
+    React16__namespace.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = react.useTransform(
@@ -2826,12 +3018,12 @@ var ToggleFABComponent = React14__namespace.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React14__namespace.useState(expanded ? 1 : 0);
-    React14__namespace.useEffect(() => {
+    const [iconProgress, setIconProgress] = React16__namespace.useState(expanded ? 1 : 0);
+    React16__namespace.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React14__namespace.useCallback(() => {
+    const handleClick = React16__namespace.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2880,7 +3072,7 @@ var ToggleFABComponent = React14__namespace.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React14__namespace.memo(ToggleFABComponent);
+var ToggleFAB = React16__namespace.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -2895,7 +3087,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__namespace.useCallback(
+  const handleClick = React16__namespace.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -2905,7 +3097,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React14__namespace.useCallback(
+  const handleKeyDown = React16__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2947,7 +3139,7 @@ function FABMenuItem({
     borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
   };
   if (asChild) {
-    const child = React14__namespace.Children.only(children);
+    const child = React16__namespace.Children.only(children);
     return /* @__PURE__ */ jsxRuntime.jsx(react.m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactSlot.Slot,
       {
@@ -2959,7 +3151,7 @@ function FABMenuItem({
         onPointerDown,
         onKeyDown: handleKeyDown,
         className: containerClassName,
-        children: React14__namespace.cloneElement(child, { children: innerContent })
+        children: React16__namespace.cloneElement(child, { children: innerContent })
       }
     ) });
   }
@@ -2992,13 +3184,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React14__namespace.useId();
-  const menuId = React14__namespace.useId();
-  const toggleRef = React14__namespace.useRef(null);
-  const itemRefs = React14__namespace.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React14__namespace.useState(-1);
-  const reversedItems = React14__namespace.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React14__namespace.useCallback((index) => {
+  const fabId = React16__namespace.useId();
+  const menuId = React16__namespace.useId();
+  const toggleRef = React16__namespace.useRef(null);
+  const itemRefs = React16__namespace.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React16__namespace.useState(-1);
+  const reversedItems = React16__namespace.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React16__namespace.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -3007,8 +3199,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React14__namespace.useRef(false);
-  React14__namespace.useEffect(() => {
+  const wasExpandedRef = React16__namespace.useRef(false);
+  React16__namespace.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -3023,7 +3215,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React14__namespace.useCallback(
+  const handleMenuKeyDown = React16__namespace.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -3147,12 +3339,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 },
@@ -3245,7 +3464,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React14__namespace.forwardRef(
+var IconButtonComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3253,8 +3472,10 @@ var IconButtonComponent = React14__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
@@ -3269,8 +3490,10 @@ var IconButtonComponent = React14__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -3280,21 +3503,21 @@ var IconButtonComponent = React14__namespace.forwardRef(
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React14__namespace.useMemo(
+    const resolvedColorClass = React16__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React14__namespace.useMemo(
+    const outlineWidthClass = React16__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React14__namespace.useMemo(
+    const disabledBgClass = React16__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -3311,11 +3534,13 @@ var IconButtonComponent = React14__namespace.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__namespace.useCallback(
+    const handleClick = React16__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -3325,7 +3550,7 @@ var IconButtonComponent = React14__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React14__namespace.useCallback(
+    const handleKeyDown = React16__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -3373,7 +3598,7 @@ var IconButtonComponent = React14__namespace.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: {
@@ -3381,9 +3606,9 @@ var IconButtonComponent = React14__namespace.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: asChild ? React14__namespace.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React16__namespace.Children.only(children).props.children : children
         }),
-        "content"
+        isSelected && selectedIcon ? "selected-content" : "content"
       ) })
     ] });
     const containerClassName = cn(
@@ -3392,12 +3617,13 @@ var IconButtonComponent = React14__namespace.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__namespace.Children.only(children);
+      const child = React16__namespace.Children.only(children);
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactSlot.Slot,
         __spreadProps(__spreadValues({
@@ -3409,10 +3635,12 @@ var IconButtonComponent = React14__namespace.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__namespace.cloneElement(child, { children: innerContent })
+          children: React16__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -3440,12 +3668,12 @@ var IconButtonComponent = React14__namespace.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React14__namespace.memo(IconButtonComponent);
-var SplitButtonContext = React14__namespace.createContext(null);
+var IconButton = React16__namespace.memo(IconButtonComponent);
+var SplitButtonContext = React16__namespace.createContext(null);
 function useSplitButtonContext() {
-  return React14__namespace.useContext(SplitButtonContext);
+  return React16__namespace.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React14__namespace.forwardRef(
+var SplitButtonLayoutComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -3462,10 +3690,10 @@ var SplitButtonLayoutComponent = React14__namespace.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React14__namespace.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React16__namespace.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React14__namespace.useMemo(
+    const contextValue = React16__namespace.useMemo(
       () => ({
         size,
         variant
@@ -3491,8 +3719,8 @@ var SplitButtonLayoutComponent = React14__namespace.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React14__namespace.memo(SplitButtonLayoutComponent);
-var StateLayer = React14__namespace.forwardRef(
+var SplitButtonLayout = React16__namespace.memo(SplitButtonLayoutComponent);
+var StateLayer = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
     let opacity = 0;
@@ -3744,7 +3972,7 @@ var splitButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React14__namespace.forwardRef(
+var SplitButtonLeadingComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3783,9 +4011,9 @@ var SplitButtonLeadingComponent = React14__namespace.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__namespace.useState(false);
-    const [isFocused, setIsFocused] = React14__namespace.useState(false);
-    const [isPressed, setIsPressed] = React14__namespace.useState(false);
+    const [isHovered, setIsHovered] = React16__namespace.useState(false);
+    const [isFocused, setIsFocused] = React16__namespace.useState(false);
+    const [isPressed, setIsPressed] = React16__namespace.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";
@@ -3797,7 +4025,7 @@ var SplitButtonLeadingComponent = React14__namespace.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__namespace.useCallback(
+    const handleClick = React16__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -3807,7 +4035,7 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React14__namespace.useCallback(
+    const handlePointerDown = React16__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3815,19 +4043,19 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14__namespace.useCallback(
+    const handlePointerUp = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14__namespace.useCallback(() => {
+    const handlePointerEnter = React16__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14__namespace.useCallback(
+    const handlePointerLeave = React16__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3835,21 +4063,21 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14__namespace.useCallback(
+    const handlePointerCancel = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14__namespace.useCallback(
+    const handleFocus = React16__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14__namespace.useCallback(
+    const handleBlur = React16__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -3857,7 +4085,7 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    const labelContent = asChild ? React14__namespace.Children.only(children).props.children : children;
+    const labelContent = asChild ? React16__namespace.Children.only(children).props.children : children;
     const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3914,8 +4142,8 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React14__namespace.cloneElement(
-          React14__namespace.Children.only(children),
+        children: React16__namespace.cloneElement(
+          React16__namespace.Children.only(children),
           { children: innerContent }
         )
       })
@@ -3948,16 +4176,16 @@ var SplitButtonLeadingComponent = React14__namespace.forwardRef(
   }
 );
 SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
-var SplitButtonLeading = React14__namespace.memo(SplitButtonLeadingComponent);
-var FilledSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonLeading = React16__namespace.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonLeading.displayName = "FilledSplitButtonLeading";
-var TonalSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonLeading = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonLeading.displayName = "TonalSplitButtonLeading";
-var ElevatedSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonLeading = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonLeading.displayName = "ElevatedSplitButtonLeading";
-var OutlinedSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonLeading = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
-var SplitButtonTrailingComponent = React14__namespace.forwardRef(
+var SplitButtonTrailingComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4000,9 +4228,9 @@ var SplitButtonTrailingComponent = React14__namespace.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__namespace.useState(false);
-    const [isFocused, setIsFocused] = React14__namespace.useState(false);
-    const [isPressed, setIsPressed] = React14__namespace.useState(false);
+    const [isHovered, setIsHovered] = React16__namespace.useState(false);
+    const [isFocused, setIsFocused] = React16__namespace.useState(false);
+    const [isPressed, setIsPressed] = React16__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const prefersReducedMotion = react.useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -4014,12 +4242,12 @@ var SplitButtonTrailingComponent = React14__namespace.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__namespace.useCallback(() => {
+    const handleToggle = React16__namespace.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React14__namespace.useCallback(
+    const handlePointerDown = React16__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4027,19 +4255,19 @@ var SplitButtonTrailingComponent = React14__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14__namespace.useCallback(
+    const handlePointerUp = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14__namespace.useCallback(() => {
+    const handlePointerEnter = React16__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14__namespace.useCallback(
+    const handlePointerLeave = React16__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4047,21 +4275,21 @@ var SplitButtonTrailingComponent = React14__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14__namespace.useCallback(
+    const handlePointerCancel = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14__namespace.useCallback(
+    const handleFocus = React16__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14__namespace.useCallback(
+    const handleBlur = React16__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4130,8 +4358,8 @@ var SplitButtonTrailingComponent = React14__namespace.forwardRef(
         style: mergedStyle,
         className: containerClassName
       }, restProps), {
-        children: React14__namespace.cloneElement(
-          React14__namespace.Children.only(children),
+        children: React16__namespace.cloneElement(
+          React16__namespace.Children.only(children),
           { children: innerContent }
         )
       })
@@ -4166,16 +4394,16 @@ var SplitButtonTrailingComponent = React14__namespace.forwardRef(
   }
 );
 SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
-var SplitButtonTrailing = React14__namespace.memo(SplitButtonTrailingComponent);
-var FilledSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonTrailing = React16__namespace.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailing.displayName = "FilledSplitButtonTrailing";
-var TonalSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailing = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailing.displayName = "TonalSplitButtonTrailing";
-var ElevatedSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailing = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailing.displayName = "ElevatedSplitButtonTrailing";
-var OutlinedSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailing = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
-var SplitButtonTrailingUncheckableComponent = React14__namespace.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4212,9 +4440,9 @@ var SplitButtonTrailingUncheckableComponent = React14__namespace.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__namespace.useState(false);
-    const [isFocused, setIsFocused] = React14__namespace.useState(false);
-    const [isPressed, setIsPressed] = React14__namespace.useState(false);
+    const [isHovered, setIsHovered] = React16__namespace.useState(false);
+    const [isFocused, setIsFocused] = React16__namespace.useState(false);
+    const [isPressed, setIsPressed] = React16__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
@@ -4225,7 +4453,7 @@ var SplitButtonTrailingUncheckableComponent = React14__namespace.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__namespace.useCallback(
+    const handlePointerDown = React16__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4233,19 +4461,19 @@ var SplitButtonTrailingUncheckableComponent = React14__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React14__namespace.useCallback(
+    const handlePointerUp = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React14__namespace.useCallback(() => {
+    const handlePointerEnter = React16__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React14__namespace.useCallback(
+    const handlePointerLeave = React16__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4253,21 +4481,21 @@ var SplitButtonTrailingUncheckableComponent = React14__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React14__namespace.useCallback(
+    const handlePointerCancel = React16__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React14__namespace.useCallback(
+    const handleFocus = React16__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React14__namespace.useCallback(
+    const handleBlur = React16__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4334,24 +4562,32 @@ var SplitButtonTrailingUncheckableComponent = React14__namespace.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React14__namespace.memo(
+var SplitButtonTrailingUncheckable = React16__namespace.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+var FilledSplitButtonTrailingUncheckable = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailingUncheckable.displayName = "FilledSplitButtonTrailingUncheckable";
-var TonalSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailingUncheckable = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailingUncheckable.displayName = "TonalSplitButtonTrailingUncheckable";
-var ElevatedSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailingUncheckable = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailingUncheckable.displayName = "ElevatedSplitButtonTrailingUncheckable";
-var OutlinedSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailingUncheckable = React16__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailingUncheckable.displayName = "OutlinedSplitButtonTrailingUncheckable";
 
 exports.BUTTON_COLOR_TOKENS = BUTTON_COLOR_TOKENS;
 exports.BUTTON_GROUP_TOKENS = BUTTON_GROUP_TOKENS;
 exports.BUTTON_SIZE_TOKENS = BUTTON_SIZE_TOKENS;
 exports.Button = Button;
+exports.ButtonDistribute = ButtonDistribute;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupDefaults = ButtonGroupDefaults;
+exports.DEFAULT_EXPAND_RATIO = DEFAULT_EXPAND_RATIO;
+exports.DEFAULT_FIXED_SIZE = DEFAULT_FIXED_SIZE;
+exports.DEFAULT_GAP = DEFAULT_GAP;
+exports.DISTRIBUTE_DURATION_MS = DISTRIBUTE_DURATION_MS;
+exports.DISTRIBUTE_EASING_BEZIER = DISTRIBUTE_EASING_BEZIER;
+exports.DISTRIBUTE_RADIUS_TOKENS = DISTRIBUTE_RADIUS_TOKENS;
+exports.DISTRIBUTE_SPRING_TRANSITION = DISTRIBUTE_SPRING_TRANSITION;
 exports.ElevatedSplitButtonLeading = ElevatedSplitButtonLeading;
 exports.ElevatedSplitButtonTrailing = ElevatedSplitButtonTrailing;
 exports.ElevatedSplitButtonTrailingUncheckable = ElevatedSplitButtonTrailingUncheckable;