@bug-on/m3-expressive 1.0.0

package/dist/overlays.mjs

@@ -0,0 +1,3244 @@
+"use client";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion, useTransform } from 'motion/react';
+import * as React6 from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+import { createPortal } from 'react-dom';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SHAPE_KEY_TIMES = "0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1";
+var SHAPE_KEY_SPLINES = [
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8"
+].join("; ");
+var SHAPE_VALUES = [
+  "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",
+  "M20.3 8.6 21.1 8 22 7.6 23 7.3 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.2 15.5 37.6 16.5 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8 17.6 9.8 18.6 9.6 19.5 9.2Z",
+  "M18.6 9.6 19.5 9.2 20.3 8.6 21.1 8 22 7.6 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.6 16.4 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8Z",
+  "M18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.2 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 33.7 13.1 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.5 30.5 39.5 30 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7.1 21.7 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8 15.4 12.3 16.2 11.7 17 11.1 17.8 10.5Z",
+  "M15.4 12.3 16.2 11.7 17 11.1 17.8 10.5 18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.3 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.4 30.5 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8Z",
+  "M17 12.8 17.7 12.1 18.5 11.5 19.3 10.9 20.1 10.5 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 25 9 26 9 27 9 27.6 9.1 28 9.1 28.9 9.3 29.9 9.6 30.9 9.9 31.8 10.3 32.6 10.8 33.5 11.3 34.3 11.9 34.6 12.2 35 12.6 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.6 18.5 38.6 18.7 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.3 38.2 26.4 37.8 27.3 37.4 28.2 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.8 32.5 33.5 32.8 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.2 37.3 27.9 37.5 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 22.5 39 21.5 39 20.5 38.9 20.4 38.9 19.5 38.8 18.6 38.6 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.4 35.8 13.3 35.8 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.6 30 9.4 29.3 9.3 29 9.1 28 9 27 9 26 9 25 9.2 24 9.4 23 9.6 22.1 9.8 21.7 10 21.1 10.4 20.2 10.9 19.4 11.4 18.5 12.1 17.8 12.7 17 13.4 16.3 14.2 15.6 14.2 15.5 14.9 14.9 15.6 14.2 16.3 13.5Z",
+  "M33.5 11.3 34.3 11.9 35 12.6 35.3 12.8 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.3 17.7 38.6 18.5 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.4 37.8 27.3 37.4 28.2 36.9 28.9 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.5 32.8 33.1 33.2 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.7 37 28.2 37.3 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 23.3 38.9 22.5 39 21.5 39 20.5 38.9 19.5 38.8 18.6 38.6 17.6 38.3 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.3 35.8 12.7 35.2 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.7 30.3 9.6 29.9 9.3 29 9.1 28 9 27 9 26 9 25 9.1 24.5 9.2 24 9.4 23 9.6 22.1 10 21.1 10.4 20.2 10.9 19.4 11.1 19.1 11.5 18.5 12.1 17.7 12.7 17 13.5 16.3 14.2 15.6 14.9 14.9 14.9 14.8 15.6 14.2 16.3 13.5 17 12.8 17.7 12.1 18.5 11.5 19.3 11 19.3 10.9 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 24.7 9.1 25 9 26 9 27 9 28 9.1 28.9 9.3 29.9 9.6 30.4 9.7 30.9 9.9 31.8 10.3 32.6 10.8Z",
+  "M33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.8 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.6 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7 27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1Z",
+  "M27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1 33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.9 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.5 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7Z",
+  "M27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 34.8 11.3 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.9 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.4 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35 36 35.7 35.3 36.4 34.4 37 34.1 37.2 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.6 10 30.1 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10 16.6 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 20.9 11 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11Z",
+  "M36 35.7 35.3 36.4 34.4 37 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.2 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11 27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.8 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35Z",
+  "M32.1 32.1 31.4 32.8 30.7 33.5 29.9 34.1 29.1 34.7 28.3 35.3 27.6 35.8 27.5 35.8 26.6 36.4 25.8 36.8 24.9 37.3 24 37.7 23.1 38 22.1 38.3 21.2 38.6 20.2 38.8 19.2 38.9 18.2 39 17.2 39 16.6 38.9 16.3 38.9 15.3 38.7 14.3 38.4 13.4 38 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10 34.6 9.6 33.7 9.3 32.7 9.1 31.7 9.1 31.4 9 30.8 9 29.8 9.1 28.8 9.2 27.8 9.4 26.8 9.7 25.9 10 24.9 10.3 24 10.7 23.1 11.2 22.2 11.6 21.4 12.2 20.5 12.2 20.4 12.7 19.7 13.3 18.9 13.9 18.1 14.5 17.3 15.2 16.6 15.9 15.9 16.6 15.2 17.3 14.5 18.1 13.9 18.9 13.3 19.7 12.7 20.4 12.2 20.5 12.2 21.4 11.6 22.2 11.2 23.1 10.7 24 10.3 24.9 10 25.9 9.7 26.8 9.4 27.8 9.2 28.8 9.1 29.8 9 30.8 9 31.4 9.1 31.7 9.1 32.7 9.3 33.7 9.6 34.6 10 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 38 13.4 38.4 14.3 38.7 15.3 38.9 16.3 38.9 16.6 39 17.2 39 18.2 38.9 19.2 38.8 20.2 38.6 21.2 38.3 22.1 38 23.1 37.7 24 37.3 24.9 36.8 25.8 36.4 26.6 35.8 27.5 35.8 27.6 35.3 28.3 34.7 29.1 34.1 29.9 33.5 30.7 32.8 31.4Z",
+  "M24.3 10.2 24.9 10 25.9 9.7 26.8 9.4 27.1 9.4 27.8 9.2 28.8 9.1 29.8 9 29.9 9 30.8 9 31.7 9.1 32.7 9.3 32.8 9.3 33.7 9.6 34.6 10 35.5 10.5 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 37.5 12.5 38 13.4 38.4 14.3 38.7 15.2 38.7 15.3 38.9 16.3 39 17.2 39 18.1 39 18.2 38.9 19.2 38.8 20.2 38.6 20.9 38.6 21.2 38.3 22.1 38 23.1 37.8 23.7 37.7 24 37.3 24.9 36.8 25.8 36.5 26.4 36.4 26.6 35.8 27.5 35.3 28.3 35 28.8 34.7 29.1 34.1 29.9 33.5 30.7 33.1 31.1 32.8 31.4 32.1 32.1 31.4 32.8 31.1 33.1 30.7 33.5 29.9 34.1 29.1 34.7 28.8 35 28.3 35.3 27.5 35.8 26.6 36.4 26.4 36.5 25.8 36.8 24.9 37.3 24 37.7 23.7 37.8 23.1 38 22.1 38.3 21.2 38.6 20.9 38.6 20.2 38.8 19.2 38.9 18.2 39 18.1 39 17.2 39 16.3 38.9 15.3 38.7 15.2 38.7 14.3 38.4 13.4 38 12.5 37.5 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10.5 35.5 10 34.6 9.6 33.7 9.3 32.8 9.3 32.7 9.1 31.7 9 30.8 9 29.9 9 29.8 9.1 28.8 9.2 27.8 9.4 27.1 9.4 26.8 9.7 25.9 10 24.9 10.2 24.3 10.3 24 10.7 23.1 11.2 22.2 11.5 21.6 11.6 21.4 12.2 20.5 12.7 19.7 13 19.2 13.3 18.9 13.9 18.1 14.5 17.3 14.9 16.9 15.2 16.6 15.9 15.9 16.6 15.2 16.9 14.9 17.3 14.5 18.1 13.9 18.9 13.3 19.2 13 19.7 12.7 20.5 12.2 21.4 11.6 21.6 11.5 22.2 11.2 23.1 10.7 24 10.3Z",
+  "M22.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 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.3 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.4 38.9 26.2 39.6 27 40.2 27.7 40.5 28.6 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.8 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.6 9.1 21.8 8.4 21 7.8 20.3 7.5 19.4 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.2 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.1 20.9 10.4 21.4 9.5 21.9 8.7Z"
+].join(";");
+var ROTATE_KEY_TIMES = "0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1";
+var ROTATE_KEY_SPLINES = [
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8"
+].join("; ");
+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.memo(function IndeterminateSvg2({
+  size
+}) {
+  const [ready, setReady] = React6.useState(false);
+  React6.useEffect(() => {
+    const raf = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "4 4 40 40",
+      width: size,
+      height: size,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: SHAPE_VALUES.split(";")[0], children: ready && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "d",
+            dur: "5s",
+            repeatCount: "indefinite",
+            calcMode: "spline",
+            keySplines: SHAPE_KEY_SPLINES,
+            keyTimes: SHAPE_KEY_TIMES,
+            values: SHAPE_VALUES
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            attributeType: "XML",
+            type: "rotate",
+            dur: "5s",
+            repeatCount: "indefinite",
+            calcMode: "spline",
+            keySplines: ROTATE_KEY_SPLINES,
+            keyTimes: ROTATE_KEY_TIMES,
+            values: ROTATE_VALUES
+          }
+        )
+      ] }) })
+    }
+  );
+});
+var DeterminateSvg = React6.memo(function DeterminateSvg2({
+  size,
+  progress
+}) {
+  const p = Math.min(1, Math.max(0, progress));
+  const rotation = -180 * p;
+  const pathD = p < 0.5 ? DETERMINATE_CIRCLE : DETERMINATE_SOFT_BURST;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "4 4 40 40",
+      width: size,
+      height: size,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      style: {
+        transform: `rotate(${rotation}deg)`,
+        transition: "transform 0.3s ease"
+      },
+      children: /* @__PURE__ */ jsx("path", { d: pathD, style: { transition: "d 0.3s ease" } })
+    }
+  );
+});
+var LoadingIndicator = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "uncontained",
+      size = 48,
+      progress,
+      color,
+      className,
+      "aria-label": ariaLabel,
+      style
+    } = _b, restProps = __objRest(_b, [
+      "variant",
+      "size",
+      "progress",
+      "color",
+      "className",
+      "aria-label",
+      "style"
+    ]);
+    const isContained = variant === "contained";
+    const isDeterminate = progress !== void 0;
+    const clampedSize = Math.min(240, Math.max(24, size));
+    const scaleFactor = clampedSize / 48;
+    const containerSize = isContained ? 38 * scaleFactor : void 0;
+    const indicatorSize = isContained ? 24 * scaleFactor : clampedSize;
+    const activeColor = isContained ? color != null ? color : "var(--md-sys-color-indicator-contained-active)" : color != null ? color : "var(--md-sys-color-indicator-active)";
+    const ariaNow = isDeterminate ? Math.round(Math.min(1, Math.max(0, progress)) * 100) : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "progressbar",
+        "aria-label": ariaLabel,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": ariaNow,
+        className: cn(
+          "inline-flex items-center justify-center shrink-0",
+          className
+        ),
+        style: __spreadValues({
+          width: clampedSize,
+          height: clampedSize,
+          color: activeColor
+        }, style)
+      }, restProps), {
+        children: isContained ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center justify-center rounded-full",
+            style: {
+              width: containerSize,
+              height: containerSize,
+              backgroundColor: "var(--md-sys-color-indicator-contained-container)"
+            },
+            children: isDeterminate ? /* @__PURE__ */ jsx(DeterminateSvg, { size: indicatorSize, progress }) : /* @__PURE__ */ jsx(IndeterminateSvg, { size: indicatorSize })
+          }
+        ) : isDeterminate ? /* @__PURE__ */ jsx(DeterminateSvg, { size: indicatorSize, progress }) : /* @__PURE__ */ jsx(IndeterminateSvg, { size: indicatorSize })
+      })
+    );
+  }
+);
+LoadingIndicator.displayName = "LoadingIndicator";
+
+// src/ui/progress-indicator/utils.ts
+function easeInOutCubic(x) {
+  return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
+}
+function generateWavyCircularPath(center, radius, amplitude, wavelength) {
+  const circumference = 2 * Math.PI * radius;
+  const numWaves = Math.max(
+    3,
+    Math.round(circumference / Math.max(1, wavelength))
+  );
+  const steps = numWaves * 4;
+  const dt = 2 * Math.PI / steps;
+  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t);
+  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t);
+  const xAt = (t) => center + rAt(t) * Math.cos(t);
+  const yAt = (t) => center + rAt(t) * Math.sin(t);
+  const dxAt = (t) => drAt(t) * Math.cos(t) - rAt(t) * Math.sin(t);
+  const dyAt = (t) => drAt(t) * Math.sin(t) + rAt(t) * Math.cos(t);
+  let d = "";
+  const tStart = 0;
+  for (let i = 0; i < steps; i++) {
+    const t0 = tStart + i * dt;
+    const t1 = tStart + (i + 1) * dt;
+    const scale = dt / 3;
+    const cp1x = xAt(t0) + scale * dxAt(t0);
+    const cp1y = yAt(t0) + scale * dyAt(t0);
+    const cp2x = xAt(t1) - scale * dxAt(t1);
+    const cp2y = yAt(t1) - scale * dyAt(t1);
+    if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
+    d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
+  }
+  d += " Z";
+  return d;
+}
+function getSinePath(startX, endX, phase, wl, amp) {
+  if (startX >= endX) return "";
+  let d = "";
+  const step = amp === 0 ? Math.max(10, endX - startX) : 1;
+  const yStart = Math.sin((startX + phase) / wl * 2 * Math.PI) * amp;
+  d += `M ${startX.toFixed(2)} ${yStart.toFixed(2)}`;
+  let nextX = Math.ceil(startX / step) * step;
+  if (nextX === startX) nextX += step;
+  while (nextX < endX) {
+    const y = Math.sin((nextX + phase) / wl * 2 * Math.PI) * amp;
+    d += ` L ${nextX.toFixed(2)} ${y.toFixed(2)}`;
+    nextX += step;
+  }
+  const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
+  d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
+  return d;
+}
+var CircularProgress = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      size = 48,
+      trackHeight = 4,
+      shape = "flat",
+      amplitude,
+      wavelength,
+      gapSize = 4,
+      crawlerSpeed = 1,
+      color,
+      trackColor,
+      className,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "value",
+      "size",
+      "trackHeight",
+      "shape",
+      "amplitude",
+      "wavelength",
+      "gapSize",
+      "crawlerSpeed",
+      "color",
+      "trackColor",
+      "className",
+      "aria-label"
+    ]);
+    const isDeterminate = value !== void 0;
+    const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
+    const radius = (size - trackHeight) / 2;
+    const center = size / 2;
+    const activeColor = color || "var(--md-sys-color-indicator-active)";
+    const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
+    const isWavy = shape === "wavy";
+    const BASELINE_SIZE = 48;
+    const scaleFactor = size / BASELINE_SIZE;
+    const effectiveAmplitude = React6.useMemo(
+      () => amplitude != null ? amplitude : 1.6 * scaleFactor,
+      [amplitude, scaleFactor]
+    );
+    const effectiveWavelength = React6.useMemo(
+      () => wavelength != null ? wavelength : 15 * scaleFactor,
+      [wavelength, scaleFactor]
+    );
+    const wavyActivePath = React6.useMemo(
+      () => isWavy ? generateWavyCircularPath(
+        center,
+        radius,
+        effectiveAmplitude,
+        effectiveWavelength
+      ) : null,
+      [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
+    );
+    const circumference = React6.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React6.useMemo(
+      () => (gapSize + trackHeight) / circumference,
+      [gapSize, trackHeight, circumference]
+    );
+    const activeAngularFraction = isDeterminate ? clampedValue / 100 : 0;
+    const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
+    const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
+    const ActiveCircleElem = m.circle;
+    const ActivePathElem = m.path;
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "progressbar",
+        "aria-label": ariaLabel,
+        "aria-valuenow": isDeterminate ? clampedValue : void 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn(
+          "relative inline-flex items-center justify-center shrink-0",
+          className
+        ),
+        style: { width: size, height: size }
+      }, restProps), {
+        children: /* @__PURE__ */ jsxs(LazyMotion, { features: domMax, strict: true, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              "aria-hidden": "true",
+              style: { transform: "rotate(-90deg)", overflow: "visible" },
+              children: [
+                isDeterminate ? /* @__PURE__ */ jsx(
+                  m.circle,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    initial: { pathLength: trackLength, pathOffset: trackOffset },
+                    animate: { pathLength: trackLength, pathOffset: trackOffset },
+                    transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
+                    strokeLinecap: "round"
+                  }
+                ) : null,
+                isDeterminate && (isWavy ? /* @__PURE__ */ jsx(
+                  ActivePathElem,
+                  {
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: activeColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round",
+                    initial: { pathLength: 0 },
+                    animate: { pathLength: clampedValue / 100 },
+                    transition: {
+                      duration: 0.4,
+                      ease: [0.2, 0, 0, 1]
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  ActiveCircleElem,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: activeColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round",
+                    initial: { pathLength: 0 },
+                    animate: { pathLength: clampedValue / 100 },
+                    transition: {
+                      duration: 0.4,
+                      ease: [0.2, 0, 0, 1]
+                    }
+                  }
+                ))
+              ]
+            }
+          ),
+          !isDeterminate && /* @__PURE__ */ jsxs(
+            m.svg,
+            {
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "visible",
+                rotate: "-90deg",
+                transformOrigin: "center"
+              },
+              animate: { rotate: ["-90deg", "270deg"] },
+              transition: {
+                rotate: {
+                  duration: 2 / Math.max(0.1, crawlerSpeed),
+                  repeat: Number.POSITIVE_INFINITY,
+                  ease: "linear"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  m.circle,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round",
+                    style: { originX: "50%", originY: "50%" },
+                    animate: {
+                      pathLength: [
+                        Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack),
+                        Math.max(1e-3, 1 - 0.75 - 2 * gapForTrack),
+                        Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack)
+                      ],
+                      rotate: [
+                        `${(0.1 + gapForTrack) * 360}deg`,
+                        `${(1 + gapForTrack) * 360}deg`,
+                        `${(1.1 + gapForTrack) * 360}deg`
+                      ]
+                    },
+                    transition: {
+                      duration: 2 / Math.max(0.1, crawlerSpeed),
+                      repeat: Number.POSITIVE_INFINITY,
+                      ease: [0.4, 0, 0.2, 1]
+                    }
+                  }
+                ),
+                isWavy ? /* @__PURE__ */ jsx(
+                  ActivePathElem,
+                  {
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: activeColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round",
+                    style: { originX: "50%", originY: "50%" },
+                    animate: {
+                      pathLength: [0.1, 0.75, 0.1],
+                      rotate: ["0deg", "90deg", "360deg"]
+                    },
+                    transition: {
+                      duration: 2 / Math.max(0.1, crawlerSpeed),
+                      repeat: Number.POSITIVE_INFINITY,
+                      ease: [0.4, 0, 0.2, 1]
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  ActiveCircleElem,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: activeColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round",
+                    style: { originX: "50%", originY: "50%" },
+                    animate: {
+                      pathLength: [0.1, 0.75, 0.1],
+                      rotate: ["0deg", "90deg", "360deg"]
+                    },
+                    transition: {
+                      duration: 2 / Math.max(0.1, crawlerSpeed),
+                      repeat: Number.POSITIVE_INFINITY,
+                      ease: [0.4, 0, 0.2, 1]
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      })
+    );
+  }
+);
+CircularProgress.displayName = "CircularProgress";
+function useContainerWidth() {
+  const [width, setWidth] = React6.useState(0);
+  const observerRef = React6.useRef(null);
+  const ref = React6.useCallback((node) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (node) {
+      const obs = new ResizeObserver((entries) => {
+        const contentRect = entries[0].contentRect;
+        setWidth(contentRect.width);
+      });
+      obs.observe(node);
+      observerRef.current = obs;
+    }
+  }, []);
+  React6.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return [ref, width];
+}
+function useMergedRef(...refs) {
+  return React6.useCallback(
+    (node) => {
+      for (const ref of refs) {
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref && typeof ref === "object") {
+          ref.current = node;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refs]
+  );
+}
+var FlatLinearTrack = React6.memo(function FlatLinearTrack2({
+  trackHeight,
+  activeColor,
+  trackColor,
+  value,
+  isRtl,
+  gapSize,
+  crawlerSpeed
+}) {
+  const isDeterminate = value !== void 0;
+  const radius = trackHeight / 2;
+  const minActiveWidth = trackHeight;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative w-full overflow-hidden",
+      style: { height: trackHeight, borderRadius: radius },
+      children: isDeterminate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute inset-y-0",
+            style: {
+              backgroundColor: trackColor,
+              borderRadius: radius,
+              width: "100%"
+            },
+            initial: {
+              [isRtl ? "right" : "left"]: `calc(max(${minActiveWidth}px, 0%) + ${gapSize}px)`
+            },
+            animate: {
+              [isRtl ? "right" : "left"]: `calc(max(${minActiveWidth}px, ${value}%) + ${gapSize}px)`
+            },
+            transition: { duration: 0.4, ease: [0.2, 0, 0, 1] }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute inset-y-0",
+            style: __spreadValues({
+              backgroundColor: activeColor,
+              borderRadius: radius,
+              minWidth: minActiveWidth
+            }, isRtl ? { right: 0 } : { left: 0 }),
+            initial: { width: `${minActiveWidth}px` },
+            animate: { width: `${value}%` },
+            transition: { duration: 0.4, ease: [0.2, 0, 0, 1] }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { backgroundColor: trackColor, borderRadius: radius }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute inset-y-0",
+            style: { backgroundColor: activeColor, borderRadius: radius },
+            initial: { left: "-40%", width: "40%" },
+            animate: { left: ["-40%", "100%"], width: ["40%", "20%", "40%"] },
+            transition: {
+              duration: 2 / Math.max(0.1, crawlerSpeed),
+              repeat: Number.POSITIVE_INFINITY,
+              ease: "easeInOut"
+            }
+          }
+        )
+      ] })
+    }
+  );
+});
+var WavyLinearTrack = React6.memo(function WavyLinearTrack2({
+  trackHeight,
+  svgHeight,
+  amplitude,
+  wavelength,
+  indeterminateWavelength,
+  activeColor,
+  trackColor,
+  value,
+  isRtl,
+  gapSize,
+  waveSpeed,
+  crawlerSpeed,
+  determinateAnimation,
+  indeterminateAnimation,
+  trackShape
+}) {
+  const isDeterminate = typeof value === "number";
+  const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
+  const titleId = React6.useId();
+  const [containerRef, width] = useContainerWidth();
+  const activePathRef = React6.useRef(null);
+  const trackPathRef = React6.useRef(null);
+  const amplitudeMV = useMotionValue(amplitude);
+  const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
+  React6.useEffect(() => {
+    if (isDeterminate) {
+      const fraction = clampedValue / 100;
+      let targetAmp = amplitude;
+      if (determinateAnimation === "md3") {
+        targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : amplitude;
+      }
+      animate(amplitudeMV, targetAmp, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
+      animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
+    }
+  }, [
+    clampedValue,
+    isDeterminate,
+    amplitude,
+    amplitudeMV,
+    fractionMV,
+    determinateAnimation
+  ]);
+  const activeWavelength = Math.max(
+    1,
+    isDeterminate ? wavelength : indeterminateWavelength
+  );
+  const trackAmp = trackShape === "wavy" ? amplitude : 0;
+  useAnimationFrame((time) => {
+    if (width === 0) return;
+    const currentAmp = amplitudeMV.get();
+    const phase = time / 1e3 * waveSpeed * activeWavelength;
+    const capWidth = trackHeight / 2;
+    let activePathD = "";
+    let trackD = "";
+    const totalGap = gapSize + trackHeight;
+    if (isDeterminate) {
+      const fraction = fractionMV.get();
+      const barHead = fraction * width;
+      const adjHead = Math.max(capWidth, Math.min(width - capWidth, barHead));
+      const adjTail = capWidth;
+      if (fraction > 0 && adjHead - adjTail > 0.1) {
+        activePathD = getSinePath(
+          adjTail,
+          adjHead,
+          phase,
+          activeWavelength,
+          currentAmp
+        );
+      } else if (fraction === 0) {
+        activePathD = `M ${capWidth} 0 L ${capWidth + 0.01} 0`;
+      }
+      const trackStart = adjHead + totalGap;
+      if (trackStart < width - capWidth) {
+        trackD = getSinePath(
+          trackStart,
+          width - capWidth,
+          phase,
+          activeWavelength,
+          trackAmp
+        );
+      }
+    } else {
+      const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
+      const activeLines = [];
+      if (indeterminateAnimation === "continuous") {
+        const cycle = 2e3 / safeCrawlerSpeed;
+        const fraction = time % cycle / cycle;
+        activeLines.push({
+          tail: easeInOutCubic(Math.max(0, fraction * 1.5 - 0.5)),
+          head: easeInOutCubic(Math.min(1, fraction * 1.5))
+        });
+      } else {
+        const cycle = 1750 / safeCrawlerSpeed;
+        const t = time % cycle * safeCrawlerSpeed;
+        const l1H = easeInOutCubic(Math.max(0, Math.min(1, t / 1e3)));
+        const l1T = easeInOutCubic(Math.max(0, Math.min(1, (t - 250) / 1e3)));
+        const l2H = easeInOutCubic(Math.max(0, Math.min(1, (t - 650) / 850)));
+        const l2T = easeInOutCubic(Math.max(0, Math.min(1, (t - 900) / 850)));
+        activeLines.push({ tail: l1T, head: l1H });
+        activeLines.push({ tail: l2T, head: l2H });
+      }
+      const segments = activeLines.map((line) => {
+        const barTail = line.tail * width;
+        const barHead = line.head * width;
+        const adjTail = Math.max(
+          capWidth,
+          Math.min(width - capWidth, barTail)
+        );
+        const adjHead = Math.max(
+          capWidth,
+          Math.min(width - capWidth, barHead)
+        );
+        return { adjTail, adjHead };
+      }).filter((seg) => seg.adjHead - seg.adjTail > 0.1);
+      activePathD = segments.map(
+        (seg) => getSinePath(
+          seg.adjTail,
+          seg.adjHead,
+          phase,
+          activeWavelength,
+          currentAmp
+        )
+      ).join(" ");
+      let currentTrackX = capWidth;
+      for (const seg of segments) {
+        const trackEnd = seg.adjTail - totalGap;
+        if (trackEnd > currentTrackX) {
+          trackD += `${getSinePath(currentTrackX, trackEnd, phase, activeWavelength, trackAmp)} `;
+        }
+        currentTrackX = Math.max(currentTrackX, seg.adjHead + totalGap);
+      }
+      if (currentTrackX < width - capWidth) {
+        trackD += getSinePath(
+          currentTrackX,
+          width - capWidth,
+          phase,
+          activeWavelength,
+          trackAmp
+        );
+      }
+    }
+    if (activePathRef.current)
+      activePathRef.current.setAttribute("d", activePathD);
+    if (trackPathRef.current)
+      trackPathRef.current.setAttribute("d", trackD.trim());
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative w-full overflow-hidden",
+      style: { height: svgHeight },
+      children: width > 0 && /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "absolute inset-0 w-full h-full",
+          style: {
+            overflow: "visible",
+            transform: isRtl ? "scaleX(-1)" : void 0
+          },
+          "aria-labelledby": titleId,
+          children: [
+            /* @__PURE__ */ jsx("title", { id: titleId, children: isDeterminate ? `Progress: ${clampedValue}%` : "Indeterminate loading progress" }),
+            /* @__PURE__ */ jsxs("g", { transform: `translate(0, ${svgHeight / 2})`, children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  ref: trackPathRef,
+                  fill: "none",
+                  stroke: trackColor,
+                  strokeWidth: trackHeight,
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  ref: activePathRef,
+                  fill: "none",
+                  stroke: activeColor,
+                  strokeWidth: trackHeight,
+                  strokeLinecap: "round"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+var LinearProgress = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      shape = "flat",
+      trackShape,
+      trackHeight = 4,
+      amplitude,
+      wavelength = 40,
+      indeterminateWavelength = 20,
+      waveSpeed = 1,
+      crawlerSpeed = 1,
+      determinateAnimation = "md3",
+      indeterminateAnimation = "continuous",
+      gapSize = 4,
+      showStopIndicator = "auto",
+      color,
+      trackColor,
+      className,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "value",
+      "shape",
+      "trackShape",
+      "trackHeight",
+      "amplitude",
+      "wavelength",
+      "indeterminateWavelength",
+      "waveSpeed",
+      "crawlerSpeed",
+      "determinateAnimation",
+      "indeterminateAnimation",
+      "gapSize",
+      "showStopIndicator",
+      "color",
+      "trackColor",
+      "className",
+      "aria-label"
+    ]);
+    const isDeterminate = value !== void 0;
+    const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
+    const containerRef = React6.useRef(null);
+    const mergedRef = useMergedRef(ref, containerRef);
+    const [isRtl, setIsRtl] = React6.useState(false);
+    React6.useEffect(() => {
+      if (containerRef.current) {
+        const dir = getComputedStyle(containerRef.current).direction;
+        setIsRtl(dir === "rtl");
+      }
+    }, []);
+    const isWavy = shape === "wavy";
+    const resolvedTrackShape = trackShape != null ? trackShape : shape;
+    const effectiveAmplitude = React6.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React6.useMemo(
+      () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
+      [isWavy, trackHeight, effectiveAmplitude]
+    );
+    const shouldShowStop = React6.useMemo(
+      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      [isDeterminate, resolvedTrackShape, showStopIndicator]
+    );
+    const stopSize = React6.useMemo(
+      () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
+      [trackHeight]
+    );
+    const stopOffset = (trackHeight - stopSize) / 2;
+    const activeColor = color || "var(--md-sys-color-indicator-active)";
+    const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        role: "progressbar",
+        "aria-label": ariaLabel,
+        "aria-valuenow": isDeterminate ? clampedValue : void 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn(
+          "relative flex w-full flex-col justify-center",
+          className
+        ),
+        style: { height: svgHeight }
+      }, restProps), {
+        children: [
+          isWavy ? /* @__PURE__ */ jsx(
+            WavyLinearTrack,
+            {
+              trackHeight,
+              svgHeight,
+              amplitude: effectiveAmplitude,
+              wavelength,
+              indeterminateWavelength,
+              activeColor,
+              trackColor: bgTrackColor,
+              value: isDeterminate ? clampedValue : void 0,
+              isRtl,
+              gapSize,
+              waveSpeed,
+              crawlerSpeed,
+              determinateAnimation,
+              indeterminateAnimation,
+              trackShape: resolvedTrackShape
+            }
+          ) : /* @__PURE__ */ jsx(
+            FlatLinearTrack,
+            {
+              trackHeight,
+              activeColor,
+              trackColor: bgTrackColor,
+              value: isDeterminate ? clampedValue : void 0,
+              isRtl,
+              gapSize,
+              crawlerSpeed
+            }
+          ),
+          shouldShowStop && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute rounded-full",
+              style: __spreadValues({
+                width: stopSize,
+                height: stopSize,
+                backgroundColor: "var(--md-sys-color-indicator-stop)",
+                top: svgHeight / 2 - stopSize / 2
+              }, isRtl ? { left: stopOffset } : { right: stopOffset })
+            }
+          )
+        ]
+      })
+    ) });
+  }
+);
+LinearProgress.displayName = "LinearProgress";
+var ProgressIndicator = React6.forwardRef((props, ref) => {
+  if (props.variant === "circular") {
+    return /* @__PURE__ */ jsx(CircularProgress, __spreadValues({ ref }, props));
+  }
+  return /* @__PURE__ */ jsx(LinearProgress, __spreadValues({ ref }, props));
+});
+ProgressIndicator.displayName = "ProgressIndicator";
+var RippleItem = React6.memo(function RippleItem2({
+  ripple,
+  onDone
+}) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: ripple.x - ripple.size / 2,
+        top: ripple.y - ripple.size / 2,
+        width: ripple.size,
+        height: ripple.size,
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        pointerEvents: "none",
+        transformOrigin: "center"
+      },
+      initial: { scale: 0, opacity: 0.12 },
+      animate: { scale: 1, opacity: 0 },
+      exit: { opacity: 0 },
+      transition: {
+        scale: { duration: 0.5, ease: [0.2, 0, 0, 1] },
+        opacity: { duration: 0.4, ease: "easeOut", delay: 0.1 }
+      },
+      onAnimationComplete: () => onDone(ripple.id)
+    },
+    ripple.id
+  );
+});
+function Ripple({
+  ripples,
+  onRippleDone,
+  disabled = false,
+  respectSystemMotion = true
+}) {
+  const prefersReduced = useReducedMotion();
+  if (disabled) return null;
+  if (respectSystemMotion && prefersReduced) return null;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: ripples.map((r) => /* @__PURE__ */ jsx(RippleItem, { ripple: r, onDone: onRippleDone }, r.id)) });
+}
+function useRippleState(options = {}) {
+  const { disabled = false } = options;
+  const [ripples, setRipples] = React6.useState([]);
+  const onPointerDown = React6.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;
+      setRipples((prev) => [
+        ...prev,
+        { id: Date.now(), x, y, size: rippleSize }
+      ]);
+    },
+    [disabled]
+  );
+  const removeRipple = React6.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  return { ripples, onPointerDown, removeRipple };
+}
+
+// src/ui/shared/motion-tokens.ts
+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
+};
+var CSS_CURVES = {
+  expressive: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.42, 1.67, 0.21, 0.90)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.38, 1.21, 0.22, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.39, 1.29, 0.35, 0.98)",
+        durationMs: 650
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  },
+  standard: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 750
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  }
+};
+function getMotionTransitionCSS(speed, type, scheme = "expressive") {
+  const { curve, durationMs } = CSS_CURVES[scheme][speed][type];
+  return `${durationMs}ms ${curve}`;
+}
+
+// src/ui/shared/constants.ts
+var SPRING_TRANSITION_FAST = FAST_EFFECTS_SPRING;
+var SPRING_TRANSITION = DEFAULT_EFFECTS_SPRING;
+var ICON_SPAN_VARIANTS = {
+  initial: { scale: 0.01 },
+  animate: { scale: 1 },
+  exit: { scale: 0.01 }
+};
+function TouchTarget() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 min-w-12 min-h-12 cursor-pointer pointer-events-none"
+    }
+  );
+}
+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_ICON = {
+  xs: { cls: "size-5", px: 20 },
+  sm: { cls: "size-6", px: 24 },
+  md: { cls: "size-6", px: 24 },
+  lg: { cls: "size-8", px: 32 },
+  xl: { cls: "size-10", px: 40 }
+};
+var RADIUS_MAP = {
+  xs: {
+    round: 16,
+    square: 12,
+    pressed: 8,
+    selectedRound: 12,
+    selectedSquare: 16
+  },
+  sm: {
+    round: 20,
+    square: 12,
+    pressed: 8,
+    selectedRound: 12,
+    selectedSquare: 20
+  },
+  md: {
+    round: 28,
+    square: 16,
+    pressed: 12,
+    selectedRound: 16,
+    selectedSquare: 28
+  },
+  lg: {
+    round: 48,
+    square: 28,
+    pressed: 16,
+    selectedRound: 28,
+    selectedSquare: 48
+  },
+  xl: {
+    round: 68,
+    square: 28,
+    pressed: 16,
+    selectedRound: 28,
+    selectedSquare: 68
+  }
+};
+var SIZE_OUTLINE_WIDTH = {
+  xs: "border",
+  sm: "border",
+  md: "border",
+  lg: "border-2",
+  xl: "border-[3px]"
+};
+var colorStyles = {
+  standard: {
+    default: "text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "text-m3-primary hover:bg-m3-primary/8 active:bg-m3-primary/12"
+  },
+  filled: {
+    default: "bg-m3-surface-container text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "bg-m3-primary text-m3-on-primary hover:brightness-95 active:brightness-90"
+  },
+  tonal: {
+    default: "bg-m3-secondary-container text-m3-on-secondary-container hover:bg-m3-on-secondary-container/8 active:bg-m3-on-secondary-container/12",
+    selected: "bg-m3-secondary text-m3-on-secondary hover:brightness-95 active:brightness-90"
+  },
+  outlined: {
+    default: "border-m3-outline-variant text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "bg-m3-inverse-surface text-m3-inverse-on-surface border-transparent hover:brightness-95 active:brightness-90"
+  }
+};
+var baseIconButtonClasses = [
+  "relative shrink-0 inline-flex items-center justify-center",
+  "select-none cursor-pointer",
+  "transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+  "disabled:pointer-events-none disabled:opacity-[0.38]"
+];
+function resolveAnimateRadius(radiusConfig, shape, isToggle, isSelected) {
+  if (isToggle && isSelected) {
+    return shape === "round" ? radiusConfig.selectedRound : radiusConfig.selectedSquare;
+  }
+  return shape === "round" ? radiusConfig.round : radiusConfig.square;
+}
+function resolveDisabledBgClass(colorStyle) {
+  if (colorStyle === "filled" || colorStyle === "tonal") {
+    return "disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/[0.38]";
+  }
+  if (colorStyle === "outlined") {
+    return "disabled:text-m3-on-surface/[0.38] disabled:border-m3-on-surface/[0.12]";
+  }
+  return "disabled:text-m3-on-surface/[0.38]";
+}
+var IconButtonComponent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      variant = "default",
+      colorStyle = "standard",
+      size = "sm",
+      shape = "round",
+      selected,
+      loading = false,
+      loadingVariant = "loading-indicator",
+      iconSize,
+      children,
+      onClick,
+      onKeyDown,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "variant",
+      "colorStyle",
+      "size",
+      "shape",
+      "selected",
+      "loading",
+      "loadingVariant",
+      "iconSize",
+      "children",
+      "onClick",
+      "onKeyDown",
+      "aria-label"
+    ]);
+    var _a2, _b2;
+    const isToggle = variant === "toggle";
+    const isSelected = isToggle && !!selected;
+    const resolvedColorClass = React6.useMemo(
+      () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
+      [isSelected, colorStyle]
+    );
+    const outlineWidthClass = React6.useMemo(
+      () => {
+        var _a3;
+        return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
+      },
+      [colorStyle, isSelected, size]
+    );
+    const disabledBgClass = React6.useMemo(
+      () => resolveDisabledBgClass(colorStyle),
+      [colorStyle]
+    );
+    const radiusConfig = (_a2 = RADIUS_MAP[size]) != null ? _a2 : RADIUS_MAP.sm;
+    const animateRadius = resolveAnimateRadius(
+      radiusConfig,
+      shape,
+      isToggle,
+      isSelected
+    );
+    const pressedRadius = radiusConfig.pressed;
+    const sizeIcon = (_b2 = SIZE_ICON[size]) != null ? _b2 : SIZE_ICON.sm;
+    const iconClass = sizeIcon.cls;
+    const defaultIconPx = sizeIcon.px;
+    const iconPx = iconSize != null ? iconSize : defaultIconPx;
+    const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const needsTouchTarget = size === "xs" || size === "sm";
+    const { ripples, onPointerDown, removeRipple } = useRippleState({
+      disabled: loading
+    });
+    const handleClick = React6.useCallback(
+      (e) => {
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+        onClick == null ? void 0 : onClick(e);
+      },
+      [loading, onClick]
+    );
+    const handleKeyDown = React6.useCallback(
+      (e) => {
+        if (loading) return;
+        if ((e.key === "Enter" || e.key === " ") && onClick) {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+        onKeyDown == null ? void 0 : onKeyDown(e);
+      },
+      [loading, onClick, onKeyDown]
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "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,
+        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
+        )
+      }, restProps), {
+        children: [
+          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              className: cn(
+                "flex items-center justify-center shrink-0",
+                iconSize != null ? void 0 : iconClass
+              ),
+              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+                  color: "currentColor",
+                  trackColor: "transparent",
+                  "aria-label": "Loading"
+                }
+              )
+            }),
+            "loading"
+          ) : /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              "aria-hidden": "true",
+              className: cn(
+                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+                iconSize != null ? void 0 : iconClass
+              ),
+              style: {
+                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+                width: isCustomSize ? `${iconSize}px` : void 0,
+                height: isCustomSize ? `${iconSize}px` : void 0
+              },
+              children
+            }),
+            "content"
+          ) })
+        ]
+      })
+    ) });
+  }
+);
+IconButtonComponent.displayName = "IconButton";
+var IconButton = React6.memo(IconButtonComponent);
+var VARIANT_FONT = {
+  outlined: "'Material Symbols Outlined'",
+  rounded: "'Material Symbols Rounded'",
+  sharp: "'Material Symbols Sharp'"
+};
+var IconComponent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      name,
+      variant = "outlined",
+      fill = 0,
+      weight = 400,
+      grade = 0,
+      opticalSize = 24,
+      size,
+      animateFill = false,
+      className,
+      style
+    } = _b, restProps = __objRest(_b, [
+      "name",
+      "variant",
+      "fill",
+      "weight",
+      "grade",
+      "opticalSize",
+      "size",
+      "animateFill",
+      "className",
+      "style"
+    ]);
+    const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`;
+    const computedStyle = __spreadValues({
+      fontFamily: VARIANT_FONT[variant],
+      fontSize: size === "inherit" ? "inherit" : size != null ? `${size}px` : `${opticalSize}px`,
+      fontVariationSettings
+    }, style);
+    if (animateFill) {
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "md-icon inline-flex items-center justify-center shrink-0 select-none",
+            className
+          ),
+          "aria-hidden": "true",
+          animate: { fontVariationSettings },
+          transition: SPRING_TRANSITION_FAST,
+          style: computedStyle
+        }, restProps), {
+          children: name
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "md-icon inline-flex items-center justify-center shrink-0 select-none",
+          className
+        ),
+        "aria-hidden": "true",
+        style: computedStyle
+      }, restProps), {
+        children: name
+      })
+    );
+  }
+);
+IconComponent.displayName = "Icon";
+var Icon = React6.memo(IconComponent);
+var ScrollArea = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      viewportClassName,
+      children,
+      type = "hover",
+      orientation = "vertical",
+      scrollHideDelay = 600,
+      viewportRef,
+      viewportProps
+    } = _b, props = __objRest(_b, [
+      "className",
+      "viewportClassName",
+      "children",
+      "type",
+      "orientation",
+      "scrollHideDelay",
+      "viewportRef",
+      "viewportProps"
+    ]);
+    const [isTouchDevice, setIsTouchDevice] = React6.useState(false);
+    React6.useEffect(() => {
+      if (typeof window !== "undefined") {
+        setIsTouchDevice(
+          "ontouchstart" in window || navigator.maxTouchPoints > 0
+        );
+      }
+    }, []);
+    const resolvedType = React6.useMemo(() => {
+      if (type === "hover" && isTouchDevice) {
+        return "scroll";
+      }
+      return type;
+    }, [type, isTouchDevice]);
+    const radixType = resolvedType === "none" ? "always" : resolvedType;
+    return /* @__PURE__ */ jsxs(
+      RadixScrollArea.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        type: radixType,
+        scrollHideDelay,
+        className: cn("relative overflow-hidden flex flex-col", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixScrollArea.Viewport,
+            __spreadProps(__spreadValues({
+              ref: viewportRef
+            }, viewportProps), {
+              className: cn(
+                "h-full w-full flex-1 min-h-0 min-w-0 rounded-[inherit]",
+                "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+                viewportClassName,
+                viewportProps == null ? void 0 : viewportProps.className
+              ),
+              children
+            })
+          ),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "vertical",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "horizontal",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(RadixScrollArea.Corner, { className: "bg-m3-surface-container" })
+        ]
+      })
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Scrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-all duration-300 ease-in-out",
+        "absolute z-50",
+        orientation === "vertical" && "right-0 top-0 bottom-0 w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent p-px",
+        "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        RadixScrollArea.Thumb,
+        {
+          className: cn(
+            "relative flex-1 rounded-full bg-m3-on-surface/25 transition-colors duration-200",
+            "hover:bg-m3-on-surface/40 active:bg-m3-on-surface/55",
+            "before:absolute before:left-1/2 before:top-1/2 before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2"
+          )
+        }
+      )
+    })
+  );
+});
+ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
+var ScrollAreaCorner = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Corner,
+    __spreadValues({
+      ref,
+      className: cn("bg-m3-surface-container", className)
+    }, props)
+  );
+});
+ScrollAreaCorner.displayName = "ScrollAreaCorner";
+var MD3_SPRING = DEFAULT_SPATIAL_SPRING;
+var MD3_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  exit: { opacity: 0, transition: { duration: 0.15, ease: "easeIn" } }
+};
+var MD3_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 24 },
+  animate: { opacity: 1, scale: 1, y: 0, transition: MD3_SPRING },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: "easeIn" }
+  }
+};
+var MD3_FULLSCREEN_ANIM = {
+  initial: { y: "100%" },
+  animate: { y: 0, transition: MD3_SPRING },
+  exit: { y: "100%", transition: { duration: 0.2, ease: "easeIn" } }
+};
+var Dialog = ({ open, onOpenChange, children }) => /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange, children });
+Dialog.displayName = "Dialog";
+var DialogTrigger = RadixDialog.Trigger;
+DialogTrigger.displayName = "DialogTrigger";
+var DialogPortal = ({
+  open,
+  children
+}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React6.Children.toArray(children) : null }) });
+DialogPortal.displayName = "DialogPortal";
+var DialogOverlay = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
+    m.div,
+    __spreadValues({
+      className: cn("fixed inset-0 z-50 bg-black/32", className),
+      "aria-hidden": "true"
+    }, MD3_OVERLAY_ANIM)
+  ) }));
+});
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      asChild: true,
+      "aria-describedby": void 0
+    }, props), {
+      children: /* @__PURE__ */ jsxs(
+        m.div,
+        __spreadProps(__spreadValues({
+          className: cn(
+            "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+            "w-[calc(100%-2rem)] max-w-140",
+            "rounded-[28px] bg-m3-surface-container-high p-6",
+            "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+            className
+          ),
+          role: "dialog"
+        }, MD3_CONTENT_ANIM), {
+          children: [
+            children,
+            !hideCloseButton && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                colorStyle: "filled",
+                className: "absolute right-4 top-4",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
+              }
+            ) })
+          ]
+        })
+      )
+    })
+  );
+});
+DialogContent.displayName = "DialogContent";
+var DialogIcon = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex justify-center mb-4 text-m3-secondary", className),
+      "aria-hidden": "true"
+    }, props), {
+      children
+    })
+  );
+});
+DialogIcon.displayName = "DialogIcon";
+var DialogHeader = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
+};
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Title,
+    __spreadValues({
+      ref,
+      asChild,
+      className: cn(
+        "text-[24px] leading-8 font-normal text-m3-on-surface tracking-[0em]",
+        className
+      )
+    }, props)
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Description,
+    __spreadValues({
+      ref,
+      asChild,
+      className: cn("text-sm text-m3-on-surface-variant leading-5", className)
+    }, props)
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogBody = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    __spreadProps(__spreadValues({
+      ref,
+      type: "hover",
+      dir,
+      className: cn("max-h-[calc(85dvh-200px)] -mx-6", className),
+      viewportClassName: "px-6"
+    }, props), {
+      children
+    })
+  );
+});
+DialogBody.displayName = "DialogBody";
+var DialogFooter = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      className: cn("flex flex-row justify-end gap-2 mt-6", className)
+    }, props)
+  );
+};
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = RadixDialog.Close;
+var DialogFullScreenContent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      title,
+      actionLabel,
+      onAction,
+      showDivider
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "title",
+      "actionLabel",
+      "onAction",
+      "showDivider"
+    ]);
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        asChild: true,
+        "aria-describedby": void 0
+      }, props), {
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          __spreadProps(__spreadValues({
+            className: cn(
+              "fixed inset-0 z-50 w-full h-full bg-m3-surface flex flex-col",
+              "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary",
+              className
+            ),
+            role: "dialog"
+          }, MD3_FULLSCREEN_ANIM), {
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface", children: [
+                /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", colorStyle: "filled", "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" }) }) }),
+                title && /* @__PURE__ */ jsx(DialogTitle, { className: "flex-1 text-[22px] leading-7 font-medium truncate pr-2", children: title }),
+                actionLabel && onAction && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onAction,
+                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap",
+                    children: actionLabel
+                  }
+                )
+              ] }),
+              showDivider && /* @__PURE__ */ jsx("hr", { className: "border-m3-outline-variant w-full shrink-0 m-0" }),
+              /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: "flex-1 w-full",
+                  viewportClassName: "p-6",
+                  children
+                }
+              )
+            ]
+          })
+        )
+      })
+    );
+  }
+);
+DialogFullScreenContent.displayName = "DialogFullScreenContent";
+var MD3_DRAWER_SPRING = DEFAULT_SPATIAL_SPRING;
+var MD3_DRAWER_ANIM = {
+  initial: { y: "100%", opacity: 0.6 },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: MD3_DRAWER_SPRING
+  },
+  exit: {
+    y: "100%",
+    opacity: 0,
+    transition: { duration: 0.22, ease: "easeIn" }
+  }
+};
+var MD3_SCRIM_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }
+};
+var Drawer = ({ open, onOpenChange, children }) => /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange, children });
+Drawer.displayName = "Drawer";
+var DrawerTrigger = RadixDialog.Trigger;
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerClose = RadixDialog.Close;
+var DrawerPortal = ({
+  open,
+  children
+}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: open && children }) });
+var DrawerOverlay = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
+    m.div,
+    __spreadValues({
+      "aria-hidden": "true",
+      className: cn("fixed inset-0 z-50 bg-black/40", className)
+    }, MD3_SCRIM_ANIM)
+  ) }));
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      maxHeight = "90vh",
+      hideHandle = false,
+      hideCloseButton = false,
+      style
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "maxHeight",
+      "hideHandle",
+      "hideCloseButton",
+      "style"
+    ]);
+    return /* @__PURE__ */ jsx(RadixDialog.Content, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxs(
+      m.div,
+      __spreadProps(__spreadValues({
+        className: cn(
+          // MD3 Bottom Sheet shape: chỉ bo góc trên
+          "fixed bottom-0 left-0 right-0 z-50",
+          "rounded-t-[28px] bg-m3-surface-container-low",
+          "flex flex-col overflow-hidden",
+          "outline-none",
+          // focus-visible ring — a11y
+          "focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+          className
+        ),
+        style: __spreadValues({ maxHeight }, style)
+      }, MD3_DRAWER_ANIM), {
+        children: [
+          !hideHandle && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto mt-3 h-1 w-9 rounded-full bg-m3-on-surface-variant/40 shrink-0"
+            }
+          ),
+          !hideCloseButton && /* @__PURE__ */ jsx(
+            RadixDialog.Close,
+            {
+              className: cn(
+                "absolute right-4 top-3 rounded-full p-2",
+                "text-m3-on-surface-variant",
+                "hover:bg-m3-on-surface/8",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+                "transition-colors duration-200"
+              ),
+              "aria-label": "\u0110\xF3ng b\u1EA3ng \u0111i\u1EC1u khi\u1EC3n",
+              children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 20, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain p-6", children })
+        ]
+      })
+    ) }));
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-1 mb-4", className) }, props));
+};
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
+};
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Title,
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-[22px] leading-7 font-medium text-m3-on-surface",
+        className
+      )
+    }, props)
+  );
+});
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Description,
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-m3-on-surface-variant leading-5", className)
+    }, props)
+  );
+});
+DrawerDescription.displayName = "DrawerDescription";
+var INDICATOR = "h-1 w-8 rounded-full bg-m3-on-surface-variant/40";
+var DragHandle = React6.forwardRef(
+  ({ className, onCycle, "aria-label": ariaLabel }, ref) => {
+    const isInteractive = Boolean(onCycle);
+    if (isInteractive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-label": ariaLabel != null ? ariaLabel : "Adjust sheet height",
+          className: cn(
+            "flex items-center justify-center w-full pt-[30px] pb-[22px] shrink-0",
+            "cursor-pointer bg-transparent border-0",
+            "rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-m3-on-surface-variant focus-visible:ring-offset-2",
+            className
+          ),
+          onClick: onCycle,
+          "data-testid": "sheet-drag-handle",
+          children: /* @__PURE__ */ jsx("div", { className: INDICATOR })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": true,
+        className: cn(
+          "flex items-center justify-center w-full pt-[30px] pb-[22px] shrink-0",
+          className
+        ),
+        "data-testid": "sheet-drag-handle",
+        children: /* @__PURE__ */ jsx("div", { className: INDICATOR })
+      }
+    );
+  }
+);
+DragHandle.displayName = "DragHandle";
+
+// src/ui/sheets/shared/utils.ts
+function resolveDividers(divider) {
+  var _a, _b;
+  if (divider === false) return { header: false, footer: false };
+  if (divider === void 0 || divider === true) {
+    return { header: true, footer: true };
+  }
+  return { header: (_a = divider.header) != null ? _a : true, footer: (_b = divider.footer) != null ? _b : true };
+}
+function buildSideSheetAnim(edge) {
+  const exitX = edge === "end" ? "100%" : "-100%";
+  return {
+    initial: { x: exitX, opacity: 0.6 },
+    animate: { x: 0, opacity: 1, transition: DEFAULT_SPATIAL_SPRING },
+    exit: {
+      x: exitX,
+      opacity: 0,
+      transition: { duration: 0.22, ease: "easeIn" }
+    }
+  };
+}
+var DEFAULT_SHEET_BG = "bg-m3-surface-container-low";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var DISMISS_THRESHOLD = 0.4;
+var DISMISS_VELOCITY_THRESHOLD = 600;
+var DEFAULT_SAFE_AREA_OFFSET = 56;
+var BOUNDARY_DAMPENING_ZONE = 80;
+var parseSnapPoint = (snap, viewportHeight, naturalHeight, safeAreaOffset, parsedMaxHeight, hasUserSnapPoints) => {
+  const absoluteMaxHeight = viewportHeight - safeAreaOffset;
+  const capHeight = hasUserSnapPoints ? absoluteMaxHeight : Math.min(absoluteMaxHeight, parsedMaxHeight);
+  if (typeof snap === "number") return Math.min(snap, capHeight);
+  if (snap === "full") return capHeight;
+  if (snap === "fit" || snap === "max-content")
+    return Math.min(
+      naturalHeight,
+      Math.min(absoluteMaxHeight, parsedMaxHeight)
+    );
+  if (snap === "partiallyExpanded")
+    return Math.min(Math.floor(viewportHeight * 0.5), capHeight);
+  if (typeof snap === "string") {
+    if (snap.endsWith("%")) {
+      return Math.min(parseFloat(snap) / 100 * viewportHeight, capHeight);
+    }
+    if (snap.endsWith("px")) {
+      return Math.min(parseFloat(snap), capHeight);
+    }
+    if (snap.endsWith("dvh") || snap.endsWith("vh")) {
+      return Math.min(parseFloat(snap) / 100 * viewportHeight, capHeight);
+    }
+  }
+  return Math.min(naturalHeight, capHeight);
+};
+var measureSafeAreaOffset = () => {
+  if (typeof document === "undefined") return DEFAULT_SAFE_AREA_OFFSET;
+  const el = document.createElement("div");
+  el.style.cssText = "position:absolute;top:0;height:max(56px,env(safe-area-inset-top,0px));visibility:hidden;pointer-events:none";
+  document.body.appendChild(el);
+  const height = el.offsetHeight;
+  document.body.removeChild(el);
+  return height;
+};
+function useBottomSheet({
+  isOpen,
+  onClose,
+  snapPoints,
+  defaultSnapPoint,
+  onSnapChange,
+  gesturesEnabled = true,
+  isModal = false,
+  maxHeight
+}) {
+  const [scopeNode, setScopeNode] = useState(null);
+  const scopeNodeRef = useRef(null);
+  const scope = useCallback((node) => {
+    scopeNodeRef.current = node;
+    setScopeNode(node);
+  }, []);
+  Object.defineProperty(scope, "current", {
+    get: () => scopeNodeRef.current,
+    set: (v) => {
+      scopeNodeRef.current = v;
+    },
+    configurable: true
+  });
+  const y = useMotionValue(
+    typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800
+  );
+  const [dimensions, setDimensions] = useState({
+    viewportHeight: typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800,
+    naturalHeight: 0,
+    safeAreaOffset: DEFAULT_SAFE_AREA_OFFSET
+  });
+  const hasMeasuredAfterOpen = useRef(false);
+  const measureDimensions = useCallback(() => {
+    const node = scopeNodeRef.current;
+    if (!node) return;
+    const viewportHeight2 = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const safeAreaOffset2 = measureSafeAreaOffset();
+    const viewport = node.querySelector("[data-radix-scroll-area-viewport]");
+    let naturalHeight2 = node.scrollHeight;
+    if (viewport) {
+      let nonScrollableHeight = 0;
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (!child.contains(viewport) && child !== viewport) {
+          nonScrollableHeight += child.offsetHeight;
+        }
+      }
+      naturalHeight2 = nonScrollableHeight + viewport.scrollHeight;
+    }
+    if (naturalHeight2 > 0) hasMeasuredAfterOpen.current = true;
+    setDimensions((prev) => {
+      if (prev.viewportHeight === viewportHeight2 && prev.naturalHeight === naturalHeight2 && prev.safeAreaOffset === safeAreaOffset2) {
+        return prev;
+      }
+      return { viewportHeight: viewportHeight2, naturalHeight: naturalHeight2, safeAreaOffset: safeAreaOffset2 };
+    });
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!isOpen || !scopeNode) return;
+    measureDimensions();
+    const observer = new ResizeObserver(measureDimensions);
+    const viewport = scopeNode.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    if (viewport) {
+      observer.observe(viewport);
+      if (viewport.firstElementChild)
+        observer.observe(viewport.firstElementChild);
+    } else {
+      observer.observe(scopeNode);
+    }
+    window.addEventListener("resize", measureDimensions);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measureDimensions);
+    };
+  }, [isOpen, scopeNode, measureDimensions]);
+  useIsomorphicLayoutEffect(() => {
+    const vv = window.visualViewport;
+    if (!isOpen || !vv) return;
+    const handleResize = () => {
+      document.documentElement.style.setProperty(
+        "--sheet-vh",
+        `${vv.height}px`
+      );
+      measureDimensions();
+    };
+    vv.addEventListener("resize", handleResize);
+    handleResize();
+    return () => vv.removeEventListener("resize", handleResize);
+  }, [isOpen, measureDimensions]);
+  const { viewportHeight, naturalHeight, safeAreaOffset } = dimensions;
+  const parsedMaxHeight = useMemo(() => {
+    if (!maxHeight) return viewportHeight - safeAreaOffset;
+    if (maxHeight.endsWith("px")) return parseFloat(maxHeight);
+    if (maxHeight.endsWith("dvh") || maxHeight.endsWith("vh")) {
+      return parseFloat(maxHeight) / 100 * viewportHeight;
+    }
+    if (maxHeight.endsWith("%")) {
+      return parseFloat(maxHeight) / 100 * viewportHeight;
+    }
+    return parseFloat(maxHeight) || viewportHeight - safeAreaOffset;
+  }, [maxHeight, viewportHeight, safeAreaOffset]);
+  const snaps = useMemo(() => {
+    if (snapPoints) return snapPoints;
+    if (isModal) return ["partiallyExpanded", "full"];
+    return ["fit"];
+  }, [snapPoints, isModal]);
+  const allowsViewportSnapExpansion = snapPoints !== void 0 || snaps.length > 1;
+  const snapHeights = useMemo(
+    () => snaps.map(
+      (snap) => parseSnapPoint(
+        snap,
+        viewportHeight,
+        naturalHeight,
+        safeAreaOffset,
+        parsedMaxHeight,
+        allowsViewportSnapExpansion
+      )
+    ),
+    [
+      snaps,
+      viewportHeight,
+      naturalHeight,
+      safeAreaOffset,
+      parsedMaxHeight,
+      allowsViewportSnapExpansion
+    ]
+  );
+  const maxSheetHeight = useMemo(
+    () => viewportHeight - safeAreaOffset,
+    [viewportHeight, safeAreaOffset]
+  );
+  const snapYValues = useMemo(
+    () => snapHeights.map((h) => Math.max(0, maxSheetHeight - h)),
+    [snapHeights, maxSheetHeight]
+  );
+  const sortedSnaps = useMemo(() => {
+    const combined = snaps.map((point, idx) => ({
+      point,
+      height: snapHeights[idx],
+      y: snapYValues[idx]
+    }));
+    return combined.sort((a, b) => b.y - a.y);
+  }, [snaps, snapHeights, snapYValues]);
+  const [activeSnapIndex, setActiveSnapIndex] = useState(0);
+  const activeSnapPoint = useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = sortedSnaps[activeSnapIndex]) == null ? void 0 : _a.point) != null ? _b : "fit";
+    },
+    [sortedSnaps, activeSnapIndex]
+  );
+  const isContentScrollable = useMemo(
+    () => sortedSnaps.length <= 1 || activeSnapIndex === sortedSnaps.length - 1,
+    [sortedSnaps, activeSnapIndex]
+  );
+  const lowestSnapY = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = sortedSnaps[0]) == null ? void 0 : _a.y) != null ? _b : 300;
+  }, [sortedSnaps]);
+  const scrimOpacity = useTransform(y, [lowestSnapY, maxSheetHeight], [1, 0]);
+  const defaultSnap = useMemo(
+    () => {
+      var _a;
+      return (_a = defaultSnapPoint != null ? defaultSnapPoint : snaps[0]) != null ? _a : "fit";
+    },
+    [defaultSnapPoint, snaps]
+  );
+  const prevIsOpen = useRef(isOpen);
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen && !prevIsOpen.current) {
+      y.set(viewportHeight);
+      hasMeasuredAfterOpen.current = false;
+      const defaultIdx = sortedSnaps.findIndex((s) => s.point === defaultSnap);
+      setActiveSnapIndex(defaultIdx !== -1 ? defaultIdx : 0);
+    } else if (!isOpen && prevIsOpen.current) {
+      setDimensions((prev) => __spreadProps(__spreadValues({}, prev), { naturalHeight: 0 }));
+      void animate(y, viewportHeight, {
+        type: "tween",
+        duration: 0.22,
+        ease: "easeIn"
+      });
+    }
+    prevIsOpen.current = isOpen;
+  }, [isOpen, y, viewportHeight, sortedSnaps, defaultSnap]);
+  useEffect(() => {
+    var _a;
+    if (!isOpen || sortedSnaps.length === 0 || naturalHeight === 0) return;
+    if (!hasMeasuredAfterOpen.current) return;
+    const targetY = (_a = sortedSnaps[activeSnapIndex]) == null ? void 0 : _a.y;
+    if (targetY === void 0) return;
+    void animate(y, targetY, { type: "spring", stiffness: 300, damping: 30 });
+  }, [isOpen, sortedSnaps, activeSnapIndex, y, naturalHeight]);
+  const snapTo = useCallback(
+    (snapPoint) => {
+      const idx = sortedSnaps.findIndex((s) => s.point === snapPoint);
+      if (idx === -1) return;
+      setActiveSnapIndex(idx);
+      void animate(y, sortedSnaps[idx].y, {
+        type: "spring",
+        stiffness: 300,
+        damping: 30
+      });
+      onSnapChange == null ? void 0 : onSnapChange(snapPoint);
+    },
+    [sortedSnaps, y, onSnapChange]
+  );
+  const cycleSnapPoint = useCallback(() => {
+    const nextIdx = activeSnapIndex + 1;
+    if (nextIdx >= sortedSnaps.length) {
+      onClose();
+    } else {
+      setActiveSnapIndex(nextIdx);
+      void animate(y, sortedSnaps[nextIdx].y, {
+        type: "spring",
+        stiffness: 300,
+        damping: 30
+      });
+      onSnapChange == null ? void 0 : onSnapChange(sortedSnaps[nextIdx].point);
+    }
+  }, [activeSnapIndex, sortedSnaps, y, onClose, onSnapChange]);
+  const dragConstraints = useMemo(
+    () => {
+      var _a, _b;
+      return {
+        top: Math.max(0, (_b = (_a = sortedSnaps[sortedSnaps.length - 1]) == null ? void 0 : _a.y) != null ? _b : 0),
+        bottom: viewportHeight
+      };
+    },
+    [sortedSnaps, viewportHeight]
+  );
+  useEffect(() => {
+    if (!isOpen || !gesturesEnabled || !scopeNode) return;
+    const node = scopeNode;
+    const viewport = node.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    let startY = 0;
+    let initialSheetY = 0;
+    let isDragging = false;
+    let lastY = 0;
+    let lastTime = 0;
+    let velocity = 0;
+    let activeInput = null;
+    let dragStartTarget = null;
+    let lastTouchTime = 0;
+    let preventNextClick = false;
+    const MOUSE_DRAG_THRESHOLD = 5;
+    const updateVelocity = (currentY) => {
+      const currentTime = performance.now();
+      const deltaTime = currentTime - lastTime;
+      if (deltaTime > 0) {
+        velocity = (currentY - lastY) / deltaTime * 1e3;
+      }
+      lastY = currentY;
+      lastTime = currentTime;
+    };
+    const tryStartDrag = (deltaY) => {
+      if (viewport == null ? void 0 : viewport.contains(dragStartTarget)) {
+        const isAtHighestSnap = activeSnapIndex === sortedSnaps.length - 1;
+        if (!isAtHighestSnap) {
+          isDragging = true;
+          return true;
+        }
+        const scrollTop = viewport.scrollTop;
+        const isPullingDown = deltaY > 0;
+        if (!isDragging) {
+          if (scrollTop <= 0 && isPullingDown) {
+            isDragging = true;
+            return true;
+          }
+          return false;
+        }
+        return true;
+      }
+      isDragging = true;
+      return true;
+    };
+    const applyDragPosition = (deltaY) => {
+      let nextY = initialSheetY + deltaY;
+      if (nextY < dragConstraints.top) {
+        const overdrag = dragConstraints.top - nextY;
+        nextY = dragConstraints.top - overdrag * 0.15;
+      }
+      y.set(nextY);
+    };
+    const finalizeDrag = () => {
+      var _a, _b;
+      if (!isDragging) return;
+      preventNextClick = true;
+      isDragging = false;
+      const currentY = y.get();
+      const lowestSnap = sortedSnaps[0];
+      const lowestY = (_a = lowestSnap == null ? void 0 : lowestSnap.y) != null ? _a : viewportHeight;
+      const lowestHeight = (_b = lowestSnap == null ? void 0 : lowestSnap.height) != null ? _b : 200;
+      let finalVelocity = velocity;
+      if (finalVelocity > 0) {
+        const distanceToFloor = Math.max(0, currentY - lowestY);
+        if (distanceToFloor < BOUNDARY_DAMPENING_ZONE) {
+          const factor = distanceToFloor / BOUNDARY_DAMPENING_ZONE;
+          finalVelocity *= factor * factor;
+          if (velocity >= DISMISS_VELOCITY_THRESHOLD) {
+            finalVelocity = Math.max(
+              finalVelocity,
+              DISMISS_VELOCITY_THRESHOLD * 0.1
+            );
+          }
+        }
+      }
+      const dragOffset = Math.max(0, currentY - lowestY);
+      const shouldDismiss = finalVelocity > DISMISS_VELOCITY_THRESHOLD || dragOffset > lowestHeight * DISMISS_THRESHOLD;
+      if (shouldDismiss) {
+        onClose();
+        return;
+      }
+      let closestIdx = 0;
+      let minDiff = Infinity;
+      for (let i = 0; i < sortedSnaps.length; i++) {
+        const diff = Math.abs(sortedSnaps[i].y - currentY);
+        if (diff < minDiff) {
+          minDiff = diff;
+          closestIdx = i;
+        }
+      }
+      setActiveSnapIndex(closestIdx);
+      void animate(y, sortedSnaps[closestIdx].y, {
+        type: "spring",
+        stiffness: 380,
+        damping: 31.19
+      });
+      onSnapChange == null ? void 0 : onSnapChange(sortedSnaps[closestIdx].point);
+    };
+    const onTouchStart = (e) => {
+      lastTouchTime = Date.now();
+      activeInput = "touch";
+      dragStartTarget = e.target;
+      startY = e.touches[0].clientY;
+      initialSheetY = y.get();
+      isDragging = false;
+      lastY = startY;
+      lastTime = performance.now();
+      velocity = 0;
+    };
+    const onTouchMove = (e) => {
+      if (!e.touches[0] || activeInput !== "touch") return;
+      const currentY = e.touches[0].clientY;
+      const deltaY = currentY - startY;
+      updateVelocity(currentY);
+      if (tryStartDrag(deltaY)) {
+        e.preventDefault();
+        applyDragPosition(deltaY);
+      }
+    };
+    const onTouchEnd = () => {
+      if (activeInput !== "touch") return;
+      activeInput = null;
+      finalizeDrag();
+      dragStartTarget = null;
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      if (Date.now() - lastTouchTime < 500) return;
+      activeInput = "mouse";
+      dragStartTarget = e.target;
+      startY = e.clientY;
+      initialSheetY = y.get();
+      isDragging = false;
+      lastY = startY;
+      lastTime = performance.now();
+      velocity = 0;
+    };
+    const onMouseMove = (e) => {
+      if (activeInput !== "mouse") return;
+      const currentY = e.clientY;
+      const deltaY = currentY - startY;
+      if (!isDragging && Math.abs(deltaY) < MOUSE_DRAG_THRESHOLD) return;
+      updateVelocity(currentY);
+      if (tryStartDrag(deltaY)) {
+        e.preventDefault();
+        document.body.style.userSelect = "none";
+        applyDragPosition(deltaY);
+      }
+    };
+    const onMouseUp = () => {
+      if (activeInput !== "mouse") return;
+      activeInput = null;
+      document.body.style.userSelect = "";
+      finalizeDrag();
+      dragStartTarget = null;
+    };
+    const onClickCapture = (e) => {
+      if (preventNextClick) {
+        e.stopPropagation();
+        preventNextClick = false;
+      }
+    };
+    node.addEventListener("touchstart", onTouchStart, { passive: true });
+    node.addEventListener("touchmove", onTouchMove, { passive: false });
+    node.addEventListener("touchend", onTouchEnd);
+    node.addEventListener("touchcancel", onTouchEnd);
+    node.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    node.addEventListener("click", onClickCapture, true);
+    return () => {
+      node.removeEventListener("touchstart", onTouchStart);
+      node.removeEventListener("touchmove", onTouchMove);
+      node.removeEventListener("touchend", onTouchEnd);
+      node.removeEventListener("touchcancel", onTouchEnd);
+      node.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      node.removeEventListener("click", onClickCapture, true);
+      document.body.style.userSelect = "";
+    };
+  }, [
+    isOpen,
+    gesturesEnabled,
+    sortedSnaps,
+    activeSnapIndex,
+    y,
+    dragConstraints.top,
+    viewportHeight,
+    onClose,
+    onSnapChange,
+    scopeNode
+  ]);
+  return {
+    scope,
+    y,
+    scrimOpacity,
+    activeSnapPoint,
+    isContentScrollable,
+    snapTo,
+    cycleSnapPoint,
+    dragConstraints
+  };
+}
+var SHEET_ANIM = {
+  initial: { opacity: 0.6 },
+  animate: { opacity: 1, transition: DEFAULT_SPATIAL_SPRING },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.22, ease: "easeIn" }
+  }
+};
+var ABSOLUTE_MAX_HEIGHT = "calc(100dvh - max(56px, env(safe-area-inset-top, 0px)))";
+function resolveMaxHeight(maxHeight, snapPoints) {
+  if (maxHeight === "90dvh" && snapPoints && snapPoints.length > 0)
+    return ABSOLUTE_MAX_HEIGHT;
+  return maxHeight;
+}
+var BottomSheet = React6.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    className,
+    maxHeight = "90dvh",
+    hideHandle = false,
+    portal = true,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    header,
+    footer,
+    divider,
+    scrollAreaProps,
+    snapPoints,
+    defaultSnapPoint,
+    onSnapChange,
+    gesturesEnabled = true,
+    containerColor,
+    sheetMaxWidth
+  }, ref) => {
+    var _a;
+    const { scope, y, isContentScrollable, snapTo, cycleSnapPoint } = useBottomSheet({
+      isOpen,
+      onClose,
+      snapPoints,
+      defaultSnapPoint,
+      onSnapChange,
+      gesturesEnabled,
+      isModal: false,
+      maxHeight: resolveMaxHeight(maxHeight, snapPoints)
+    });
+    React6.useEffect(() => {
+      const node = scope.current;
+      if (node) {
+        node.snapTo = snapTo;
+      }
+    }, [snapTo, scope]);
+    const [mounted, setMounted] = React6.useState(false);
+    React6.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const resolvedDividers = React6.useMemo(
+      () => resolveDividers(divider),
+      [divider]
+    );
+    const resolvedSheetMaxWidth = React6.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.useCallback(
+      (node) => {
+        scope(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [scope, ref]
+    );
+    const content = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+      m.div,
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        tabIndex: -1,
+        className: cn(
+          "fixed bottom-0 z-50",
+          "left-0 right-0 mx-auto",
+          "rounded-t-[28px]",
+          !containerColor && DEFAULT_SHEET_BG,
+          "flex flex-col overflow-hidden",
+          "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+          className
+        ),
+        style: {
+          backgroundColor: containerColor,
+          // Container must span the full available viewport height so that
+          // snap points above the default maxHeight (e.g. "full", "70%")
+          // can reveal their content via the y (translateY) offset mechanism.
+          height: "var(--sheet-vh, 100dvh)",
+          maxHeight: ABSOLUTE_MAX_HEIGHT,
+          maxWidth: resolvedSheetMaxWidth,
+          y
+        }
+      }, SHEET_ANIM), {
+        children: [
+          !hideHandle && /* @__PURE__ */ jsx(DragHandle, { onCycle: cycleSnapPoint }),
+          header && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 pb-4", children: header }),
+          header && resolvedDividers.header && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            __spreadProps(__spreadValues({
+              type: "hover"
+            }, scrollAreaProps), {
+              className: cn(
+                "flex-1 min-h-0 min-w-0",
+                scrollAreaProps == null ? void 0 : scrollAreaProps.className
+              ),
+              viewportClassName: cn(
+                "px-6 pb-6 overscroll-contain",
+                header ? "pt-4" : "",
+                scrollAreaProps == null ? void 0 : scrollAreaProps.viewportClassName
+              ),
+              viewportProps: __spreadProps(__spreadValues({}, scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps), {
+                style: __spreadProps(__spreadValues({}, (_a = scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps) == null ? void 0 : _a.style), {
+                  overflowY: isContentScrollable ? "auto" : "hidden"
+                })
+              }),
+              children
+            })
+          ),
+          footer && resolvedDividers.footer && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+          footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 pt-4 pb-6", children: footer })
+        ]
+      })
+    ) });
+    if (portal) {
+      if (!mounted) return null;
+      return createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+BottomSheet.displayName = "BottomSheet";
+var SCRIM_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }
+};
+var Scrim = React6.forwardRef(
+  ({ onClick, className, style }, ref) => /* @__PURE__ */ jsx(
+    m.div,
+    __spreadValues({
+      ref,
+      "aria-hidden": "true",
+      className: cn("fixed inset-0 z-40 bg-black/40", className),
+      onClick,
+      style
+    }, SCRIM_ANIM)
+  )
+);
+Scrim.displayName = "Scrim";
+var SHEET_ANIM2 = {
+  initial: { opacity: 0.6 },
+  animate: { opacity: 1, transition: DEFAULT_SPATIAL_SPRING },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.22, ease: "easeIn" }
+  }
+};
+var ABSOLUTE_MAX_HEIGHT2 = "calc(100dvh - max(56px, env(safe-area-inset-top, 0px)))";
+function resolveMaxHeight2(maxHeight, snapPoints) {
+  if (maxHeight === "90dvh" && snapPoints && snapPoints.length > 0)
+    return ABSOLUTE_MAX_HEIGHT2;
+  return maxHeight;
+}
+function resolveSheetMaxWidth(value) {
+  if (value === void 0) return "var(--m3-bottom-sheet-max-width, 640px)";
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+var BottomSheetModal = React6.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    className,
+    maxHeight = "90dvh",
+    hideHandle = false,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    header,
+    footer,
+    divider,
+    scrollAreaProps,
+    snapPoints,
+    defaultSnapPoint,
+    onSnapChange,
+    gesturesEnabled = true,
+    containerColor,
+    sheetMaxWidth
+  }, ref) => {
+    var _a;
+    const {
+      scope,
+      y,
+      scrimOpacity,
+      isContentScrollable,
+      snapTo,
+      cycleSnapPoint
+    } = useBottomSheet({
+      isOpen,
+      onClose,
+      snapPoints,
+      defaultSnapPoint,
+      onSnapChange,
+      gesturesEnabled,
+      isModal: true,
+      maxHeight: resolveMaxHeight2(maxHeight, snapPoints)
+    });
+    React6.useEffect(() => {
+      const node = scope.current;
+      if (node) {
+        node.snapTo = snapTo;
+      }
+    }, [snapTo, scope]);
+    const resolvedDividers = React6.useMemo(
+      () => resolveDividers(divider),
+      [divider]
+    );
+    const resolvedSheetMaxWidth = React6.useMemo(
+      () => resolveSheetMaxWidth(sheetMaxWidth),
+      [sheetMaxWidth]
+    );
+    const mergedRef = React6.useCallback(
+      (node) => {
+        scope(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [scope, ref]
+    );
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Root,
+      {
+        open: isOpen,
+        onOpenChange: (open) => !open && onClose(),
+        children: /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          isOpen && /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(Scrim, { onClick: onClose, style: { opacity: scrimOpacity } }) }, "scrim"),
+          isOpen && /* @__PURE__ */ jsx(
+            RadixDialog.Content,
+            {
+              asChild: true,
+              forceMount: true,
+              "aria-describedby": void 0,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-label": ariaLabel,
+              children: /* @__PURE__ */ jsxs(
+                m.div,
+                __spreadProps(__spreadValues({
+                  ref: mergedRef,
+                  className: cn(
+                    // Positioning: fixed at bottom, centered with max-width
+                    "fixed bottom-0 z-50",
+                    "left-0 right-0 mx-auto",
+                    // Visual style
+                    "rounded-t-[28px]",
+                    !containerColor && DEFAULT_SHEET_BG,
+                    "flex flex-col overflow-hidden",
+                    "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+                    className
+                  ),
+                  style: {
+                    backgroundColor: containerColor,
+                    height: "var(--sheet-vh, 100dvh)",
+                    // Container must span the full available viewport height so that
+                    // snap points above the default maxHeight (e.g. "full", "70%")
+                    // can reveal their content via the y (translateY) offset mechanism.
+                    maxHeight: ABSOLUTE_MAX_HEIGHT2,
+                    maxWidth: resolvedSheetMaxWidth,
+                    y
+                  }
+                }, SHEET_ANIM2), {
+                  children: [
+                    /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: ariaLabel || "Bottom Sheet" }),
+                    !hideHandle && /* @__PURE__ */ jsx(DragHandle, { onCycle: cycleSnapPoint }),
+                    header && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 pb-4", children: header }),
+                    header && resolvedDividers.header && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+                    /* @__PURE__ */ jsx(
+                      ScrollArea,
+                      __spreadProps(__spreadValues({
+                        type: "hover"
+                      }, scrollAreaProps), {
+                        className: cn(
+                          "flex-1 min-h-0 min-w-0",
+                          scrollAreaProps == null ? void 0 : scrollAreaProps.className
+                        ),
+                        viewportClassName: cn(
+                          "px-6 pb-6 overscroll-contain",
+                          header ? "pt-4" : "",
+                          scrollAreaProps == null ? void 0 : scrollAreaProps.viewportClassName
+                        ),
+                        viewportProps: __spreadProps(__spreadValues({}, scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps), {
+                          style: __spreadProps(__spreadValues({}, (_a = scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps) == null ? void 0 : _a.style), {
+                            overflowY: isContentScrollable ? "auto" : "hidden"
+                          })
+                        }),
+                        children
+                      })
+                    ),
+                    footer && resolvedDividers.footer && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+                    footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 pt-4 pb-6", children: footer })
+                  ]
+                })
+              )
+            },
+            "content"
+          )
+        ] }) })
+      }
+    );
+  }
+);
+BottomSheetModal.displayName = "BottomSheetModal";
+var DISMISS_VELOCITY_THRESHOLD2 = 500;
+var BOUNDARY_DAMPENING_ZONE2 = 80;
+var SPRING = { type: "spring", stiffness: 300, damping: 30 };
+function useBottomSheetScaffold({
+  peekHeight = 56,
+  swipeEnabled = true,
+  onStateChange,
+  initialState = "partiallyExpanded"
+} = {}) {
+  const [containerHeight, setContainerHeight] = useState(
+    typeof window !== "undefined" ? window.innerHeight : 800
+  );
+  const containerNodeRef = useRef(null);
+  const containerRef = useCallback((node) => {
+    containerNodeRef.current = node;
+    if (node) {
+      setContainerHeight(node.offsetHeight || window.innerHeight);
+    }
+  }, []);
+  useEffect(() => {
+    const node = containerNodeRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver(() => {
+      setContainerHeight(node.offsetHeight);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const expandedY = 0;
+  const partialY = containerHeight - peekHeight;
+  const y = useMotionValue(initialState === "expanded" ? expandedY : partialY);
+  const [sheetState, setSheetState] = useState(
+    initialState
+  );
+  const [isScrollDisablingDrag, setIsScrollDisablingDrag] = useState(false);
+  const isDragEnabled = swipeEnabled && !isScrollDisablingDrag;
+  const dragConstraints = useMemo(
+    () => ({ top: 0, bottom: partialY }),
+    [partialY]
+  );
+  useEffect(() => {
+    const targetY = sheetState === "expanded" ? 0 : partialY;
+    void animate(y, targetY, SPRING);
+  }, [partialY, sheetState, y]);
+  const expand = useCallback(() => {
+    setSheetState("expanded");
+    void animate(y, 0, SPRING);
+    onStateChange == null ? void 0 : onStateChange("expanded");
+  }, [y, onStateChange]);
+  const partialExpand = useCallback(() => {
+    setSheetState("partiallyExpanded");
+    void animate(y, partialY, SPRING);
+    onStateChange == null ? void 0 : onStateChange("partiallyExpanded");
+  }, [y, partialY, onStateChange]);
+  const toggle = useCallback(() => {
+    if (sheetState === "expanded") partialExpand();
+    else expand();
+  }, [sheetState, expand, partialExpand]);
+  const handleDragEnd = useCallback(
+    (_event, info) => {
+      const rawY = y.get();
+      let velocity = info.velocity.y;
+      if (velocity > 0) {
+        const distanceToFloor = Math.max(0, partialY - rawY);
+        if (distanceToFloor < BOUNDARY_DAMPENING_ZONE2) {
+          const factor = distanceToFloor / BOUNDARY_DAMPENING_ZONE2;
+          velocity *= factor * factor;
+        }
+      }
+      if (velocity > DISMISS_VELOCITY_THRESHOLD2) {
+        partialExpand();
+        return;
+      }
+      if (velocity < -DISMISS_VELOCITY_THRESHOLD2) {
+        expand();
+        return;
+      }
+      const midpoint = partialY / 2;
+      if (rawY < midpoint) expand();
+      else partialExpand();
+    },
+    [y, partialY, expand, partialExpand]
+  );
+  const handleContentScroll = useCallback(
+    (e) => {
+      if (sheetState !== "expanded") {
+        e.currentTarget.scrollTop = 0;
+        setIsScrollDisablingDrag(false);
+        return;
+      }
+      setIsScrollDisablingDrag(e.currentTarget.scrollTop > 0);
+    },
+    [sheetState]
+  );
+  const contentPaddingBottom = `${peekHeight}px`;
+  return {
+    sheetState,
+    y,
+    expand,
+    partialExpand,
+    toggle,
+    isDragEnabled,
+    dragConstraints,
+    handleDragEnd,
+    handleContentScroll,
+    contentPaddingBottom,
+    containerRef
+  };
+}
+var BottomSheetScaffold = React6.forwardRef(
+  ({
+    sheetContent,
+    children,
+    sheetPeekHeight = 56,
+    sheetMaxWidth,
+    sheetDragHandle,
+    sheetSwipeEnabled = true,
+    topBar,
+    sheetContainerColor,
+    onSheetStateChange,
+    initialSheetState = "partiallyExpanded",
+    className
+  }, ref) => {
+    const {
+      y,
+      toggle,
+      isDragEnabled,
+      dragConstraints,
+      handleDragEnd,
+      handleContentScroll,
+      contentPaddingBottom,
+      containerRef
+    } = useBottomSheetScaffold({
+      peekHeight: sheetPeekHeight,
+      swipeEnabled: sheetSwipeEnabled,
+      onStateChange: onSheetStateChange,
+      initialState: initialSheetState
+    });
+    const resolvedSheetMaxWidth = React6.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.useCallback(
+      (node) => {
+        containerRef(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [containerRef, ref]
+    );
+    const resolvedDragHandle = React6.useMemo(() => {
+      if (sheetDragHandle === null) return null;
+      if (sheetDragHandle !== void 0) return sheetDragHandle;
+      return /* @__PURE__ */ jsx(DragHandle, { onCycle: toggle });
+    }, [sheetDragHandle, toggle]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: mergedRef,
+        className: cn(
+          "relative flex flex-col h-full w-full overflow-hidden",
+          className
+        ),
+        children: [
+          topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0 z-10", children: topBar }),
+          /* @__PURE__ */ jsx("div", { className: "relative flex-1 min-h-0 overflow-y-auto", children: children(contentPaddingBottom) }),
+          /* @__PURE__ */ jsxs(
+            m.div,
+            {
+              className: cn(
+                "absolute bottom-0 left-0 right-0 mx-auto",
+                "rounded-t-[28px] flex flex-col overflow-hidden",
+                !sheetContainerColor && DEFAULT_SHEET_BG,
+                // MD3 elevation-1 for standard sheet
+                "elevation-1"
+              ),
+              style: {
+                backgroundColor: sheetContainerColor,
+                maxWidth: resolvedSheetMaxWidth,
+                y,
+                // Sheet panel is always tall enough to fill from top to bottom
+                height: "100%",
+                transformOrigin: "center bottom"
+              },
+              drag: isDragEnabled ? "y" : false,
+              dragConstraints,
+              dragElastic: { top: 0.1, bottom: 0 },
+              onDragEnd: handleDragEnd,
+              transition: DEFAULT_SPATIAL_SPRING,
+              children: [
+                resolvedDragHandle,
+                /* @__PURE__ */ jsx(
+                  ScrollArea,
+                  {
+                    type: "hover",
+                    className: "flex-1 min-h-0 min-w-0",
+                    viewportClassName: "px-6 pb-6",
+                    viewportProps: {
+                      onScroll: handleContentScroll
+                    },
+                    children: sheetContent
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+BottomSheetScaffold.displayName = "BottomSheetScaffold";
+var COPLANAR_TRANSITION = `margin ${getMotionTransitionCSS("default", "spatial")}`;
+var SideSheet = React6.forwardRef(
+  ({
+    isOpen,
+    children,
+    className,
+    edge = "end",
+    width = "360px",
+    coplanarSiblingRef,
+    portal = true,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    header,
+    footer,
+    divider,
+    scrollAreaProps
+  }, ref) => {
+    const sheetAnim = React6.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const [mounted, setMounted] = React6.useState(false);
+    React6.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const resolvedDividers = React6.useMemo(
+      () => resolveDividers(divider),
+      [divider]
+    );
+    React6.useEffect(() => {
+      const sibling = coplanarSiblingRef == null ? void 0 : coplanarSiblingRef.current;
+      if (!sibling) return;
+      sibling.style.transition = COPLANAR_TRANSITION;
+      const marginProp = edge === "end" ? "marginRight" : "marginLeft";
+      sibling.style[marginProp] = isOpen ? width : "";
+      return () => {
+        sibling.style.marginRight = "";
+        sibling.style.marginLeft = "";
+        sibling.style.transition = "";
+      };
+    }, [isOpen, edge, width, coplanarSiblingRef]);
+    const content = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+      m.aside,
+      __spreadProps(__spreadValues({
+        ref,
+        role: "complementary",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        tabIndex: -1,
+        className: cn(
+          "fixed top-0 bottom-0 z-40",
+          edge === "end" ? "right-0" : "left-0",
+          "bg-m3-surface-container-low",
+          "flex flex-col overflow-hidden",
+          edge === "end" ? "border-l border-m3-outline-variant" : "border-r border-m3-outline-variant",
+          "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+          className
+        ),
+        style: { width }
+      }, sheetAnim), {
+        children: [
+          header && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 py-4", children: header }),
+          header && resolvedDividers.header && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            __spreadProps(__spreadValues({
+              type: "hover"
+            }, scrollAreaProps), {
+              className: cn(
+                "flex-1 min-h-0 min-w-0",
+                scrollAreaProps == null ? void 0 : scrollAreaProps.className
+              ),
+              viewportClassName: cn(
+                "overscroll-contain",
+                scrollAreaProps == null ? void 0 : scrollAreaProps.viewportClassName
+              ),
+              viewportProps: scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps,
+              children
+            })
+          ),
+          footer && resolvedDividers.footer && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+          footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 py-4", children: footer })
+        ]
+      })
+    ) });
+    if (portal) {
+      if (!mounted) return null;
+      return createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+SideSheet.displayName = "SideSheet";
+var SideSheetModal = React6.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    className,
+    edge = "end",
+    width = "360px",
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    header,
+    footer,
+    divider,
+    scrollAreaProps
+  }, ref) => {
+    const sheetAnim = React6.useMemo(() => buildSideSheetAnim(edge), [edge]);
+    const resolvedDividers = React6.useMemo(
+      () => resolveDividers(divider),
+      [divider]
+    );
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Root,
+      {
+        open: isOpen,
+        onOpenChange: (open) => !open && onClose(),
+        children: /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(Scrim, { onClick: onClose }) }),
+          /* @__PURE__ */ jsx(
+            RadixDialog.Content,
+            {
+              asChild: true,
+              "aria-describedby": void 0,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-label": ariaLabel,
+              onEscapeKeyDown: onClose,
+              children: /* @__PURE__ */ jsxs(
+                m.div,
+                __spreadProps(__spreadValues({
+                  ref,
+                  className: cn(
+                    "fixed top-0 bottom-0 z-50",
+                    edge === "end" ? "right-0" : "left-0",
+                    "bg-m3-surface-container-low",
+                    "flex flex-col overflow-hidden",
+                    edge === "end" ? "border-l border-m3-outline-variant rounded-l-m3-xl" : "border-r border-m3-outline-variant rounded-r-m3-xl",
+                    "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-inset",
+                    className
+                  ),
+                  style: { width }
+                }, sheetAnim), {
+                  children: [
+                    /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: ariaLabel || "Side Sheet" }),
+                    header && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 py-4", children: header }),
+                    header && resolvedDividers.header && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+                    /* @__PURE__ */ jsx(
+                      ScrollArea,
+                      __spreadProps(__spreadValues({
+                        type: "hover"
+                      }, scrollAreaProps), {
+                        className: cn(
+                          "flex-1 min-h-0 min-w-0",
+                          scrollAreaProps == null ? void 0 : scrollAreaProps.className
+                        ),
+                        viewportClassName: cn(
+                          "overscroll-contain",
+                          scrollAreaProps == null ? void 0 : scrollAreaProps.viewportClassName
+                        ),
+                        viewportProps: scrollAreaProps == null ? void 0 : scrollAreaProps.viewportProps,
+                        children
+                      })
+                    ),
+                    footer && resolvedDividers.footer && /* @__PURE__ */ jsx("hr", { className: "border-t border-m3-outline-variant w-full shrink-0 m-0" }),
+                    footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-6 py-4", children: footer })
+                  ]
+                })
+              )
+            }
+          )
+        ] }) }) })
+      }
+    );
+  }
+);
+SideSheetModal.displayName = "SideSheetModal";
+
+export { BottomSheet, BottomSheetModal, BottomSheetScaffold, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Scrim, SideSheet, SideSheetModal, useBottomSheet, useBottomSheetScaffold };
+//# sourceMappingURL=overlays.mjs.map
+//# sourceMappingURL=overlays.mjs.map