@bug-on/m3-expressive 1.2.0 → 1.2.2

package/dist/overlays.js

@@ -3,9 +3,10 @@
 
 var RadixDialog = require('@radix-ui/react-dialog');
 var react = require('motion/react');
-var React6 = require('react');
+var React9 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
 var jsxRuntime = require('react/jsx-runtime');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
 var reactDom = require('react-dom');
@@ -29,7 +30,7 @@ function _interopNamespace(e) {
 }
 
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
 
 var __defProp = Object.defineProperty;
@@ -111,11 +112,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 = React6__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React9__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React6__namespace.useState(false);
-  React6__namespace.useEffect(() => {
+  const [ready, setReady] = React9__namespace.useState(false);
+  React9__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -160,7 +161,7 @@ var IndeterminateSvg = React6__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React6__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React9__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -185,7 +186,7 @@ var DeterminateSvg = React6__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React6__namespace.forwardRef(
+var LoadingIndicator = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -300,7 +301,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React6__namespace.forwardRef(
+var CircularProgress = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -338,15 +339,15 @@ var CircularProgress = React6__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React6__namespace.useMemo(
+    const effectiveAmplitude = React9__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React6__namespace.useMemo(
+    const effectiveWavelength = React9__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React6__namespace.useMemo(
+    const wavyActivePath = React9__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -355,8 +356,8 @@ var CircularProgress = React6__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React6__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React6__namespace.useMemo(
+    const circumference = React9__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React9__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -545,9 +546,9 @@ var CircularProgress = React6__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React6__namespace.useState(0);
-  const observerRef = React6__namespace.useRef(null);
-  const ref = React6__namespace.useCallback((node) => {
+  const [width, setWidth] = React9__namespace.useState(0);
+  const observerRef = React9__namespace.useRef(null);
+  const ref = React9__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -561,7 +562,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -571,7 +572,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React6__namespace.useCallback(
+  return React9__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -585,7 +586,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React6__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React9__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -661,7 +662,7 @@ var FlatLinearTrack = React6__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React6__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -680,13 +681,13 @@ var WavyLinearTrack = React6__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React6__namespace.useId();
+  const titleId = React9__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React6__namespace.useRef(null);
-  const trackPathRef = React6__namespace.useRef(null);
+  const activePathRef = React9__namespace.useRef(null);
+  const trackPathRef = React9__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -857,7 +858,7 @@ var WavyLinearTrack = React6__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React6__namespace.forwardRef(
+var LinearProgress = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -898,10 +899,10 @@ var LinearProgress = React6__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React6__namespace.useRef(null);
+    const containerRef = React9__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React6__namespace.useState(false);
-    React6__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React9__namespace.useState(false);
+    React9__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -909,16 +910,16 @@ var LinearProgress = React6__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React6__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React6__namespace.useMemo(
+    const effectiveAmplitude = React9__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React9__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React6__namespace.useMemo(
+    const shouldShowStop = React9__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React6__namespace.useMemo(
+    const stopSize = React9__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -991,14 +992,14 @@ var LinearProgress = React6__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React6__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React9__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React6__namespace.memo(function RippleItem2({
+var RippleItem = React9__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1042,14 +1043,17 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React6__namespace.useState([]);
-  const onPointerDown = React6__namespace.useCallback(
+  const [ripples, setRipples] = React9__namespace.useState([]);
+  const onPointerDown = React9__namespace.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -1057,7 +1061,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React6__namespace.useCallback((id) => {
+  const removeRipple = React9__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1167,12 +1171,39 @@ function TouchTarget() {
     }
   );
 }
-var SIZE_STYLES = {
-  xs: "h-8 w-8",
-  sm: "h-10 w-10",
-  md: "h-14 w-14",
-  lg: "h-24 w-24",
-  xl: "h-[8.5rem] w-[8.5rem]"
+var SIZE_HEIGHT_STYLES = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+var WIDTH_SIZE_STYLES = {
+  xs: {
+    default: "w-8",
+    narrow: "w-8",
+    wide: "w-12"
+  },
+  sm: {
+    default: "w-10",
+    narrow: "w-12",
+    wide: "w-[3.25rem]"
+  },
+  md: {
+    default: "w-14",
+    narrow: "w-12",
+    wide: "w-[4.5rem]"
+  },
+  lg: {
+    default: "w-24",
+    narrow: "w-16",
+    wide: "w-32"
+  },
+  xl: {
+    default: "w-[8.5rem]",
+    narrow: "w-[6.5rem]",
+    wide: "w-[11.5rem]"
+  }
 };
 var SIZE_ICON = {
   xs: { cls: "size-5", px: 20 },
@@ -1265,7 +1296,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React6__namespace.forwardRef(
+var IconButtonComponent = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1273,11 +1304,14 @@ var IconButtonComponent = React6__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -1288,31 +1322,34 @@ var IconButtonComponent = React6__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React6__namespace.useMemo(
+    const resolvedColorClass = React9__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React6__namespace.useMemo(
+    const outlineWidthClass = React9__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React6__namespace.useMemo(
+    const disabledBgClass = React9__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -1329,11 +1366,13 @@ var IconButtonComponent = React6__namespace.forwardRef(
     const defaultIconPx = sizeIcon.px;
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React6__namespace.useCallback(
+    const handleClick = React9__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -1343,7 +1382,7 @@ var IconButtonComponent = React6__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React6__namespace.useCallback(
+    const handleKeyDown = React9__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -1354,7 +1393,90 @@ var IconButtonComponent = React6__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        react.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__ */ jsxRuntime.jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React9__namespace.Children.only(children).props.children : children
+        }),
+        isSelected && selectedIcon ? "selected-content" : "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      heightClass,
+      widthClass,
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React9__namespace.Children.only(children);
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.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: React9__namespace.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -1370,79 +1492,21 @@ var IconButtonComponent = React6__namespace.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-            react.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__ */ jsxRuntime.jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            react.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 = React6__namespace.memo(IconButtonComponent);
+var IconButton = React9__namespace.memo(IconButtonComponent);
 var VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React6__namespace.forwardRef(
+var IconComponent = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1508,8 +1572,8 @@ var IconComponent = React6__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React6__namespace.memo(IconComponent);
-var ScrollArea = React6__namespace.forwardRef(
+var Icon = React9__namespace.memo(IconComponent);
+var ScrollArea = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1530,15 +1594,15 @@ var ScrollArea = React6__namespace.forwardRef(
       "viewportRef",
       "viewportProps"
     ]);
-    const [isTouchDevice, setIsTouchDevice] = React6__namespace.useState(false);
-    React6__namespace.useEffect(() => {
+    const [isTouchDevice, setIsTouchDevice] = React9__namespace.useState(false);
+    React9__namespace.useEffect(() => {
       if (typeof window !== "undefined") {
         setIsTouchDevice(
           "ontouchstart" in window || navigator.maxTouchPoints > 0
         );
       }
     }, []);
-    const resolvedType = React6__namespace.useMemo(() => {
+    const resolvedType = React9__namespace.useMemo(() => {
       if (type === "hover" && isTouchDevice) {
         return "scroll";
       }
@@ -1589,7 +1653,7 @@ var ScrollArea = React6__namespace.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React6__namespace.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Scrollbar,
@@ -1619,7 +1683,7 @@ var ScrollAreaScrollbar = React6__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
-var ScrollAreaCorner = React6__namespace.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Corner,
@@ -1661,9 +1725,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React6__namespace.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React9__namespace.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React6__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -1674,7 +1738,7 @@ var DialogOverlay = React6__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React6__namespace.forwardRef((_a, ref) => {
+var DialogContent = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Content,
@@ -1714,7 +1778,7 @@ var DialogContent = React6__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React6__namespace.forwardRef((_a, ref) => {
+var DialogIcon = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1737,7 +1801,7 @@ var DialogHeader = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React6__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -1752,7 +1816,7 @@ var DialogTitle = React6__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React6__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -1764,7 +1828,7 @@ var DialogDescription = React6__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React6__namespace.forwardRef((_a, ref) => {
+var DialogBody = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollArea,
@@ -1795,7 +1859,7 @@ var DialogFooter = (_a) => {
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = RadixDialog__namespace.Close;
-var DialogFullScreenContent = React6__namespace.forwardRef(
+var DialogFullScreenContent = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1892,7 +1956,7 @@ var DrawerPortal = ({
   open,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: open && children }) });
-var DrawerOverlay = React6__namespace.forwardRef((_a, ref) => {
+var DrawerOverlay = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -1903,7 +1967,7 @@ var DrawerOverlay = React6__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React6__namespace.forwardRef(
+var DrawerContent = React9__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1982,7 +2046,7 @@ var DrawerFooter = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
 };
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React6__namespace.forwardRef((_a, ref) => {
+var DrawerTitle = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -1996,7 +2060,7 @@ var DrawerTitle = React6__namespace.forwardRef((_a, ref) => {
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React6__namespace.forwardRef((_a, ref) => {
+var DrawerDescription = React9__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -2008,7 +2072,7 @@ var DrawerDescription = React6__namespace.forwardRef((_a, ref) => {
 });
 DrawerDescription.displayName = "DrawerDescription";
 var INDICATOR = "h-1 w-8 rounded-full bg-m3-on-surface-variant/40";
-var DragHandle = React6__namespace.forwardRef(
+var DragHandle = React9__namespace.forwardRef(
   ({ className, onCycle, "aria-label": ariaLabel }, ref) => {
     const isInteractive = Boolean(onCycle);
     if (isInteractive) {
@@ -2069,7 +2133,7 @@ function buildSideSheetAnim(edge) {
   };
 }
 var DEFAULT_SHEET_BG = "bg-m3-surface-container-low";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React6.useLayoutEffect : React6.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React9.useLayoutEffect : React9.useEffect;
 var DISMISS_THRESHOLD = 0.4;
 var DISMISS_VELOCITY_THRESHOLD = 600;
 var DEFAULT_SAFE_AREA_OFFSET = 56;
@@ -2118,9 +2182,9 @@ function useBottomSheet({
   isModal = false,
   maxHeight
 }) {
-  const [scopeNode, setScopeNode] = React6.useState(null);
-  const scopeNodeRef = React6.useRef(null);
-  const scope = React6.useCallback((node) => {
+  const [scopeNode, setScopeNode] = React9.useState(null);
+  const scopeNodeRef = React9.useRef(null);
+  const scope = React9.useCallback((node) => {
     scopeNodeRef.current = node;
     setScopeNode(node);
   }, []);
@@ -2134,13 +2198,13 @@ function useBottomSheet({
   const y = react.useMotionValue(
     typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800
   );
-  const [dimensions, setDimensions] = React6.useState({
+  const [dimensions, setDimensions] = React9.useState({
     viewportHeight: typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800,
     naturalHeight: 0,
     safeAreaOffset: DEFAULT_SAFE_AREA_OFFSET
   });
-  const hasMeasuredAfterOpen = React6.useRef(false);
-  const measureDimensions = React6.useCallback(() => {
+  const hasMeasuredAfterOpen = React9.useRef(false);
+  const measureDimensions = React9.useCallback(() => {
     const node = scopeNodeRef.current;
     if (!node) return;
     const viewportHeight2 = window.visualViewport ? window.visualViewport.height : window.innerHeight;
@@ -2200,7 +2264,7 @@ function useBottomSheet({
     return () => vv.removeEventListener("resize", handleResize);
   }, [isOpen, measureDimensions]);
   const { viewportHeight, naturalHeight, safeAreaOffset } = dimensions;
-  const parsedMaxHeight = React6.useMemo(() => {
+  const parsedMaxHeight = React9.useMemo(() => {
     if (!maxHeight) return viewportHeight - safeAreaOffset;
     if (maxHeight.endsWith("px")) return parseFloat(maxHeight);
     if (maxHeight.endsWith("dvh") || maxHeight.endsWith("vh")) {
@@ -2211,13 +2275,13 @@ function useBottomSheet({
     }
     return parseFloat(maxHeight) || viewportHeight - safeAreaOffset;
   }, [maxHeight, viewportHeight, safeAreaOffset]);
-  const snaps = React6.useMemo(() => {
+  const snaps = React9.useMemo(() => {
     if (snapPoints) return snapPoints;
     if (isModal) return ["partiallyExpanded", "full"];
     return ["fit"];
   }, [snapPoints, isModal]);
   const allowsViewportSnapExpansion = snapPoints !== void 0 || snaps.length > 1;
-  const snapHeights = React6.useMemo(
+  const snapHeights = React9.useMemo(
     () => snaps.map(
       (snap) => parseSnapPoint(
         snap,
@@ -2237,15 +2301,15 @@ function useBottomSheet({
       allowsViewportSnapExpansion
     ]
   );
-  const maxSheetHeight = React6.useMemo(
+  const maxSheetHeight = React9.useMemo(
     () => viewportHeight - safeAreaOffset,
     [viewportHeight, safeAreaOffset]
   );
-  const snapYValues = React6.useMemo(
+  const snapYValues = React9.useMemo(
     () => snapHeights.map((h) => Math.max(0, maxSheetHeight - h)),
     [snapHeights, maxSheetHeight]
   );
-  const sortedSnaps = React6.useMemo(() => {
+  const sortedSnaps = React9.useMemo(() => {
     const combined = snaps.map((point, idx) => ({
       point,
       height: snapHeights[idx],
@@ -2253,31 +2317,31 @@ function useBottomSheet({
     }));
     return combined.sort((a, b) => b.y - a.y);
   }, [snaps, snapHeights, snapYValues]);
-  const [activeSnapIndex, setActiveSnapIndex] = React6.useState(0);
-  const activeSnapPoint = React6.useMemo(
+  const [activeSnapIndex, setActiveSnapIndex] = React9.useState(0);
+  const activeSnapPoint = React9.useMemo(
     () => {
       var _a, _b;
       return (_b = (_a = sortedSnaps[activeSnapIndex]) == null ? void 0 : _a.point) != null ? _b : "fit";
     },
     [sortedSnaps, activeSnapIndex]
   );
-  const isContentScrollable = React6.useMemo(
+  const isContentScrollable = React9.useMemo(
     () => sortedSnaps.length <= 1 || activeSnapIndex === sortedSnaps.length - 1,
     [sortedSnaps, activeSnapIndex]
   );
-  const lowestSnapY = React6.useMemo(() => {
+  const lowestSnapY = React9.useMemo(() => {
     var _a, _b;
     return (_b = (_a = sortedSnaps[0]) == null ? void 0 : _a.y) != null ? _b : 300;
   }, [sortedSnaps]);
   const scrimOpacity = react.useTransform(y, [lowestSnapY, maxSheetHeight], [1, 0]);
-  const defaultSnap = React6.useMemo(
+  const defaultSnap = React9.useMemo(
     () => {
       var _a;
       return (_a = defaultSnapPoint != null ? defaultSnapPoint : snaps[0]) != null ? _a : "fit";
     },
     [defaultSnapPoint, snaps]
   );
-  const prevIsOpen = React6.useRef(isOpen);
+  const prevIsOpen = React9.useRef(isOpen);
   useIsomorphicLayoutEffect(() => {
     if (isOpen && !prevIsOpen.current) {
       y.set(viewportHeight);
@@ -2294,7 +2358,7 @@ function useBottomSheet({
     }
     prevIsOpen.current = isOpen;
   }, [isOpen, y, viewportHeight, sortedSnaps, defaultSnap]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     var _a;
     if (!isOpen || sortedSnaps.length === 0 || naturalHeight === 0) return;
     if (!hasMeasuredAfterOpen.current) return;
@@ -2302,7 +2366,7 @@ function useBottomSheet({
     if (targetY === void 0) return;
     void react.animate(y, targetY, { type: "spring", stiffness: 300, damping: 30 });
   }, [isOpen, sortedSnaps, activeSnapIndex, y, naturalHeight]);
-  const snapTo = React6.useCallback(
+  const snapTo = React9.useCallback(
     (snapPoint) => {
       const idx = sortedSnaps.findIndex((s) => s.point === snapPoint);
       if (idx === -1) return;
@@ -2316,7 +2380,7 @@ function useBottomSheet({
     },
     [sortedSnaps, y, onSnapChange]
   );
-  const cycleSnapPoint = React6.useCallback(() => {
+  const cycleSnapPoint = React9.useCallback(() => {
     const nextIdx = activeSnapIndex + 1;
     if (nextIdx >= sortedSnaps.length) {
       onClose();
@@ -2330,7 +2394,7 @@ function useBottomSheet({
       onSnapChange == null ? void 0 : onSnapChange(sortedSnaps[nextIdx].point);
     }
   }, [activeSnapIndex, sortedSnaps, y, onClose, onSnapChange]);
-  const dragConstraints = React6.useMemo(
+  const dragConstraints = React9.useMemo(
     () => {
       var _a, _b;
       return {
@@ -2340,7 +2404,7 @@ function useBottomSheet({
     },
     [sortedSnaps, viewportHeight]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen || !gesturesEnabled || !scopeNode) return;
     const node = scopeNode;
     const viewport = node.querySelector(
@@ -2561,7 +2625,7 @@ function resolveMaxHeight(maxHeight, snapPoints) {
     return ABSOLUTE_MAX_HEIGHT;
   return maxHeight;
 }
-var BottomSheet = React6__namespace.forwardRef(
+var BottomSheet = React9__namespace.forwardRef(
   ({
     isOpen,
     onClose,
@@ -2594,27 +2658,27 @@ var BottomSheet = React6__namespace.forwardRef(
       isModal: false,
       maxHeight: resolveMaxHeight(maxHeight, snapPoints)
     });
-    React6__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const node = scope.current;
       if (node) {
         node.snapTo = snapTo;
       }
     }, [snapTo, scope]);
-    const [mounted, setMounted] = React6__namespace.useState(false);
-    React6__namespace.useEffect(() => {
+    const [mounted, setMounted] = React9__namespace.useState(false);
+    React9__namespace.useEffect(() => {
       setMounted(true);
     }, []);
-    const resolvedDividers = React6__namespace.useMemo(
+    const resolvedDividers = React9__namespace.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    const resolvedSheetMaxWidth = React6__namespace.useMemo(() => {
+    const resolvedSheetMaxWidth = React9__namespace.useMemo(() => {
       if (sheetMaxWidth === void 0)
         return "var(--m3-bottom-sheet-max-width, 640px)";
       if (typeof sheetMaxWidth === "number") return `${sheetMaxWidth}px`;
       return sheetMaxWidth;
     }, [sheetMaxWidth]);
-    const mergedRef = React6__namespace.useCallback(
+    const mergedRef = React9__namespace.useCallback(
       (node) => {
         scope(node);
         if (typeof ref === "function") ref(node);
@@ -2698,7 +2762,7 @@ var SCRIM_ANIM = {
   },
   exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }
 };
-var Scrim = React6__namespace.forwardRef(
+var Scrim = React9__namespace.forwardRef(
   ({ onClick, className, style }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
     __spreadValues({
@@ -2730,7 +2794,7 @@ function resolveSheetMaxWidth(value) {
   if (typeof value === "number") return `${value}px`;
   return value;
 }
-var BottomSheetModal = React6__namespace.forwardRef(
+var BottomSheetModal = React9__namespace.forwardRef(
   ({
     isOpen,
     onClose,
@@ -2769,21 +2833,21 @@ var BottomSheetModal = React6__namespace.forwardRef(
       isModal: true,
       maxHeight: resolveMaxHeight2(maxHeight, snapPoints)
     });
-    React6__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const node = scope.current;
       if (node) {
         node.snapTo = snapTo;
       }
     }, [snapTo, scope]);
-    const resolvedDividers = React6__namespace.useMemo(
+    const resolvedDividers = React9__namespace.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    const resolvedSheetMaxWidth = React6__namespace.useMemo(
+    const resolvedSheetMaxWidth = React9__namespace.useMemo(
       () => resolveSheetMaxWidth(sheetMaxWidth),
       [sheetMaxWidth]
     );
-    const mergedRef = React6__namespace.useCallback(
+    const mergedRef = React9__namespace.useCallback(
       (node) => {
         scope(node);
         if (typeof ref === "function") ref(node);
@@ -2882,17 +2946,17 @@ function useBottomSheetScaffold({
   onStateChange,
   initialState = "partiallyExpanded"
 } = {}) {
-  const [containerHeight, setContainerHeight] = React6.useState(
+  const [containerHeight, setContainerHeight] = React9.useState(
     typeof window !== "undefined" ? window.innerHeight : 800
   );
-  const containerNodeRef = React6.useRef(null);
-  const containerRef = React6.useCallback((node) => {
+  const containerNodeRef = React9.useRef(null);
+  const containerRef = React9.useCallback((node) => {
     containerNodeRef.current = node;
     if (node) {
       setContainerHeight(node.offsetHeight || window.innerHeight);
     }
   }, []);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const node = containerNodeRef.current;
     if (!node) return;
     const observer = new ResizeObserver(() => {
@@ -2904,34 +2968,34 @@ function useBottomSheetScaffold({
   const expandedY = 0;
   const partialY = containerHeight - peekHeight;
   const y = react.useMotionValue(initialState === "expanded" ? expandedY : partialY);
-  const [sheetState, setSheetState] = React6.useState(
+  const [sheetState, setSheetState] = React9.useState(
     initialState
   );
-  const [isScrollDisablingDrag, setIsScrollDisablingDrag] = React6.useState(false);
+  const [isScrollDisablingDrag, setIsScrollDisablingDrag] = React9.useState(false);
   const isDragEnabled = swipeEnabled && !isScrollDisablingDrag;
-  const dragConstraints = React6.useMemo(
+  const dragConstraints = React9.useMemo(
     () => ({ top: 0, bottom: partialY }),
     [partialY]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const targetY = sheetState === "expanded" ? 0 : partialY;
     void react.animate(y, targetY, SPRING);
   }, [partialY, sheetState, y]);
-  const expand = React6.useCallback(() => {
+  const expand = React9.useCallback(() => {
     setSheetState("expanded");
     void react.animate(y, 0, SPRING);
     onStateChange == null ? void 0 : onStateChange("expanded");
   }, [y, onStateChange]);
-  const partialExpand = React6.useCallback(() => {
+  const partialExpand = React9.useCallback(() => {
     setSheetState("partiallyExpanded");
     void react.animate(y, partialY, SPRING);
     onStateChange == null ? void 0 : onStateChange("partiallyExpanded");
   }, [y, partialY, onStateChange]);
-  const toggle = React6.useCallback(() => {
+  const toggle = React9.useCallback(() => {
     if (sheetState === "expanded") partialExpand();
     else expand();
   }, [sheetState, expand, partialExpand]);
-  const handleDragEnd = React6.useCallback(
+  const handleDragEnd = React9.useCallback(
     (_event, info) => {
       const rawY = y.get();
       let velocity = info.velocity.y;
@@ -2956,7 +3020,7 @@ function useBottomSheetScaffold({
     },
     [y, partialY, expand, partialExpand]
   );
-  const handleContentScroll = React6.useCallback(
+  const handleContentScroll = React9.useCallback(
     (e) => {
       if (sheetState !== "expanded") {
         e.currentTarget.scrollTop = 0;
@@ -2982,7 +3046,7 @@ function useBottomSheetScaffold({
     containerRef
   };
 }
-var BottomSheetScaffold = React6__namespace.forwardRef(
+var BottomSheetScaffold = React9__namespace.forwardRef(
   ({
     sheetContent,
     children,
@@ -3011,13 +3075,13 @@ var BottomSheetScaffold = React6__namespace.forwardRef(
       onStateChange: onSheetStateChange,
       initialState: initialSheetState
     });
-    const resolvedSheetMaxWidth = React6__namespace.useMemo(() => {
+    const resolvedSheetMaxWidth = React9__namespace.useMemo(() => {
       if (sheetMaxWidth === void 0)
         return "var(--m3-bottom-sheet-max-width, 640px)";
       if (typeof sheetMaxWidth === "number") return `${sheetMaxWidth}px`;
       return sheetMaxWidth;
     }, [sheetMaxWidth]);
-    const mergedRef = React6__namespace.useCallback(
+    const mergedRef = React9__namespace.useCallback(
       (node) => {
         containerRef(node);
         if (typeof ref === "function") ref(node);
@@ -3025,7 +3089,7 @@ var BottomSheetScaffold = React6__namespace.forwardRef(
       },
       [containerRef, ref]
     );
-    const resolvedDragHandle = React6__namespace.useMemo(() => {
+    const resolvedDragHandle = React9__namespace.useMemo(() => {
       if (sheetDragHandle === null) return null;
       if (sheetDragHandle !== void 0) return sheetDragHandle;
       return /* @__PURE__ */ jsxRuntime.jsx(DragHandle, { onCycle: toggle });
@@ -3088,7 +3152,7 @@ var BottomSheetScaffold = React6__namespace.forwardRef(
 );
 BottomSheetScaffold.displayName = "BottomSheetScaffold";
 var COPLANAR_TRANSITION = `margin ${getMotionTransitionCSS("default", "spatial")}`;
-var SideSheet = React6__namespace.forwardRef(
+var SideSheet = React9__namespace.forwardRef(
   ({
     isOpen,
     children,
@@ -3104,16 +3168,16 @@ var SideSheet = React6__namespace.forwardRef(
     divider,
     scrollAreaProps
   }, ref) => {
-    const sheetAnim = React6__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
-    const [mounted, setMounted] = React6__namespace.useState(false);
-    React6__namespace.useEffect(() => {
+    const sheetAnim = React9__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const [mounted, setMounted] = React9__namespace.useState(false);
+    React9__namespace.useEffect(() => {
       setMounted(true);
     }, []);
-    const resolvedDividers = React6__namespace.useMemo(
+    const resolvedDividers = React9__namespace.useMemo(
       () => resolveDividers(divider),
       [divider]
     );
-    React6__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const sibling = coplanarSiblingRef == null ? void 0 : coplanarSiblingRef.current;
       if (!sibling) return;
       sibling.style.transition = COPLANAR_TRANSITION;
@@ -3177,7 +3241,7 @@ var SideSheet = React6__namespace.forwardRef(
   }
 );
 SideSheet.displayName = "SideSheet";
-var SideSheetModal = React6__namespace.forwardRef(
+var SideSheetModal = React9__namespace.forwardRef(
   ({
     isOpen,
     onClose,
@@ -3192,8 +3256,8 @@ var SideSheetModal = React6__namespace.forwardRef(
     divider,
     scrollAreaProps
   }, ref) => {
-    const sheetAnim = React6__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
-    const resolvedDividers = React6__namespace.useMemo(
+    const sheetAnim = React9__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const resolvedDividers = React9__namespace.useMemo(
       () => resolveDividers(divider),
       [divider]
     );