@bug-on/m3-expressive 1.2.0 → 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 React11 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 = React11.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React16.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React11.useState(false);
-  React11.useEffect(() => {
+  const [ready, setReady] = React16.useState(false);
+  React16.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -136,7 +136,7 @@ var IndeterminateSvg = React11.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React11.memo(function DeterminateSvg2({
+var DeterminateSvg = React16.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -161,7 +161,7 @@ var DeterminateSvg = React11.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React11.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 = React11.forwardRef(
+var CircularProgress = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -314,15 +314,15 @@ var CircularProgress = React11.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React11.useMemo(
+    const effectiveAmplitude = React16.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React11.useMemo(
+    const effectiveWavelength = React16.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React11.useMemo(
+    const wavyActivePath = React16.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -331,8 +331,8 @@ var CircularProgress = React11.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React11.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React11.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 = React11.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React11.useState(0);
-  const observerRef = React11.useRef(null);
-  const ref = React11.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;
     }
   }, []);
-  React11.useEffect(() => {
+  React16.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -547,7 +547,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React11.useCallback(
+  return React16.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -561,7 +561,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React11.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React16.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -637,7 +637,7 @@ var FlatLinearTrack = React11.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React11.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React16.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -656,13 +656,13 @@ var WavyLinearTrack = React11.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React11.useId();
+  const titleId = React16.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React11.useRef(null);
-  const trackPathRef = React11.useRef(null);
+  const activePathRef = React16.useRef(null);
+  const trackPathRef = React16.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React11.useEffect(() => {
+  React16.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -833,7 +833,7 @@ var WavyLinearTrack = React11.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React11.forwardRef(
+var LinearProgress = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -874,10 +874,10 @@ var LinearProgress = React11.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React11.useRef(null);
+    const containerRef = React16.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React11.useState(false);
-    React11.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 = React11.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React11.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React11.useMemo(
+    const effectiveAmplitude = React16.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React16.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React11.useMemo(
+    const shouldShowStop = React16.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React11.useMemo(
+    const stopSize = React16.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -967,14 +967,14 @@ var LinearProgress = React11.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React11.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 = React11.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] = React11.useState([]);
-  const onPointerDown = React11.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 = React11.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 = React11.forwardRef(
+var ButtonComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1301,6 +1304,7 @@ var ButtonComponent = React11.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -1322,6 +1326,7 @@ var ButtonComponent = React11.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -1351,9 +1356,9 @@ var ButtonComponent = React11.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React11.useMemo(() => {
+    const labelText = React16.useMemo(() => {
       if (asChild) {
-        const child = React11.Children.only(children);
+        const child = React16.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1361,8 +1366,8 @@ var ButtonComponent = React11.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = useMotionValue(animateRadius);
-    const asChildRef = React11.useRef(null);
-    const mergedRef = React11.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 = React11.forwardRef(
       },
       [ref]
     );
-    React11.useEffect(() => {
+    React16.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React11.useEffect(() => {
+    React16.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1386,14 +1391,14 @@ var ButtonComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1421,10 +1426,11 @@ var ButtonComponent = React11.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 = React11.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsx(
         m.span,
@@ -1458,27 +1465,28 @@ var ButtonComponent = React11.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 = React11.useCallback(
+    const handleAsChildPointerDown = React16.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React11.useCallback(() => {
+    const handleAsChildPointerUp = React16.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1488,7 +1496,7 @@ var ButtonComponent = React11.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React11.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 = React11.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React11.cloneElement(child, { children: innerContent })
+          children: React16.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -1534,13 +1542,343 @@ var ButtonComponent = React11.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React11.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 = React11.forwardRef(
+var IconComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1606,7 +1944,7 @@ var IconComponent = React11.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React11.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,19 +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 NAVBAR_EXPRESSIVE_SPRING = {
-  type: "spring",
-  stiffness: 430,
-  damping: 38,
-  mass: 0.8
-};
-var AnimatedCheckLabel = React11.memo(function AnimatedCheckLabel2({
+var AnimatedCheckLabel = React16.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -1757,23 +2080,6 @@ var AnimatedCheckLabel = React11.memo(function AnimatedCheckLabel2({
     }
   );
 });
-var AnimatedNavbarLabel = React11.memo(function AnimatedNavbarLabel2({
-  show,
-  children
-}) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: show && /* @__PURE__ */ jsx(
-    m.span,
-    {
-      initial: { width: 0, opacity: 0, scale: 0.8 },
-      animate: { width: "auto", opacity: 1, scale: 1 },
-      exit: { width: 0, opacity: 0, scale: 0.8 },
-      transition: NAVBAR_EXPRESSIVE_SPRING,
-      className: "overflow-hidden whitespace-nowrap text-sm font-semibold tracking-[0.01em] ml-1.5",
-      children
-    },
-    "navbar-label"
-  ) });
-});
 function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize) {
   const defaults = ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
   if (variant !== "connected") return defaults;
@@ -1794,7 +2100,7 @@ function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize)
   }
   return defaults;
 }
-function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck, iconBehavior, labelBehavior) {
+function resolveIconAndLabel(element, isSelected, itemSize, showCheck, iconBehavior, labelBehavior) {
   let icon = element.props.icon;
   let label = element.props.children;
   const animateCheckInLabel = showCheck && iconBehavior !== "none" && iconBehavior !== "selected" && label !== void 0;
@@ -1810,51 +2116,12 @@ function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck,
   }
   if (animateCheckInLabel && label !== void 0) {
     label = /* @__PURE__ */ jsx(AnimatedCheckLabel, { selected: isSelected, size: itemSize, children: label });
-  } else if (variant === "navbar" && label !== void 0) {
-    const showLabel = !labelBehavior || labelBehavior === "all" || labelBehavior === "selected" && isSelected;
-    label = /* @__PURE__ */ jsx(AnimatedNavbarLabel, { show: showLabel, children: label });
   }
   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 (variant !== "navbar") {
-    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;
@@ -1865,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;
@@ -1894,26 +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;
   }
-  if (variant === "navbar") {
-    props.layout = true;
-    props.transition = {
-      layout: WIDTH_MORPH_SPRING,
-      default: BUTTON_SHAPE_MORPH_SPRING
-    };
-  }
   return props;
 }
-var ButtonGroupComponent = React11.forwardRef(
+var ButtonGroupComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1921,10 +2175,7 @@ var ButtonGroupComponent = React11.forwardRef(
       orientation = "horizontal",
       fullWidth = false,
       size,
-      morphingWidth = true,
-      activeMorphing = false,
       itemClassName,
-      expandedRatio = ButtonGroupDefaults.expandedRatio,
       showCheck = false,
       children,
       iconBehavior,
@@ -1936,126 +2187,50 @@ var ButtonGroupComponent = React11.forwardRef(
       "orientation",
       "fullWidth",
       "size",
-      "morphingWidth",
-      "activeMorphing",
       "itemClassName",
-      "expandedRatio",
       "showCheck",
       "children",
       "iconBehavior",
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React11.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React11.useState(
-      null
-    );
-    const layoutIdGroup = React11.useId();
-    const rootRef = React11.useRef(null);
-    const setRootRef = React11.useCallback(
-      (node) => {
-        rootRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    );
-    const childrenArray = React11.useMemo(
-      () => React11.Children.toArray(children).filter(React11.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 = React11.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 = React11.useRef(groupSizeSignature);
-    React11.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;
-    React11.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 = React11.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 = React11.useMemo(
-      () => childrenArray.some(
-        (child) => child.props.selected
-      ),
-      [childrenArray]
-    );
-    const handlePointerLeaveAndUp = React11.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",
-          variant === "standard" ? "gap-3" : variant === "navbar" ? "gap-1.5 h-full" : "gap-0.5",
+          variant === "standard" ? "gap-3" : "gap-0.5",
           fullWidth && "w-full",
           fullWidth && orientation === "vertical" && "h-full",
           className
         ),
-        style: groupStyle,
+        style,
         onPointerLeave: handlePointerLeaveAndUp,
         onPointerUp: handlePointerLeaveAndUp
       }, props), {
         children: childrenArray.map((child, index) => {
-          var _a2, _b2, _c;
+          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,
             isSelected,
             itemSize,
-            variant,
             showCheck,
             iconBehavior,
             labelBehavior
@@ -2067,25 +2242,6 @@ var ButtonGroupComponent = React11.forwardRef(
             isLast,
             itemSize
           );
-          const flex = resolveFlexTargets(
-            variant,
-            orientation,
-            isSelected,
-            isPressed,
-            hasSelected,
-            count,
-            fullWidth,
-            activeMorphing,
-            morphingWidth,
-            expandedRatio,
-            basePx
-          );
-          const dynamicStyle = __spreadValues({}, element.props.style);
-          if (variant !== "navbar" && 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(
@@ -2094,19 +2250,12 @@ var ButtonGroupComponent = React11.forwardRef(
             isPressed,
             itemSize,
             shapes,
-            flex,
             existingAnimate,
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const navbarFlexStyle = flex.flexGrow !== void 0 ? {
-            flexBasis: fullWidth && labelBehavior !== "selected" ? 0 : "auto",
-            flexShrink: fullWidth ? 1 : 0,
-            flexGrow: flex.flexGrow,
-            minWidth: labelBehavior !== "selected" ? 0 : "fit-content"
-          } : {};
-          const clonedElement = React11.cloneElement(element, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__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,
@@ -2114,71 +2263,20 @@ var ButtonGroupComponent = React11.forwardRef(
           }, variant === "connected" && {
             colorStyle: element.props.colorStyle || "tonal",
             selectedColorStyle: element.props.selectedColorStyle || "filled"
-          }), variant === "navbar" && {
-            colorStyle: "text",
-            selectedColorStyle: "text",
-            className: cn(
-              element.props.className,
-              "w-full! h-full! px-3! min-w-0! relative z-20 flex items-center justify-center",
-              isSelected ? "text-m3-on-secondary-container! hover:bg-transparent! active:bg-transparent!" : "text-m3-on-surface-variant! hover:bg-transparent! active:bg-transparent!",
-              itemClassName
-            )
-          }), variant !== "navbar" && {
+          }), {
             className: cn(
               element.props.className,
               connectedClasses,
               "focus-visible:z-10 hover:z-10 relative min-w-0",
               orientation === "vertical" && "w-full",
+              fullWidth && "flex-1",
               itemClassName
-            )
-          }), {
-            style: variant === "navbar" ? __spreadProps(__spreadValues({}, dynamicStyle), { minWidth: 0 }) : dynamicStyle,
+            ),
             onPointerDown: (e) => {
               setPressedIndex(index);
               if (element.props.onPointerDown) element.props.onPointerDown(e);
             }
           }), motionProps));
-          if (variant === "navbar") {
-            return /* @__PURE__ */ jsxs(
-              m.div,
-              {
-                layout: true,
-                whileTap: { scale: 0.96 },
-                transition: NAVBAR_EXPRESSIVE_SPRING,
-                className: "group relative h-full flex items-center justify-center min-w-0",
-                style: navbarFlexStyle,
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "absolute inset-x-1 inset-y-0 m-auto flex items-center justify-center pointer-events-none",
-                      style: { zIndex: 1 },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "w-full h-[40px] bg-m3-on-surface-variant/8 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
-                            style: { borderRadius: PILL_BORDER_RADIUS }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(AnimatePresence, { children: isSelected && /* @__PURE__ */ jsx(
-                          m.div,
-                          {
-                            layoutId: `navbar-active-indicator-${layoutIdGroup}`,
-                            className: "absolute inset-0 m-auto w-full h-[40px] bg-m3-secondary-container",
-                            style: { borderRadius: PILL_BORDER_RADIUS },
-                            transition: NAVBAR_EXPRESSIVE_SPRING
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  clonedElement
-                ]
-              },
-              (_c = element.key) != null ? _c : index
-            );
-          }
           return clonedElement;
         })
       })
@@ -2186,7 +2284,7 @@ var ButtonGroupComponent = React11.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React11.memo(ButtonGroupComponent);
+var ButtonGroup = React16.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -2241,9 +2339,9 @@ var COLOR_CLASSES = {
   }
 };
 function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
-  const [collapsed, setCollapsed] = React11.useState(false);
-  const lastScrollY = React11.useRef(0);
-  React11.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 = () => {
@@ -2266,7 +2364,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React11.forwardRef(
+var ExtendedFABComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2283,6 +2381,8 @@ var ExtendedFABComponent = React11.forwardRef(
       scrollThreshold = 50,
       collapsed,
       onCollapsedChange,
+      asChild = false,
+      children,
       onClick,
       onKeyDown,
       layoutId,
@@ -2302,16 +2402,18 @@ var ExtendedFABComponent = React11.forwardRef(
       "scrollThreshold",
       "collapsed",
       "onCollapsedChange",
+      "asChild",
+      "children",
       "onClick",
       "onKeyDown",
       "layoutId",
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
-    const localRef = React11.useRef(null);
-    React11.useImperativeHandle(ref, () => localRef.current);
-    const [dir, setDir] = React11.useState("ltr");
-    React11.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");
@@ -2332,7 +2434,7 @@ var ExtendedFABComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2342,7 +2444,7 @@ var ExtendedFABComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2353,7 +2455,109 @@ var ExtendedFABComponent = React11.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && /* @__PURE__ */ jsxs(
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : "shadow-md",
+      (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
+      SIZE_TEXT[size],
+      isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
+        hasIcon ? "justify-start" : "justify-center",
+        SIZE_PADDING[size],
+        hasIcon && SIZE_GAP[size]
+      ),
+      dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      hasIcon && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          layout: "position",
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            sizeIcon.cls
+          ),
+          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              className: "flex items-center justify-center shrink-0 w-full h-full",
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  trackColor: "transparent",
+                  "aria-label": "Loading"
+                }
+              )
+            }),
+            "loading"
+          ) : icon && /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              "aria-hidden": "true",
+              className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              children: icon
+            }),
+            "icon"
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          layout: "position",
+          initial: { opacity: 0, width: 0 },
+          animate: { opacity: 1, width: "auto" },
+          exit: { opacity: 0, width: 0 },
+          transition: {
+            opacity: { duration: 0.15, ease: "linear" },
+            width: SPRING_TRANSITION
+          },
+          className: "overflow-hidden whitespace-nowrap",
+          children: label
+        },
+        "label"
+      ) })
+    ] });
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && (asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref: localRef,
+        "aria-label": ariaLabel || label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${radiusConfig.default}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React16.cloneElement(
+          React16.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref: localRef,
@@ -2385,95 +2589,15 @@ var ExtendedFABComponent = React11.forwardRef(
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : "shadow-md",
-          (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
-          SIZE_TEXT[size],
-          isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
-            hasIcon ? "justify-start" : "justify-center",
-            SIZE_PADDING[size],
-            hasIcon && SIZE_GAP[size]
-          ),
-          dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          hasIcon && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              layout: "position",
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                sizeIcon.cls
-              ),
-              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-                m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  className: "flex items-center justify-center shrink-0 w-full h-full",
-                  children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                    LoadingIndicator,
-                    {
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      "aria-label": "Loading"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    ProgressIndicator,
-                    {
-                      variant: "circular",
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      trackColor: "transparent",
-                      "aria-label": "Loading"
-                    }
-                  )
-                }),
-                "loading"
-              ) : icon && /* @__PURE__ */ jsx(
-                m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  "aria-hidden": "true",
-                  className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
-                  children: icon
-                }),
-                "icon"
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              layout: "position",
-              initial: { opacity: 0, width: 0 },
-              animate: { opacity: 1, width: "auto" },
-              exit: { opacity: 0, width: 0 },
-              transition: {
-                opacity: { duration: 0.15, ease: "linear" },
-                width: SPRING_TRANSITION
-              },
-              className: "overflow-hidden whitespace-nowrap",
-              children: label
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
-var ExtendedFAB = React11.memo(ExtendedFABComponent);
+var ExtendedFAB = React16.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -2544,7 +2668,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React11.forwardRef(
+var FABComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2558,6 +2682,7 @@ var FABComponent = React11.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       visible = true,
+      asChild = false,
       onClick,
       onKeyDown,
       "aria-label": ariaLabel
@@ -2573,6 +2698,7 @@ var FABComponent = React11.forwardRef(
       "loading",
       "loadingVariant",
       "visible",
+      "asChild",
       "onClick",
       "onKeyDown",
       "aria-label"
@@ -2589,7 +2715,7 @@ var FABComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2599,7 +2725,7 @@ var FABComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2610,19 +2736,116 @@ var FABComponent = React11.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsxs(
+    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 }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconClass
+          ),
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: iconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: iconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+            iconClass
+          ),
+          children: icon
+        }),
+        "icon"
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          initial: { width: 0, opacity: 0 },
+          animate: { width: "auto", opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: SPRING_TRANSITION,
+          className: "overflow-hidden whitespace-nowrap ml-3",
+          children: labelContent
+        },
+        "label"
+      ) })
+    ] });
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center justify-center",
+      "select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,opacity,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : colors.shadow,
+      (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
+      extended && "w-auto px-6",
+      SIZE_TEXT_CLASS[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": computedAriaLabel,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${animateRadius}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React16.cloneElement(
+          React16.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+        "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
         style,
-        initial: { scale: 0.5, opacity: 0, borderRadius: animateRadius },
+        initial: {
+          scale: 0.5,
+          opacity: 0,
+          borderRadius: animateRadius
+        },
         animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
         exit: { scale: 0.5, opacity: 0 },
         whileTap: { borderRadius: pressedRadius },
@@ -2631,84 +2854,15 @@ var FABComponent = React11.forwardRef(
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" }
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center justify-center",
-          "select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,opacity,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : colors.shadow,
-          (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-          extended && "w-auto px-6",
-          SIZE_TEXT_CLASS[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconClass
-              ),
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  size: iconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: iconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
-                iconClass
-              ),
-              children: icon
-            }),
-            "icon"
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && children && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              initial: { width: 0, opacity: 0 },
-              animate: { width: "auto", opacity: 1 },
-              exit: { width: 0, opacity: 0 },
-              transition: SPRING_TRANSITION,
-              className: "overflow-hidden whitespace-nowrap ml-3",
-              children
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React11.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;
@@ -2816,7 +2970,7 @@ function CloseIcon() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(AddIcon, {});
 }
-var ToggleFABComponent = React11.forwardRef(
+var ToggleFABComponent = React16.forwardRef(
   ({
     expanded,
     onToggle,
@@ -2834,7 +2988,7 @@ var ToggleFABComponent = React11.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);
-    React11.useEffect(() => {
+    React16.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = useTransform(
@@ -2842,12 +2996,12 @@ var ToggleFABComponent = React11.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React11.useState(expanded ? 1 : 0);
-    React11.useEffect(() => {
+    const [iconProgress, setIconProgress] = React16.useState(expanded ? 1 : 0);
+    React16.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React11.useCallback(() => {
+    const handleClick = React16.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxs(
@@ -2896,7 +3050,7 @@ var ToggleFABComponent = React11.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React11.memo(ToggleFABComponent);
+var ToggleFAB = React16.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -2904,12 +3058,14 @@ function FABMenuItem({
   disabled = false,
   colorVariant = "primary",
   className,
-  tabIndex = 0
+  tabIndex = 0,
+  asChild = false,
+  children
 }) {
   var _a;
   const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
-  const handleClick = React11.useCallback(
+  const handleClick = React16.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -2919,7 +3075,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React16.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2929,48 +3085,68 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      role: "menuitem",
-      tabIndex,
-      "aria-disabled": disabled ? "true" : void 0,
-      "data-disabled": disabled ? "true" : void 0,
-      onClick: handleClick,
-      onPointerDown,
-      onKeyDown: handleKeyDown,
-      variants: MENU_ITEM_VARIANTS,
-      style: {
-        transformOrigin: "right",
-        borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
-      },
-      className: cn(
-        "relative inline-flex flex-row items-center",
-        "select-none cursor-pointer overflow-hidden",
-        "whitespace-nowrap",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
-        MENU_ITEM_STYLES.size,
-        MENU_ITEM_STYLES.gap,
-        label ? MENU_ITEM_STYLES.padding : "px-4",
-        !label && "justify-center",
-        colors.bg,
-        colors.text,
-        disabled && "opacity-[0.38] pointer-events-none",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(TouchTarget, {}),
-        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
-            children: icon
-          }
-        ),
-        label && /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
-      ]
+  const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TouchTarget, {}),
+    /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
+        children: icon
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
+  ] });
+  const containerClassName = cn(
+    "relative inline-flex flex-row items-center",
+    "select-none cursor-pointer overflow-hidden",
+    "whitespace-nowrap",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+    MENU_ITEM_STYLES.size,
+    MENU_ITEM_STYLES.gap,
+    label ? MENU_ITEM_STYLES.padding : "px-4",
+    !label && "justify-center",
+    colors.bg,
+    colors.text,
+    disabled && "opacity-[0.38] pointer-events-none",
+    className
+  );
+  const containerStyle = {
+    transformOrigin: "right",
+    borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
+  };
+  if (asChild) {
+    const child = React16.Children.only(children);
+    return /* @__PURE__ */ jsx(m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsx(
+      Slot,
+      {
+        role: "menuitem",
+        tabIndex,
+        "aria-disabled": disabled ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        className: containerClassName,
+        children: React16.cloneElement(child, { children: innerContent })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      role: "menuitem",
+      tabIndex,
+      "aria-disabled": disabled ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
+      onClick: handleClick,
+      onPointerDown,
+      onKeyDown: handleKeyDown,
+      variants: MENU_ITEM_VARIANTS,
+      style: containerStyle,
+      className: containerClassName,
+      children: innerContent
     }
   );
 }
@@ -2986,13 +3162,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React11.useId();
-  const menuId = React11.useId();
-  const toggleRef = React11.useRef(null);
-  const itemRefs = React11.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React11.useState(-1);
-  const reversedItems = React11.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React11.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,
@@ -3001,8 +3177,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React11.useRef(false);
-  React11.useEffect(() => {
+  const wasExpandedRef = React16.useRef(false);
+  React16.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -3017,7 +3193,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React11.useCallback(
+  const handleMenuKeyDown = React16.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -3141,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 },
@@ -3239,7 +3442,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React11.forwardRef(
+var IconButtonComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3247,11 +3450,14 @@ var IconButtonComponent = React11.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -3262,31 +3468,34 @@ var IconButtonComponent = React11.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React11.useMemo(
+    const resolvedColorClass = React16.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React11.useMemo(
+    const outlineWidthClass = React16.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React11.useMemo(
+    const disabledBgClass = React16.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -3303,11 +3512,13 @@ var IconButtonComponent = React11.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 = React11.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -3317,7 +3528,7 @@ var IconButtonComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React16.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -3328,7 +3539,90 @@ var IconButtonComponent = React11.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          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]",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React16.Children.only(children).props.children : children
+        }),
+        isSelected && selectedIcon ? "selected-content" : "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      heightClass,
+      widthClass,
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React16.Children.only(children);
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": isToggle ? isSelected : void 0,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || restProps.disabled,
+          onClick: handleClick,
+          onPointerDown,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, style), {
+            borderRadius: `${animateRadius}px`
+          }),
+          className: containerClassName
+        }, restProps), {
+          children: React16.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -3344,78 +3638,20 @@ var IconButtonComponent = React11.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES2[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              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]!",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: {
-                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
-                width: isCustomSize ? `${iconSize}px` : void 0,
-                height: isCustomSize ? `${iconSize}px` : void 0
-              },
-              children
-            }),
-            "content"
-          ) })
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React11.memo(IconButtonComponent);
-var SplitButtonContext = React11.createContext(null);
+var IconButton = React16.memo(IconButtonComponent);
+var SplitButtonContext = React16.createContext(null);
 function useSplitButtonContext() {
-  return React11.useContext(SplitButtonContext);
+  return React16.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React11.forwardRef(
+var SplitButtonLayoutComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -3432,10 +3668,10 @@ var SplitButtonLayoutComponent = React11.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React11.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React16.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React11.useMemo(
+    const contextValue = React16.useMemo(
       () => ({
         size,
         variant
@@ -3461,8 +3697,8 @@ var SplitButtonLayoutComponent = React11.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React11.memo(SplitButtonLayoutComponent);
-var StateLayer = React11.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;
@@ -3714,7 +3950,7 @@ var splitButtonVariants = cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React11.forwardRef(
+var SplitButtonLeadingComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3724,6 +3960,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       icon,
       children,
       disabled,
+      asChild = false,
       onClick,
       onPointerDown,
       onPointerUp,
@@ -3739,6 +3976,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       "icon",
       "children",
       "disabled",
+      "asChild",
       "onClick",
       "onPointerDown",
       "onPointerUp",
@@ -3751,9 +3989,9 @@ var SplitButtonLeadingComponent = React11.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] = React11.useState(false);
-    const [isFocused, setIsFocused] = React11.useState(false);
-    const [isPressed, setIsPressed] = React11.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";
@@ -3765,7 +4003,7 @@ var SplitButtonLeadingComponent = React11.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 = React11.useCallback(
+    const handleClick = React16.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -3775,7 +4013,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3783,19 +4021,19 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3803,21 +4041,21 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -3825,12 +4063,73 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const labelContent = asChild ? React16.Children.only(children).props.children : children;
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
+          style: {
+            fontSize: leadingIconSize,
+            width: leadingIconSize,
+            height: leadingIconSize
+          },
+          children: icon
+        }
+      ),
+      labelContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children: labelContent })
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      typographyClass,
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.leadingPadding.start,
+      paddingInlineEnd: tokens.leadingPadding.end,
+      gap: "8px",
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-disabled": disabled || void 0,
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React16.cloneElement(
+          React16.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-disabled": disabled,
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -3847,56 +4146,24 @@ var SplitButtonLeadingComponent = React11.forwardRef(
           paddingInlineEnd: tokens.leadingPadding.end,
           gap: "8px"
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          typographyClass,
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
-              style: {
-                fontSize: leadingIconSize,
-                width: leadingIconSize,
-                height: leadingIconSize
-              },
-              children: icon
-            }
-          ),
-          children && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children })
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
-var SplitButtonLeading = React11.memo(SplitButtonLeadingComponent);
-var FilledSplitButtonLeading = React11.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 = React11.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 = React11.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 = React11.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 = React11.forwardRef(
+var SplitButtonTrailingComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3913,6 +4180,8 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       onPointerCancel,
       onFocus,
       onBlur,
+      asChild = false,
+      children,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -3929,15 +4198,17 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       "onPointerCancel",
       "onFocus",
       "onBlur",
+      "asChild",
+      "children",
       "aria-label"
     ]);
     var _a2, _b2;
     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] = React11.useState(false);
-    const [isFocused, setIsFocused] = React11.useState(false);
-    const [isPressed, setIsPressed] = React11.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";
@@ -3949,12 +4220,12 @@ var SplitButtonTrailingComponent = React11.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 = React11.useCallback(() => {
+    const handleToggle = React16.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3962,19 +4233,19 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3982,35 +4253,102 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
       },
       [onBlur]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          animate: {
+            rotate: checked ? 180 : 0,
+            x: checked ? 0 : tokens.opticalCenterOffset
+          },
+          transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
+          className: "flex items-center justify-center shrink-0",
+          children: icon != null ? icon : /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "arrow_drop_down",
+              size: tokens.trailingIconSize,
+              opticalSize: 24
+            }
+          )
+        }
+      )
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.trailingPadding.start,
+      paddingInlineEnd: tokens.trailingPadding.end,
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
+        onClick: handleToggle,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React16.cloneElement(
+          React16.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-pressed": checked,
-        "aria-expanded": checked,
         "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
         disabled,
         onClick: handleToggle,
         onPointerDown: handlePointerDown,
@@ -4026,61 +4364,24 @@ var SplitButtonTrailingComponent = React11.forwardRef(
           paddingInlineStart: tokens.trailingPadding.start,
           paddingInlineEnd: tokens.trailingPadding.end
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(
-            m.div,
-            {
-              animate: {
-                rotate: checked ? 180 : 0,
-                x: checked ? 0 : tokens.opticalCenterOffset
-              },
-              transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
-              className: "flex items-center justify-center shrink-0",
-              children: icon != null ? icon : /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: "arrow_drop_down",
-                  size: tokens.trailingIconSize,
-                  opticalSize: 24
-                }
-              )
-            }
-          )
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
-var SplitButtonTrailing = React11.memo(SplitButtonTrailingComponent);
-var FilledSplitButtonTrailing = React11.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 = React11.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 = React11.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 = React11.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 = React11.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4117,9 +4418,9 @@ var SplitButtonTrailingUncheckableComponent = React11.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] = React11.useState(false);
-    const [isFocused, setIsFocused] = React11.useState(false);
-    const [isPressed, setIsPressed] = React11.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 {
@@ -4130,7 +4431,7 @@ var SplitButtonTrailingUncheckableComponent = React11.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 = React11.useCallback(
+    const handlePointerDown = React16.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4138,19 +4439,19 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React16.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React16.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4158,21 +4459,21 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React16.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React16.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React16.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4239,18 +4540,18 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React11.memo(
+var SplitButtonTrailingUncheckable = React16.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React11.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 = React11.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 = React11.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 = React11.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