@bug-on/m3-expressive 1.2.0 → 1.2.2

package/dist/pickers.js

@@ -2,10 +2,11 @@
 'use strict';
 
 var react = require('motion/react');
-var React17 = require('react');
+var React13 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var RadixDialog = require('@radix-ui/react-dialog');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
 
@@ -27,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
 
@@ -66,6 +67,97 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+var DEFAULT_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 31.19
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+var DEFAULT_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 1600,
+  damping: 80
+};
+
+// src/ui/date-time-pickers/shared/animation-tokens.ts
+var PICKER_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 16 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var CALENDAR_SLIDE_VARIANTS = {
+  enterFromRight: {
+    x: "100%",
+    opacity: 0
+  },
+  enterFromLeft: {
+    x: "-100%",
+    opacity: 0
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exitToLeft: {
+    x: "-100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  },
+  exitToRight: {
+    x: "100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_SELECTOR_ANIM = {
+  initial: { opacity: 0, scale: 0.95, y: -6 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 6,
+    transition: { duration: 0.1, ease: "easeIn" }
+  }
+};
+var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
+
 // src/ui/date-time-pickers/shared/calendar-model.ts
 var startOfDayUTC = (ms) => {
   const d = new Date(ms);
@@ -192,13 +284,13 @@ var DatePickerInput = ({
   locale,
   className
 }) => {
-  const inputId = React17__namespace.useId();
+  const inputId = React13__namespace.useId();
   const errorId = `${inputId}-error`;
-  const placeholder = React17__namespace.useMemo(() => {
+  const placeholder = React13__namespace.useMemo(() => {
     if (locale == null ? void 0 : locale.startsWith("vi")) return "DD/MM/YYYY";
     return "MM/DD/YYYY";
   }, [locale]);
-  const handleKeyDown = React17__namespace.useCallback(
+  const handleKeyDown = React13__namespace.useCallback(
     (e) => {
       if (e.key === "Enter") {
         const parsed = parseDateInput(value);
@@ -207,11 +299,11 @@ var DatePickerInput = ({
     },
     [value, onCommit]
   );
-  const handleBlur = React17__namespace.useCallback(() => {
+  const handleBlur = React13__namespace.useCallback(() => {
     const parsed = parseDateInput(value);
     onCommit(parsed);
   }, [value, onCommit]);
-  const handleChange = React17__namespace.useCallback(
+  const handleChange = React13__namespace.useCallback(
     (e) => {
       let raw = e.target.value.replace(/\D/g, "");
       if (raw.length > 8) raw = raw.slice(0, 8);
@@ -257,82 +349,6 @@ var DatePickerInput = ({
   ] }) }) });
 };
 DatePickerInput.displayName = "DatePickerInput";
-
-// src/ui/shared/motion-tokens.ts
-var FAST_SPATIAL_SPRING = {
-  type: "spring",
-  stiffness: 800,
-  damping: 33.94
-};
-var DEFAULT_SPATIAL_SPRING = {
-  type: "spring",
-  stiffness: 380,
-  damping: 31.19
-};
-var FAST_EFFECTS_SPRING = {
-  type: "spring",
-  stiffness: 3800,
-  damping: 123.29
-};
-var DEFAULT_EFFECTS_SPRING = {
-  type: "spring",
-  stiffness: 1600,
-  damping: 80
-};
-
-// src/ui/date-time-pickers/shared/animation-tokens.ts
-var PICKER_OVERLAY_ANIM = {
-  initial: { opacity: 0 },
-  animate: {
-    opacity: 1,
-    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
-  },
-  exit: {
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var PICKER_CONTENT_ANIM = {
-  initial: { opacity: 0, scale: 0.85, y: 16 },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: DEFAULT_SPATIAL_SPRING
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.95,
-    y: 8,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var CALENDAR_SLIDE_VARIANTS = {
-  enterFromRight: {
-    x: "100%",
-    opacity: 0
-  },
-  enterFromLeft: {
-    x: "-100%",
-    opacity: 0
-  },
-  center: {
-    x: 0,
-    opacity: 1,
-    transition: FAST_SPATIAL_SPRING
-  },
-  exitToLeft: {
-    x: "-100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  },
-  exitToRight: {
-    x: "100%",
-    opacity: 0,
-    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
-  }
-};
-var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
 var DayCell = ({
   day,
   selectedMs,
@@ -381,11 +397,11 @@ var DayCell = ({
     // Disabled
     isDisabled && "opacity-[0.38]"
   );
-  const handleClick = React17__namespace.useCallback(() => {
+  const handleClick = React13__namespace.useCallback(() => {
     if (isDisabled) return;
     onSelect(utcMs);
   }, [isDisabled, utcMs, onSelect]);
-  const handleKeyDown = React17__namespace.useCallback(
+  const handleKeyDown = React13__namespace.useCallback(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -421,7 +437,7 @@ var DayCell = ({
 };
 DayCell.displayName = "DayCell";
 var WeekdayRow = ({ locale }) => {
-  const names = React17__namespace.useMemo(() => getWeekdayNames(locale), [locale]);
+  const names = React13__namespace.useMemo(() => getWeekdayNames(locale), [locale]);
   return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "grid grid-cols-7 mb-1", children: names.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -448,7 +464,7 @@ var CalendarGrid = ({
   const d = new Date(displayedMonthMs);
   const year = d.getUTCFullYear();
   const month = d.getUTCMonth();
-  const weeks = React17__namespace.useMemo(
+  const weeks = React13__namespace.useMemo(
     () => getWeeksInMonth(year, month, locale.weekStartsOn),
     [year, month, locale.weekStartsOn]
   );
@@ -550,11 +566,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 = React17__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React13__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React17__namespace.useState(false);
-  React17__namespace.useEffect(() => {
+  const [ready, setReady] = React13__namespace.useState(false);
+  React13__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -599,7 +615,7 @@ var IndeterminateSvg = React17__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React17__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React13__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -624,7 +640,7 @@ var DeterminateSvg = React17__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React17__namespace.forwardRef(
+var LoadingIndicator = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -739,7 +755,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React17__namespace.forwardRef(
+var CircularProgress = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -777,15 +793,15 @@ var CircularProgress = React17__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React17__namespace.useMemo(
+    const effectiveAmplitude = React13__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React17__namespace.useMemo(
+    const effectiveWavelength = React13__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React17__namespace.useMemo(
+    const wavyActivePath = React13__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -794,8 +810,8 @@ var CircularProgress = React17__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React17__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React17__namespace.useMemo(
+    const circumference = React13__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React13__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -984,9 +1000,9 @@ var CircularProgress = React17__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React17__namespace.useState(0);
-  const observerRef = React17__namespace.useRef(null);
-  const ref = React17__namespace.useCallback((node) => {
+  const [width, setWidth] = React13__namespace.useState(0);
+  const observerRef = React13__namespace.useRef(null);
+  const ref = React13__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1000,7 +1016,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React17__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1010,7 +1026,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React17__namespace.useCallback(
+  return React13__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -1024,7 +1040,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React17__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React13__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -1100,7 +1116,7 @@ var FlatLinearTrack = React17__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React17__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -1119,13 +1135,13 @@ var WavyLinearTrack = React17__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React17__namespace.useId();
+  const titleId = React13__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React17__namespace.useRef(null);
-  const trackPathRef = React17__namespace.useRef(null);
+  const activePathRef = React13__namespace.useRef(null);
+  const trackPathRef = React13__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React17__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -1296,7 +1312,7 @@ var WavyLinearTrack = React17__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React17__namespace.forwardRef(
+var LinearProgress = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -1337,10 +1353,10 @@ var LinearProgress = React17__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React17__namespace.useRef(null);
+    const containerRef = React13__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React17__namespace.useState(false);
-    React17__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React13__namespace.useState(false);
+    React13__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -1348,16 +1364,16 @@ var LinearProgress = React17__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React17__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React17__namespace.useMemo(
+    const effectiveAmplitude = React13__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React13__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React17__namespace.useMemo(
+    const shouldShowStop = React13__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React17__namespace.useMemo(
+    const stopSize = React13__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -1430,14 +1446,14 @@ var LinearProgress = React17__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React17__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React13__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 = React17__namespace.memo(function RippleItem2({
+var RippleItem = React13__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1481,14 +1497,17 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React17__namespace.useState([]);
-  const onPointerDown = React17__namespace.useCallback(
+  const [ripples, setRipples] = React13__namespace.useState([]);
+  const onPointerDown = React13__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 }
@@ -1496,7 +1515,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React17__namespace.useCallback((id) => {
+  const removeRipple = React13__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1519,12 +1538,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 },
@@ -1617,7 +1663,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React17__namespace.forwardRef(
+var IconButtonComponent = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1625,11 +1671,14 @@ var IconButtonComponent = React17__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,
@@ -1640,31 +1689,34 @@ var IconButtonComponent = React17__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 = React17__namespace.useMemo(
+    const resolvedColorClass = React13__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React17__namespace.useMemo(
+    const outlineWidthClass = React13__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React17__namespace.useMemo(
+    const disabledBgClass = React13__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -1681,11 +1733,13 @@ var IconButtonComponent = React17__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 = React17__namespace.useCallback(
+    const handleClick = React13__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -1695,7 +1749,7 @@ var IconButtonComponent = React17__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React17__namespace.useCallback(
+    const handleKeyDown = React13__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -1706,7 +1760,90 @@ var IconButtonComponent = React17__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 ? React13__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 = React13__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: React13__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,
@@ -1722,79 +1859,21 @@ var IconButtonComponent = React17__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 = React17__namespace.memo(IconButtonComponent);
+var IconButton = React13__namespace.memo(IconButtonComponent);
 var VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React17__namespace.forwardRef(
+var IconComponent = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1860,7 +1939,7 @@ var IconComponent = React17__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React17__namespace.memo(IconComponent);
+var Icon = React13__namespace.memo(IconComponent);
 var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
 var CalendarHeader = ({
   displayedMonthMs,
@@ -1888,16 +1967,16 @@ var CalendarHeader = ({
   }).format(date);
   const yearLabel = String(date.getUTCFullYear());
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[length:var(--md-typescale-label-large-size,14px)] font-[number:var(--md-typescale-label-large-weight,500)] text-m3-on-surface-variant", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 leading-tight text-[length:var(--md-typescale-headline-large-size,32px)] font-[number:var(--md-typescale-headline-large-weight,400)] text-m3-on-surface-variant", children: headline }),
-    displayMode === "picker" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-2 flex min-h-10 items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 leading-tight text-(length:--md-typescale-headline-large-size,32px) font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant", children: headline }),
+    displayMode === "picker" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-0.5", children: [
       activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
         {
           onClick: onPrev,
           "aria-label": "Previous month",
           disabled: !canNavigatePrev,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_left" })
         }
       ),
@@ -1919,7 +1998,7 @@ var CalendarHeader = ({
               {
                 name: "arrow_drop_down",
                 className: cn(
-                  "text-[20px]",
+                  "text-[20px] transition-transform duration-200",
                   activeSelector === "month" && "rotate-180"
                 )
               }
@@ -1933,7 +2012,7 @@ var CalendarHeader = ({
           onClick: onNext,
           "aria-label": "Next month",
           disabled: !canNavigateNext,
-          size: "sm",
+          size: "xs",
           children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right" })
         }
       ),
@@ -1944,7 +2023,7 @@ var CalendarHeader = ({
             onClick: onPreviousYear,
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -1966,7 +2045,7 @@ var CalendarHeader = ({
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px]",
+                    "text-[20px] transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -1980,7 +2059,7 @@ var CalendarHeader = ({
             onClick: onNextYear,
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -1989,7 +2068,7 @@ var CalendarHeader = ({
           {
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
-            size: "sm",
+            size: "xs",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "keyboard" })
           }
         )
@@ -2000,7 +2079,7 @@ var CalendarHeader = ({
       {
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
-        size: "sm",
+        size: "xs",
         className: "self-end",
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "calendar_month" })
       }
@@ -2018,15 +2097,15 @@ var MonthPickerList = ({
   locale,
   onMonthSelect
 }) => {
-  const selectedRef = React17__namespace.useRef(null);
-  React17__namespace.useEffect(() => {
+  const selectedRef = React13__namespace.useRef(null);
+  React13__namespace.useEffect(() => {
     var _a, _b;
     (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
       block: "center",
       behavior: "instant"
     });
   }, []);
-  const months = React17__namespace.useMemo(
+  const months = React13__namespace.useMemo(
     () => Array.from({ length: 12 }, (_, month) => month),
     []
   );
@@ -2071,12 +2150,12 @@ var YearPickerList = ({
   selectableDates,
   onYearSelect
 }) => {
-  const selectedRef = React17__namespace.useRef(null);
-  const years = React17__namespace.useMemo(() => {
+  const selectedRef = React13__namespace.useRef(null);
+  const years = React13__namespace.useMemo(() => {
     const [min, max] = yearRange;
     return Array.from({ length: max - min + 1 }, (_, index) => min + index);
   }, [yearRange]);
-  React17__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     var _a, _b;
     (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
       block: "center",
@@ -2147,17 +2226,17 @@ var DatePicker = ({
     navigateToMonth,
     setDisplayMode
   } = state;
-  const [activeSelector, setActiveSelector] = React17__namespace.useState(null);
-  const [slideDirection, setSlideDirection] = React17__namespace.useState(null);
-  const handlePrev = React17__namespace.useCallback(() => {
+  const [activeSelector, setActiveSelector] = React13__namespace.useState(null);
+  const [slideDirection, setSlideDirection] = React13__namespace.useState(null);
+  const handlePrev = React13__namespace.useCallback(() => {
     setSlideDirection("prev");
     navigateMonth2("prev");
   }, [navigateMonth2]);
-  const handleNext = React17__namespace.useCallback(() => {
+  const handleNext = React13__namespace.useCallback(() => {
     setSlideDirection("next");
     navigateMonth2("next");
   }, [navigateMonth2]);
-  const handleYearSelect = React17__namespace.useCallback(
+  const handleYearSelect = React13__namespace.useCallback(
     (year) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(year, d.getUTCMonth());
@@ -2165,7 +2244,7 @@ var DatePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const handleMonthSelect = React17__namespace.useCallback(
+  const handleMonthSelect = React13__namespace.useCallback(
     (month) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(d.getUTCFullYear(), month);
@@ -2173,11 +2252,11 @@ var DatePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const [inputValue, setInputValue] = React17__namespace.useState(
+  const [inputValue, setInputValue] = React13__namespace.useState(
     () => selectedDateMs !== null ? formatInputDate(selectedDateMs) : ""
   );
-  const [inputError, setInputError] = React17__namespace.useState();
-  const handleInputCommit = React17__namespace.useCallback(
+  const [inputError, setInputError] = React13__namespace.useState();
+  const handleInputCommit = React13__namespace.useCallback(
     (ms) => {
       if (ms === null && inputValue.length > 0) {
         setInputError("Invalid date");
@@ -2263,9 +2342,12 @@ var DatePicker = ({
                 "input-mode"
               )
             ) : activeSelector === "month" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              react.m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   MonthPickerList,
@@ -2278,9 +2360,12 @@ var DatePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              react.m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   YearPickerList,
@@ -2411,7 +2496,7 @@ var DP_CLASSES = {
   /** Weekday header row */
   weekdayRow: "text-[length:var(--md-typescale-body-large-size,14px)] text-m3-on-surface"
 };
-var ScrollArea = React17__namespace.forwardRef(
+var ScrollArea = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2432,15 +2517,15 @@ var ScrollArea = React17__namespace.forwardRef(
       "viewportRef",
       "viewportProps"
     ]);
-    const [isTouchDevice, setIsTouchDevice] = React17__namespace.useState(false);
-    React17__namespace.useEffect(() => {
+    const [isTouchDevice, setIsTouchDevice] = React13__namespace.useState(false);
+    React13__namespace.useEffect(() => {
       if (typeof window !== "undefined") {
         setIsTouchDevice(
           "ontouchstart" in window || navigator.maxTouchPoints > 0
         );
       }
     }, []);
-    const resolvedType = React17__namespace.useMemo(() => {
+    const resolvedType = React13__namespace.useMemo(() => {
       if (type === "hover" && isTouchDevice) {
         return "scroll";
       }
@@ -2491,7 +2576,7 @@ var ScrollArea = React17__namespace.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React17__namespace.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Scrollbar,
@@ -2521,7 +2606,7 @@ var ScrollAreaScrollbar = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
-var ScrollAreaCorner = React17__namespace.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Corner,
@@ -2563,9 +2648,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React17__namespace.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React13__namespace.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React17__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React13__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,
@@ -2576,7 +2661,7 @@ var DialogOverlay = React17__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React17__namespace.forwardRef((_a, ref) => {
+var DialogContent = React13__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,
@@ -2616,7 +2701,7 @@ var DialogContent = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React17__namespace.forwardRef((_a, ref) => {
+var DialogIcon = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2630,7 +2715,7 @@ var DialogIcon = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogIcon.displayName = "DialogIcon";
-var DialogTitle = React17__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -2645,7 +2730,7 @@ var DialogTitle = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React17__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -2657,7 +2742,7 @@ var DialogDescription = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React17__namespace.forwardRef((_a, ref) => {
+var DialogBody = React13__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollArea,
@@ -2673,7 +2758,7 @@ var DialogBody = React17__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogBody.displayName = "DialogBody";
-var DialogFullScreenContent = React17__namespace.forwardRef(
+var DialogFullScreenContent = React13__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2821,17 +2906,17 @@ var DateRangePicker = ({
     navigateToMonth,
     setDisplayMode
   } = state;
-  const [activeSelector, setActiveSelector] = React17__namespace.useState(null);
-  const [slideDirection, setSlideDirection] = React17__namespace.useState(null);
-  const handlePrev = React17__namespace.useCallback(() => {
+  const [activeSelector, setActiveSelector] = React13__namespace.useState(null);
+  const [slideDirection, setSlideDirection] = React13__namespace.useState(null);
+  const handlePrev = React13__namespace.useCallback(() => {
     setSlideDirection("prev");
     navigateMonth2("prev");
   }, [navigateMonth2]);
-  const handleNext = React17__namespace.useCallback(() => {
+  const handleNext = React13__namespace.useCallback(() => {
     setSlideDirection("next");
     navigateMonth2("next");
   }, [navigateMonth2]);
-  const handleYearSelect = React17__namespace.useCallback(
+  const handleYearSelect = React13__namespace.useCallback(
     (year) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(year, d.getUTCMonth());
@@ -2839,7 +2924,7 @@ var DateRangePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const handleMonthSelect = React17__namespace.useCallback(
+  const handleMonthSelect = React13__namespace.useCallback(
     (month) => {
       const d = new Date(displayedMonthMs);
       navigateToMonth(d.getUTCFullYear(), month);
@@ -2847,7 +2932,7 @@ var DateRangePicker = ({
     },
     [displayedMonthMs, navigateToMonth]
   );
-  const formatShort = React17__namespace.useCallback(
+  const formatShort = React13__namespace.useCallback(
     (ms) => {
       if (ms === null) return "\u2014";
       return formatDate(ms, locale, {
@@ -2913,9 +2998,12 @@ var DateRangePicker = ({
             className: "relative flex-1 overflow-hidden",
             style: { minHeight: "296px" },
             children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: activeSelector === "month" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              react.m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   MonthPickerList,
@@ -2928,9 +3016,12 @@ var DateRangePicker = ({
               },
               "month-list"
             ) : activeSelector === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              react.m.div,
               {
                 id: "date-picker-selection",
+                initial: PICKER_SELECTOR_ANIM.initial,
+                animate: PICKER_SELECTOR_ANIM.animate,
+                exit: PICKER_SELECTOR_ANIM.exit,
                 className: "absolute inset-0",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   YearPickerList,
@@ -2985,12 +3076,12 @@ var useDatePickerState = (options) => {
   const selectableDates = (_d = options == null ? void 0 : options.selectableDates) != null ? _d : ALL_DATES_SELECTABLE;
   const initialDisplayMode = (_e = options == null ? void 0 : options.initialDisplayMode) != null ? _e : DEFAULT_DISPLAY_MODE;
   const locale = resolveLocale(options == null ? void 0 : options.locale);
-  const [selectedDateMs, setSelectedDateMs] = React17.useState(
+  const [selectedDateMs, setSelectedDateMs] = React13.useState(
     initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
   );
-  const [displayedMonthMs, setDisplayedMonthMs] = React17.useState(initialMonthMs);
-  const [displayMode, setDisplayModeState] = React17.useState(initialDisplayMode);
-  const selectDate = React17.useCallback(
+  const [displayedMonthMs, setDisplayedMonthMs] = React13.useState(initialMonthMs);
+  const [displayMode, setDisplayModeState] = React13.useState(initialDisplayMode);
+  const selectDate = React13.useCallback(
     (ms) => {
       if (ms === null) {
         setSelectedDateMs(null);
@@ -3003,7 +3094,7 @@ var useDatePickerState = (options) => {
     },
     [selectableDates]
   );
-  const navigateMonthAction = React17.useCallback(
+  const navigateMonthAction = React13.useCallback(
     (direction) => {
       setDisplayedMonthMs(
         (prev) => {
@@ -3014,24 +3105,24 @@ var useDatePickerState = (options) => {
     },
     [yearRange, selectableDates]
   );
-  const navigateToMonth = React17.useCallback(
+  const navigateToMonth = React13.useCallback(
     (year, month) => {
       if (!isMonthNavigable(year, yearRange, selectableDates)) return;
       setDisplayedMonthMs(Date.UTC(year, month, 1));
     },
     [yearRange, selectableDates]
   );
-  const setDisplayMode = React17.useCallback((mode) => {
+  const setDisplayMode = React13.useCallback((mode) => {
     setDisplayModeState(mode);
   }, []);
-  const reset = React17.useCallback(() => {
+  const reset = React13.useCallback(() => {
     setSelectedDateMs(
       initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
     );
     setDisplayedMonthMs(initialMonthMs);
     setDisplayModeState(initialDisplayMode);
   }, [initialSelectedMs, initialMonthMs, initialDisplayMode]);
-  return React17.useMemo(
+  return React13.useMemo(
     () => ({
       selectedDateMs,
       displayedMonthMs,
@@ -3090,13 +3181,13 @@ var useDateRangePickerState = (options) => {
   const selectableDates = (_c = options == null ? void 0 : options.selectableDates) != null ? _c : ALL_DATES_SELECTABLE;
   const initialDisplayMode = (_d = options == null ? void 0 : options.initialDisplayMode) != null ? _d : "picker";
   const locale = resolveLocale(options == null ? void 0 : options.locale);
-  const [{ startMs: selectedStartMs, endMs: selectedEndMs }, dispatch] = React17.useReducer(rangeReducer, {
+  const [{ startMs: selectedStartMs, endMs: selectedEndMs }, dispatch] = React13.useReducer(rangeReducer, {
     startMs: initialStartMs,
     endMs: initialEndMs
   });
-  const [displayedMonthMs, setDisplayedMonthMs] = React17.useState(initialMonthMs);
-  const [displayMode, setDisplayModeState] = React17.useState(initialDisplayMode);
-  const selectDate = React17.useCallback(
+  const [displayedMonthMs, setDisplayedMonthMs] = React13.useState(initialMonthMs);
+  const [displayMode, setDisplayModeState] = React13.useState(initialDisplayMode);
+  const selectDate = React13.useCallback(
     (ms) => {
       const normalized = startOfDayUTC(ms);
       if (!selectableDates.isSelectableDate(normalized)) return;
@@ -3104,10 +3195,10 @@ var useDateRangePickerState = (options) => {
     },
     [selectableDates]
   );
-  const clearRange = React17.useCallback(() => {
+  const clearRange = React13.useCallback(() => {
     dispatch({ type: "CLEAR" });
   }, []);
-  const navigateMonthAction = React17.useCallback(
+  const navigateMonthAction = React13.useCallback(
     (direction) => {
       setDisplayedMonthMs(
         (prev) => {
@@ -3118,22 +3209,22 @@ var useDateRangePickerState = (options) => {
     },
     [yearRange, selectableDates]
   );
-  const navigateToMonth = React17.useCallback(
+  const navigateToMonth = React13.useCallback(
     (year, month) => {
       if (!isMonthNavigable(year, yearRange, selectableDates)) return;
       setDisplayedMonthMs(Date.UTC(year, month, 1));
     },
     [yearRange, selectableDates]
   );
-  const setDisplayMode = React17.useCallback((mode) => {
+  const setDisplayMode = React13.useCallback((mode) => {
     setDisplayModeState(mode);
   }, []);
-  const reset = React17.useCallback(() => {
+  const reset = React13.useCallback(() => {
     dispatch({ type: "RESET", startMs: initialStartMs, endMs: initialEndMs });
     setDisplayedMonthMs(initialMonthMs);
     setDisplayModeState(initialDisplayMode);
   }, [initialStartMs, initialEndMs, initialMonthMs, initialDisplayMode]);
-  return React17.useMemo(
+  return React13.useMemo(
     () => ({
       selectedStartMs,
       selectedEndMs,
@@ -3452,16 +3543,16 @@ var InputField = ({
   onBlur,
   className
 }) => {
-  const [inputText, setInputText] = React17__namespace.useState(
+  const [inputText, setInputText] = React13__namespace.useState(
     String(value).padStart(2, "0")
   );
-  const inputRef = React17__namespace.useRef(null);
-  React17__namespace.useEffect(() => {
+  const inputRef = React13__namespace.useRef(null);
+  React13__namespace.useEffect(() => {
     if (!isFocused) {
       setInputText(String(value).padStart(2, "0"));
     }
   }, [value, isFocused]);
-  React17__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     var _a, _b;
     if (isFocused) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -3551,7 +3642,7 @@ var InputField = ({
 };
 var TimeInput = ({ state, className }) => {
   const { is24hour, setHourInput, setMinuteInput, setSelection } = state;
-  const [focusedField, setFocusedField] = React17__namespace.useState(null);
+  const [focusedField, setFocusedField] = React13__namespace.useState(null);
   const handleHourAutoAdvance = () => {
     setFocusedField("minute");
     setSelection("minute");
@@ -3745,17 +3836,17 @@ var ClockDial = ({
     setMinute,
     setSelection
   } = state;
-  const displayAngle = React17__namespace.useMemo(() => {
+  const displayAngle = React13__namespace.useMemo(() => {
     if (selection === "hour") {
       return valueToAngle(hour, "hour");
     }
     return valueToAngle(minute, "minute");
   }, [selection, hour, minute]);
-  const selectorPos = React17__namespace.useMemo(
+  const selectorPos = React13__namespace.useMemo(
     () => getSelectorPosition(displayAngle, selection, is24hour, isPm),
     [displayAngle, selection, is24hour, isPm]
   );
-  const trackEnd = React17__namespace.useMemo(() => {
+  const trackEnd = React13__namespace.useMemo(() => {
     const dx = selectorPos.x - CENTER;
     const dy = selectorPos.y - CENTER;
     const length = Math.hypot(dx, dy);
@@ -3765,13 +3856,13 @@ var ClockDial = ({
       y: selectorPos.y - dy / length * HANDLE_RADIUS
     };
   }, [selectorPos]);
-  const numbers = React17__namespace.useMemo(() => {
+  const numbers = React13__namespace.useMemo(() => {
     if (selection === "minute") return buildMinuteNumbers();
     if (is24hour) return buildHour24Numbers();
     return buildHour12Numbers();
   }, [selection, is24hour]);
-  const isDragging = React17__namespace.useRef(false);
-  const svgRef = React17__namespace.useRef(null);
+  const isDragging = React13__namespace.useRef(false);
+  const svgRef = React13__namespace.useRef(null);
   const getSVGPoint = (e) => {
     const svg = svgRef.current;
     if (!svg) return { x: e.clientX, y: e.clientY };
@@ -3921,8 +4012,8 @@ var getAutoLayout = () => {
   return innerWidth >= 600 && innerHeight >= 300 && innerWidth >= innerHeight ? "horizontal" : "vertical";
 };
 var useResolvedLayout = (layout) => {
-  const [autoLayout, setAutoLayout] = React17__namespace.useState("vertical");
-  React17__namespace.useEffect(() => {
+  const [autoLayout, setAutoLayout] = React13__namespace.useState("vertical");
+  React13__namespace.useEffect(() => {
     if (layout !== "auto") return;
     const updateLayout = () => setAutoLayout(getAutoLayout());
     updateLayout();
@@ -4099,7 +4190,7 @@ var TimePickerDialog = ({
 TimePickerDialog.displayName = "TimePickerDialog";
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
-var isValidMinuteInput = (m11) => m11 >= 0 && m11 <= 59;
+var isValidMinuteInput = (m13) => m13 >= 0 && m13 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -4116,18 +4207,18 @@ var useTimePickerState = (options) => {
   const initialHour = clamp((_a = options == null ? void 0 : options.initialHour) != null ? _a : 0, 0, 23);
   const initialMinute = clamp((_b = options == null ? void 0 : options.initialMinute) != null ? _b : 0, 0, 59);
   const is24hour = (_c = options == null ? void 0 : options.is24hour) != null ? _c : false;
-  const [hour, setHourState] = React17.useState(initialHour);
-  const [minute, setMinuteState] = React17.useState(initialMinute);
-  const [hourInput, setHourInputState] = React17.useState(
+  const [hour, setHourState] = React13.useState(initialHour);
+  const [minute, setMinuteState] = React13.useState(initialMinute);
+  const [hourInput, setHourInputState] = React13.useState(
     is24hour ? initialHour : to12Hour(initialHour)
   );
-  const [minuteInput, setMinuteInputState] = React17.useState(initialMinute);
-  const [selection, setSelectionState] = React17.useState("hour");
+  const [minuteInput, setMinuteInputState] = React13.useState(initialMinute);
+  const [selection, setSelectionState] = React13.useState("hour");
   const isPm = hour >= 12;
   const isHourInputValid = isValidHourInput(hourInput, is24hour);
   const isMinuteInputValid = isValidMinuteInput(minuteInput);
   const isInputValid = isHourInputValid && isMinuteInputValid;
-  const setHour = React17.useCallback(
+  const setHour = React13.useCallback(
     (h) => {
       const clamped = clamp(h, 0, 23);
       setHourState(clamped);
@@ -4135,12 +4226,12 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = React17.useCallback((m11) => {
-    const clamped = clamp(m11, 0, 59);
+  const setMinute = React13.useCallback((m13) => {
+    const clamped = clamp(m13, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
-  const setHourInput = React17.useCallback(
+  const setHourInput = React13.useCallback(
     (h) => {
       setHourInputState(h);
       if (isValidHourInput(h, is24hour)) {
@@ -4150,16 +4241,16 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = React17.useCallback((m11) => {
-    setMinuteInputState(m11);
-    if (isValidMinuteInput(m11)) {
-      setMinuteState(m11);
+  const setMinuteInput = React13.useCallback((m13) => {
+    setMinuteInputState(m13);
+    if (isValidMinuteInput(m13)) {
+      setMinuteState(m13);
     }
   }, []);
-  const setSelection = React17.useCallback((mode) => {
+  const setSelection = React13.useCallback((mode) => {
     setSelectionState(mode);
   }, []);
-  const setIsPm = React17.useCallback((pm) => {
+  const setIsPm = React13.useCallback((pm) => {
     setHourState((prev) => {
       const wasAlreadyPm = prev >= 12;
       if (pm === wasAlreadyPm) return prev;
@@ -4169,14 +4260,14 @@ var useTimePickerState = (options) => {
       return clamped;
     });
   }, []);
-  const reset = React17.useCallback(() => {
+  const reset = React13.useCallback(() => {
     setHourState(initialHour);
     setMinuteState(initialMinute);
     setHourInputState(is24hour ? initialHour : to12Hour(initialHour));
     setMinuteInputState(initialMinute);
     setSelectionState("hour");
   }, [initialHour, initialMinute, is24hour]);
-  return React17.useMemo(
+  return React13.useMemo(
     () => ({
       hour,
       minute,