@bug-on/m3-expressive 1.0.0

package/dist/feedback.mjs

@@ -0,0 +1,2321 @@
+"use client";
+import { useReducedMotion, LazyMotion, domMax, m, useMotionValue, animate, useAnimationFrame, AnimatePresence } from 'motion/react';
+import * as React12 from 'react';
+import { forwardRef, useState, useCallback, useEffect, useRef, useId, cloneElement, useLayoutEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+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));
+}
+
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+var DEFAULT_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 31.19
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+var DEFAULT_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 1600,
+  damping: 80
+};
+function formatBadgeLabel(children, max) {
+  if (typeof children === "number") {
+    return max !== void 0 && children > max ? `${max}+` : String(children);
+  }
+  if (typeof children === "string") {
+    if (max !== void 0) {
+      const asNum = Number(children);
+      if (!Number.isNaN(asNum) && asNum > max) return `${max}+`;
+    }
+    return children.length > 4 ? children.slice(0, 4) : children;
+  }
+  return "";
+}
+function detectBadgeHasContent(badge) {
+  return React12.isValidElement(badge) && badge.props.children != null;
+}
+var BadgeImpl = React12.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      max,
+      containerColor,
+      contentColor,
+      className,
+      style,
+      "aria-label": ariaLabel
+    } = _b, props = __objRest(_b, [
+      "children",
+      "max",
+      "containerColor",
+      "contentColor",
+      "className",
+      "style",
+      "aria-label"
+    ]);
+    const hasContent = children != null;
+    const label = hasContent ? formatBadgeLabel(children, max) : "";
+    const reducedMotion = useReducedMotion();
+    const isDecorative = !hasContent && !ariaLabel;
+    const springTransition = reducedMotion ? { duration: 0 } : FAST_SPATIAL_SPRING;
+    const colorStyle = __spreadValues(__spreadValues(__spreadValues({}, containerColor && { backgroundColor: containerColor }), contentColor && { color: contentColor }), style);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+      m.span,
+      __spreadProps(__spreadValues({
+        ref,
+        role: isDecorative ? void 0 : "status",
+        "aria-hidden": isDecorative ? "true" : void 0,
+        "aria-label": hasContent ? ariaLabel != null ? ariaLabel : label : ariaLabel,
+        initial: { scale: 0, opacity: 0 },
+        animate: { scale: 1, opacity: 1 },
+        exit: { scale: 0, opacity: 0 },
+        transition: springTransition,
+        className: cn(
+          "rounded-full ring-[1.5px] ring-m3-surface",
+          !containerColor && "bg-m3-error",
+          hasContent ? cn(
+            "inline-flex items-center justify-center",
+            "min-w-4 h-4 px-1 text-[11px] font-medium leading-none",
+            !contentColor && "text-m3-on-error"
+          ) : "inline-block w-1.5 h-1.5",
+          className
+        ),
+        style: colorStyle
+      }, props), {
+        children: hasContent && label
+      })
+    ) });
+  }
+);
+BadgeImpl.displayName = "Badge";
+var Badge = React12.memo(BadgeImpl);
+function BadgedBox({
+  badge,
+  children,
+  className,
+  badgeSize
+}) {
+  const isLarge = badgeSize ? badgeSize === "large" : detectBadgeHasContent(badge);
+  const badgePositionClass = isLarge ? "translate-x-[35%] -translate-y-[35%]" : "translate-x-[50%] -translate-y-[50%]";
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("absolute right-0 top-0", badgePositionClass),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: badge })
+      }
+    )
+  ] });
+}
+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 = React12.memo(function IndeterminateSvg2({
+  size
+}) {
+  const [ready, setReady] = React12.useState(false);
+  React12.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 = React12.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 = React12.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 = React12.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 = React12.useMemo(
+      () => amplitude != null ? amplitude : 1.6 * scaleFactor,
+      [amplitude, scaleFactor]
+    );
+    const effectiveWavelength = React12.useMemo(
+      () => wavelength != null ? wavelength : 15 * scaleFactor,
+      [wavelength, scaleFactor]
+    );
+    const wavyActivePath = React12.useMemo(
+      () => isWavy ? generateWavyCircularPath(
+        center,
+        radius,
+        effectiveAmplitude,
+        effectiveWavelength
+      ) : null,
+      [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
+    );
+    const circumference = React12.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React12.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] = React12.useState(0);
+  const observerRef = React12.useRef(null);
+  const ref = React12.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;
+    }
+  }, []);
+  React12.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return [ref, width];
+}
+function useMergedRef(...refs) {
+  return React12.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 = React12.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 = React12.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 = React12.useId();
+  const [containerRef, width] = useContainerWidth();
+  const activePathRef = React12.useRef(null);
+  const trackPathRef = React12.useRef(null);
+  const amplitudeMV = useMotionValue(amplitude);
+  const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
+  React12.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 = React12.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 = React12.useRef(null);
+    const mergedRef = useMergedRef(ref, containerRef);
+    const [isRtl, setIsRtl] = React12.useState(false);
+    React12.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 = React12.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React12.useMemo(
+      () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
+      [isWavy, trackHeight, effectiveAmplitude]
+    );
+    const shouldShowStop = React12.useMemo(
+      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      [isDeterminate, resolvedTrackShape, showStopIndicator]
+    );
+    const stopSize = React12.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 = React12.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 = React12.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] = React12.useState([]);
+  const onPointerDown = React12.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 = React12.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  return { ripples, onPointerDown, removeRipple };
+}
+
+// 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 = React12.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 = React12.useMemo(
+      () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
+      [isSelected, colorStyle]
+    );
+    const outlineWidthClass = React12.useMemo(
+      () => {
+        var _a3;
+        return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
+      },
+      [colorStyle, isSelected, size]
+    );
+    const disabledBgClass = React12.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 = React12.useCallback(
+      (e) => {
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+        onClick == null ? void 0 : onClick(e);
+      },
+      [loading, onClick]
+    );
+    const handleKeyDown = React12.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 = React12.memo(IconButtonComponent);
+var VARIANT_FONT = {
+  outlined: "'Material Symbols Outlined'",
+  rounded: "'Material Symbols Rounded'",
+  sharp: "'Material Symbols Sharp'"
+};
+var IconComponent = React12.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 = React12.memo(IconComponent);
+var DURATION_MAP = {
+  short: 4e3,
+  long: 7e3
+};
+var RESULT = {
+  ACTION: "action-performed",
+  DISMISSED: "dismissed"
+};
+var SNACKBAR_SPRING = DEFAULT_SPATIAL_SPRING;
+var SNACKBAR_ANIM = {
+  initial: { opacity: 0, y: 56, scale: 0.9 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: SNACKBAR_SPRING
+  },
+  exit: {
+    opacity: 0,
+    y: 24,
+    scale: 0.95,
+    transition: { duration: 0.2, ease: "easeIn" }
+  }
+};
+var REDUCED_MOTION_ANIM = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+function resolveDuration(duration) {
+  if (duration === void 0) return DURATION_MAP.short;
+  if (typeof duration === "number") return duration;
+  return DURATION_MAP[duration];
+}
+function generateId() {
+  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
+function toSnackbarData(item) {
+  return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
+}
+function useSnackbarState() {
+  const [current, setCurrent] = React12.useState(null);
+  const queueRef = React12.useRef([]);
+  const showSnackbar = React12.useCallback(
+    (visuals) => {
+      return new Promise((resolve) => {
+        const item = { visuals, resolve };
+        setCurrent((prev) => {
+          if (prev === null) return toSnackbarData(item);
+          queueRef.current.push(item);
+          return prev;
+        });
+      });
+    },
+    []
+  );
+  const _dismiss = React12.useCallback((result) => {
+    setCurrent((prev) => {
+      if (prev) prev.resolve(result);
+      const next = queueRef.current.shift();
+      return next ? toSnackbarData(next) : null;
+    });
+  }, []);
+  React12.useEffect(() => {
+    return () => {
+      for (const item of queueRef.current) {
+        item.resolve(RESULT.DISMISSED);
+      }
+      queueRef.current = [];
+    };
+  }, []);
+  return { current, showSnackbar, _dismiss };
+}
+var Snackbar = React12.memo(function Snackbar2({
+  data,
+  className
+}) {
+  const { visuals, resolve } = data;
+  const {
+    message,
+    actionLabel,
+    withDismissAction = false,
+    actionOnNewLine = false,
+    duration
+  } = visuals;
+  const reducedMotion = useReducedMotion();
+  const durationMs = resolveDuration(duration);
+  React12.useEffect(() => {
+    const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
+    return () => clearTimeout(timer);
+  }, [resolve, durationMs]);
+  const handleAction = React12.useCallback(
+    () => resolve(RESULT.ACTION),
+    [resolve]
+  );
+  const handleDismiss = React12.useCallback(
+    () => resolve(RESULT.DISMISSED),
+    [resolve]
+  );
+  const hasActions = actionLabel || withDismissAction;
+  const anim = reducedMotion ? REDUCED_MOTION_ANIM : SNACKBAR_ANIM;
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, anim), {
+      className: cn(
+        "flex items-center gap-2",
+        "min-w-72 max-w-142 w-max",
+        "rounded-sm px-4 py-3 shadow-md",
+        "text-m3-inverse-on-surface bg-m3-inverse-surface",
+        actionOnNewLine ? "flex-col items-start" : "flex-row",
+        className,
+        visuals.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm leading-5 font-normal", children: message }),
+        hasActions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center gap-1",
+              actionOnNewLine && "self-end"
+            ),
+            children: [
+              actionLabel && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAction,
+                  className: cn(
+                    "text-sm font-medium",
+                    "px-2 py-1 rounded-sm",
+                    "focus-visible:outline-none focus-visible:ring-2",
+                    "transition-colors whitespace-nowrap",
+                    "text-m3-inverse-primary"
+                  ),
+                  children: actionLabel
+                }
+              ),
+              withDismissAction && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  colorStyle: "filled",
+                  "aria-label": "Dismiss notification",
+                  onClick: handleDismiss,
+                  className: "text-m3-inverse-on-surface bg-m3-inverse-surface",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    })
+  );
+});
+Snackbar.displayName = "Snackbar";
+function SnackbarHost({ state, className }) {
+  const { current, _dismiss } = state;
+  const wrappedData = React12.useMemo(() => {
+    if (!current) return null;
+    return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
+  }, [current, _dismiss]);
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": "Snackbar notifications",
+      className: cn(
+        "fixed bottom-4 left-1/2 -translate-x-1/2 z-50",
+        "flex flex-col items-center pointer-events-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: wrappedData && /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(Snackbar, { data: wrappedData }) }, wrappedData.id) })
+    }
+  ) });
+}
+SnackbarHost.displayName = "SnackbarHost";
+var SnackbarContext = React12.createContext(
+  null
+);
+function SnackbarProvider({ children }) {
+  const state = useSnackbarState();
+  const contextValue = React12.useMemo(
+    () => ({ showSnackbar: state.showSnackbar }),
+    [state.showSnackbar]
+  );
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(SnackbarHost, { state })
+  ] });
+}
+SnackbarProvider.displayName = "SnackbarProvider";
+function useSnackbar() {
+  const ctx = React12.useContext(SnackbarContext);
+  if (!ctx) {
+    throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
+  }
+  return ctx;
+}
+
+// src/ui/tooltip/tooltip.tokens.ts
+var TooltipTokens = {
+  PlainTooltip: {
+    containerColor: "var(--md-sys-color-inverse-surface)",
+    // #322F35 light / #E6E1E5 dark
+    textColor: "var(--md-sys-color-inverse-on-surface)",
+    // #F5EFF7 light / #322F35 dark
+    shape: "rounded-[4px]",
+    // CornerExtraSmall = 4dp
+    font: "text-[12px] font-normal tracking-[0.4px] leading-[16px]",
+    // BodySmall
+    height: "min-h-6",
+    // 24dp min height
+    padding: "px-2 py-1",
+    // 8dp all sides
+    maxWidth: "max-w-50"
+  },
+  RichTooltip: {
+    containerColor: "var(--md-sys-color-surface-container)",
+    elevation: "shadow-md",
+    // ElevationTokens.Level2 (approximate with shadow-md)
+    shape: "rounded-[12px]",
+    // CornerMedium = 12dp
+    paddingTop: "pt-3",
+    // 12dp
+    paddingBottom: "pb-2",
+    // 8dp
+    paddingX: "px-4",
+    // 16dp
+    maxWidth: "max-w-80",
+    subheadColor: "var(--md-sys-color-on-surface-variant)",
+    subheadFont: "text-[14px] font-medium leading-[20px]",
+    // TitleSmall
+    bodyColor: "var(--md-sys-color-on-surface-variant)",
+    bodyFont: "text-[14px] font-normal leading-[20px]",
+    // BodyMedium
+    actionColor: "var(--md-sys-color-primary)",
+    actionFont: "text-[14px] font-medium leading-[20px]"
+    // LabelLarge
+  }
+};
+var CENTER_H = "left-1/2 -translate-x-1/2";
+var CENTER_V = "top-1/2 -translate-y-1/2 flex items-center justify-center";
+var POSITION_BY_SIDE = {
+  top: (h) => `bottom-[calc(-1*${h}px)] ${CENTER_H}`,
+  bottom: (h) => `top-[calc(-1*${h}px)] ${CENTER_H}`,
+  left: (h) => `right-[calc(-1*${h}px)] ${CENTER_V}`,
+  right: (h) => `left-[calc(-1*${h}px)] ${CENTER_V}`
+};
+var ROTATION = {
+  top: "180deg",
+  bottom: "0deg",
+  left: "90deg",
+  right: "-90deg"
+};
+function TooltipCaretShape({
+  side,
+  width = 16,
+  height = 8,
+  color,
+  customPath,
+  className = ""
+}) {
+  const isHorizontal = side === "left" || side === "right";
+  const path = customPath != null ? customPath : `M 0,${height} L ${width / 2},0 L ${width},${height} Z`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `absolute pointer-events-none z-[-1] ${POSITION_BY_SIDE[side](height)} ${className}`,
+      style: {
+        width: isHorizontal ? height : width,
+        height: isHorizontal ? width : height,
+        color
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          style: {
+            transform: `rotate(${ROTATION[side]})`,
+            display: "block",
+            transformOrigin: "center"
+          },
+          children: /* @__PURE__ */ jsx("path", { d: path })
+        }
+      )
+    }
+  );
+}
+var PlainTooltip = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      caret,
+      className = "",
+      maxWidth,
+      containerColor,
+      textColor
+    } = _b, props = __objRest(_b, [
+      "children",
+      "caret",
+      "className",
+      "maxWidth",
+      "containerColor",
+      "textColor"
+    ]);
+    var _a2;
+    const {
+      containerColor: tokenContainer,
+      textColor: tokenText,
+      font,
+      padding,
+      shape,
+      height,
+      maxWidth: tokenMaxWidth
+    } = TooltipTokens.PlainTooltip;
+    const style = __spreadValues(__spreadProps(__spreadValues({}, props.style), {
+      backgroundColor: containerColor != null ? containerColor : tokenContainer,
+      color: textColor != null ? textColor : tokenText
+    }), maxWidth && { maxWidth });
+    const side = (_a2 = props["data-side"]) != null ? _a2 : "top";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `relative inline-flex items-center box-border ${shape} ${font} ${padding} ${height} ${!maxWidth ? tokenMaxWidth : ""} ${className}`,
+        style
+      }, props), {
+        children: [
+          (caret == null ? void 0 : caret.enabled) && /* @__PURE__ */ jsx(
+            TooltipCaretShape,
+            {
+              side,
+              width: caret.width,
+              height: caret.height,
+              color: style.backgroundColor,
+              customPath: caret.customPath
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "whitespace-normal text-start wrap-break-word", children })
+        ]
+      })
+    );
+  }
+);
+PlainTooltip.displayName = "PlainTooltip";
+var RichTooltip = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      title,
+      action,
+      caret,
+      className = "",
+      maxWidth,
+      colors = {}
+    } = _b, props = __objRest(_b, [
+      "children",
+      "title",
+      "action",
+      "caret",
+      "className",
+      "maxWidth",
+      "colors"
+    ]);
+    var _a2, _b2, _c, _d, _e;
+    const {
+      containerColor: tokenContainer,
+      elevation,
+      shape,
+      paddingTop,
+      paddingBottom,
+      paddingX,
+      maxWidth: tokenMaxWidth,
+      subheadColor,
+      subheadFont,
+      bodyColor,
+      bodyFont,
+      actionColor,
+      actionFont
+    } = TooltipTokens.RichTooltip;
+    const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, props.style), {
+      backgroundColor: (_a2 = colors.container) != null ? _a2 : tokenContainer
+    }), maxWidth && { maxWidth });
+    const side = (_b2 = props["data-side"]) != null ? _b2 : "top";
+    const titleColor = (_c = colors.title) != null ? _c : subheadColor;
+    const bodyColorResolved = (_d = colors.body) != null ? _d : bodyColor;
+    const actionColorResolved = (_e = colors.action) != null ? _e : actionColor;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `relative box-border flex flex-col ${shape} ${elevation} ${paddingTop} ${paddingBottom} ${paddingX} ${!maxWidth ? tokenMaxWidth : ""} ${className}`,
+        style: containerStyle
+      }, props), {
+        children: [
+          (caret == null ? void 0 : caret.enabled) && /* @__PURE__ */ jsx(
+            TooltipCaretShape,
+            {
+              side,
+              width: caret.width,
+              height: caret.height,
+              color: containerStyle.backgroundColor,
+              customPath: caret.customPath
+            }
+          ),
+          title && /* @__PURE__ */ jsx("div", { className: `mb-1 ${subheadFont}`, style: { color: titleColor }, children: title }),
+          children && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `whitespace-normal text-start wrap-break-word ${bodyFont}`,
+              style: { color: bodyColorResolved },
+              children
+            }
+          ),
+          action && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `mt-2 flex min-h-9 flex-wrap items-center gap-2 ${actionFont}`,
+              style: { color: actionColorResolved },
+              children: action
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+RichTooltip.displayName = "RichTooltip";
+var VIEWPORT_PADDING = 8;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function resolveAutoPlacement(spaceTop, spaceBottom, spaceLeft, spaceRight, tooltipWidth, tooltipHeight, spacing) {
+  if (spaceTop >= tooltipHeight + spacing) return "top";
+  if (spaceBottom >= tooltipHeight + spacing) return "bottom";
+  if (spaceLeft >= tooltipWidth + spacing) return "left";
+  if (spaceRight >= tooltipWidth + spacing) return "right";
+  return "top";
+}
+function resolveActualSide(targetPlacement, spaceTop, spaceBottom, spaceLeft, spaceRight, tooltipWidth, tooltipHeight, spacing) {
+  const needsHeight = tooltipHeight + spacing;
+  const needsWidth = tooltipWidth + spacing;
+  if (targetPlacement === "top")
+    return spaceTop < needsHeight && spaceBottom >= needsHeight ? "bottom" : "top";
+  if (targetPlacement === "bottom")
+    return spaceBottom < needsHeight && spaceTop >= needsHeight ? "top" : "bottom";
+  if (targetPlacement === "left")
+    return spaceLeft < needsWidth && spaceRight >= needsWidth ? "right" : "left";
+  return spaceRight < needsWidth && spaceLeft >= needsWidth ? "left" : "right";
+}
+function calculateXY(side, anchorRect, tooltipWidth, tooltipHeight, spacing) {
+  const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+  const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+  if (side === "top")
+    return {
+      top: anchorRect.top - tooltipHeight - spacing,
+      left: anchorCenterX - tooltipWidth / 2
+    };
+  if (side === "bottom")
+    return {
+      top: anchorRect.bottom + spacing,
+      left: anchorCenterX - tooltipWidth / 2
+    };
+  if (side === "left")
+    return {
+      top: anchorCenterY - tooltipHeight / 2,
+      left: anchorRect.left - tooltipWidth - spacing
+    };
+  return {
+    top: anchorCenterY - tooltipHeight / 2,
+    left: anchorRect.right + spacing
+  };
+}
+function clampToViewport(side, top, left, tooltipWidth, tooltipHeight) {
+  const isVertical = side === "top" || side === "bottom";
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  if (isVertical) {
+    left = Math.max(
+      VIEWPORT_PADDING,
+      Math.min(left, viewportWidth - VIEWPORT_PADDING - tooltipWidth)
+    );
+  } else {
+    top = Math.max(
+      VIEWPORT_PADDING,
+      Math.min(top, viewportHeight - VIEWPORT_PADDING - tooltipHeight)
+    );
+  }
+  return { top, left };
+}
+function useTooltipPosition(anchorRef, tooltipRef, placement, spacing, isVisible) {
+  const [position, setPosition] = useState({
+    top: -9999,
+    left: -9999,
+    actualSide: placement === "auto" ? "top" : placement
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!isVisible || !anchorRef.current || !tooltipRef.current) return;
+    const calculatePosition = () => {
+      const anchorEl = anchorRef.current;
+      const tooltipEl = tooltipRef.current;
+      if (!anchorEl || !tooltipEl) return;
+      const anchorRect = anchorEl.getBoundingClientRect();
+      const tooltipRect = tooltipEl.getBoundingClientRect();
+      const tooltipWidth = tooltipRect.width;
+      const tooltipHeight = tooltipRect.height;
+      const spaceTop = anchorRect.top;
+      const spaceBottom = window.innerHeight - anchorRect.bottom;
+      const spaceLeft = anchorRect.left;
+      const spaceRight = window.innerWidth - anchorRect.right;
+      const targetSide = placement === "auto" ? resolveAutoPlacement(
+        spaceTop,
+        spaceBottom,
+        spaceLeft,
+        spaceRight,
+        tooltipWidth,
+        tooltipHeight,
+        spacing
+      ) : placement;
+      const actualSide = resolveActualSide(
+        targetSide,
+        spaceTop,
+        spaceBottom,
+        spaceLeft,
+        spaceRight,
+        tooltipWidth,
+        tooltipHeight,
+        spacing
+      );
+      const { top, left } = calculateXY(
+        actualSide,
+        anchorRect,
+        tooltipWidth,
+        tooltipHeight,
+        spacing
+      );
+      const clamped = clampToViewport(
+        actualSide,
+        top,
+        left,
+        tooltipWidth,
+        tooltipHeight
+      );
+      setPosition(__spreadProps(__spreadValues({}, clamped), { actualSide }));
+    };
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition, true);
+    const resizeObserver = new ResizeObserver(calculatePosition);
+    if (anchorRef.current) resizeObserver.observe(anchorRef.current);
+    if (tooltipRef.current) resizeObserver.observe(tooltipRef.current);
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition, true);
+      resizeObserver.disconnect();
+    };
+  }, [isVisible, placement, spacing, anchorRef, tooltipRef]);
+  return position;
+}
+var activeTooltipDismissals = /* @__PURE__ */ new Set();
+function useTooltipState(config) {
+  const {
+    initialVisible = false,
+    isPersistent = false,
+    duration = 1500
+  } = config != null ? config : {};
+  const [isVisible, setIsVisible] = useState(initialVisible);
+  const dismiss = useCallback(() => {
+    setIsVisible(false);
+    activeTooltipDismissals.delete(dismiss);
+  }, []);
+  const show = useCallback(() => {
+    for (const otherDismiss of activeTooltipDismissals) {
+      if (otherDismiss !== dismiss) otherDismiss();
+    }
+    setIsVisible(true);
+    activeTooltipDismissals.add(dismiss);
+  }, [dismiss]);
+  useEffect(() => {
+    if (!isVisible || isPersistent) return;
+    const timeoutId = setTimeout(dismiss, duration);
+    return () => clearTimeout(timeoutId);
+  }, [isVisible, isPersistent, duration, dismiss]);
+  useEffect(() => {
+    return () => {
+      activeTooltipDismissals.delete(dismiss);
+    };
+  }, [dismiss]);
+  return { isVisible, show, dismiss };
+}
+var TRANSFORM_ORIGIN = {
+  top: "50% 100%",
+  bottom: "50% 0%",
+  left: "100% 50%",
+  right: "0% 50%"
+};
+var MOTION_VARIANTS = {
+  full: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        opacity: { duration: 0.1, ease: "easeOut" },
+        scale: { type: "spring", stiffness: 900, damping: 90, mass: 0.5 }
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.8,
+      transition: {
+        opacity: { duration: 0.075, ease: "easeIn" },
+        scale: { duration: 0.1, ease: "easeIn" }
+      }
+    }
+  },
+  reduced: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, transition: { duration: 0.1 } }
+  }
+};
+function clearTimeout2(ref) {
+  if (ref.current !== null) window.clearTimeout(ref.current);
+}
+function TooltipBox({
+  children,
+  tooltip,
+  placement = "top",
+  trigger = ["hover", "focus"],
+  state: controlledState,
+  spacingFromAnchor = 4,
+  disabled = false,
+  className = "",
+  showDelay = 400,
+  hideDelay = 200,
+  "aria-label": ariaLabel
+}) {
+  const internalState = useTooltipState();
+  const state = controlledState != null ? controlledState : internalState;
+  const anchorRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const hoverTimeoutRef = useRef(null);
+  const hideTimeoutRef = useRef(null);
+  const pressTimeoutRef = useRef(null);
+  const triggers = Array.isArray(trigger) ? trigger : [trigger];
+  const [mounted, setMounted] = useState(false);
+  const [hasHoverSupport, setHasHoverSupport] = useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    setHasHoverSupport(!window.matchMedia("(hover: none)").matches);
+  }, []);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const onChange = (e) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }, []);
+  const position = useTooltipPosition(
+    anchorRef,
+    tooltipRef,
+    placement,
+    spacingFromAnchor,
+    state.isVisible
+  );
+  const canHover = !disabled && hasHoverSupport && triggers.includes("hover");
+  const canClick = !disabled && triggers.includes("click");
+  const handlePointerEnter = () => {
+    if (!canHover) return;
+    clearTimeout2(hoverTimeoutRef);
+    clearTimeout2(hideTimeoutRef);
+    hoverTimeoutRef.current = window.setTimeout(() => state.show(), showDelay);
+  };
+  const handlePointerLeave = () => {
+    if (!canHover) return;
+    clearTimeout2(hoverTimeoutRef);
+    hideTimeoutRef.current = window.setTimeout(
+      () => state.dismiss(),
+      hideDelay
+    );
+  };
+  const handleFocus = () => {
+    if (disabled || !triggers.includes("focus")) return;
+    state.show();
+  };
+  const handleBlur = (e) => {
+    if (disabled) return;
+    const focusMovedInside = tooltipRef.current && (e.relatedTarget === tooltipRef.current || tooltipRef.current.contains(e.relatedTarget));
+    if (focusMovedInside) return;
+    state.dismiss();
+  };
+  const handlePointerDown = (e) => {
+    if (disabled || !triggers.includes("long-press") || e.pointerType === "mouse")
+      return;
+    clearTimeout2(pressTimeoutRef);
+    pressTimeoutRef.current = window.setTimeout(() => state.show(), 500);
+  };
+  const handleClick = () => {
+    if (!canClick) return;
+    if (state.isVisible) state.dismiss();
+    else state.show();
+  };
+  const handleKeyDown = (e) => {
+    if (disabled || !canClick) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  const handleContextMenu = (e) => {
+    if (triggers.includes("long-press") && state.isVisible) e.preventDefault();
+  };
+  const handleTooltipPointerEnter = () => {
+    if (!canHover) return;
+    clearTimeout2(hideTimeoutRef);
+  };
+  const handleTooltipPointerLeave = () => {
+    if (!canHover) return;
+    hideTimeoutRef.current = window.setTimeout(
+      () => state.dismiss(),
+      hideDelay
+    );
+  };
+  useEffect(() => {
+    if (!state.isVisible) return;
+    const onKeyDown = (e) => {
+      var _a;
+      if (e.key === "Escape") {
+        state.dismiss();
+        (_a = anchorRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [state.isVisible, state]);
+  const tooltipId = useId();
+  const tooltipWithProps = cloneElement(
+    tooltip,
+    {
+      "data-side": position.actualSide,
+      id: tooltipId,
+      role: "tooltip",
+      onBlur: handleBlur
+    }
+  );
+  const variants = prefersReducedMotion ? MOTION_VARIANTS.reduced : MOTION_VARIANTS.full;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref: anchorRef,
+        className: `inline-flex ${className}`,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onPointerDown: handlePointerDown,
+        onPointerUp: () => clearTimeout2(pressTimeoutRef),
+        onPointerCancel: () => clearTimeout2(pressTimeoutRef),
+        onContextMenu: handleContextMenu,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "aria-label": ariaLabel,
+        "aria-describedby": state.isVisible ? tooltipId : void 0,
+        children: React12.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
+      }
+    ),
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: state.isVisible && !disabled && /* @__PURE__ */ jsx(
+        m.div,
+        {
+          ref: tooltipRef,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          variants,
+          onPointerEnter: handleTooltipPointerEnter,
+          onPointerLeave: handleTooltipPointerLeave,
+          style: {
+            position: "fixed",
+            top: position.top,
+            left: position.left,
+            transformOrigin: TRANSFORM_ORIGIN[position.actualSide],
+            zIndex: 50,
+            pointerEvents: "auto"
+          },
+          children: tooltipWithProps
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+export { Badge, BadgedBox, LoadingIndicator, PlainTooltip, ProgressIndicator, RichTooltip, Snackbar, SnackbarHost, SnackbarProvider, TooltipBox, TooltipCaretShape, TooltipTokens, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState };
+//# sourceMappingURL=feedback.mjs.map
+//# sourceMappingURL=feedback.mjs.map