@bug-on/m3-expressive 1.1.0 → 1.2.1

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 React14 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 = React14.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React11.useState(false);
-  React11.useEffect(() => {
+  const [ready, setReady] = React14.useState(false);
+  React14.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 = React14.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -161,7 +161,7 @@ var DeterminateSvg = React11.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React11.forwardRef(
+var LoadingIndicator = React14.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 = React14.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 = React14.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React11.useMemo(
+    const effectiveWavelength = React14.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React11.useMemo(
+    const wavyActivePath = React14.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 = React14.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React14.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] = React14.useState(0);
+  const observerRef = React14.useRef(null);
+  const ref = React14.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -537,7 +537,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React11.useEffect(() => {
+  React14.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -547,7 +547,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React11.useCallback(
+  return React14.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 = React14.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -637,7 +637,7 @@ var FlatLinearTrack = React11.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React11.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React14.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 = React14.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React11.useRef(null);
-  const trackPathRef = React11.useRef(null);
+  const activePathRef = React14.useRef(null);
+  const trackPathRef = React14.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React11.useEffect(() => {
+  React14.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 = React14.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 = React14.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React11.useState(false);
-    React11.useEffect(() => {
+    const [isRtl, setIsRtl] = React14.useState(false);
+    React14.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 = React14.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React14.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React11.useMemo(
+    const shouldShowStop = React14.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React11.useMemo(
+    const stopSize = React14.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 = React14.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 = React14.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1018,8 +1018,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React11.useState([]);
-  const onPointerDown = React11.useCallback(
+  const [ripples, setRipples] = React14.useState([]);
+  const onPointerDown = React14.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -1033,7 +1033,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React11.useCallback((id) => {
+  const removeRipple = React14.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1209,6 +1209,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -1260,7 +1289,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React11.forwardRef(
+var ButtonComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1322,9 +1351,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 = React14.useMemo(() => {
       if (asChild) {
-        const child = React11.Children.only(children);
+        const child = React14.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1332,8 +1361,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 = React14.useRef(null);
+    const mergedRef = React14.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -1342,14 +1371,14 @@ var ButtonComponent = React11.forwardRef(
       },
       [ref]
     );
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1357,14 +1386,14 @@ var ButtonComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React14.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React14.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1439,17 +1468,17 @@ var ButtonComponent = React11.forwardRef(
         }
       ) })
     ] });
-    const handleAsChildPointerDown = React11.useCallback(
+    const handleAsChildPointerDown = React14.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React11.useCallback(() => {
+    const handleAsChildPointerUp = React14.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React14.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1459,7 +1488,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 = React14.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -1476,7 +1505,7 @@ var ButtonComponent = React11.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React11.cloneElement(child, { children: innerContent })
+          children: React14.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -1505,13 +1534,13 @@ var ButtonComponent = React11.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React11.memo(ButtonComponent);
+var Button = React14.memo(ButtonComponent);
 var VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React11.forwardRef(
+var IconComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1577,7 +1606,7 @@ var IconComponent = React11.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React11.memo(IconComponent);
+var Icon = React14.memo(IconComponent);
 var BUTTON_GROUP_TOKENS = {
   standard: {
     betweenSpace: 12,
@@ -1665,7 +1694,7 @@ 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", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
   xs: 6,
   sm: 8,
@@ -1685,13 +1714,7 @@ var WIDTH_MORPH_SPRING = {
   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 = React14.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -1728,23 +1751,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;
@@ -1765,7 +1771,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;
@@ -1781,9 +1787,6 @@ 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 };
 }
@@ -1818,13 +1821,11 @@ function resolveFlexTargets(variant, orientation, isSelected, isPressed, hasSele
 function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex, 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 (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;
@@ -1875,16 +1876,9 @@ function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex
     });
     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 = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1917,13 +1911,12 @@ var ButtonGroupComponent = React11.forwardRef(
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React11.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React11.useState(
+    const [pressedIndex, setPressedIndex] = React14.useState(null);
+    const [lockedGroupSize, setLockedGroupSize] = React14.useState(
       null
     );
-    const layoutIdGroup = React11.useId();
-    const rootRef = React11.useRef(null);
-    const setRootRef = React11.useCallback(
+    const rootRef = React14.useRef(null);
+    const setRootRef = React14.useCallback(
       (node) => {
         rootRef.current = node;
         if (typeof ref === "function") {
@@ -1934,12 +1927,12 @@ var ButtonGroupComponent = React11.forwardRef(
       },
       [ref]
     );
-    const childrenArray = React11.useMemo(
-      () => React11.Children.toArray(children).filter(React11.isValidElement),
+    const childrenArray = React14.useMemo(
+      () => React14.Children.toArray(children).filter(React14.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const groupSizeSignature = React11.useMemo(
+    const groupSizeSignature = React14.useMemo(
       () => `${childrenArray.map((child, index) => {
         var _a2, _b2, _c, _d, _e;
         const element = child;
@@ -1954,8 +1947,8 @@ var ButtonGroupComponent = React11.forwardRef(
       }).join("|")}|${variant}|${orientation}|${showCheck}`,
       [childrenArray, orientation, showCheck, size, variant]
     );
-    const groupSizeSignatureRef = React11.useRef(groupSizeSignature);
-    React11.useLayoutEffect(() => {
+    const groupSizeSignatureRef = React14.useRef(groupSizeSignature);
+    React14.useLayoutEffect(() => {
       if (groupSizeSignatureRef.current !== groupSizeSignature) {
         groupSizeSignatureRef.current = groupSizeSignature;
         setLockedGroupSize(null);
@@ -1963,7 +1956,7 @@ var ButtonGroupComponent = React11.forwardRef(
     }, [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(() => {
+    React14.useLayoutEffect(() => {
       if (!shouldLockGroupSize) {
         if (lockedGroupSize !== null) setLockedGroupSize(null);
         return;
@@ -1977,7 +1970,7 @@ var ButtonGroupComponent = React11.forwardRef(
         setLockedGroupSize(Math.ceil(nextSize * 100) / 100);
       }
     }, [lockedGroupSize, orientation, shouldLockGroupSize]);
-    const groupStyle = React11.useMemo(() => {
+    const groupStyle = React14.useMemo(() => {
       const nextStyle = __spreadValues({}, style);
       if (shouldLockGroupSize && lockedGroupSize !== null) {
         if (orientation === "horizontal") {
@@ -1988,13 +1981,13 @@ var ButtonGroupComponent = React11.forwardRef(
       }
       return nextStyle;
     }, [lockedGroupSize, orientation, shouldLockGroupSize, style]);
-    const hasSelected = React11.useMemo(
+    const hasSelected = React14.useMemo(
       () => childrenArray.some(
         (child) => child.props.selected
       ),
       [childrenArray]
     );
-    const handlePointerLeaveAndUp = React11.useCallback(() => {
+    const handlePointerLeaveAndUp = React14.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsx(
@@ -2004,7 +1997,7 @@ var ButtonGroupComponent = React11.forwardRef(
         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
@@ -2014,7 +2007,7 @@ var ButtonGroupComponent = React11.forwardRef(
         onPointerUp: handlePointerLeaveAndUp
       }, props), {
         children: childrenArray.map((child, index) => {
-          var _a2, _b2, _c;
+          var _a2, _b2;
           const element = child;
           const isSelected = element.props.selected === true;
           const isFirst = index === 0;
@@ -2026,7 +2019,6 @@ var ButtonGroupComponent = React11.forwardRef(
             element,
             isSelected,
             itemSize,
-            variant,
             showCheck,
             iconBehavior,
             labelBehavior
@@ -2052,7 +2044,7 @@ var ButtonGroupComponent = React11.forwardRef(
             basePx
           );
           const dynamicStyle = __spreadValues({}, element.props.style);
-          if (variant !== "navbar" && flex.flexGrow !== void 0 && fullWidth) {
+          if (flex.flexGrow !== void 0 && fullWidth) {
             dynamicStyle.flexBasis = 0;
             dynamicStyle.flexShrink = 1;
             dynamicStyle.minWidth = 0;
@@ -2070,13 +2062,7 @@ var ButtonGroupComponent = React11.forwardRef(
             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({
+          const clonedElement = React14.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_b2 = element.key) != null ? _b2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -2085,71 +2071,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",
               itemClassName
-            )
-          }), {
-            style: variant === "navbar" ? __spreadProps(__spreadValues({}, dynamicStyle), { minWidth: 0 }) : dynamicStyle,
+            ),
+            style: 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;
         })
       })
@@ -2157,7 +2092,7 @@ var ButtonGroupComponent = React11.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React11.memo(ButtonGroupComponent);
+var ButtonGroup = React14.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -2212,9 +2147,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] = React14.useState(false);
+  const lastScrollY = React14.useRef(0);
+  React14.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
     lastScrollY.current = window.scrollY;
     const handleScroll = () => {
@@ -2237,7 +2172,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React11.forwardRef(
+var ExtendedFABComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2254,6 +2189,8 @@ var ExtendedFABComponent = React11.forwardRef(
       scrollThreshold = 50,
       collapsed,
       onCollapsedChange,
+      asChild = false,
+      children,
       onClick,
       onKeyDown,
       layoutId,
@@ -2273,16 +2210,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 = React14.useRef(null);
+    React14.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React14.useState("ltr");
+    React14.useEffect(() => {
       var _a3;
       if (!localRef.current) return;
       const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
@@ -2303,7 +2242,7 @@ var ExtendedFABComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React14.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2313,7 +2252,7 @@ var ExtendedFABComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React14.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2324,7 +2263,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: React14.cloneElement(
+          React14.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref: localRef,
@@ -2356,95 +2397,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 = React14.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -2515,7 +2476,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React11.forwardRef(
+var FABComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2529,6 +2490,7 @@ var FABComponent = React11.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       visible = true,
+      asChild = false,
       onClick,
       onKeyDown,
       "aria-label": ariaLabel
@@ -2544,6 +2506,7 @@ var FABComponent = React11.forwardRef(
       "loading",
       "loadingVariant",
       "visible",
+      "asChild",
       "onClick",
       "onKeyDown",
       "aria-label"
@@ -2560,7 +2523,7 @@ var FABComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React14.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2570,7 +2533,7 @@ var FABComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React14.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2581,19 +2544,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 ? React14.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: React14.cloneElement(
+          React14.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 },
@@ -2602,84 +2662,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 = React14.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -2787,7 +2778,7 @@ function CloseIcon() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(AddIcon, {});
 }
-var ToggleFABComponent = React11.forwardRef(
+var ToggleFABComponent = React14.forwardRef(
   ({
     expanded,
     onToggle,
@@ -2805,7 +2796,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(() => {
+    React14.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = useTransform(
@@ -2813,12 +2804,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] = React14.useState(expanded ? 1 : 0);
+    React14.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React11.useCallback(() => {
+    const handleClick = React14.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxs(
@@ -2867,7 +2858,7 @@ var ToggleFABComponent = React11.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React11.memo(ToggleFABComponent);
+var ToggleFAB = React14.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -2875,12 +2866,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 = React14.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -2890,7 +2883,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React14.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2900,7 +2893,55 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  return /* @__PURE__ */ jsxs(
+  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 = React14.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: React14.cloneElement(child, { children: innerContent })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
     m.div,
     {
       role: "menuitem",
@@ -2911,37 +2952,9 @@ function FABMenuItem({
       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 })
-      ]
+      style: containerStyle,
+      className: containerClassName,
+      children: innerContent
     }
   );
 }
@@ -2957,13 +2970,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 = React14.useId();
+  const menuId = React14.useId();
+  const toggleRef = React14.useRef(null);
+  const itemRefs = React14.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React14.useState(-1);
+  const reversedItems = React14.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React14.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -2972,8 +2985,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React11.useRef(false);
-  React11.useEffect(() => {
+  const wasExpandedRef = React14.useRef(false);
+  React14.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -2988,7 +3001,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React11.useCallback(
+  const handleMenuKeyDown = React14.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -3210,7 +3223,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React11.forwardRef(
+var IconButtonComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3223,6 +3236,7 @@ var IconButtonComponent = React11.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -3238,6 +3252,7 @@ var IconButtonComponent = React11.forwardRef(
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
@@ -3246,18 +3261,18 @@ var IconButtonComponent = React11.forwardRef(
     var _a2, _b2;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React11.useMemo(
+    const resolvedColorClass = React14.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React11.useMemo(
+    const outlineWidthClass = React14.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React11.useMemo(
+    const disabledBgClass = React14.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -3278,7 +3293,7 @@ var IconButtonComponent = React11.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11.useCallback(
+    const handleClick = React14.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -3288,7 +3303,7 @@ var IconButtonComponent = React11.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11.useCallback(
+    const handleKeyDown = React14.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -3299,7 +3314,87 @@ 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: asChild ? React14.Children.only(children).props.children : children
+        }),
+        "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      SIZE_STYLES2[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React14.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: React14.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -3315,78 +3410,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 = React14.memo(IconButtonComponent);
+var SplitButtonContext = React14.createContext(null);
 function useSplitButtonContext() {
-  return React11.useContext(SplitButtonContext);
+  return React14.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React11.forwardRef(
+var SplitButtonLayoutComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -3403,10 +3440,10 @@ var SplitButtonLayoutComponent = React11.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React11.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React14.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React11.useMemo(
+    const contextValue = React14.useMemo(
       () => ({
         size,
         variant
@@ -3432,8 +3469,8 @@ var SplitButtonLayoutComponent = React11.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React11.memo(SplitButtonLayoutComponent);
-var StateLayer = React11.forwardRef(
+var SplitButtonLayout = React14.memo(SplitButtonLayoutComponent);
+var StateLayer = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
     let opacity = 0;
@@ -3685,7 +3722,7 @@ var splitButtonVariants = cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React11.forwardRef(
+var SplitButtonLeadingComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3695,6 +3732,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       icon,
       children,
       disabled,
+      asChild = false,
       onClick,
       onPointerDown,
       onPointerUp,
@@ -3710,6 +3748,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       "icon",
       "children",
       "disabled",
+      "asChild",
       "onClick",
       "onPointerDown",
       "onPointerUp",
@@ -3722,9 +3761,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] = React14.useState(false);
+    const [isFocused, setIsFocused] = React14.useState(false);
+    const [isPressed, setIsPressed] = React14.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";
@@ -3736,7 +3775,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 = React14.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -3746,7 +3785,7 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React14.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3754,19 +3793,19 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React14.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React14.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3774,21 +3813,21 @@ var SplitButtonLeadingComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React14.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React14.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -3796,12 +3835,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 ? React14.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: React14.cloneElement(
+          React14.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-disabled": disabled,
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -3818,56 +3918,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 = React14.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React14.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 = React14.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 = React14.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 = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
-var SplitButtonTrailingComponent = React11.forwardRef(
+var SplitButtonTrailingComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3884,6 +3952,8 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       onPointerCancel,
       onFocus,
       onBlur,
+      asChild = false,
+      children,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -3900,15 +3970,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] = React14.useState(false);
+    const [isFocused, setIsFocused] = React14.useState(false);
+    const [isPressed, setIsPressed] = React14.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const prefersReducedMotion = useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -3920,12 +3992,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 = React14.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React11.useCallback(
+    const handlePointerDown = React14.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3933,19 +4005,19 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React14.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React14.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3953,35 +4025,102 @@ var SplitButtonTrailingComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React14.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React14.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: React14.cloneElement(
+          React14.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,
@@ -3997,61 +4136,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 = React14.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React14.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 = React14.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 = React14.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 = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
-var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React14.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4088,9 +4190,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] = React14.useState(false);
+    const [isFocused, setIsFocused] = React14.useState(false);
+    const [isPressed, setIsPressed] = React14.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
@@ -4101,7 +4203,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 = React14.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4109,19 +4211,19 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11.useCallback(
+    const handlePointerUp = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11.useCallback(() => {
+    const handlePointerEnter = React14.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11.useCallback(
+    const handlePointerLeave = React14.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4129,21 +4231,21 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11.useCallback(
+    const handlePointerCancel = React14.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11.useCallback(
+    const handleFocus = React14.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11.useCallback(
+    const handleBlur = React14.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4210,16 +4312,16 @@ var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React11.memo(
+var SplitButtonTrailingUncheckable = React14.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+var FilledSplitButtonTrailingUncheckable = React14.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 = React14.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 = React14.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 = React14.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 };