@bug-on/m3-expressive 1.0.0

package/dist/core.mjs

@@ -0,0 +1,2547 @@
+"use client";
+import * as React11 from 'react';
+import { createContext, useState, useEffect, useRef, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { LazyMotion, domMax, m, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
+
+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 __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function useRipple(options = {}) {
+  const {
+    duration = 600,
+    color = "currentColor",
+    opacity = 0.12,
+    disabled = false
+  } = options;
+  const ref = useRef(null);
+  const onPointerDown = useCallback(
+    (event) => {
+      if (disabled || !ref.current) return;
+      const el = ref.current;
+      const rect = el.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height) * 2;
+      const x = event.clientX - rect.left - size / 2;
+      const y = event.clientY - rect.top - size / 2;
+      const ripple = document.createElement("span");
+      ripple.setAttribute("aria-hidden", "true");
+      Object.assign(ripple.style, {
+        position: "absolute",
+        borderRadius: "50%",
+        pointerEvents: "none",
+        width: `${size}px`,
+        height: `${size}px`,
+        left: `${x}px`,
+        top: `${y}px`,
+        background: color,
+        opacity: String(opacity),
+        transform: "scale(0)",
+        transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0, 1), opacity ${duration * 0.6}ms ease-out`
+      });
+      el.appendChild(ripple);
+      requestAnimationFrame(() => {
+        ripple.style.transform = "scale(1)";
+      });
+      const cleanup = () => {
+        ripple.style.opacity = "0";
+        setTimeout(() => {
+          if (el.contains(ripple)) el.removeChild(ripple);
+        }, duration * 0.6);
+        el.removeEventListener("pointerup", cleanup);
+        el.removeEventListener("pointerleave", cleanup);
+      };
+      el.addEventListener("pointerup", cleanup, { once: true });
+      el.addEventListener("pointerleave", cleanup, { once: true });
+    },
+    [disabled, duration, color, opacity]
+  );
+  return { rippleRef: ref, onPointerDown };
+}
+function MaterialSymbolsPreconnect({
+  variants = ["outlined"]
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
+    /* @__PURE__ */ jsx(
+      "link",
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous"
+      }
+    ),
+    variants.includes("outlined") && /* @__PURE__ */ jsx(
+      "link",
+      {
+        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        rel: "stylesheet",
+        precedence: "default"
+      }
+    ),
+    variants.includes("rounded") && /* @__PURE__ */ jsx(
+      "link",
+      {
+        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        rel: "stylesheet",
+        precedence: "default"
+      }
+    ),
+    variants.includes("sharp") && /* @__PURE__ */ jsx(
+      "link",
+      {
+        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        rel: "stylesheet",
+        precedence: "default"
+      }
+    )
+  ] });
+}
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function generateM3Theme(sourceColorHex, mode = "light") {
+  const sourceColor = argbFromHex(sourceColorHex);
+  const theme = themeFromSourceColor(sourceColor);
+  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
+  const palettes = theme.palettes;
+  const tone = (palette, t) => hexFromArgb(palette.tone(t));
+  return {
+    primary: hexFromArgb(scheme.primary),
+    onPrimary: hexFromArgb(scheme.onPrimary),
+    primaryContainer: hexFromArgb(scheme.primaryContainer),
+    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
+    inversePrimary: hexFromArgb(scheme.inversePrimary),
+    primaryFixed: tone(palettes.primary, 90),
+    primaryFixedDim: tone(palettes.primary, 80),
+    onPrimaryFixed: tone(palettes.primary, 10),
+    onPrimaryFixedVariant: tone(palettes.primary, 30),
+    secondary: hexFromArgb(scheme.secondary),
+    onSecondary: hexFromArgb(scheme.onSecondary),
+    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
+    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
+    secondaryFixed: tone(palettes.secondary, 90),
+    secondaryFixedDim: tone(palettes.secondary, 80),
+    onSecondaryFixed: tone(palettes.secondary, 10),
+    onSecondaryFixedVariant: tone(palettes.secondary, 30),
+    tertiary: hexFromArgb(scheme.tertiary),
+    onTertiary: hexFromArgb(scheme.onTertiary),
+    tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
+    onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
+    tertiaryFixed: tone(palettes.tertiary, 90),
+    tertiaryFixedDim: tone(palettes.tertiary, 80),
+    onTertiaryFixed: tone(palettes.tertiary, 10),
+    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
+    error: hexFromArgb(scheme.error),
+    onError: hexFromArgb(scheme.onError),
+    errorContainer: hexFromArgb(scheme.errorContainer),
+    onErrorContainer: hexFromArgb(scheme.onErrorContainer),
+    surface: hexFromArgb(scheme.surface),
+    onSurface: hexFromArgb(scheme.onSurface),
+    surfaceVariant: hexFromArgb(scheme.surfaceVariant),
+    onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
+    surfaceTint: hexFromArgb(scheme.primary),
+    // Surface container roles from neutral palette tones
+    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
+    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
+    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
+    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
+    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
+    inverseSurface: hexFromArgb(scheme.inverseSurface),
+    inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
+    background: hexFromArgb(scheme.background),
+    onBackground: hexFromArgb(scheme.onBackground),
+    outline: hexFromArgb(scheme.outline),
+    outlineVariant: hexFromArgb(scheme.outlineVariant),
+    shadow: hexFromArgb(scheme.shadow),
+    scrim: hexFromArgb(scheme.scrim)
+  };
+}
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved);
+  for (const [key, value] of Object.entries(colors)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m7) => `-${m7.toLowerCase()}`);
+    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
+    root.style.setProperty(`--color-m3-${kebabKey}`, value);
+  }
+  root.setAttribute("data-theme", resolved);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/shared/motion-tokens.ts
+var DEFAULT_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 31.19
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+var DEFAULT_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 1600,
+  damping: 80
+};
+
+// 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 }
+};
+var VARIANT_FONT = {
+  outlined: "'Material Symbols Outlined'",
+  rounded: "'Material Symbols Rounded'",
+  sharp: "'Material Symbols Sharp'"
+};
+var IconComponent = React11.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 = React11.memo(IconComponent);
+var RippleItem = React11.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] = React11.useState([]);
+  const onPointerDown = React11.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 = React11.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  return { ripples, onPointerDown, removeRipple };
+}
+var useRipple2 = useRippleState;
+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 = React11.memo(function IndeterminateSvg2({
+  size
+}) {
+  const [ready, setReady] = React11.useState(false);
+  React11.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 = React11.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 = React11.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 = React11.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 = React11.useMemo(
+      () => amplitude != null ? amplitude : 1.6 * scaleFactor,
+      [amplitude, scaleFactor]
+    );
+    const effectiveWavelength = React11.useMemo(
+      () => wavelength != null ? wavelength : 15 * scaleFactor,
+      [wavelength, scaleFactor]
+    );
+    const wavyActivePath = React11.useMemo(
+      () => isWavy ? generateWavyCircularPath(
+        center,
+        radius,
+        effectiveAmplitude,
+        effectiveWavelength
+      ) : null,
+      [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
+    );
+    const circumference = React11.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React11.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] = React11.useState(0);
+  const observerRef = React11.useRef(null);
+  const ref = React11.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;
+    }
+  }, []);
+  React11.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return [ref, width];
+}
+function useMergedRef(...refs) {
+  return React11.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 = React11.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 = React11.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 = React11.useId();
+  const [containerRef, width] = useContainerWidth();
+  const activePathRef = React11.useRef(null);
+  const trackPathRef = React11.useRef(null);
+  const amplitudeMV = useMotionValue(amplitude);
+  const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
+  React11.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 = React11.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 = React11.useRef(null);
+    const mergedRef = useMergedRef(ref, containerRef);
+    const [isRtl, setIsRtl] = React11.useState(false);
+    React11.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 = React11.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React11.useMemo(
+      () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
+      [isWavy, trackHeight, effectiveAmplitude]
+    );
+    const shouldShowStop = React11.useMemo(
+      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      [isDeterminate, resolvedTrackShape, showStopIndicator]
+    );
+    const stopSize = React11.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 = React11.forwardRef((props, ref) => {
+  if (props.variant === "circular") {
+    return /* @__PURE__ */ jsx(CircularProgress, __spreadValues({ ref }, props));
+  }
+  return /* @__PURE__ */ jsx(LinearProgress, __spreadValues({ ref }, props));
+});
+ProgressIndicator.displayName = "ProgressIndicator";
+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 = React11.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 = React11.useMemo(
+      () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
+      [isSelected, colorStyle]
+    );
+    const outlineWidthClass = React11.useMemo(
+      () => {
+        var _a3;
+        return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
+      },
+      [colorStyle, isSelected, size]
+    );
+    const disabledBgClass = React11.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 = React11.useCallback(
+      (e) => {
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+        onClick == null ? void 0 : onClick(e);
+      },
+      [loading, onClick]
+    );
+    const handleKeyDown = React11.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 = React11.memo(IconButtonComponent);
+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] = React11.useState(null);
+  const queueRef = React11.useRef([]);
+  const showSnackbar = React11.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 = React11.useCallback((result) => {
+    setCurrent((prev) => {
+      if (prev) prev.resolve(result);
+      const next = queueRef.current.shift();
+      return next ? toSnackbarData(next) : null;
+    });
+  }, []);
+  React11.useEffect(() => {
+    return () => {
+      for (const item of queueRef.current) {
+        item.resolve(RESULT.DISMISSED);
+      }
+      queueRef.current = [];
+    };
+  }, []);
+  return { current, showSnackbar, _dismiss };
+}
+var Snackbar = React11.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);
+  React11.useEffect(() => {
+    const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
+    return () => clearTimeout(timer);
+  }, [resolve, durationMs]);
+  const handleAction = React11.useCallback(
+    () => resolve(RESULT.ACTION),
+    [resolve]
+  );
+  const handleDismiss = React11.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 = React11.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 = React11.createContext(
+  null
+);
+
+// src/ui/typography/type-scale-tokens.ts
+var font = "'Google Sans Flex', system-ui, sans-serif";
+var TypeScaleTokens = {
+  // ─── DISPLAY ────────────────────────────────────────────────────────────────
+  DisplayLargeFont: font,
+  DisplayLargeWeight: 400,
+  DisplayLargeSize: "3.571rem",
+  // 57sp → ~57px / 14 = 4.071, MD3 uses 57px on 16px base → 3.5625rem
+  DisplayLargeLineHeight: "4rem",
+  // 64px
+  DisplayLargeTracking: "-0.25px",
+  DisplayMediumFont: font,
+  DisplayMediumWeight: 400,
+  DisplayMediumSize: "2.857rem",
+  // 45px
+  DisplayMediumLineHeight: "3.286rem",
+  // 52px
+  DisplayMediumTracking: "0px",
+  DisplaySmallFont: font,
+  DisplaySmallWeight: 400,
+  DisplaySmallSize: "2.571rem",
+  // 36px
+  DisplaySmallLineHeight: "3.143rem",
+  // 44px
+  DisplaySmallTracking: "0px",
+  // ─── HEADLINE ───────────────────────────────────────────────────────────────
+  HeadlineLargeFont: font,
+  HeadlineLargeWeight: 400,
+  HeadlineLargeSize: "2.286rem",
+  // 32px
+  HeadlineLargeLineHeight: "2.857rem",
+  // 40px
+  HeadlineLargeTracking: "0px",
+  HeadlineMediumFont: font,
+  HeadlineMediumWeight: 400,
+  HeadlineMediumSize: "2rem",
+  // 28px
+  HeadlineMediumLineHeight: "2.571rem",
+  // 36px
+  HeadlineMediumTracking: "0px",
+  HeadlineSmallFont: font,
+  HeadlineSmallWeight: 400,
+  HeadlineSmallSize: "1.714rem",
+  // 24px
+  HeadlineSmallLineHeight: "2.286rem",
+  // 32px
+  HeadlineSmallTracking: "0px",
+  // ─── TITLE ──────────────────────────────────────────────────────────────────
+  TitleLargeFont: font,
+  TitleLargeWeight: 400,
+  TitleLargeSize: "1.571rem",
+  // 22px
+  TitleLargeLineHeight: "2rem",
+  // 28px
+  TitleLargeTracking: "0px",
+  TitleMediumFont: font,
+  TitleMediumWeight: 500,
+  TitleMediumSize: "1.143rem",
+  // 16px
+  TitleMediumLineHeight: "1.714rem",
+  // 24px
+  TitleMediumTracking: "0.15px",
+  TitleSmallFont: font,
+  TitleSmallWeight: 500,
+  TitleSmallSize: "1rem",
+  // 14px
+  TitleSmallLineHeight: "1.429rem",
+  // 20px
+  TitleSmallTracking: "0.1px",
+  // ─── BODY ───────────────────────────────────────────────────────────────────
+  BodyLargeFont: font,
+  BodyLargeWeight: 400,
+  BodyLargeSize: "1.143rem",
+  // 16px
+  BodyLargeLineHeight: "1.714rem",
+  // 24px
+  BodyLargeTracking: "0.5px",
+  BodyMediumFont: font,
+  BodyMediumWeight: 400,
+  BodyMediumSize: "1rem",
+  // 14px
+  BodyMediumLineHeight: "1.429rem",
+  // 20px
+  BodyMediumTracking: "0.25px",
+  BodySmallFont: font,
+  BodySmallWeight: 400,
+  BodySmallSize: "0.857rem",
+  // 12px
+  BodySmallLineHeight: "1.143rem",
+  // 16px
+  BodySmallTracking: "0.4px",
+  // ─── LABEL ──────────────────────────────────────────────────────────────────
+  LabelLargeFont: font,
+  LabelLargeWeight: 500,
+  LabelLargeSize: "1rem",
+  // 14px
+  LabelLargeLineHeight: "1.429rem",
+  // 20px
+  LabelLargeTracking: "0.1px",
+  LabelMediumFont: font,
+  LabelMediumWeight: 500,
+  LabelMediumSize: "0.857rem",
+  // 12px
+  LabelMediumLineHeight: "1.143rem",
+  // 16px
+  LabelMediumTracking: "0.5px",
+  LabelSmallFont: font,
+  LabelSmallWeight: 500,
+  LabelSmallSize: "0.786rem",
+  // 11px
+  LabelSmallLineHeight: "1.143rem",
+  // 16px
+  LabelSmallTracking: "0.5px",
+  // ─── EMPHASIZED (MD3 Expressive) ────────────────────────────────────────────
+  // Emphasized styles share Font/Size/LineHeight/Tracking with baseline.
+  // Only fontWeight is elevated to create visual emphasis.
+  // Source: TypographyTokens.kt (Emphasized entries reference same scale)
+  DisplayLargeEmphasizedFont: font,
+  DisplayLargeEmphasizedWeight: 800,
+  DisplayLargeEmphasizedSize: "3.571rem",
+  DisplayLargeEmphasizedLineHeight: "4rem",
+  DisplayLargeEmphasizedTracking: "-0.25px",
+  DisplayMediumEmphasizedFont: font,
+  DisplayMediumEmphasizedWeight: 800,
+  DisplayMediumEmphasizedSize: "2.857rem",
+  DisplayMediumEmphasizedLineHeight: "3.286rem",
+  DisplayMediumEmphasizedTracking: "0px",
+  DisplaySmallEmphasizedFont: font,
+  DisplaySmallEmphasizedWeight: 800,
+  DisplaySmallEmphasizedSize: "2.571rem",
+  DisplaySmallEmphasizedLineHeight: "3.143rem",
+  DisplaySmallEmphasizedTracking: "0px",
+  HeadlineLargeEmphasizedFont: font,
+  HeadlineLargeEmphasizedWeight: 800,
+  HeadlineLargeEmphasizedSize: "2.286rem",
+  HeadlineLargeEmphasizedLineHeight: "2.857rem",
+  HeadlineLargeEmphasizedTracking: "0px",
+  HeadlineMediumEmphasizedFont: font,
+  HeadlineMediumEmphasizedWeight: 800,
+  HeadlineMediumEmphasizedSize: "2rem",
+  HeadlineMediumEmphasizedLineHeight: "2.571rem",
+  HeadlineMediumEmphasizedTracking: "0px",
+  HeadlineSmallEmphasizedFont: font,
+  HeadlineSmallEmphasizedWeight: 800,
+  HeadlineSmallEmphasizedSize: "1.714rem",
+  HeadlineSmallEmphasizedLineHeight: "2.286rem",
+  HeadlineSmallEmphasizedTracking: "0px",
+  TitleLargeEmphasizedFont: font,
+  TitleLargeEmphasizedWeight: 700,
+  TitleLargeEmphasizedSize: "1.571rem",
+  TitleLargeEmphasizedLineHeight: "2rem",
+  TitleLargeEmphasizedTracking: "0px",
+  TitleMediumEmphasizedFont: font,
+  TitleMediumEmphasizedWeight: 700,
+  TitleMediumEmphasizedSize: "1.143rem",
+  TitleMediumEmphasizedLineHeight: "1.714rem",
+  TitleMediumEmphasizedTracking: "0.15px",
+  TitleSmallEmphasizedFont: font,
+  TitleSmallEmphasizedWeight: 700,
+  TitleSmallEmphasizedSize: "1rem",
+  TitleSmallEmphasizedLineHeight: "1.429rem",
+  TitleSmallEmphasizedTracking: "0.1px",
+  BodyLargeEmphasizedFont: font,
+  BodyLargeEmphasizedWeight: 700,
+  BodyLargeEmphasizedSize: "1.143rem",
+  BodyLargeEmphasizedLineHeight: "1.714rem",
+  BodyLargeEmphasizedTracking: "0.5px",
+  BodyMediumEmphasizedFont: font,
+  BodyMediumEmphasizedWeight: 700,
+  BodyMediumEmphasizedSize: "1rem",
+  BodyMediumEmphasizedLineHeight: "1.429rem",
+  BodyMediumEmphasizedTracking: "0.25px",
+  BodySmallEmphasizedFont: font,
+  BodySmallEmphasizedWeight: 700,
+  BodySmallEmphasizedSize: "0.857rem",
+  BodySmallEmphasizedLineHeight: "1.143rem",
+  BodySmallEmphasizedTracking: "0.4px",
+  LabelLargeEmphasizedFont: font,
+  LabelLargeEmphasizedWeight: 800,
+  LabelLargeEmphasizedSize: "1rem",
+  LabelLargeEmphasizedLineHeight: "1.429rem",
+  LabelLargeEmphasizedTracking: "0.1px",
+  LabelMediumEmphasizedFont: font,
+  LabelMediumEmphasizedWeight: 800,
+  LabelMediumEmphasizedSize: "0.857rem",
+  LabelMediumEmphasizedLineHeight: "1.143rem",
+  LabelMediumEmphasizedTracking: "0.5px",
+  LabelSmallEmphasizedFont: font,
+  LabelSmallEmphasizedWeight: 800,
+  LabelSmallEmphasizedSize: "0.786rem",
+  LabelSmallEmphasizedLineHeight: "1.143rem",
+  LabelSmallEmphasizedTracking: "0.5px"
+};
+
+// src/ui/typography/typography-tokens.ts
+var DEFAULT_FONT_VARIATION_AXES = Object.freeze({ ROND: 100 });
+function serializeFontVariationAxes(axes) {
+  return Object.entries(axes).filter(([, v]) => v !== void 0).map(([k, v]) => `"${k}" ${v}`).join(", ");
+}
+var MD3_EXPRESSIVE_FONT_VARIATION = serializeFontVariationAxes(
+  DEFAULT_FONT_VARIATION_AXES
+);
+function buildStyle(prefix, fontFamily, fontVariationSettings) {
+  const t = TypeScaleTokens;
+  return Object.freeze({
+    fontFamily: fontFamily != null ? fontFamily : t[`${prefix}Font`],
+    fontWeight: t[`${prefix}Weight`],
+    fontSize: t[`${prefix}Size`],
+    lineHeight: t[`${prefix}LineHeight`],
+    letterSpacing: t[`${prefix}Tracking`],
+    fontVariationSettings
+  });
+}
+var _fontFamily, _fontVariationSettings, _cache, _TypographyTokens_instances, get_fn;
+var TypographyTokens = class {
+  constructor(options = {}) {
+    __privateAdd(this, _TypographyTokens_instances);
+    __privateAdd(this, _fontFamily);
+    __privateAdd(this, _fontVariationSettings);
+    // Helper to lazily build + cache a style on first access
+    __privateAdd(this, _cache, /* @__PURE__ */ new Map());
+    if (typeof options === "string") {
+      __privateSet(this, _fontFamily, options);
+      __privateSet(this, _fontVariationSettings, MD3_EXPRESSIVE_FONT_VARIATION);
+    } else {
+      __privateSet(this, _fontFamily, options.fontFamily);
+      const axes = options.fontVariationAxes ? __spreadValues(__spreadValues({}, DEFAULT_FONT_VARIATION_AXES), options.fontVariationAxes) : DEFAULT_FONT_VARIATION_AXES;
+      __privateSet(this, _fontVariationSettings, serializeFontVariationAxes(axes));
+    }
+  }
+  // ─── Baseline Styles (15) ──────────────────────────────────────────────────
+  /** Display Large – `57px`, weight 400 */
+  get DisplayLarge() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplayLarge");
+  }
+  /** Display Medium – `45px`, weight 400 */
+  get DisplayMedium() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplayMedium");
+  }
+  /** Display Small – `36px`, weight 400 */
+  get DisplaySmall() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplaySmall");
+  }
+  /** Headline Large – `32px`, weight 400 */
+  get HeadlineLarge() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineLarge");
+  }
+  /** Headline Medium – `28px`, weight 400 */
+  get HeadlineMedium() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineMedium");
+  }
+  /** Headline Small – `24px`, weight 400 */
+  get HeadlineSmall() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineSmall");
+  }
+  /** Title Large – `22px`, weight 400 */
+  get TitleLarge() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleLarge");
+  }
+  /** Title Medium – `16px`, weight 500 */
+  get TitleMedium() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleMedium");
+  }
+  /** Title Small – `14px`, weight 500 */
+  get TitleSmall() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleSmall");
+  }
+  /** Body Large – `16px`, weight 400 */
+  get BodyLarge() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodyLarge");
+  }
+  /** Body Medium – `14px`, weight 400 */
+  get BodyMedium() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodyMedium");
+  }
+  /** Body Small – `12px`, weight 400 */
+  get BodySmall() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodySmall");
+  }
+  /** Label Large – `14px`, weight 500 */
+  get LabelLarge() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelLarge");
+  }
+  /** Label Medium – `12px`, weight 500 */
+  get LabelMedium() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelMedium");
+  }
+  /** Label Small – `11px`, weight 500 */
+  get LabelSmall() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelSmall");
+  }
+  // ─── Emphasized Styles (15) – MD3 Expressive ──────────────────────────────
+  /** Display Large Emphasized – `57px`, weight 800 */
+  get DisplayLargeEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplayLargeEmphasized");
+  }
+  /** Display Medium Emphasized – `45px`, weight 800 */
+  get DisplayMediumEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplayMediumEmphasized");
+  }
+  /** Display Small Emphasized – `36px`, weight 800 */
+  get DisplaySmallEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "DisplaySmallEmphasized");
+  }
+  /** Headline Large Emphasized – `32px`, weight 800 */
+  get HeadlineLargeEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineLargeEmphasized");
+  }
+  /** Headline Medium Emphasized – `28px`, weight 800 */
+  get HeadlineMediumEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineMediumEmphasized");
+  }
+  /** Headline Small Emphasized – `24px`, weight 800 */
+  get HeadlineSmallEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "HeadlineSmallEmphasized");
+  }
+  /** Title Large Emphasized – `22px`, weight 700 */
+  get TitleLargeEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleLargeEmphasized");
+  }
+  /** Title Medium Emphasized – `16px`, weight 700 */
+  get TitleMediumEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleMediumEmphasized");
+  }
+  /** Title Small Emphasized – `14px`, weight 700 */
+  get TitleSmallEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "TitleSmallEmphasized");
+  }
+  /** Body Large Emphasized – `16px`, weight 700 */
+  get BodyLargeEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodyLargeEmphasized");
+  }
+  /** Body Medium Emphasized – `14px`, weight 700 */
+  get BodyMediumEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodyMediumEmphasized");
+  }
+  /** Body Small Emphasized – `12px`, weight 700 */
+  get BodySmallEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "BodySmallEmphasized");
+  }
+  /** Label Large Emphasized – `14px`, weight 800 */
+  get LabelLargeEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelLargeEmphasized");
+  }
+  /** Label Medium Emphasized – `12px`, weight 800 */
+  get LabelMediumEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelMediumEmphasized");
+  }
+  /** Label Small Emphasized – `11px`, weight 800 */
+  get LabelSmallEmphasized() {
+    return __privateMethod(this, _TypographyTokens_instances, get_fn).call(this, "LabelSmallEmphasized");
+  }
+};
+_fontFamily = new WeakMap();
+_fontVariationSettings = new WeakMap();
+_cache = new WeakMap();
+_TypographyTokens_instances = new WeakSet();
+get_fn = function(prefix) {
+  let style = __privateGet(this, _cache).get(prefix);
+  if (!style) {
+    style = buildStyle(prefix, __privateGet(this, _fontFamily), __privateGet(this, _fontVariationSettings));
+    __privateGet(this, _cache).set(prefix, style);
+  }
+  return style;
+};
+var _tokens;
+var Typography = class {
+  constructor(tokens = defaultTokens) {
+    __privateAdd(this, _tokens);
+    __privateSet(this, _tokens, tokens);
+  }
+  // ─── Baseline Styles ────────────────────────────────────────────────────────
+  /** Display Large text style (`57px`, weight `400`). */
+  get displayLarge() {
+    return __privateGet(this, _tokens).DisplayLarge;
+  }
+  /** Display Medium text style (`45px`, weight `400`). */
+  get displayMedium() {
+    return __privateGet(this, _tokens).DisplayMedium;
+  }
+  /** Display Small text style (`36px`, weight `400`). */
+  get displaySmall() {
+    return __privateGet(this, _tokens).DisplaySmall;
+  }
+  /** Headline Large text style (`32px`, weight `400`). */
+  get headlineLarge() {
+    return __privateGet(this, _tokens).HeadlineLarge;
+  }
+  /** Headline Medium text style (`28px`, weight `400`). */
+  get headlineMedium() {
+    return __privateGet(this, _tokens).HeadlineMedium;
+  }
+  /** Headline Small text style (`24px`, weight `400`). */
+  get headlineSmall() {
+    return __privateGet(this, _tokens).HeadlineSmall;
+  }
+  /** Title Large text style (`22px`, weight `400`). */
+  get titleLarge() {
+    return __privateGet(this, _tokens).TitleLarge;
+  }
+  /** Title Medium text style (`16px`, weight `500`). */
+  get titleMedium() {
+    return __privateGet(this, _tokens).TitleMedium;
+  }
+  /** Title Small text style (`14px`, weight `500`). */
+  get titleSmall() {
+    return __privateGet(this, _tokens).TitleSmall;
+  }
+  /** Body Large text style (`16px`, weight `400`). */
+  get bodyLarge() {
+    return __privateGet(this, _tokens).BodyLarge;
+  }
+  /** Body Medium text style (`14px`, weight `400`). */
+  get bodyMedium() {
+    return __privateGet(this, _tokens).BodyMedium;
+  }
+  /** Body Small text style (`12px`, weight `400`). */
+  get bodySmall() {
+    return __privateGet(this, _tokens).BodySmall;
+  }
+  /** Label Large text style (`14px`, weight `500`). */
+  get labelLarge() {
+    return __privateGet(this, _tokens).LabelLarge;
+  }
+  /** Label Medium text style (`12px`, weight `500`). */
+  get labelMedium() {
+    return __privateGet(this, _tokens).LabelMedium;
+  }
+  /** Label Small text style (`11px`, weight `500`). */
+  get labelSmall() {
+    return __privateGet(this, _tokens).LabelSmall;
+  }
+  // ─── Emphasized Styles (MD3 Expressive) ─────────────────────────────────────
+  /** Display Large Emphasized text style (`57px`, weight `800`). */
+  get displayLargeEmphasized() {
+    return __privateGet(this, _tokens).DisplayLargeEmphasized;
+  }
+  /** Display Medium Emphasized text style (`45px`, weight `800`). */
+  get displayMediumEmphasized() {
+    return __privateGet(this, _tokens).DisplayMediumEmphasized;
+  }
+  /** Display Small Emphasized text style (`36px`, weight `800`). */
+  get displaySmallEmphasized() {
+    return __privateGet(this, _tokens).DisplaySmallEmphasized;
+  }
+  /** Headline Large Emphasized text style (`32px`, weight `800`). */
+  get headlineLargeEmphasized() {
+    return __privateGet(this, _tokens).HeadlineLargeEmphasized;
+  }
+  /** Headline Medium Emphasized text style (`28px`, weight `800`). */
+  get headlineMediumEmphasized() {
+    return __privateGet(this, _tokens).HeadlineMediumEmphasized;
+  }
+  /** Headline Small Emphasized text style (`24px`, weight `800`). */
+  get headlineSmallEmphasized() {
+    return __privateGet(this, _tokens).HeadlineSmallEmphasized;
+  }
+  /** Title Large Emphasized text style (`22px`, weight `700`). */
+  get titleLargeEmphasized() {
+    return __privateGet(this, _tokens).TitleLargeEmphasized;
+  }
+  /** Title Medium Emphasized text style (`16px`, weight `700`). */
+  get titleMediumEmphasized() {
+    return __privateGet(this, _tokens).TitleMediumEmphasized;
+  }
+  /** Title Small Emphasized text style (`14px`, weight `700`). */
+  get titleSmallEmphasized() {
+    return __privateGet(this, _tokens).TitleSmallEmphasized;
+  }
+  /** Body Large Emphasized text style (`16px`, weight `700`). */
+  get bodyLargeEmphasized() {
+    return __privateGet(this, _tokens).BodyLargeEmphasized;
+  }
+  /** Body Medium Emphasized text style (`14px`, weight `700`). */
+  get bodyMediumEmphasized() {
+    return __privateGet(this, _tokens).BodyMediumEmphasized;
+  }
+  /** Body Small Emphasized text style (`12px`, weight `700`). */
+  get bodySmallEmphasized() {
+    return __privateGet(this, _tokens).BodySmallEmphasized;
+  }
+  /** Label Large Emphasized text style (`14px`, weight `800`). */
+  get labelLargeEmphasized() {
+    return __privateGet(this, _tokens).LabelLargeEmphasized;
+  }
+  /** Label Medium Emphasized text style (`12px`, weight `800`). */
+  get labelMediumEmphasized() {
+    return __privateGet(this, _tokens).LabelMediumEmphasized;
+  }
+  /** Label Small Emphasized text style (`11px`, weight `800`). */
+  get labelSmallEmphasized() {
+    return __privateGet(this, _tokens).LabelSmallEmphasized;
+  }
+  // ─── Methods ─────────────────────────────────────────────────────────────────
+  /**
+   * Returns the `TextStyle` corresponding to the given {@link TypographyKeyTokens}.
+   *
+   * Port of `internal fun Typography.fromToken(value: TypographyKeyTokens): TextStyle`.
+   *
+   * @example
+   * ```ts
+   * const style = typography.fromToken(TypographyKeyTokens.BodyLarge);
+   * ```
+   */
+  fromToken(value) {
+    return this[TOKEN_TO_PROP[value]];
+  }
+  /**
+   * Creates a new `Typography` instance with the specified property overrides
+   * merged on top of the current instance's styles.
+   *
+   * Port of Compose's `fun Typography.copy(...)`.
+   *
+   * Unlike a shallow `Object.assign`, this method preserves the lazy-getter
+   * architecture — overridden styles are stored separately and looked up first
+   * on each property access, while non-overridden styles continue to be
+   * resolved from the underlying {@link TypographyTokens}.
+   *
+   * @param overrides - Map of camelCase property names to partial `TextStyle` overrides.
+   * @returns A new `Typography` instance. The original is never mutated.
+   *
+   * @example
+   * ```ts
+   * const custom = typography.copy({ bodyLarge: { fontSize: "2rem" } });
+   * custom.bodyLarge.fontSize; // "2rem"
+   * custom.bodySmall.fontSize; // original token value — untouched
+   * ```
+   */
+  copy(overrides) {
+    return new OverriddenTypography(__privateGet(this, _tokens), this, overrides);
+  }
+};
+_tokens = new WeakMap();
+var _base, _overrides, _OverriddenTypography_instances, resolve_fn;
+var OverriddenTypography = class extends Typography {
+  constructor(tokens, base, overrides) {
+    super(tokens);
+    __privateAdd(this, _OverriddenTypography_instances);
+    __privateAdd(this, _base);
+    __privateAdd(this, _overrides);
+    __privateSet(this, _base, base);
+    __privateSet(this, _overrides, overrides);
+  }
+  // ─── Baseline
+  get displayLarge() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displayLarge");
+  }
+  get displayMedium() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displayMedium");
+  }
+  get displaySmall() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displaySmall");
+  }
+  get headlineLarge() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineLarge");
+  }
+  get headlineMedium() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineMedium");
+  }
+  get headlineSmall() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineSmall");
+  }
+  get titleLarge() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleLarge");
+  }
+  get titleMedium() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleMedium");
+  }
+  get titleSmall() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleSmall");
+  }
+  get bodyLarge() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodyLarge");
+  }
+  get bodyMedium() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodyMedium");
+  }
+  get bodySmall() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodySmall");
+  }
+  get labelLarge() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelLarge");
+  }
+  get labelMedium() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelMedium");
+  }
+  get labelSmall() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelSmall");
+  }
+  // ─── Emphasized
+  get displayLargeEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displayLargeEmphasized");
+  }
+  get displayMediumEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displayMediumEmphasized");
+  }
+  get displaySmallEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "displaySmallEmphasized");
+  }
+  get headlineLargeEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineLargeEmphasized");
+  }
+  get headlineMediumEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineMediumEmphasized");
+  }
+  get headlineSmallEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "headlineSmallEmphasized");
+  }
+  get titleLargeEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleLargeEmphasized");
+  }
+  get titleMediumEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleMediumEmphasized");
+  }
+  get titleSmallEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "titleSmallEmphasized");
+  }
+  get bodyLargeEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodyLargeEmphasized");
+  }
+  get bodyMediumEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodyMediumEmphasized");
+  }
+  get bodySmallEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "bodySmallEmphasized");
+  }
+  get labelLargeEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelLargeEmphasized");
+  }
+  get labelMediumEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelMediumEmphasized");
+  }
+  get labelSmallEmphasized() {
+    return __privateMethod(this, _OverriddenTypography_instances, resolve_fn).call(this, "labelSmallEmphasized");
+  }
+};
+_base = new WeakMap();
+_overrides = new WeakMap();
+_OverriddenTypography_instances = new WeakSet();
+resolve_fn = function(key) {
+  const override = __privateGet(this, _overrides)[key];
+  const base = __privateGet(this, _base)[key];
+  return override ? __spreadValues(__spreadValues({}, base), override) : base;
+};
+var TOKEN_TO_PROP = {
+  ["DisplayLarge" /* DisplayLarge */]: "displayLarge",
+  ["DisplayMedium" /* DisplayMedium */]: "displayMedium",
+  ["DisplaySmall" /* DisplaySmall */]: "displaySmall",
+  ["HeadlineLarge" /* HeadlineLarge */]: "headlineLarge",
+  ["HeadlineMedium" /* HeadlineMedium */]: "headlineMedium",
+  ["HeadlineSmall" /* HeadlineSmall */]: "headlineSmall",
+  ["TitleLarge" /* TitleLarge */]: "titleLarge",
+  ["TitleMedium" /* TitleMedium */]: "titleMedium",
+  ["TitleSmall" /* TitleSmall */]: "titleSmall",
+  ["BodyLarge" /* BodyLarge */]: "bodyLarge",
+  ["BodyMedium" /* BodyMedium */]: "bodyMedium",
+  ["BodySmall" /* BodySmall */]: "bodySmall",
+  ["LabelLarge" /* LabelLarge */]: "labelLarge",
+  ["LabelMedium" /* LabelMedium */]: "labelMedium",
+  ["LabelSmall" /* LabelSmall */]: "labelSmall",
+  ["DisplayLargeEmphasized" /* DisplayLargeEmphasized */]: "displayLargeEmphasized",
+  ["DisplayMediumEmphasized" /* DisplayMediumEmphasized */]: "displayMediumEmphasized",
+  ["DisplaySmallEmphasized" /* DisplaySmallEmphasized */]: "displaySmallEmphasized",
+  ["HeadlineLargeEmphasized" /* HeadlineLargeEmphasized */]: "headlineLargeEmphasized",
+  ["HeadlineMediumEmphasized" /* HeadlineMediumEmphasized */]: "headlineMediumEmphasized",
+  ["HeadlineSmallEmphasized" /* HeadlineSmallEmphasized */]: "headlineSmallEmphasized",
+  ["TitleLargeEmphasized" /* TitleLargeEmphasized */]: "titleLargeEmphasized",
+  ["TitleMediumEmphasized" /* TitleMediumEmphasized */]: "titleMediumEmphasized",
+  ["TitleSmallEmphasized" /* TitleSmallEmphasized */]: "titleSmallEmphasized",
+  ["BodyLargeEmphasized" /* BodyLargeEmphasized */]: "bodyLargeEmphasized",
+  ["BodyMediumEmphasized" /* BodyMediumEmphasized */]: "bodyMediumEmphasized",
+  ["BodySmallEmphasized" /* BodySmallEmphasized */]: "bodySmallEmphasized",
+  ["LabelLargeEmphasized" /* LabelLargeEmphasized */]: "labelLargeEmphasized",
+  ["LabelMediumEmphasized" /* LabelMediumEmphasized */]: "labelMediumEmphasized",
+  ["LabelSmallEmphasized" /* LabelSmallEmphasized */]: "labelSmallEmphasized"
+};
+var defaultTokens = new TypographyTokens();
+var defaultTypography = new Typography();
+var TypographyContext = createContext(defaultTypography);
+var ThemeContext = createContext(void 0);
+var STORAGE_KEY_COLOR = "md3-source-color";
+var STORAGE_KEY_MODE = "md3-theme-mode";
+var defaultTokens2 = new TypographyTokens();
+var defaultTypography2 = new Typography(defaultTokens2);
+function MD3ThemeProvider({
+  children,
+  sourceColor: initialSourceColor = "#6750A4",
+  defaultMode = "light",
+  persistToLocalStorage = false,
+  typography: typographyProp,
+  fontFamily,
+  fontVariationAxes,
+  enableSnackbar = false
+}) {
+  const [sourceColor, setSourceColor] = useState(initialSourceColor);
+  const [mode, setMode] = useState(defaultMode);
+  const [isHydrated, setIsHydrated] = useState(!persistToLocalStorage);
+  useEffect(() => {
+    if (!persistToLocalStorage) return;
+    const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
+    const savedMode = localStorage.getItem(
+      STORAGE_KEY_MODE
+    );
+    if (savedColor) setSourceColor(savedColor);
+    if (savedMode === "light" || savedMode === "dark" || savedMode === "system")
+      setMode(savedMode);
+    setIsHydrated(true);
+  }, [persistToLocalStorage]);
+  useEffect(() => {
+    if (!isHydrated) return;
+    applyTheme(sourceColor, mode);
+    if (persistToLocalStorage) {
+      localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
+      localStorage.setItem(STORAGE_KEY_MODE, mode);
+    }
+  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
+  useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyTheme(sourceColor, "system");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, sourceColor]);
+  const effectiveMode = resolveMode(mode);
+  const themeValue = useMemo(
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
+  );
+  const typographyValue = useMemo(() => {
+    if (typographyProp) return typographyProp;
+    if (fontFamily != null ? fontFamily : fontVariationAxes) {
+      return new Typography(
+        new TypographyTokens({ fontFamily, fontVariationAxes })
+      );
+    }
+    return defaultTypography2;
+  }, [typographyProp, fontFamily, fontVariationAxes]);
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeValue, children: /* @__PURE__ */ jsx(TypographyContext.Provider, { value: typographyValue, children: enableSnackbar ? /* @__PURE__ */ jsx(SnackbarMountedProvider, { children }) : children }) }) });
+}
+function SnackbarMountedProvider({ children }) {
+  const state = useSnackbarState();
+  const contextValue = useMemo(
+    () => ({ showSnackbar: state.showSnackbar }),
+    [state.showSnackbar]
+  );
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(SnackbarHost, { state })
+  ] });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within <MD3ThemeProvider>.");
+  }
+  return context;
+}
+function useThemeMode() {
+  const { mode, setMode, effectiveMode } = useTheme();
+  return { mode, setMode, effectiveMode };
+}
+
+export { Icon, MD3ThemeProvider, MaterialSymbolsPreconnect, Ripple, applyTheme, cn, generateM3Theme, resolveMode, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useTheme, useThemeMode };
+//# sourceMappingURL=core.mjs.map
+//# sourceMappingURL=core.mjs.map