@bug-on/m3-expressive 1.0.0

package/dist/buttons.mjs

@@ -0,0 +1,4227 @@
+"use client";
+import { Slot } from '@radix-ui/react-slot';
+import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion, useSpring, useTransform } from 'motion/react';
+import * as React11 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cornerRadius } from '@bug-on/m3-tokens';
+import { cva } from 'class-variance-authority';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SHAPE_KEY_TIMES = "0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1";
+var SHAPE_KEY_SPLINES = [
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8"
+].join("; ");
+var SHAPE_VALUES = [
+  "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z",
+  "M20.3 8.6 21.1 8 22 7.6 23 7.3 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.2 15.5 37.6 16.5 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8 17.6 9.8 18.6 9.6 19.5 9.2Z",
+  "M18.6 9.6 19.5 9.2 20.3 8.6 21.1 8 22 7.6 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.6 16.4 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8Z",
+  "M18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.2 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 33.7 13.1 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.5 30.5 39.5 30 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7.1 21.7 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8 15.4 12.3 16.2 11.7 17 11.1 17.8 10.5Z",
+  "M15.4 12.3 16.2 11.7 17 11.1 17.8 10.5 18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.3 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.4 30.5 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8Z",
+  "M17 12.8 17.7 12.1 18.5 11.5 19.3 10.9 20.1 10.5 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 25 9 26 9 27 9 27.6 9.1 28 9.1 28.9 9.3 29.9 9.6 30.9 9.9 31.8 10.3 32.6 10.8 33.5 11.3 34.3 11.9 34.6 12.2 35 12.6 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.6 18.5 38.6 18.7 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.3 38.2 26.4 37.8 27.3 37.4 28.2 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.8 32.5 33.5 32.8 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.2 37.3 27.9 37.5 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 22.5 39 21.5 39 20.5 38.9 20.4 38.9 19.5 38.8 18.6 38.6 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.4 35.8 13.3 35.8 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.6 30 9.4 29.3 9.3 29 9.1 28 9 27 9 26 9 25 9.2 24 9.4 23 9.6 22.1 9.8 21.7 10 21.1 10.4 20.2 10.9 19.4 11.4 18.5 12.1 17.8 12.7 17 13.4 16.3 14.2 15.6 14.2 15.5 14.9 14.9 15.6 14.2 16.3 13.5Z",
+  "M33.5 11.3 34.3 11.9 35 12.6 35.3 12.8 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.3 17.7 38.6 18.5 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.4 37.8 27.3 37.4 28.2 36.9 28.9 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.5 32.8 33.1 33.2 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.7 37 28.2 37.3 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 23.3 38.9 22.5 39 21.5 39 20.5 38.9 19.5 38.8 18.6 38.6 17.6 38.3 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.3 35.8 12.7 35.2 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.7 30.3 9.6 29.9 9.3 29 9.1 28 9 27 9 26 9 25 9.1 24.5 9.2 24 9.4 23 9.6 22.1 10 21.1 10.4 20.2 10.9 19.4 11.1 19.1 11.5 18.5 12.1 17.7 12.7 17 13.5 16.3 14.2 15.6 14.9 14.9 14.9 14.8 15.6 14.2 16.3 13.5 17 12.8 17.7 12.1 18.5 11.5 19.3 11 19.3 10.9 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 24.7 9.1 25 9 26 9 27 9 28 9.1 28.9 9.3 29.9 9.6 30.4 9.7 30.9 9.9 31.8 10.3 32.6 10.8Z",
+  "M33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.8 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.6 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7 27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1Z",
+  "M27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1 33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.9 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.5 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7Z",
+  "M27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 34.8 11.3 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.9 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.4 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35 36 35.7 35.3 36.4 34.4 37 34.1 37.2 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.6 10 30.1 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10 16.6 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 20.9 11 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11Z",
+  "M36 35.7 35.3 36.4 34.4 37 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.2 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11 27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.8 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35Z",
+  "M32.1 32.1 31.4 32.8 30.7 33.5 29.9 34.1 29.1 34.7 28.3 35.3 27.6 35.8 27.5 35.8 26.6 36.4 25.8 36.8 24.9 37.3 24 37.7 23.1 38 22.1 38.3 21.2 38.6 20.2 38.8 19.2 38.9 18.2 39 17.2 39 16.6 38.9 16.3 38.9 15.3 38.7 14.3 38.4 13.4 38 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10 34.6 9.6 33.7 9.3 32.7 9.1 31.7 9.1 31.4 9 30.8 9 29.8 9.1 28.8 9.2 27.8 9.4 26.8 9.7 25.9 10 24.9 10.3 24 10.7 23.1 11.2 22.2 11.6 21.4 12.2 20.5 12.2 20.4 12.7 19.7 13.3 18.9 13.9 18.1 14.5 17.3 15.2 16.6 15.9 15.9 16.6 15.2 17.3 14.5 18.1 13.9 18.9 13.3 19.7 12.7 20.4 12.2 20.5 12.2 21.4 11.6 22.2 11.2 23.1 10.7 24 10.3 24.9 10 25.9 9.7 26.8 9.4 27.8 9.2 28.8 9.1 29.8 9 30.8 9 31.4 9.1 31.7 9.1 32.7 9.3 33.7 9.6 34.6 10 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 38 13.4 38.4 14.3 38.7 15.3 38.9 16.3 38.9 16.6 39 17.2 39 18.2 38.9 19.2 38.8 20.2 38.6 21.2 38.3 22.1 38 23.1 37.7 24 37.3 24.9 36.8 25.8 36.4 26.6 35.8 27.5 35.8 27.6 35.3 28.3 34.7 29.1 34.1 29.9 33.5 30.7 32.8 31.4Z",
+  "M24.3 10.2 24.9 10 25.9 9.7 26.8 9.4 27.1 9.4 27.8 9.2 28.8 9.1 29.8 9 29.9 9 30.8 9 31.7 9.1 32.7 9.3 32.8 9.3 33.7 9.6 34.6 10 35.5 10.5 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 37.5 12.5 38 13.4 38.4 14.3 38.7 15.2 38.7 15.3 38.9 16.3 39 17.2 39 18.1 39 18.2 38.9 19.2 38.8 20.2 38.6 20.9 38.6 21.2 38.3 22.1 38 23.1 37.8 23.7 37.7 24 37.3 24.9 36.8 25.8 36.5 26.4 36.4 26.6 35.8 27.5 35.3 28.3 35 28.8 34.7 29.1 34.1 29.9 33.5 30.7 33.1 31.1 32.8 31.4 32.1 32.1 31.4 32.8 31.1 33.1 30.7 33.5 29.9 34.1 29.1 34.7 28.8 35 28.3 35.3 27.5 35.8 26.6 36.4 26.4 36.5 25.8 36.8 24.9 37.3 24 37.7 23.7 37.8 23.1 38 22.1 38.3 21.2 38.6 20.9 38.6 20.2 38.8 19.2 38.9 18.2 39 18.1 39 17.2 39 16.3 38.9 15.3 38.7 15.2 38.7 14.3 38.4 13.4 38 12.5 37.5 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10.5 35.5 10 34.6 9.6 33.7 9.3 32.8 9.3 32.7 9.1 31.7 9 30.8 9 29.9 9 29.8 9.1 28.8 9.2 27.8 9.4 27.1 9.4 26.8 9.7 25.9 10 24.9 10.2 24.3 10.3 24 10.7 23.1 11.2 22.2 11.5 21.6 11.6 21.4 12.2 20.5 12.7 19.7 13 19.2 13.3 18.9 13.9 18.1 14.5 17.3 14.9 16.9 15.2 16.6 15.9 15.9 16.6 15.2 16.9 14.9 17.3 14.5 18.1 13.9 18.9 13.3 19.2 13 19.7 12.7 20.5 12.2 21.4 11.6 21.6 11.5 22.2 11.2 23.1 10.7 24 10.3Z",
+  "M22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.3 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.4 38.9 26.2 39.6 27 40.2 27.7 40.5 28.6 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.8 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.6 9.1 21.8 8.4 21 7.8 20.3 7.5 19.4 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.2 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1 20.9 10.4 21.4 9.5 21.9 8.7Z"
+].join(";");
+var ROTATE_KEY_TIMES = "0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1";
+var ROTATE_KEY_SPLINES = [
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8",
+  "0.5 0.2 0 0.8"
+].join("; ");
+var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
+var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
+var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
+var IndeterminateSvg = 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";
+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 };
+}
+
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+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 }
+};
+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 BUTTON_SHAPE_MORPH_SPRING = FAST_SPATIAL_SPRING;
+var BUTTON_RADIUS_SPRING = FAST_EFFECTS_SPRING;
+var BUTTON_SIZE_TOKENS = {
+  xs: {
+    height: "2rem",
+    // 32dp
+    leadingSpace: "1rem",
+    // 16dp
+    trailingSpace: "1rem",
+    // 16dp
+    iconSize: "1.25rem",
+    // 20dp
+    iconLabelSpace: "0.5rem",
+    // 8dp
+    outlineWidth: 1,
+    // 1dp
+    squareShapeRadius: cornerRadius.medium,
+    // 12dp
+    pressedShapeRadius: cornerRadius.small,
+    // 8dp
+    roundShapeRadius: 16
+  },
+  sm: {
+    height: "2.5rem",
+    // 40dp
+    leadingSpace: "1rem",
+    // 16dp
+    trailingSpace: "1rem",
+    // 16dp
+    iconSize: "1.25rem",
+    // 20dp
+    iconLabelSpace: "0.5rem",
+    // 8dp
+    outlineWidth: 1,
+    // 1dp
+    squareShapeRadius: cornerRadius.medium,
+    // 12dp
+    pressedShapeRadius: cornerRadius.small,
+    // 8dp
+    roundShapeRadius: 20
+  },
+  md: {
+    height: "3.5rem",
+    // 56dp
+    leadingSpace: "1.5rem",
+    // 24dp
+    trailingSpace: "1.5rem",
+    // 24dp
+    iconSize: "1.5rem",
+    // 24dp
+    iconLabelSpace: "0.5rem",
+    // 8dp
+    outlineWidth: 1,
+    // 1dp
+    squareShapeRadius: cornerRadius.large,
+    // 16dp
+    pressedShapeRadius: cornerRadius.medium,
+    // 12dp
+    roundShapeRadius: 28
+  },
+  lg: {
+    height: "6rem",
+    // 96dp
+    leadingSpace: "3rem",
+    // 48dp
+    trailingSpace: "3rem",
+    // 48dp
+    iconSize: "2rem",
+    // 32dp
+    iconLabelSpace: "0.75rem",
+    // 12dp
+    outlineWidth: 2,
+    // 2dp
+    squareShapeRadius: cornerRadius.extraLarge,
+    // 28dp
+    pressedShapeRadius: cornerRadius.large,
+    // 16dp
+    roundShapeRadius: 48
+  },
+  xl: {
+    height: "8.5rem",
+    // 136dp
+    leadingSpace: "4rem",
+    // 64dp
+    trailingSpace: "4rem",
+    // 64dp
+    iconSize: "2.5rem",
+    // 40dp
+    iconLabelSpace: "1rem",
+    // 16dp
+    outlineWidth: 3,
+    // 3dp
+    squareShapeRadius: cornerRadius.extraLarge,
+    // 28dp
+    pressedShapeRadius: cornerRadius.large,
+    // 16dp
+    roundShapeRadius: 68
+  }
+};
+var BUTTON_TYPOGRAPHY_TOKENS = {
+  xs: "text-sm font-medium tracking-wide",
+  // labelLarge
+  sm: "text-sm font-medium tracking-wide",
+  // labelLarge
+  md: "text-base font-medium",
+  // titleMedium
+  lg: "text-xl font-normal",
+  // headlineSmall
+  xl: "text-[2rem] font-normal leading-none"
+  // headlineLarge
+};
+var BUTTON_COLOR_TOKENS = {
+  elevated: {
+    default: "bg-m3-surface-container-low text-m3-primary shadow-md",
+    selected: "bg-m3-primary text-m3-on-primary shadow-md",
+    unselected: "bg-m3-surface-container-low text-m3-primary shadow-md"
+  },
+  filled: {
+    default: "bg-m3-primary text-m3-on-primary",
+    selected: "bg-m3-primary text-m3-on-primary",
+    unselected: "bg-m3-surface-container text-m3-on-surface-variant"
+  },
+  tonal: {
+    default: "bg-m3-secondary-container text-m3-on-secondary-container",
+    selected: "bg-m3-secondary text-m3-on-secondary",
+    unselected: "bg-m3-secondary-container text-m3-on-secondary-container"
+  },
+  outlined: {
+    default: "bg-transparent text-m3-on-surface-variant border-m3-outline-variant",
+    selected: "bg-m3-inverse-surface text-m3-inverse-on-surface border-transparent",
+    unselected: "bg-transparent text-m3-on-surface-variant border-m3-outline-variant"
+  },
+  text: {
+    default: "bg-transparent text-m3-primary",
+    selected: "bg-transparent text-m3-primary",
+    unselected: "bg-transparent text-m3-primary"
+  }
+};
+var MOTION_PROP_KEYS = [
+  "animate",
+  "exit",
+  "initial",
+  "transition",
+  "variants",
+  "whileHover",
+  "whileTap",
+  "whileFocus",
+  "whileDrag",
+  "whileInView",
+  "onAnimationStart",
+  "onAnimationComplete",
+  "onUpdate",
+  "onDragStart",
+  "onDragEnd",
+  "onDrag",
+  "onDirectionLock",
+  "onDragTransitionEnd",
+  "layout",
+  "layoutId",
+  "onLayoutAnimationComplete"
+];
+function springAnimate(value, to) {
+  return animate(value, to, __spreadProps(__spreadValues({}, BUTTON_RADIUS_SPRING), { type: "spring" }));
+}
+function AnimatedIconSlot({
+  iconSize,
+  children,
+  ariaHidden,
+  transition
+}) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      layout: "position",
+      initial: { width: 0, opacity: 0, scale: 0.5 },
+      animate: { width: iconSize, opacity: 1, scale: 1 },
+      exit: { width: 0, opacity: 0, scale: 0.5 },
+      transition,
+      "aria-hidden": ariaHidden ? "true" : void 0,
+      style: { height: iconSize },
+      className: cn(
+        "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden"
+      ),
+      children
+    }
+  );
+}
+var ButtonComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      variant = "default",
+      colorStyle = "filled",
+      selectedColorStyle: _selectedColorStyle,
+      size: size = "sm",
+      shape = "round",
+      selected,
+      icon,
+      iconPosition = "leading",
+      loading = false,
+      loadingVariant = "loading-indicator",
+      asChild = false,
+      outlineWidth,
+      children,
+      onClick,
+      onKeyDown,
+      "aria-label": ariaLabelProp,
+      transition: customTransition
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "variant",
+      "colorStyle",
+      "selectedColorStyle",
+      // Deprecated — destructured to strip from restProps
+      "size",
+      "shape",
+      "selected",
+      "icon",
+      "iconPosition",
+      "loading",
+      "loadingVariant",
+      "asChild",
+      "outlineWidth",
+      "children",
+      "onClick",
+      "onKeyDown",
+      "aria-label",
+      "transition"
+    ]);
+    var _a2, _b2;
+    const isToggle = variant === "toggle";
+    const isSelected = isToggle ? !!selected : false;
+    const effectiveShape = isSelected ? shape === "round" ? "square" : "round" : shape;
+    const sizeTokens = (_a2 = BUTTON_SIZE_TOKENS[size]) != null ? _a2 : BUTTON_SIZE_TOKENS.sm;
+    const animateRadius = effectiveShape === "round" ? sizeTokens.roundShapeRadius : sizeTokens.squareShapeRadius;
+    const pressedRadius = sizeTokens.pressedShapeRadius;
+    const colorState = isToggle ? isSelected ? "selected" : "unselected" : "default";
+    const colorClass = BUTTON_COLOR_TOKENS[colorStyle][colorState];
+    const typographyClass = (_b2 = BUTTON_TYPOGRAPHY_TOKENS[size]) != null ? _b2 : BUTTON_TYPOGRAPHY_TOKENS.sm;
+    const mergedStyle = __spreadValues({
+      height: sizeTokens.height,
+      paddingInlineStart: sizeTokens.leadingSpace,
+      paddingInlineEnd: sizeTokens.trailingSpace,
+      gap: sizeTokens.iconLabelSpace,
+      borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
+      borderStyle: colorStyle === "outlined" ? "solid" : void 0
+    }, style);
+    const labelText = React11.useMemo(() => {
+      if (asChild) {
+        const child = React11.Children.only(children);
+        return child.props.children;
+      }
+      return children;
+    }, [children, asChild]);
+    const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
+    const needsTouchTarget = size === "xs" || size === "sm";
+    const motionRadius = useMotionValue(animateRadius);
+    const asChildRef = React11.useRef(null);
+    const mergedRef = React11.useCallback(
+      (node) => {
+        asChildRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    React11.useEffect(() => {
+      if (!asChild) return;
+      return motionRadius.on("change", (v) => {
+        if (asChildRef.current)
+          asChildRef.current.style.borderRadius = `${v}px`;
+      });
+    }, [motionRadius, asChild]);
+    React11.useEffect(() => {
+      if (!asChild) return;
+      const controls = springAnimate(motionRadius, animateRadius);
+      return () => controls.stop();
+    }, [animateRadius, motionRadius, asChild]);
+    const { ripples, onPointerDown, removeRipple } = useRippleState({
+      disabled: loading
+    });
+    const handleClick = React11.useCallback(
+      (e) => {
+        if (loading) return e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      },
+      [loading, onClick]
+    );
+    const handleKeyDown = React11.useCallback(
+      (e) => {
+        if (loading) return;
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+        onKeyDown == null ? void 0 : onKeyDown(e);
+      },
+      [loading, onClick, onKeyDown]
+    );
+    const buttonClassName = cn(
+      "relative w-fit shrink-0 inline-flex flex-row items-center justify-center",
+      "whitespace-nowrap 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] disabled:shadow-none",
+      colorClass,
+      "overflow-hidden",
+      typographyClass,
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const sharedTransition = customTransition != null ? customTransition : {
+      borderRadius: BUTTON_RADIUS_SPRING,
+      layout: BUTTON_SHAPE_MORPH_SPRING,
+      default: SPRING_TRANSITION
+    };
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: (loading || icon && iconPosition === "leading") && /* @__PURE__ */ jsx(
+        AnimatedIconSlot,
+        {
+          iconSize: sizeTokens.iconSize,
+          ariaHidden: !loading,
+          transition: sharedTransition,
+          children: loading ? loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: parseFloat(sizeTokens.iconSize) * 16,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: parseFloat(sizeTokens.iconSize) * 16,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          ) : icon
+        }
+      ) }),
+      labelText && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          layout: "position",
+          className: "inline-flex items-center h-full gap-[inherit]",
+          transition: sharedTransition,
+          children: labelText
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: icon && iconPosition === "trailing" && /* @__PURE__ */ jsx(
+        AnimatedIconSlot,
+        {
+          iconSize: sizeTokens.iconSize,
+          ariaHidden: true,
+          transition: sharedTransition,
+          children: icon
+        }
+      ) })
+    ] });
+    const handleAsChildPointerDown = React11.useCallback(
+      (e) => {
+        springAnimate(motionRadius, pressedRadius);
+        onPointerDown == null ? void 0 : onPointerDown(e);
+      },
+      [motionRadius, pressedRadius, onPointerDown]
+    );
+    const handleAsChildPointerUp = React11.useCallback(() => {
+      springAnimate(motionRadius, animateRadius);
+    }, [motionRadius, animateRadius]);
+    const handlePointerDown = React11.useCallback(
+      (e) => {
+        onPointerDown(e);
+      },
+      [onPointerDown]
+    );
+    if (asChild) {
+      const strippedProps = __spreadValues({}, restProps);
+      for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
+      const htmlProps = strippedProps;
+      const child = React11.Children.only(children);
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref: mergedRef,
+          "aria-label": computedAriaLabel,
+          onClick: handleClick,
+          onPointerDown: handleAsChildPointerDown,
+          onPointerUp: handleAsChildPointerUp,
+          onPointerLeave: handleAsChildPointerUp,
+          onPointerCancel: handleAsChildPointerUp,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, mergedStyle), {
+            borderRadius: `${animateRadius}px`
+          }),
+          className: buttonClassName
+        }, htmlProps), {
+          children: React11.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        layout: true,
+        type: "button",
+        "aria-pressed": isToggle ? isSelected : void 0,
+        "aria-label": computedAriaLabel,
+        "aria-busy": loading ? true : void 0,
+        "aria-disabled": loading ? true : restProps.disabled,
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        style: mergedStyle,
+        animate: { borderRadius: animateRadius },
+        whileTap: { borderRadius: pressedRadius },
+        transition: sharedTransition,
+        className: buttonClassName
+      }, restProps), {
+        children: innerContent
+      })
+    ) });
+  }
+);
+ButtonComponent.displayName = "Button";
+var Button = React11.memo(ButtonComponent);
+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 BUTTON_GROUP_TOKENS = {
+  standard: {
+    betweenSpace: 12,
+    // 12dp / 0.75rem / gap-3
+    containerHeight: 40
+    // 40dp / 2.5rem
+  },
+  connected: {
+    betweenSpace: 2,
+    // 2dp / 0.125rem / gap-0.5
+    containerHeight: 40,
+    // 40dp / 2.5rem
+    containerShape: cornerRadius.full,
+    // 9999px
+    innerCorner: cornerRadius.small,
+    // 8dp
+    pressedInnerCorner: cornerRadius.extraSmall,
+    // 4dp
+    selectedCornerPercent: 50
+    // 50% -> full pill
+  }
+};
+
+// src/ui/buttons/button-group/button-group-defaults.ts
+var PILL_RADIUS_MAP = {
+  xs: 16,
+  sm: 20,
+  md: 28,
+  lg: 48,
+  xl: 68
+};
+var PRESSED_RADIUS_MAP = {
+  xs: 8,
+  sm: 10,
+  md: 16,
+  lg: 28,
+  xl: 40
+};
+var PILL_CORNERS = {
+  tl: 9999,
+  tr: 9999,
+  br: 9999,
+  bl: 9999
+};
+function buildConnectedShapes(size, defaultCorners, pressedCorners) {
+  const outer = PILL_RADIUS_MAP[size];
+  const inner = BUTTON_GROUP_TOKENS.connected.innerCorner;
+  const pressedInner = BUTTON_GROUP_TOKENS.connected.pressedInnerCorner;
+  return {
+    default: defaultCorners(outer, inner),
+    pressed: pressedCorners(outer, pressedInner),
+    checked: __spreadValues({}, PILL_CORNERS)
+  };
+}
+var ButtonGroupDefaults = {
+  expandedRatio: 0.15,
+  connectedLeadingButtonShapes: (size) => buildConnectedShapes(
+    size,
+    (o, i) => ({ tl: o, tr: i, br: i, bl: o }),
+    (o, pi) => ({ tl: o, tr: pi, br: pi, bl: o })
+  ),
+  connectedMiddleButtonShapes: (size) => buildConnectedShapes(
+    size,
+    (_o, i) => ({ tl: i, tr: i, br: i, bl: i }),
+    (_o, pi) => ({ tl: pi, tr: pi, br: pi, bl: pi })
+  ),
+  connectedTrailingButtonShapes: (size) => buildConnectedShapes(
+    size,
+    (o, i) => ({ tl: i, tr: o, br: o, bl: i }),
+    (o, pi) => ({ tl: pi, tr: o, br: o, bl: pi })
+  ),
+  /** For orientation="vertical". */
+  connectedTopButtonShapes: (size) => buildConnectedShapes(
+    size,
+    (o, i) => ({ tl: o, tr: o, br: i, bl: i }),
+    (o, pi) => ({ tl: o, tr: o, br: pi, bl: pi })
+  ),
+  connectedBottomButtonShapes: (size) => buildConnectedShapes(
+    size,
+    (o, i) => ({ tl: i, tr: i, br: o, bl: o }),
+    (o, pi) => ({ tl: pi, tr: pi, br: o, bl: o })
+  )
+};
+var PILL_BORDER_RADIUS = 9999;
+var MIN_FLEX_GROW = 0.01;
+var PADDING_EXPAND_MULTIPLIER = 4;
+var CHECK_ICON_SIZE = 24;
+var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON_GAP_MAP = {
+  xs: 6,
+  sm: 8,
+  md: 8,
+  lg: 12,
+  xl: 12
+};
+var CHECK_ICON_MOTION = {
+  type: "spring",
+  stiffness: 420,
+  damping: 34,
+  mass: 0.75
+};
+var WIDTH_MORPH_SPRING = {
+  type: "spring",
+  stiffness: 360,
+  damping: 38,
+  mass: 0.85
+};
+var NAVBAR_EXPRESSIVE_SPRING = {
+  type: "spring",
+  stiffness: 430,
+  damping: 38,
+  mass: 0.8
+};
+var AnimatedCheckLabel = React11.memo(function AnimatedCheckLabel2({
+  selected,
+  size,
+  children
+}) {
+  var _a;
+  const gap = (_a = CHECK_ICON_GAP_MAP[size]) != null ? _a : CHECK_ICON_GAP_MAP.sm;
+  return /* @__PURE__ */ jsxs(
+    m.span,
+    {
+      layout: true,
+      className: "inline-flex min-w-0 items-center justify-center whitespace-nowrap align-middle",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+          m.span,
+          {
+            "aria-hidden": "true",
+            initial: { width: 0, opacity: 0, marginRight: 0, x: -4 },
+            animate: {
+              width: CHECK_ICON_SIZE,
+              opacity: 1,
+              marginRight: gap,
+              x: 0
+            },
+            exit: { width: 0, opacity: 0, marginRight: 0, x: -4 },
+            transition: CHECK_ICON_MOTION,
+            className: "inline-flex shrink-0 items-center justify-center overflow-hidden",
+            style: { willChange: "width, opacity, transform, margin-right" },
+            children: /* @__PURE__ */ jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: CHECK_ICON })
+          },
+          "selected-check"
+        ) }),
+        /* @__PURE__ */ jsx(m.span, { layout: "position", className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+});
+var AnimatedNavbarLabel = React11.memo(function AnimatedNavbarLabel2({
+  show,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: show && /* @__PURE__ */ jsx(
+    m.span,
+    {
+      initial: { width: 0, opacity: 0, scale: 0.8 },
+      animate: { width: "auto", opacity: 1, scale: 1 },
+      exit: { width: 0, opacity: 0, scale: 0.8 },
+      transition: NAVBAR_EXPRESSIVE_SPRING,
+      className: "overflow-hidden whitespace-nowrap text-sm font-semibold tracking-[0.01em] ml-1.5",
+      children
+    },
+    "navbar-label"
+  ) });
+});
+function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize) {
+  const defaults = ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
+  if (variant !== "connected") return defaults;
+  if (orientation === "horizontal") {
+    if (isFirst && !isLast)
+      return ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
+    if (!isFirst && isLast)
+      return ButtonGroupDefaults.connectedTrailingButtonShapes(itemSize);
+    if (!isFirst && !isLast)
+      return ButtonGroupDefaults.connectedMiddleButtonShapes(itemSize);
+  } else {
+    if (isFirst && !isLast)
+      return ButtonGroupDefaults.connectedTopButtonShapes(itemSize);
+    if (!isFirst && isLast)
+      return ButtonGroupDefaults.connectedBottomButtonShapes(itemSize);
+    if (!isFirst && !isLast)
+      return ButtonGroupDefaults.connectedMiddleButtonShapes(itemSize);
+  }
+  return defaults;
+}
+function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck, iconBehavior, labelBehavior) {
+  let icon = element.props.icon;
+  let label = element.props.children;
+  const animateCheckInLabel = showCheck && iconBehavior !== "none" && iconBehavior !== "selected" && label !== void 0;
+  if (iconBehavior === "none" || animateCheckInLabel) {
+    icon = void 0;
+  } else if (iconBehavior === "selected") {
+    icon = isSelected ? element.props.icon : void 0;
+  }
+  if (labelBehavior === "none") {
+    label = void 0;
+  } else if (labelBehavior === "selected") {
+    label = isSelected ? element.props.children : void 0;
+  }
+  if (animateCheckInLabel && label !== void 0) {
+    label = /* @__PURE__ */ jsx(AnimatedCheckLabel, { selected: isSelected, size: itemSize, children: label });
+  } else if (variant === "navbar" && label !== void 0) {
+    const showLabel = !labelBehavior || labelBehavior === "all" || labelBehavior === "selected" && isSelected;
+    label = /* @__PURE__ */ jsx(AnimatedNavbarLabel, { show: showLabel, children: label });
+  }
+  return { icon, label };
+}
+function resolveFlexTargets(variant, orientation, isSelected, isPressed, hasSelected, count, fullWidth, activeMorphing, morphingWidth, expandedRatio, basePx) {
+  const increment = expandedRatio * PADDING_EXPAND_MULTIPLIER;
+  if (activeMorphing) {
+    const isFlexLayout = fullWidth || variant === "connected" && orientation === "horizontal";
+    if (isFlexLayout) {
+      if (isSelected) return { flexGrow: 1 + expandedRatio };
+      if (hasSelected && count > 1)
+        return {
+          flexGrow: Math.max(MIN_FLEX_GROW, 1 - expandedRatio / (count - 1))
+        };
+      return { flexGrow: 1 };
+    }
+    if (isSelected)
+      return { paddingInline: `calc(${basePx} + ${increment}rem)` };
+    if (hasSelected && count > 1) {
+      const decrement = increment / (count - 1);
+      return { paddingInline: `calc(${basePx} - ${decrement}rem)` };
+    }
+    return { paddingInline: basePx };
+  }
+  if (morphingWidth && variant === "standard") {
+    if (fullWidth) return { flexGrow: isPressed ? 1 + expandedRatio : 1 };
+    return {
+      paddingInline: isPressed ? `calc(${basePx} + ${increment}rem)` : basePx
+    };
+  }
+  return {};
+}
+function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex, existingAnimate, existingWhileTap) {
+  var _a, _b;
+  const props = { animate: __spreadValues({}, existingAnimate) };
+  if (variant !== "navbar") {
+    if (flex.flexGrow !== void 0) {
+      props.animate.flexGrow = flex.flexGrow;
+    }
+    if (flex.paddingInline !== void 0) {
+      props.animate.paddingInline = flex.paddingInline;
+    }
+  }
+  if (variant === "standard") {
+    const pressedRadius = (_a = PRESSED_RADIUS_MAP[itemSize]) != null ? _a : PRESSED_RADIUS_MAP.sm;
+    const itemSizeTokens = (_b = BUTTON_SIZE_TOKENS[itemSize]) != null ? _b : BUTTON_SIZE_TOKENS.sm;
+    const isSquish = isSelected || isPressed;
+    props.animate.borderRadius = isSquish ? pressedRadius : itemSizeTokens.roundShapeRadius;
+    props.whileTap = __spreadValues({
+      scale: 0.98
+    }, existingWhileTap);
+    props.transition = {
+      borderRadius: BUTTON_RADIUS_SPRING,
+      flexGrow: WIDTH_MORPH_SPRING,
+      paddingInline: WIDTH_MORPH_SPRING,
+      layout: WIDTH_MORPH_SPRING,
+      default: BUTTON_SHAPE_MORPH_SPRING
+    };
+    props.layout = true;
+  }
+  if (variant === "connected") {
+    const { tl, tr, br, bl } = isSelected ? {
+      tl: PILL_BORDER_RADIUS,
+      tr: PILL_BORDER_RADIUS,
+      br: PILL_BORDER_RADIUS,
+      bl: PILL_BORDER_RADIUS
+    } : shapes.default;
+    props.animate = __spreadProps(__spreadValues({}, props.animate), {
+      borderRadius: void 0,
+      borderTopLeftRadius: tl,
+      borderTopRightRadius: tr,
+      borderBottomRightRadius: br,
+      borderBottomLeftRadius: bl
+    });
+    props.whileTap = __spreadValues({
+      borderRadius: void 0,
+      borderTopLeftRadius: shapes.pressed.tl,
+      borderTopRightRadius: shapes.pressed.tr,
+      borderBottomRightRadius: shapes.pressed.br,
+      borderBottomLeftRadius: shapes.pressed.bl
+    }, existingWhileTap);
+    props.transition = __spreadProps(__spreadValues({}, BUTTON_SHAPE_MORPH_SPRING), {
+      flexGrow: WIDTH_MORPH_SPRING,
+      paddingInline: WIDTH_MORPH_SPRING,
+      borderTopLeftRadius: BUTTON_RADIUS_SPRING,
+      borderTopRightRadius: BUTTON_RADIUS_SPRING,
+      borderBottomRightRadius: BUTTON_RADIUS_SPRING,
+      borderBottomLeftRadius: BUTTON_RADIUS_SPRING,
+      layout: WIDTH_MORPH_SPRING
+    });
+    props.layout = true;
+  }
+  if (variant === "navbar") {
+    props.layout = true;
+    props.transition = {
+      layout: WIDTH_MORPH_SPRING,
+      default: BUTTON_SHAPE_MORPH_SPRING
+    };
+  }
+  return props;
+}
+var ButtonGroupComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant = "standard",
+      orientation = "horizontal",
+      fullWidth = false,
+      size,
+      morphingWidth = true,
+      activeMorphing = false,
+      itemClassName,
+      expandedRatio = ButtonGroupDefaults.expandedRatio,
+      showCheck = false,
+      children,
+      iconBehavior,
+      labelBehavior,
+      style
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "orientation",
+      "fullWidth",
+      "size",
+      "morphingWidth",
+      "activeMorphing",
+      "itemClassName",
+      "expandedRatio",
+      "showCheck",
+      "children",
+      "iconBehavior",
+      "labelBehavior",
+      "style"
+    ]);
+    const [pressedIndex, setPressedIndex] = React11.useState(null);
+    const [lockedGroupSize, setLockedGroupSize] = React11.useState(
+      null
+    );
+    const layoutIdGroup = React11.useId();
+    const rootRef = React11.useRef(null);
+    const setRootRef = React11.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const childrenArray = React11.useMemo(
+      () => React11.Children.toArray(children).filter(React11.isValidElement),
+      [children]
+    );
+    const count = childrenArray.length;
+    const groupSizeSignature = React11.useMemo(
+      () => `${childrenArray.map((child, index) => {
+        var _a2, _b2, _c, _d, _e;
+        const element = child;
+        const label = typeof element.props.children === "string" || typeof element.props.children === "number" ? element.props.children : (_a2 = element.key) != null ? _a2 : index;
+        return [
+          (_b2 = element.key) != null ? _b2 : index,
+          (_d = (_c = element.props.size) != null ? _c : size) != null ? _d : "",
+          label,
+          Boolean(element.props.icon),
+          (_e = element.props.className) != null ? _e : ""
+        ].join(":");
+      }).join("|")}|${variant}|${orientation}|${showCheck}`,
+      [childrenArray, orientation, showCheck, size, variant]
+    );
+    const groupSizeSignatureRef = React11.useRef(groupSizeSignature);
+    React11.useLayoutEffect(() => {
+      if (groupSizeSignatureRef.current !== groupSizeSignature) {
+        groupSizeSignatureRef.current = groupSizeSignature;
+        setLockedGroupSize(null);
+      }
+    }, [groupSizeSignature]);
+    const hasExplicitGroupSize = orientation === "horizontal" ? (style == null ? void 0 : style.width) !== void 0 || (style == null ? void 0 : style.inlineSize) !== void 0 : (style == null ? void 0 : style.height) !== void 0 || (style == null ? void 0 : style.blockSize) !== void 0;
+    const shouldLockGroupSize = activeMorphing && !fullWidth && !hasExplicitGroupSize && count > 1;
+    React11.useLayoutEffect(() => {
+      if (!shouldLockGroupSize) {
+        if (lockedGroupSize !== null) setLockedGroupSize(null);
+        return;
+      }
+      if (lockedGroupSize !== null) return;
+      const node = rootRef.current;
+      if (!node) return;
+      const rect = node.getBoundingClientRect();
+      const nextSize = orientation === "horizontal" ? rect.width : rect.height;
+      if (nextSize > 0) {
+        setLockedGroupSize(Math.ceil(nextSize * 100) / 100);
+      }
+    }, [lockedGroupSize, orientation, shouldLockGroupSize]);
+    const groupStyle = React11.useMemo(() => {
+      const nextStyle = __spreadValues({}, style);
+      if (shouldLockGroupSize && lockedGroupSize !== null) {
+        if (orientation === "horizontal") {
+          nextStyle.inlineSize = `${lockedGroupSize}px`;
+        } else {
+          nextStyle.blockSize = `${lockedGroupSize}px`;
+        }
+      }
+      return nextStyle;
+    }, [lockedGroupSize, orientation, shouldLockGroupSize, style]);
+    const hasSelected = React11.useMemo(
+      () => childrenArray.some(
+        (child) => child.props.selected
+      ),
+      [childrenArray]
+    );
+    const handlePointerLeaveAndUp = React11.useCallback(() => {
+      setPressedIndex(null);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      "fieldset",
+      __spreadProps(__spreadValues({
+        ref: setRootRef,
+        className: cn(
+          "inline-flex p-0 m-0 border-none max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          orientation === "vertical" ? "flex-col items-stretch overflow-y-auto overflow-x-hidden" : "flex-row overflow-x-auto overflow-y-hidden",
+          variant === "standard" ? "gap-3" : variant === "navbar" ? "gap-1.5 h-full" : "gap-0.5",
+          fullWidth && "w-full",
+          fullWidth && orientation === "vertical" && "h-full",
+          className
+        ),
+        style: groupStyle,
+        onPointerLeave: handlePointerLeaveAndUp,
+        onPointerUp: handlePointerLeaveAndUp
+      }, props), {
+        children: childrenArray.map((child, index) => {
+          var _a2, _b2, _c;
+          const element = child;
+          const isSelected = element.props.selected === true;
+          const isFirst = index === 0;
+          const isLast = index === count - 1;
+          const itemSize = size || element.props.size || "sm";
+          const basePx = ((_a2 = BUTTON_SIZE_TOKENS[itemSize]) == null ? void 0 : _a2.leadingSpace) || "1rem";
+          const isPressed = pressedIndex === index;
+          const { icon: explicitIcon, label: explicitLabel } = resolveIconAndLabel(
+            element,
+            isSelected,
+            itemSize,
+            variant,
+            showCheck,
+            iconBehavior,
+            labelBehavior
+          );
+          const shapes = resolveConnectedShapes(
+            variant,
+            orientation,
+            isFirst,
+            isLast,
+            itemSize
+          );
+          const flex = resolveFlexTargets(
+            variant,
+            orientation,
+            isSelected,
+            isPressed,
+            hasSelected,
+            count,
+            fullWidth,
+            activeMorphing,
+            morphingWidth,
+            expandedRatio,
+            basePx
+          );
+          const dynamicStyle = __spreadValues({}, element.props.style);
+          if (variant !== "navbar" && flex.flexGrow !== void 0 && fullWidth) {
+            dynamicStyle.flexBasis = 0;
+            dynamicStyle.flexShrink = 1;
+            dynamicStyle.minWidth = 0;
+          }
+          const existingAnimate = typeof element.props.animate === "object" && !Array.isArray(element.props.animate) ? element.props.animate : {};
+          const existingWhileTap = typeof element.props.whileTap === "object" && !Array.isArray(element.props.whileTap) ? element.props.whileTap : {};
+          const motionProps = buildMotionProps(
+            variant,
+            isSelected,
+            isPressed,
+            itemSize,
+            shapes,
+            flex,
+            existingAnimate,
+            existingWhileTap
+          );
+          const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
+          const navbarFlexStyle = flex.flexGrow !== void 0 ? {
+            flexBasis: fullWidth && labelBehavior !== "selected" ? 0 : "auto",
+            flexShrink: fullWidth ? 1 : 0,
+            flexGrow: flex.flexGrow,
+            minWidth: labelBehavior !== "selected" ? 0 : "fit-content"
+          } : {};
+          const clonedElement = React11.cloneElement(element, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
+            key: (_b2 = element.key) != null ? _b2 : index,
+            tabIndex: isFirst ? 0 : -1,
+            size: size || element.props.size,
+            icon: explicitIcon,
+            children: explicitLabel
+          }, variant === "connected" && {
+            colorStyle: element.props.colorStyle || "tonal",
+            selectedColorStyle: element.props.selectedColorStyle || "filled"
+          }), variant === "navbar" && {
+            colorStyle: "text",
+            selectedColorStyle: "text",
+            className: cn(
+              element.props.className,
+              "w-full! h-full! px-3! min-w-0! relative z-20 flex items-center justify-center",
+              isSelected ? "text-m3-on-secondary-container! hover:bg-transparent! active:bg-transparent!" : "text-m3-on-surface-variant! hover:bg-transparent! active:bg-transparent!",
+              itemClassName
+            )
+          }), variant !== "navbar" && {
+            className: cn(
+              element.props.className,
+              connectedClasses,
+              "focus-visible:z-10 hover:z-10 relative min-w-0",
+              orientation === "vertical" && "w-full",
+              itemClassName
+            )
+          }), {
+            style: variant === "navbar" ? __spreadProps(__spreadValues({}, dynamicStyle), { minWidth: 0 }) : dynamicStyle,
+            onPointerDown: (e) => {
+              setPressedIndex(index);
+              if (element.props.onPointerDown) element.props.onPointerDown(e);
+            }
+          }), motionProps));
+          if (variant === "navbar") {
+            return /* @__PURE__ */ jsxs(
+              m.div,
+              {
+                layout: true,
+                whileTap: { scale: 0.96 },
+                transition: NAVBAR_EXPRESSIVE_SPRING,
+                className: "group relative h-full flex items-center justify-center min-w-0",
+                style: navbarFlexStyle,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "absolute inset-x-1 inset-y-0 m-auto flex items-center justify-center pointer-events-none",
+                      style: { zIndex: 1 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "w-full h-[40px] bg-m3-on-surface-variant/8 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+                            style: { borderRadius: PILL_BORDER_RADIUS }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(AnimatePresence, { children: isSelected && /* @__PURE__ */ jsx(
+                          m.div,
+                          {
+                            layoutId: `navbar-active-indicator-${layoutIdGroup}`,
+                            className: "absolute inset-0 m-auto w-full h-[40px] bg-m3-secondary-container",
+                            style: { borderRadius: PILL_BORDER_RADIUS },
+                            transition: NAVBAR_EXPRESSIVE_SPRING
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  clonedElement
+                ]
+              },
+              (_c = element.key) != null ? _c : index
+            );
+          }
+          return clonedElement;
+        })
+      })
+    );
+  }
+);
+ButtonGroupComponent.displayName = "ButtonGroup";
+var ButtonGroup = React11.memo(ButtonGroupComponent);
+var SIZE_HEIGHT = {
+  sm: "h-14",
+  md: "h-20",
+  lg: "h-24"
+};
+var SIZE_WIDTH_COLLAPSED = {
+  sm: "w-14",
+  md: "w-20",
+  lg: "w-24"
+};
+var SIZE_PADDING = {
+  sm: "px-4",
+  md: "px-[26px]",
+  lg: "px-7"
+};
+var SIZE_GAP = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+var SIZE_ICON = {
+  sm: { cls: "size-6", px: 24 },
+  md: { cls: "size-7", px: 28 },
+  lg: { cls: "size-9", px: 36 }
+};
+var SIZE_TEXT = {
+  sm: "text-base font-medium",
+  md: "text-lg font-medium",
+  lg: "text-xl font-normal"
+};
+var MORPH_RADIUS = {
+  sm: { default: 16, pressed: 10 },
+  md: { default: 20, pressed: 14 },
+  lg: { default: 28, pressed: 18 }
+};
+var COLOR_CLASSES = {
+  primary: {
+    bg: "bg-m3-primary-container",
+    text: "text-m3-on-primary-container"
+  },
+  secondary: {
+    bg: "bg-m3-secondary-container",
+    text: "text-m3-on-secondary-container"
+  },
+  tertiary: {
+    bg: "bg-m3-tertiary-container",
+    text: "text-m3-on-tertiary-container"
+  },
+  surface: {
+    bg: "bg-m3-surface-container-high",
+    text: "text-m3-on-surface"
+  }
+};
+function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
+  const [collapsed, setCollapsed] = React11.useState(false);
+  const lastScrollY = React11.useRef(0);
+  React11.useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    lastScrollY.current = window.scrollY;
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const diff = currentScrollY - lastScrollY.current;
+      if (Math.abs(diff) < scrollThreshold) return;
+      if (diff > 0 && !collapsed) {
+        setCollapsed(true);
+        onCollapsedChange == null ? void 0 : onCollapsedChange(true);
+      } else if (diff < 0 && collapsed) {
+        setCollapsed(false);
+        onCollapsedChange == null ? void 0 : onCollapsedChange(false);
+      }
+      lastScrollY.current = currentScrollY;
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
+  return collapsed;
+}
+var ExtendedFABComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      label,
+      icon,
+      size = "sm",
+      colorStyle = "primary",
+      lowered = false,
+      loading = false,
+      loadingVariant = "loading-indicator",
+      visible = true,
+      collapseOnScroll = false,
+      scrollThreshold = 50,
+      collapsed,
+      onCollapsedChange,
+      onClick,
+      onKeyDown,
+      layoutId,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "label",
+      "icon",
+      "size",
+      "colorStyle",
+      "lowered",
+      "loading",
+      "loadingVariant",
+      "visible",
+      "collapseOnScroll",
+      "scrollThreshold",
+      "collapsed",
+      "onCollapsedChange",
+      "onClick",
+      "onKeyDown",
+      "layoutId",
+      "aria-label"
+    ]);
+    var _a2, _b2, _c, _d;
+    const localRef = React11.useRef(null);
+    React11.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React11.useState("ltr");
+    React11.useEffect(() => {
+      var _a3;
+      if (!localRef.current) return;
+      const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
+      if (closestDir === "rtl" || closestDir === "ltr") {
+        setDir(closestDir);
+      }
+    }, []);
+    const internalCollapsed = useScrollCollapse(
+      collapseOnScroll,
+      scrollThreshold,
+      onCollapsedChange
+    );
+    const isCollapsed = collapsed !== void 0 ? collapsed : internalCollapsed;
+    const hasIcon = !!icon || loading;
+    const colors = (_a2 = COLOR_CLASSES[colorStyle]) != null ? _a2 : COLOR_CLASSES.primary;
+    const radiusConfig = (_b2 = MORPH_RADIUS[size]) != null ? _b2 : MORPH_RADIUS.sm;
+    const sizeIcon = (_c = SIZE_ICON[size]) != null ? _c : SIZE_ICON.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__ */ jsx(AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref: localRef,
+        type: "button",
+        layout: true,
+        layoutId,
+        "aria-label": ariaLabel || label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style,
+        initial: {
+          scale: 0.6,
+          opacity: 0,
+          borderRadius: radiusConfig.default
+        },
+        animate: {
+          scale: 1,
+          opacity: 1,
+          borderRadius: radiusConfig.default
+        },
+        exit: { scale: 0.6, opacity: 0 },
+        whileTap: { borderRadius: radiusConfig.pressed },
+        transition: {
+          borderRadius: { type: "spring", stiffness: 500, damping: 30 },
+          scale: SPRING_TRANSITION,
+          opacity: { duration: 0.2, ease: "linear" },
+          layout: SPRING_TRANSITION
+        },
+        className: cn(
+          "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
+          "transition-[box-shadow,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] disabled:shadow-none",
+          colors.bg,
+          colors.text,
+          lowered ? "shadow-sm" : "shadow-md",
+          (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
+          SIZE_TEXT[size],
+          isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
+            hasIcon ? "justify-start" : "justify-center",
+            SIZE_PADDING[size],
+            hasIcon && SIZE_GAP[size]
+          ),
+          dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
+          loading && "pointer-events-none opacity-75 cursor-not-allowed",
+          className
+        )
+      }, restProps), {
+        children: [
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          hasIcon && /* @__PURE__ */ jsx(
+            m.span,
+            {
+              layout: "position",
+              className: cn(
+                "flex items-center justify-center shrink-0",
+                sizeIcon.cls
+              ),
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+                m.span,
+                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+                  transition: SPRING_TRANSITION,
+                  className: "flex items-center justify-center shrink-0 w-full h-full",
+                  children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                    LoadingIndicator,
+                    {
+                      size: sizeIcon.px,
+                      color: "currentColor",
+                      "aria-label": "Loading"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    ProgressIndicator,
+                    {
+                      variant: "circular",
+                      size: sizeIcon.px,
+                      color: "currentColor",
+                      trackColor: "transparent",
+                      "aria-label": "Loading"
+                    }
+                  )
+                }),
+                "loading"
+              ) : icon && /* @__PURE__ */ jsx(
+                m.span,
+                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+                  transition: SPRING_TRANSITION,
+                  "aria-hidden": "true",
+                  className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
+                  children: icon
+                }),
+                "icon"
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsx(
+            m.span,
+            {
+              layout: "position",
+              initial: { opacity: 0, width: 0 },
+              animate: { opacity: 1, width: "auto" },
+              exit: { opacity: 0, width: 0 },
+              transition: {
+                opacity: { duration: 0.15, ease: "linear" },
+                width: SPRING_TRANSITION
+              },
+              className: "overflow-hidden whitespace-nowrap",
+              children: label
+            },
+            "label"
+          ) })
+        ]
+      })
+    ) }) });
+  }
+);
+ExtendedFABComponent.displayName = "ExtendedFAB";
+var ExtendedFAB = React11.memo(ExtendedFABComponent);
+var SIZE_STYLES = {
+  sm: "h-10 w-10",
+  md: "h-14 w-14",
+  lg: "h-24 w-24",
+  xl: "h-[8.5rem] w-[8.5rem]"
+};
+var SIZE_ICON2 = {
+  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 SIZE_TEXT_CLASS = {
+  sm: "text-sm  font-medium",
+  md: "text-base font-medium",
+  lg: "text-xl  font-semibold",
+  xl: "text-2xl font-semibold"
+};
+var MORPH_RADIUS2 = {
+  sm: { default: 12, pressed: 8, extended: 12, extended_pressed: 8 },
+  md: { default: 16, pressed: 10, extended: 16, extended_pressed: 10 },
+  lg: { default: 28, pressed: 20, extended: 28, extended_pressed: 20 },
+  xl: { default: 40, pressed: 28, extended: 40, extended_pressed: 28 }
+};
+var COLOR_CLASSES2 = {
+  primary: {
+    bg: "bg-m3-primary-container",
+    text: "text-m3-on-primary-container",
+    shadow: "shadow-md"
+  },
+  secondary: {
+    bg: "bg-m3-secondary-container",
+    text: "text-m3-on-secondary-container",
+    shadow: "shadow-md"
+  },
+  tertiary: {
+    bg: "bg-m3-tertiary-container",
+    text: "text-m3-on-tertiary-container",
+    shadow: "shadow-md"
+  },
+  surface: {
+    bg: "bg-m3-surface-container-high",
+    text: "text-m3-primary",
+    shadow: "shadow-md"
+  }
+};
+var POSITION_CLASS = {
+  "bottom-right": "bottom-4 right-4 sm:bottom-6 sm:right-6",
+  "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6",
+  "top-right": "top-4 right-4 sm:top-6 sm:right-6",
+  "top-left": "top-4 left-4 sm:top-6 sm:left-6"
+};
+function FABPosition({
+  position = "bottom-right",
+  children,
+  className
+}) {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute z-10",
+        (_a = POSITION_CLASS[position]) != null ? _a : POSITION_CLASS["bottom-right"],
+        className
+      ),
+      children
+    }
+  );
+}
+var FABComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      icon,
+      size = "md",
+      colorStyle = "primary",
+      extended = false,
+      children,
+      lowered = false,
+      loading = false,
+      loadingVariant = "loading-indicator",
+      visible = true,
+      onClick,
+      onKeyDown,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "icon",
+      "size",
+      "colorStyle",
+      "extended",
+      "children",
+      "lowered",
+      "loading",
+      "loadingVariant",
+      "visible",
+      "onClick",
+      "onKeyDown",
+      "aria-label"
+    ]);
+    var _a2, _b2, _c, _d;
+    const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
+    const radiusConfig = (_b2 = MORPH_RADIUS2[size]) != null ? _b2 : MORPH_RADIUS2.md;
+    const animateRadius = extended ? radiusConfig.extended : radiusConfig.default;
+    const pressedRadius = extended ? radiusConfig.extended_pressed : radiusConfig.pressed;
+    const sizeIcon = (_c = SIZE_ICON2[size]) != null ? _c : SIZE_ICON2.md;
+    const iconClass = sizeIcon.cls;
+    const iconPx = sizeIcon.px;
+    const needsTouchTarget = 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__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style,
+        initial: { scale: 0.5, opacity: 0, borderRadius: animateRadius },
+        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
+        exit: { scale: 0.5, opacity: 0 },
+        whileTap: { borderRadius: pressedRadius },
+        transition: {
+          borderRadius: SPRING_TRANSITION_FAST,
+          scale: SPRING_TRANSITION,
+          opacity: { duration: 0.25, ease: "easeOut" }
+        },
+        className: cn(
+          "relative shrink-0 inline-flex items-center justify-center",
+          "select-none cursor-pointer overflow-hidden",
+          "transition-[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] disabled:shadow-none",
+          colors.bg,
+          colors.text,
+          lowered ? "shadow-sm" : colors.shadow,
+          (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
+          extended && "w-auto px-6",
+          SIZE_TEXT_CLASS[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",
+                iconClass
+              ),
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  size: iconPx,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: iconPx,
+                  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",
+                iconClass
+              ),
+              children: icon
+            }),
+            "icon"
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && children && /* @__PURE__ */ jsx(
+            m.span,
+            {
+              initial: { width: 0, opacity: 0 },
+              animate: { width: "auto", opacity: 1 },
+              exit: { width: 0, opacity: 0 },
+              transition: SPRING_TRANSITION,
+              className: "overflow-hidden whitespace-nowrap ml-3",
+              children
+            },
+            "label"
+          ) })
+        ]
+      })
+    ) }) });
+  }
+);
+FABComponent.displayName = "FAB";
+var FAB = React11.memo(FABComponent);
+var SPRING_NORMAL = { stiffness: 700, damping: 40 };
+var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
+var FOCUS_DELAY_MS = 50;
+var TOGGLE_FAB_COLORS = {
+  primary: {
+    containerBg: "bg-m3-primary-container",
+    containerText: "text-m3-on-primary-container",
+    checkedBg: "bg-m3-primary",
+    checkedText: "text-m3-on-primary"
+  },
+  secondary: {
+    containerBg: "bg-m3-secondary-container",
+    containerText: "text-m3-on-secondary-container",
+    checkedBg: "bg-m3-secondary",
+    checkedText: "text-m3-on-secondary"
+  },
+  tertiary: {
+    containerBg: "bg-m3-tertiary-container",
+    containerText: "text-m3-on-tertiary-container",
+    checkedBg: "bg-m3-tertiary",
+    checkedText: "text-m3-on-tertiary"
+  }
+};
+var TOGGLE_FAB_SIZES = {
+  baseline: { sizeClass: "h-14 w-14", initialRadius: 16, finalRadius: 28 },
+  medium: { sizeClass: "h-20 w-20", initialRadius: 20, finalRadius: 40 },
+  large: { sizeClass: "h-24 w-24", initialRadius: 28, finalRadius: 48 }
+};
+var MENU_ITEM_STYLES = {
+  padding: "ps-4 pe-6",
+  gap: "gap-3",
+  size: "h-14 min-w-14",
+  cornerRadius: 999
+};
+var MENU_ITEM_COLORS = {
+  primary: {
+    bg: "bg-m3-primary-container",
+    text: "text-m3-on-primary-container"
+  },
+  secondary: {
+    bg: "bg-m3-secondary-container",
+    text: "text-m3-on-secondary-container"
+  },
+  tertiary: {
+    bg: "bg-m3-tertiary-container",
+    text: "text-m3-on-tertiary-container"
+  }
+};
+var ALIGNMENT_CONTAINER_CLASSES = {
+  end: "items-end bottom-4 right-4 sm:bottom-6 sm:right-6",
+  start: "items-start bottom-4 left-4 sm:bottom-6 sm:left-6",
+  center: "items-center bottom-4 left-1/2 -translate-x-1/2 sm:bottom-6"
+};
+var ALIGNMENT_ITEMS_CLASSES = {
+  end: "items-end",
+  start: "items-start",
+  center: "items-center"
+};
+var ALIGNMENT_TRANSFORM_ORIGIN = {
+  end: "right",
+  start: "left",
+  center: "bottom"
+};
+var ITEM_SPRING = { type: "spring", stiffness: 700, damping: 25 };
+var MENU_CONTAINER_VARIANTS = {
+  open: { transition: { staggerChildren: 0.033, staggerDirection: 1 } },
+  closed: { transition: { staggerChildren: 0.02, staggerDirection: -1 } }
+};
+var MENU_ITEM_VARIANTS = {
+  open: { scaleX: 1, opacity: 1, transition: ITEM_SPRING },
+  closed: { scaleX: 0, opacity: 0, transition: ITEM_SPRING }
+};
+function AddIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      width: "24",
+      height: "24",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Add" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
+      ]
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      width: "24",
+      height: "24",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Close" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+      ]
+    }
+  );
+}
+function defaultFabIcon(progress) {
+  return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(AddIcon, {});
+}
+var ToggleFABComponent = React11.forwardRef(
+  ({
+    expanded,
+    onToggle,
+    icon,
+    colorVariant = "primary",
+    fabSize = "baseline",
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-controls": ariaControls
+  }, ref) => {
+    var _a, _b;
+    const prefersReduced = useReducedMotion();
+    const colors = (_a = TOGGLE_FAB_COLORS[colorVariant]) != null ? _a : TOGGLE_FAB_COLORS.primary;
+    const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
+    const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
+    const checkedProgress = useSpring(expanded ? 1 : 0, springConfig);
+    React11.useEffect(() => {
+      checkedProgress.set(expanded ? 1 : 0);
+    }, [expanded, checkedProgress]);
+    const borderRadius = useTransform(
+      checkedProgress,
+      [0, 1],
+      [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
+    );
+    const [iconProgress, setIconProgress] = React11.useState(expanded ? 1 : 0);
+    React11.useEffect(() => {
+      return checkedProgress.on("change", setIconProgress);
+    }, [checkedProgress]);
+    const { ripples, onPointerDown, removeRipple } = useRippleState();
+    const handleClick = React11.useCallback(() => {
+      onToggle(!expanded);
+    }, [expanded, onToggle]);
+    return /* @__PURE__ */ jsxs(
+      m.button,
+      {
+        ref,
+        id,
+        type: "button",
+        "aria-expanded": expanded,
+        "aria-haspopup": "menu",
+        "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close menu" : "Open menu",
+        "aria-controls": ariaControls,
+        "data-expanded": expanded ? "true" : "false",
+        onClick: handleClick,
+        onPointerDown,
+        style: { borderRadius },
+        animate: {
+          boxShadow: expanded ? "0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3)" : "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"
+        },
+        whileTap: { scale: 0.95, transition: SPRING_TRANSITION_FAST },
+        transition: { boxShadow: SPRING_TRANSITION },
+        className: cn(
+          "relative shrink-0 inline-flex items-center justify-center",
+          "select-none cursor-pointer overflow-hidden",
+          "transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+          sizeTokens.sizeClass,
+          expanded ? colors.checkedBg : colors.containerBg,
+          expanded ? colors.checkedText : colors.containerText,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "relative z-10 flex items-center justify-center size-6 pointer-events-none",
+              children: icon(iconProgress)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ToggleFABComponent.displayName = "ToggleFAB";
+var ToggleFAB = React11.memo(ToggleFABComponent);
+function FABMenuItem({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  colorVariant = "primary",
+  className,
+  tabIndex = 0
+}) {
+  var _a;
+  const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
+  const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
+  const handleClick = React11.useCallback(
+    (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick();
+    },
+    [disabled, onClick]
+  );
+  const handleKeyDown = React11.useCallback(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick();
+      }
+    },
+    [disabled, onClick]
+  );
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      role: "menuitem",
+      tabIndex,
+      "aria-disabled": disabled ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
+      onClick: handleClick,
+      onPointerDown,
+      onKeyDown: handleKeyDown,
+      variants: MENU_ITEM_VARIANTS,
+      style: {
+        transformOrigin: "right",
+        borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
+      },
+      className: cn(
+        "relative inline-flex flex-row items-center",
+        "select-none cursor-pointer overflow-hidden",
+        "whitespace-nowrap",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+        MENU_ITEM_STYLES.size,
+        MENU_ITEM_STYLES.gap,
+        label ? MENU_ITEM_STYLES.padding : "px-4",
+        !label && "justify-center",
+        colors.bg,
+        colors.text,
+        disabled && "opacity-[0.38] pointer-events-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TouchTarget, {}),
+        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
+            children: icon
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
+      ]
+    }
+  );
+}
+function FABMenu({
+  expanded,
+  onToggle,
+  items,
+  colorVariant = "primary",
+  fabSize = "baseline",
+  alignment = "end",
+  className,
+  closeOnBackdropClick = true,
+  focusLast = true,
+  "aria-label": ariaLabel
+}) {
+  const fabId = React11.useId();
+  const menuId = React11.useId();
+  const toggleRef = React11.useRef(null);
+  const itemRefs = React11.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React11.useState(-1);
+  const reversedItems = React11.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React11.useCallback((index) => {
+    var _a;
+    const clampedIndex = Math.max(
+      0,
+      Math.min(index, itemRefs.current.length - 1)
+    );
+    setFocusedIndex(clampedIndex);
+    (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
+  }, []);
+  const wasExpandedRef = React11.useRef(false);
+  React11.useEffect(() => {
+    var _a;
+    if (expanded) {
+      wasExpandedRef.current = true;
+      const timer = setTimeout(() => {
+        focusItem(focusLast ? items.length - 1 : 0);
+      }, FOCUS_DELAY_MS);
+      return () => clearTimeout(timer);
+    }
+    if (wasExpandedRef.current) {
+      (_a = toggleRef.current) == null ? void 0 : _a.focus();
+    }
+    wasExpandedRef.current = false;
+    setFocusedIndex(-1);
+  }, [expanded, focusLast, items.length, focusItem]);
+  const handleMenuKeyDown = React11.useCallback(
+    (e) => {
+      if (!expanded) return;
+      const lastIndex = items.length - 1;
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault();
+          onToggle(false);
+          break;
+        case "ArrowUp": {
+          e.preventDefault();
+          focusItem(focusedIndex <= 0 ? lastIndex : focusedIndex - 1);
+          break;
+        }
+        case "ArrowDown": {
+          e.preventDefault();
+          focusItem(focusedIndex >= lastIndex ? 0 : focusedIndex + 1);
+          break;
+        }
+        case "Tab": {
+          e.preventDefault();
+          if (e.shiftKey) {
+            focusItem(focusedIndex <= 0 ? lastIndex : focusedIndex - 1);
+          } else {
+            focusItem(focusedIndex >= lastIndex ? 0 : focusedIndex + 1);
+          }
+          break;
+        }
+      }
+    },
+    [expanded, focusedIndex, items.length, focusItem, onToggle]
+  );
+  return /* @__PURE__ */ jsxs(LazyMotion, { features: domMax, strict: true, children: [
+    expanded && closeOnBackdropClick && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "fixed inset-0 z-40",
+        onClick: () => onToggle(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": ariaLabel != null ? ariaLabel : "Actions menu",
+        className: cn(
+          "fixed z-50 flex flex-col gap-2",
+          ALIGNMENT_CONTAINER_CLASSES[alignment],
+          "*:shrink-0",
+          className
+        ),
+        onKeyDown: handleMenuKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              id: menuId,
+              role: "menu",
+              "aria-labelledby": fabId,
+              "aria-orientation": "vertical",
+              variants: MENU_CONTAINER_VARIANTS,
+              initial: "closed",
+              animate: "open",
+              exit: "closed",
+              className: cn(
+                "flex flex-col-reverse gap-2",
+                ALIGNMENT_ITEMS_CLASSES[alignment]
+              ),
+              children: reversedItems.map((item, reversedIndex) => {
+                var _a;
+                const originalIndex = items.length - 1 - reversedIndex;
+                return /* @__PURE__ */ jsx(
+                  m.div,
+                  {
+                    variants: MENU_ITEM_VARIANTS,
+                    style: {
+                      transformOrigin: (_a = ALIGNMENT_TRANSFORM_ORIGIN[alignment]) != null ? _a : "right"
+                    },
+                    ref: (el) => {
+                      itemRefs.current[originalIndex] = el;
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      FABMenuItem,
+                      {
+                        icon: item.icon,
+                        label: item.label,
+                        onClick: () => {
+                          if (!item.disabled) {
+                            item.onClick();
+                            onToggle(false);
+                          }
+                        },
+                        disabled: item.disabled,
+                        colorVariant,
+                        className: item.className,
+                        tabIndex: expanded ? 0 : -1
+                      }
+                    )
+                  },
+                  item.id
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            ToggleFAB,
+            {
+              ref: toggleRef,
+              id: fabId,
+              expanded,
+              onToggle,
+              colorVariant,
+              fabSize,
+              "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close actions menu" : "Open actions menu",
+              "aria-controls": menuId,
+              icon: defaultFabIcon
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var SIZE_STYLES2 = {
+  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_ICON3 = {
+  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_ICON3[size]) != null ? _b2 : SIZE_ICON3.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_STYLES2[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 SplitButtonContext = React11.createContext(null);
+function useSplitButtonContext() {
+  return React11.useContext(SplitButtonContext);
+}
+var SplitButtonLayoutComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      leadingButton,
+      trailingButton,
+      className,
+      spacing = 2,
+      variant: layoutVariant,
+      size: layoutSize
+    } = _b, restProps = __objRest(_b, [
+      "leadingButton",
+      "trailingButton",
+      "className",
+      "spacing",
+      "variant",
+      "size"
+    ]);
+    const leadingProps = React11.isValidElement(leadingButton) ? leadingButton.props : {};
+    const size = layoutSize || leadingProps.size;
+    const variant = layoutVariant || leadingProps.variant;
+    const contextValue = React11.useMemo(
+      () => ({
+        size,
+        variant
+      }),
+      [size, variant]
+    );
+    return /* @__PURE__ */ jsx(SplitButtonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "inline-flex flex-row items-stretch justify-center w-fit shrink-0 relative",
+          className
+        ),
+        style: { gap: `${spacing}px` }
+      }, restProps), {
+        children: [
+          leadingButton,
+          trailingButton
+        ]
+      })
+    ) });
+  }
+);
+SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
+var SplitButtonLayout = React11.memo(SplitButtonLayoutComponent);
+var StateLayer = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
+    let opacity = 0;
+    if (pressed) {
+      opacity = 0.12;
+    } else if (focused) {
+      opacity = 0.1;
+    } else if (hovered) {
+      opacity = 0.08;
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+      m.div,
+      __spreadValues({
+        ref,
+        className: cn(
+          "absolute inset-0 bg-current pointer-events-none rounded-[inherit]",
+          className
+        ),
+        initial: false,
+        animate: { opacity },
+        transition: { duration: 0.2 },
+        "aria-hidden": "true"
+      }, props)
+    ) });
+  }
+);
+StateLayer.displayName = "StateLayer";
+var SPLIT_BUTTON_CHEVRON_SPRING = {
+  type: "spring",
+  stiffness: 200,
+  damping: 20,
+  mass: 1
+};
+var SPLIT_BUTTON_RADIUS_SPRING = FAST_EFFECTS_SPRING;
+var SPLIT_BUTTON_TOKENS = {
+  xs: {
+    containerHeight: 32,
+    // XSmallTokens: ContainerHeight = 32.0.dp
+    betweenSpace: 2,
+    // XSmallTokens: BetweenSpace = 2.0.dp
+    innerCorner: {
+      default: cornerRadius.extraSmall,
+      // 4dp
+      hovered: cornerRadius.small,
+      // 8dp
+      pressed: cornerRadius.small
+      // 8dp
+    },
+    outerCornerPercent: 50,
+    // XSmallTokens: OuterCornerCornerSizePercent = 50.0f → full pill
+    leadingPadding: {
+      start: 12,
+      // XSmallTokens: LeadingButtonLeadingSpace = 12.0.dp
+      end: 10
+      // XSmallTokens: LeadingButtonTrailingSpace = 10.0.dp
+    },
+    trailingPadding: {
+      start: 13,
+      // XSmallTokens: TrailingButtonLeadingSpace = 13.0.dp
+      end: 13
+      // XSmallTokens: TrailingButtonTrailingSpace = 13.0.dp
+    },
+    trailingIconSize: 22,
+    // XSmallTokens: TrailingIconSize = 22.0.dp
+    opticalCenterOffset: -1
+    // Spec: XS = -1dp from center
+  },
+  sm: {
+    containerHeight: 40,
+    // SmallTokens: ContainerHeight = 40.0.dp
+    betweenSpace: 2,
+    // SmallTokens: BetweenSpace = 2.0.dp
+    innerCorner: {
+      default: cornerRadius.extraSmall,
+      // 4dp
+      hovered: cornerRadius.medium,
+      // 12dp
+      pressed: cornerRadius.medium
+      // 12dp
+    },
+    outerCornerPercent: 50,
+    leadingPadding: {
+      start: 16,
+      // SmallTokens: LeadingButtonLeadingSpace = 16.0.dp
+      end: 12
+      // SmallTokens: LeadingButtonTrailingSpace = 12.0.dp
+    },
+    trailingPadding: {
+      start: 13,
+      // SmallTokens: TrailingButtonLeadingSpace = 13.0.dp
+      end: 13
+      // SmallTokens: TrailingButtonTrailingSpace = 13.0.dp
+    },
+    trailingIconSize: 22,
+    // SmallTokens: TrailingIconSize = 22.0.dp
+    opticalCenterOffset: -1
+    // Spec: S = -1dp from center
+  },
+  md: {
+    containerHeight: 56,
+    // MediumTokens: ContainerHeight = 56.0.dp
+    betweenSpace: 2,
+    // MediumTokens: BetweenSpace = 2.0.dp
+    innerCorner: {
+      default: cornerRadius.extraSmall,
+      // 4dp
+      hovered: cornerRadius.medium,
+      // 12dp
+      pressed: cornerRadius.medium
+      // 12dp
+    },
+    outerCornerPercent: 50,
+    leadingPadding: {
+      start: 24,
+      // MediumTokens: LeadingButtonLeadingSpace = 24.0.dp
+      end: 24
+      // MediumTokens: LeadingButtonTrailingSpace = 24.0.dp
+    },
+    trailingPadding: {
+      start: 15,
+      // MediumTokens: TrailingButtonLeadingSpace = 15.0.dp
+      end: 15
+      // MediumTokens: TrailingButtonTrailingSpace = 15.0.dp
+    },
+    trailingIconSize: 26,
+    // MediumTokens: TrailingIconSize = 26.0.dp
+    opticalCenterOffset: -2
+    // Spec: M = -2dp from center
+  },
+  lg: {
+    containerHeight: 96,
+    // LargeTokens: ContainerHeight = 96.0.dp
+    betweenSpace: 2,
+    // LargeTokens: BetweenSpace = 2.0.dp
+    innerCorner: {
+      default: cornerRadius.small,
+      // 8dp
+      hovered: 28,
+      // LargeTokens: InnerHoveredCornerCornerSize = CornerValueLargeIncreased (28dp)
+      pressed: 28
+      // LargeTokens: InnerPressedCornerCornerSize = CornerValueLargeIncreased (28dp)
+    },
+    outerCornerPercent: 50,
+    leadingPadding: {
+      start: 48,
+      // LargeTokens: LeadingButtonLeadingSpace = 48.0.dp
+      end: 48
+      // LargeTokens: LeadingButtonTrailingSpace = 48.0.dp
+    },
+    trailingPadding: {
+      start: 29,
+      // LargeTokens: TrailingButtonLeadingSpace = 29.0.dp
+      end: 29
+      // LargeTokens: TrailingButtonTrailingSpace = 29.0.dp
+    },
+    trailingIconSize: 38,
+    // LargeTokens: TrailingIconSize = 38.0.dp
+    opticalCenterOffset: -3
+    // Spec: L = -3dp from center
+  },
+  xl: {
+    containerHeight: 136,
+    // XLargeTokens: ContainerHeight = 136.0.dp
+    betweenSpace: 2,
+    // XLargeTokens: BetweenSpace = 2.0.dp
+    innerCorner: {
+      default: cornerRadius.medium,
+      // 12dp
+      hovered: 28,
+      // XLargeTokens: InnerHoveredCornerCornerSize = CornerValueLargeIncreased (28dp)
+      pressed: 28
+      // XLargeTokens: InnerPressedCornerCornerSize = CornerValueLargeIncreased (28dp)
+    },
+    outerCornerPercent: 50,
+    leadingPadding: {
+      start: 64,
+      // XLargeTokens: LeadingButtonLeadingSpace = 64.0.dp
+      end: 64
+      // XLargeTokens: LeadingButtonTrailingSpace = 64.0.dp
+    },
+    trailingPadding: {
+      start: 43,
+      // XLargeTokens: TrailingButtonLeadingSpace = 43.0.dp
+      end: 43
+      // XLargeTokens: TrailingButtonTrailingSpace = 43.0.dp
+    },
+    trailingIconSize: 50,
+    // XLargeTokens: TrailingIconSize = 50.0.dp
+    opticalCenterOffset: -6
+    // Spec: XL = -6dp from center
+  }
+};
+var LEADING_ICON_SIZE_FOR_SIZE = {
+  xs: 18,
+  sm: 20,
+  md: 24,
+  lg: 32,
+  xl: 40
+};
+var splitButtonSizeVariants = {
+  xs: "min-h-[32px]",
+  sm: "min-h-[40px]",
+  md: "min-h-[56px]",
+  lg: "min-h-[96px]",
+  xl: "min-h-[136px]"
+};
+var splitButtonVariants = cva(
+  "group relative w-fit shrink-0 inline-flex flex-row items-center justify-center whitespace-nowrap select-none cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary z-10 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        filled: "bg-m3-primary text-m3-on-primary",
+        tonal: "bg-m3-secondary-container text-m3-on-secondary-container",
+        elevated: "bg-m3-surface-container-low text-m3-primary shadow-md hover:shadow-lg",
+        outlined: "bg-transparent text-m3-primary border border-m3-outline"
+      },
+      size: splitButtonSizeVariants,
+      disabled: {
+        true: "pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "filled",
+        disabled: true,
+        className: "bg-m3-on-surface/10 text-m3-on-surface/[0.38]"
+      },
+      {
+        variant: "tonal",
+        disabled: true,
+        className: "bg-m3-on-surface/10 text-m3-on-surface/[0.38]"
+      },
+      {
+        variant: "elevated",
+        disabled: true,
+        className: "bg-m3-on-surface/10 text-m3-on-surface/[0.38] shadow-none"
+      },
+      {
+        variant: "outlined",
+        disabled: true,
+        className: "text-m3-on-surface/[0.38] border-m3-on-surface/[0.12]"
+      }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      size: "sm",
+      disabled: false
+    }
+  }
+);
+var SplitButtonLeadingComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      variant = "filled",
+      size = "sm",
+      icon,
+      children,
+      disabled,
+      onClick,
+      onPointerDown,
+      onPointerUp,
+      onPointerLeave,
+      onPointerCancel,
+      onFocus,
+      onBlur
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "variant",
+      "size",
+      "icon",
+      "children",
+      "disabled",
+      "onClick",
+      "onPointerDown",
+      "onPointerUp",
+      "onPointerLeave",
+      "onPointerCancel",
+      "onFocus",
+      "onBlur"
+    ]);
+    var _a2, _b2, _c;
+    const context = useSplitButtonContext();
+    const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
+    const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
+    const [isHovered, setIsHovered] = React11.useState(false);
+    const [isFocused, setIsFocused] = React11.useState(false);
+    const [isPressed, setIsPressed] = React11.useState(false);
+    const tokens = SPLIT_BUTTON_TOKENS[actualSize];
+    const typographyClass = (_c = BUTTON_TYPOGRAPHY_TOKENS[actualSize]) != null ? _c : BUTTON_TYPOGRAPHY_TOKENS.sm;
+    const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
+    const {
+      ripples,
+      onPointerDown: onRipplePointerDown,
+      removeRipple
+    } = useRippleState({ disabled });
+    const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
+    const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
+    const borderRadius = `${outerRadius}px ${innerCornerRadius}px ${innerCornerRadius}px ${outerRadius}px`;
+    const handleClick = React11.useCallback(
+      (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick == null ? void 0 : onClick(e);
+      },
+      [disabled, onClick]
+    );
+    const handlePointerDown = React11.useCallback(
+      (e) => {
+        onRipplePointerDown(e);
+        setIsPressed(true);
+        onPointerDown == null ? void 0 : onPointerDown(e);
+      },
+      [onRipplePointerDown, onPointerDown]
+    );
+    const handlePointerUp = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerUp == null ? void 0 : onPointerUp(e);
+      },
+      [onPointerUp]
+    );
+    const handlePointerEnter = React11.useCallback(() => {
+      if (!disabled) {
+        setIsHovered(true);
+      }
+    }, [disabled]);
+    const handlePointerLeave = React11.useCallback(
+      (e) => {
+        setIsHovered(false);
+        setIsPressed(false);
+        onPointerLeave == null ? void 0 : onPointerLeave(e);
+      },
+      [onPointerLeave]
+    );
+    const handlePointerCancel = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerCancel == null ? void 0 : onPointerCancel(e);
+      },
+      [onPointerCancel]
+    );
+    const handleFocus = React11.useCallback(
+      (e) => {
+        if (!disabled) setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      [disabled, onFocus]
+    );
+    const handleBlur = React11.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      },
+      [onBlur]
+    );
+    const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "aria-disabled": disabled,
+        disabled,
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        animate: { borderRadius },
+        transition: SPLIT_BUTTON_RADIUS_SPRING,
+        style: __spreadValues({
+          paddingInlineStart: tokens.leadingPadding.start,
+          paddingInlineEnd: tokens.leadingPadding.end,
+          gap: "8px"
+        }, style),
+        className: cn(
+          splitButtonVariants({
+            variant: actualVariant,
+            size: actualSize,
+            disabled
+          }),
+          typographyClass,
+          className
+        )
+      }, restProps), {
+        children: [
+          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(
+            StateLayer,
+            {
+              hovered: isHovered,
+              focused: isFocused,
+              pressed: isPressed
+            }
+          ),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
+              style: {
+                fontSize: leadingIconSize,
+                width: leadingIconSize,
+                height: leadingIconSize
+              },
+              children: icon
+            }
+          ),
+          children && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children })
+        ]
+      })
+    ) });
+  }
+);
+SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
+var SplitButtonLeading = React11.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
+FilledSplitButtonLeading.displayName = "FilledSplitButtonLeading";
+var TonalSplitButtonLeading = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
+TonalSplitButtonLeading.displayName = "TonalSplitButtonLeading";
+var ElevatedSplitButtonLeading = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
+ElevatedSplitButtonLeading.displayName = "ElevatedSplitButtonLeading";
+var OutlinedSplitButtonLeading = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
+OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
+var SplitButtonTrailingComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      variant = "filled",
+      size = "sm",
+      checked,
+      onCheckedChange,
+      icon,
+      disabled,
+      onPointerDown,
+      onPointerUp,
+      onPointerLeave,
+      onPointerCancel,
+      onFocus,
+      onBlur,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "variant",
+      "size",
+      "checked",
+      "onCheckedChange",
+      "icon",
+      "disabled",
+      "onPointerDown",
+      "onPointerUp",
+      "onPointerLeave",
+      "onPointerCancel",
+      "onFocus",
+      "onBlur",
+      "aria-label"
+    ]);
+    var _a2, _b2;
+    const context = useSplitButtonContext();
+    const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
+    const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
+    const [isHovered, setIsHovered] = React11.useState(false);
+    const [isFocused, setIsFocused] = React11.useState(false);
+    const [isPressed, setIsPressed] = React11.useState(false);
+    const tokens = SPLIT_BUTTON_TOKENS[actualSize];
+    const prefersReducedMotion = useReducedMotion();
+    const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
+    const {
+      ripples,
+      onPointerDown: onRipplePointerDown,
+      removeRipple
+    } = useRippleState({ disabled });
+    const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
+    const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
+    const borderRadius = checked ? `${outerRadius}px ${outerRadius}px ${outerRadius}px ${outerRadius}px` : `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
+    const handleToggle = React11.useCallback(() => {
+      if (!disabled) {
+        onCheckedChange(!checked);
+      }
+    }, [disabled, checked, onCheckedChange]);
+    const handlePointerDown = React11.useCallback(
+      (e) => {
+        onRipplePointerDown(e);
+        setIsPressed(true);
+        onPointerDown == null ? void 0 : onPointerDown(e);
+      },
+      [onRipplePointerDown, onPointerDown]
+    );
+    const handlePointerUp = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerUp == null ? void 0 : onPointerUp(e);
+      },
+      [onPointerUp]
+    );
+    const handlePointerEnter = React11.useCallback(() => {
+      if (!disabled) {
+        setIsHovered(true);
+      }
+    }, [disabled]);
+    const handlePointerLeave = React11.useCallback(
+      (e) => {
+        setIsHovered(false);
+        setIsPressed(false);
+        onPointerLeave == null ? void 0 : onPointerLeave(e);
+      },
+      [onPointerLeave]
+    );
+    const handlePointerCancel = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerCancel == null ? void 0 : onPointerCancel(e);
+      },
+      [onPointerCancel]
+    );
+    const handleFocus = React11.useCallback(
+      (e) => {
+        if (!disabled) setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      [disabled, onFocus]
+    );
+    const handleBlur = React11.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      },
+      [onBlur]
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "aria-pressed": checked,
+        "aria-expanded": checked,
+        "aria-label": ariaLabel,
+        disabled,
+        onClick: handleToggle,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        animate: { borderRadius },
+        transition: SPLIT_BUTTON_RADIUS_SPRING,
+        style: __spreadValues({
+          paddingInlineStart: tokens.trailingPadding.start,
+          paddingInlineEnd: tokens.trailingPadding.end
+        }, style),
+        className: cn(
+          splitButtonVariants({
+            variant: actualVariant,
+            size: actualSize,
+            disabled
+          }),
+          className
+        )
+      }, restProps), {
+        children: [
+          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(
+            StateLayer,
+            {
+              hovered: isHovered,
+              focused: isFocused,
+              pressed: isPressed
+            }
+          ),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          /* @__PURE__ */ jsx(
+            m.div,
+            {
+              animate: {
+                rotate: checked ? 180 : 0,
+                x: checked ? 0 : tokens.opticalCenterOffset
+              },
+              transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
+              className: "flex items-center justify-center shrink-0",
+              children: icon != null ? icon : /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "arrow_drop_down",
+                  size: tokens.trailingIconSize,
+                  opticalSize: 24
+                }
+              )
+            }
+          )
+        ]
+      })
+    ) });
+  }
+);
+SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
+var SplitButtonTrailing = React11.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
+FilledSplitButtonTrailing.displayName = "FilledSplitButtonTrailing";
+var TonalSplitButtonTrailing = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
+TonalSplitButtonTrailing.displayName = "TonalSplitButtonTrailing";
+var ElevatedSplitButtonTrailing = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
+ElevatedSplitButtonTrailing.displayName = "ElevatedSplitButtonTrailing";
+var OutlinedSplitButtonTrailing = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
+OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
+var SplitButtonTrailingUncheckableComponent = React11.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      variant = "filled",
+      size = "sm",
+      icon,
+      disabled,
+      onClick,
+      onPointerDown,
+      onPointerUp,
+      onPointerLeave,
+      onPointerCancel,
+      onFocus,
+      onBlur,
+      "aria-label": ariaLabel
+    } = _b, restProps = __objRest(_b, [
+      "className",
+      "style",
+      "variant",
+      "size",
+      "icon",
+      "disabled",
+      "onClick",
+      "onPointerDown",
+      "onPointerUp",
+      "onPointerLeave",
+      "onPointerCancel",
+      "onFocus",
+      "onBlur",
+      "aria-label"
+    ]);
+    var _a2, _b2;
+    const context = useSplitButtonContext();
+    const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
+    const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
+    const [isHovered, setIsHovered] = React11.useState(false);
+    const [isFocused, setIsFocused] = React11.useState(false);
+    const [isPressed, setIsPressed] = React11.useState(false);
+    const tokens = SPLIT_BUTTON_TOKENS[actualSize];
+    const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
+    const {
+      ripples,
+      onPointerDown: onRipplePointerDown,
+      removeRipple
+    } = useRippleState({ disabled });
+    const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
+    const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
+    const borderRadius = `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
+    const handlePointerDown = React11.useCallback(
+      (e) => {
+        onRipplePointerDown(e);
+        setIsPressed(true);
+        onPointerDown == null ? void 0 : onPointerDown(e);
+      },
+      [onRipplePointerDown, onPointerDown]
+    );
+    const handlePointerUp = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerUp == null ? void 0 : onPointerUp(e);
+      },
+      [onPointerUp]
+    );
+    const handlePointerEnter = React11.useCallback(() => {
+      if (!disabled) {
+        setIsHovered(true);
+      }
+    }, [disabled]);
+    const handlePointerLeave = React11.useCallback(
+      (e) => {
+        setIsHovered(false);
+        setIsPressed(false);
+        onPointerLeave == null ? void 0 : onPointerLeave(e);
+      },
+      [onPointerLeave]
+    );
+    const handlePointerCancel = React11.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerCancel == null ? void 0 : onPointerCancel(e);
+      },
+      [onPointerCancel]
+    );
+    const handleFocus = React11.useCallback(
+      (e) => {
+        if (!disabled) setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      [disabled, onFocus]
+    );
+    const handleBlur = React11.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      },
+      [onBlur]
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "aria-label": ariaLabel,
+        disabled,
+        onClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        animate: { borderRadius },
+        transition: SPLIT_BUTTON_RADIUS_SPRING,
+        style: __spreadValues({
+          paddingInlineStart: tokens.trailingPadding.start,
+          paddingInlineEnd: tokens.trailingPadding.end
+        }, style),
+        className: cn(
+          splitButtonVariants({
+            variant: actualVariant,
+            size: actualSize,
+            disabled
+          }),
+          className
+        )
+      }, restProps), {
+        children: [
+          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(
+            StateLayer,
+            {
+              hovered: isHovered,
+              focused: isFocused,
+              pressed: isPressed
+            }
+          ),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          /* @__PURE__ */ jsx(
+            m.div,
+            {
+              animate: { x: tokens.opticalCenterOffset },
+              transition: SPLIT_BUTTON_RADIUS_SPRING,
+              className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+              style: {
+                width: tokens.trailingIconSize,
+                height: tokens.trailingIconSize
+              },
+              children: icon
+            }
+          )
+        ]
+      })
+    ) });
+  }
+);
+SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
+var SplitButtonTrailingUncheckable = React11.memo(
+  SplitButtonTrailingUncheckableComponent
+);
+var FilledSplitButtonTrailingUncheckable = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+FilledSplitButtonTrailingUncheckable.displayName = "FilledSplitButtonTrailingUncheckable";
+var TonalSplitButtonTrailingUncheckable = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
+TonalSplitButtonTrailingUncheckable.displayName = "TonalSplitButtonTrailingUncheckable";
+var ElevatedSplitButtonTrailingUncheckable = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
+ElevatedSplitButtonTrailingUncheckable.displayName = "ElevatedSplitButtonTrailingUncheckable";
+var OutlinedSplitButtonTrailingUncheckable = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
+OutlinedSplitButtonTrailingUncheckable.displayName = "OutlinedSplitButtonTrailingUncheckable";
+
+export { BUTTON_COLOR_TOKENS, BUTTON_GROUP_TOKENS, BUTTON_SIZE_TOKENS, Button, ButtonGroup, ButtonGroupDefaults, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, IconButton, LEADING_ICON_SIZE_FOR_SIZE, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, SPLIT_BUTTON_CHEVRON_SPRING, SPLIT_BUTTON_RADIUS_SPRING, SPLIT_BUTTON_TOKENS, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, splitButtonVariants };
+//# sourceMappingURL=buttons.mjs.map
+//# sourceMappingURL=buttons.mjs.map