@bug-on/m3-expressive 1.0.0

package/dist/pickers.mjs

@@ -0,0 +1,4200 @@
+"use client";
+import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
+import * as React17 from 'react';
+import { useState, useCallback, useMemo, useReducer } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/date-time-pickers/shared/calendar-model.ts
+var startOfDayUTC = (ms) => {
+  const d = new Date(ms);
+  return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+};
+var todayUTC = () => startOfDayUTC(Date.now());
+var getDaysInMonth = (year, month) => new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+var getFirstDayOfWeek = (year, month) => new Date(Date.UTC(year, month, 1)).getUTCDay();
+var getWeeksInMonth = (year, month, weekStartsOn) => {
+  const todayMs = todayUTC();
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDow = getFirstDayOfWeek(year, month);
+  const startPadding = (firstDow - weekStartsOn + 7) % 7;
+  const totalCells = startPadding + daysInMonth;
+  const totalWeeks = Math.ceil(totalCells / 7);
+  const weeks = [];
+  for (let w = 0; w < totalWeeks; w++) {
+    const week = [];
+    for (let d = 0; d < 7; d++) {
+      const cellIndex = w * 7 + d;
+      const dayNumber = cellIndex - startPadding + 1;
+      if (dayNumber < 1 || dayNumber > daysInMonth) {
+        week.push(null);
+      } else {
+        const utcMs = Date.UTC(year, month, dayNumber);
+        week.push({
+          utcMs,
+          day: dayNumber,
+          month,
+          year,
+          isCurrentMonth: true,
+          isToday: utcMs === todayMs
+        });
+      }
+    }
+    weeks.push(week);
+  }
+  return weeks;
+};
+var isSameDay = (a, b) => startOfDayUTC(a) === startOfDayUTC(b);
+var isDateInRange = (ms, startMs, endMs) => {
+  if (startMs === null || endMs === null) return false;
+  const day = startOfDayUTC(ms);
+  const start = startOfDayUTC(startMs);
+  const end = startOfDayUTC(endMs);
+  return day >= start && day <= end;
+};
+var isRangeStart = (ms, startMs) => startMs !== null && isSameDay(ms, startMs);
+var isRangeEnd = (ms, endMs) => endMs !== null && isSameDay(ms, endMs);
+var isYearSelectable = (year, selectableDates) => selectableDates.isSelectableYear(year);
+var resolveLocale = (locale) => {
+  var _a, _b;
+  return {
+    locale: (_a = locale == null ? void 0 : locale.locale) != null ? _a : typeof navigator !== "undefined" ? navigator.language : "en-US",
+    weekStartsOn: (_b = locale == null ? void 0 : locale.weekStartsOn) != null ? _b : 1
+  };
+};
+var normalizeToMonthStart = (ms) => {
+  const d = new Date(ms);
+  return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1);
+};
+var navigateMonth = (currentMs, direction) => {
+  const d = new Date(currentMs);
+  const year = d.getUTCFullYear();
+  const month = d.getUTCMonth();
+  if (direction === "next") {
+    return month === 11 ? Date.UTC(year + 1, 0, 1) : Date.UTC(year, month + 1, 1);
+  }
+  return month === 0 ? Date.UTC(year - 1, 11, 1) : Date.UTC(year, month - 1, 1);
+};
+var isMonthNavigable = (year, yearRange, selectableDates) => year >= yearRange[0] && year <= yearRange[1] && selectableDates.isSelectableYear(year);
+var getNavigableMonth = (currentMs, direction, yearRange, selectableDates) => {
+  const targetMs = navigateMonth(currentMs, direction);
+  const targetYear = new Date(targetMs).getUTCFullYear();
+  return isMonthNavigable(targetYear, yearRange, selectableDates) ? targetMs : null;
+};
+var formatDate = (utcMs, locale, options) => {
+  const defaultOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC"
+  };
+  return new Intl.DateTimeFormat(locale.locale, __spreadValues(__spreadValues({}, defaultOptions), options)).format(new Date(utcMs));
+};
+var formatMonthYear = (utcMs, locale) => new Intl.DateTimeFormat(locale.locale, {
+  year: "numeric",
+  month: "long",
+  timeZone: "UTC"
+}).format(new Date(utcMs));
+var getWeekdayNames = (locale) => {
+  const SUNDAY_MS = Date.UTC(2025, 0, 5);
+  const formatter = new Intl.DateTimeFormat(locale.locale, {
+    weekday: "narrow",
+    timeZone: "UTC"
+  });
+  const allDays = Array.from(
+    { length: 7 },
+    (_, i) => formatter.format(new Date(SUNDAY_MS + i * 864e5))
+  );
+  return [
+    ...allDays.slice(locale.weekStartsOn),
+    ...allDays.slice(0, locale.weekStartsOn)
+  ];
+};
+var parseDateInput = (input) => {
+  const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) return null;
+  const [, mm, dd, yyyy] = match;
+  const month = parseInt(mm, 10) - 1;
+  const day = parseInt(dd, 10);
+  const year = parseInt(yyyy, 10);
+  if (month < 0 || month > 11 || day < 1 || day > 31 || year < 1) return null;
+  const maxDay = getDaysInMonth(year, month);
+  if (day > maxDay) return null;
+  return Date.UTC(year, month, day);
+};
+var DatePickerInput = ({
+  value,
+  onChange,
+  onCommit,
+  label = "Enter date",
+  error,
+  locale,
+  className
+}) => {
+  const inputId = React17.useId();
+  const errorId = `${inputId}-error`;
+  const placeholder = React17.useMemo(() => {
+    if (locale == null ? void 0 : locale.startsWith("vi")) return "DD/MM/YYYY";
+    return "MM/DD/YYYY";
+  }, [locale]);
+  const handleKeyDown = React17.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        const parsed = parseDateInput(value);
+        onCommit(parsed);
+      }
+    },
+    [value, onCommit]
+  );
+  const handleBlur = React17.useCallback(() => {
+    const parsed = parseDateInput(value);
+    onCommit(parsed);
+  }, [value, onCommit]);
+  const handleChange = React17.useCallback(
+    (e) => {
+      let raw = e.target.value.replace(/\D/g, "");
+      if (raw.length > 8) raw = raw.slice(0, 8);
+      let formatted = raw;
+      if (raw.length > 2) {
+        formatted = `${raw.slice(0, 2)}/${raw.slice(2)}`;
+      }
+      if (raw.length > 4) {
+        formatted = `${raw.slice(0, 2)}/${raw.slice(2, 4)}/${raw.slice(4)}`;
+      }
+      onChange(formatted);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "block text-[length:var(--md-typescale-label-large-size,14px)]\n							font-[number:var(--md-typescale-label-large-weight,500)]\n							text-m3-on-surface-variant\n							mb-1",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "text",
+        inputMode: "numeric",
+        value,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        "aria-label": label,
+        "aria-invalid": !!error || void 0,
+        "aria-describedby": error ? errorId : void 0,
+        maxLength: 10,
+        className: "w-full h-14 px-4 rounded-m3-xs\n							bg-m3-surface-container-highest\n							text-[length:var(--md-typescale-body-large-size,16px)]\n							hover:bg-m3-on-surface/8\n							text-m3-on-surface\n							caret-m3-primary\n							placeholder:text-m3-on-surface-variant\n							outline-none border-0\n							focus:ring-2 focus:ring-m3-primary\n							transition-m3-fast-effects"
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-xs text-m3-error px-1", children: error })
+  ] }) }) });
+};
+DatePickerInput.displayName = "DatePickerInput";
+
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+var DEFAULT_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 31.19
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+var DEFAULT_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 1600,
+  damping: 80
+};
+
+// src/ui/date-time-pickers/shared/animation-tokens.ts
+var PICKER_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: [0, 0, 0, 1] }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var PICKER_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 16 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: DEFAULT_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var CALENDAR_SLIDE_VARIANTS = {
+  enterFromRight: {
+    x: "100%",
+    opacity: 0
+  },
+  enterFromLeft: {
+    x: "-100%",
+    opacity: 0
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exitToLeft: {
+    x: "-100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  },
+  exitToRight: {
+    x: "100%",
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.3, 0, 1, 1] }
+  }
+};
+var DAY_CELL_STATE_TRANSITION = FAST_EFFECTS_SPRING;
+var DayCell = ({
+  day,
+  selectedMs,
+  selectedStartMs = null,
+  selectedEndMs = null,
+  isRangePicker = false,
+  isSelectable,
+  onSelect,
+  locale
+}) => {
+  const { utcMs, day: dayNum, isToday } = day;
+  const isSelected = !isRangePicker && selectedMs !== null && isSameDay(utcMs, selectedMs);
+  const isStart = isRangePicker && isRangeStart(utcMs, selectedStartMs);
+  const isEnd = isRangePicker && isRangeEnd(utcMs, selectedEndMs);
+  const isInRange = isRangePicker && !isStart && !isEnd && isDateInRange(utcMs, selectedStartMs, selectedEndMs);
+  const isDisabled = !isSelectable;
+  const ariaLabel = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC"
+  }).format(new Date(utcMs));
+  const rangeHighlightClass = cn(
+    "absolute inset-y-0 bg-m3-secondary-container",
+    isStart && selectedEndMs !== null && "left-1/2 right-0",
+    isEnd && selectedStartMs !== null && "left-0 right-1/2",
+    isInRange && "inset-x-0"
+  );
+  const circleClass = cn(
+    "relative z-10 flex items-center justify-center w-10 h-10 rounded-m3-full",
+    "text-[length:var(--md-typescale-body-large-size,14px)]",
+    "font-[number:var(--md-typescale-body-large-weight,400)]",
+    "transition-m3-fast-effects",
+    // Selected (single) or range endpoints
+    (isSelected || isStart || isEnd) && ["bg-m3-primary", "text-m3-on-primary"],
+    // In-range text
+    isInRange && "text-m3-on-secondary-container",
+    // Today outline (only when not selected)
+    isToday && !isSelected && !isStart && !isEnd && ["outline outline-1 outline-m3-primary", "text-m3-primary"],
+    // Default text
+    !isSelected && !isStart && !isEnd && !isInRange && !isToday && "text-m3-on-surface",
+    // Hover states (only when selectable and not selected/range endpoints)
+    !isDisabled && !isSelected && !isStart && !isEnd && [
+      isInRange ? "hover:bg-m3-on-secondary-container/8" : "hover:bg-m3-on-surface/8"
+    ],
+    // Disabled
+    isDisabled && "opacity-[0.38]"
+  );
+  const handleClick = React17.useCallback(() => {
+    if (isDisabled) return;
+    onSelect(utcMs);
+  }, [isDisabled, utcMs, onSelect]);
+  const handleKeyDown = React17.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
+  return /* @__PURE__ */ jsxs("td", { className: "relative flex items-center justify-center", children: [
+    isRangePicker && (isInRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: rangeHighlightClass }),
+    /* @__PURE__ */ jsx(
+      m.button,
+      {
+        type: "button",
+        className: cn(
+          circleClass,
+          isDisabled && "pointer-events-none cursor-not-allowed"
+        ),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "aria-label": ariaLabel,
+        "aria-selected": isSelected || isStart || isEnd || void 0,
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isDisabled ? -1 : 0,
+        whileTap: !isDisabled ? {
+          scale: 0.94,
+          transition: DAY_CELL_STATE_TRANSITION
+        } : void 0,
+        children: dayNum
+      }
+    )
+  ] });
+};
+DayCell.displayName = "DayCell";
+var WeekdayRow = ({ locale }) => {
+  const names = React17.useMemo(() => getWeekdayNames(locale), [locale]);
+  return /* @__PURE__ */ jsx("tr", { className: "grid grid-cols-7 mb-1", children: names.map((name, i) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      "aria-label": name,
+      className: "flex items-center justify-center h-10 w-10 mx-auto\n						text-[length:var(--md-typescale-label-large-size,14px)]\n						font-[number:var(--md-typescale-label-large-weight,500)]\n						text-m3-on-surface\n						select-none\n						font-normal",
+      children: name
+    },
+    i
+  )) });
+};
+WeekdayRow.displayName = "WeekdayRow";
+var CalendarGrid = ({
+  displayedMonthMs,
+  slideDirection,
+  locale,
+  selectableDates,
+  selectedMs,
+  selectedStartMs = null,
+  selectedEndMs = null,
+  isRangePicker = false,
+  onDaySelect
+}) => {
+  const d = new Date(displayedMonthMs);
+  const year = d.getUTCFullYear();
+  const month = d.getUTCMonth();
+  const weeks = React17.useMemo(
+    () => getWeeksInMonth(year, month, locale.weekStartsOn),
+    [year, month, locale.weekStartsOn]
+  );
+  const enterVariant = slideDirection === "next" ? "enterFromRight" : "enterFromLeft";
+  const exitVariant = slideDirection === "next" ? "exitToLeft" : "exitToRight";
+  return /* @__PURE__ */ jsxs("table", { className: "w-full px-3 border-collapse block", children: [
+    /* @__PURE__ */ jsx("thead", { className: "block", children: /* @__PURE__ */ jsx(WeekdayRow, { locale }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx(
+      m.tbody,
+      {
+        variants: CALENDAR_SLIDE_VARIANTS,
+        initial: slideDirection !== null ? enterVariant : false,
+        animate: "center",
+        exit: slideDirection !== null ? exitVariant : void 0,
+        className: "overflow-hidden block",
+        "aria-label": new Intl.DateTimeFormat(locale.locale, {
+          year: "numeric",
+          month: "long",
+          timeZone: "UTC"
+        }).format(new Date(displayedMonthMs)),
+        children: weeks.map((week, weekIdx) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: "grid grid-cols-7",
+            children: week.map(
+              (day, dayIdx) => day === null ? /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "w-10 h-10 mx-auto block",
+                  "aria-hidden": true
+                },
+                `empty-${weekIdx}-${dayIdx}`
+              ) : /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  day,
+                  selectedMs,
+                  selectedStartMs,
+                  selectedEndMs,
+                  isRangePicker,
+                  isSelectable: selectableDates.isSelectableDate(day.utcMs),
+                  onSelect: onDaySelect,
+                  locale: locale.locale
+                },
+                day.utcMs
+              )
+            )
+          },
+          weekIdx
+        ))
+      },
+      displayedMonthMs
+    ) })
+  ] });
+};
+CalendarGrid.displayName = "CalendarGrid";
+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 = React17.memo(function IndeterminateSvg2({
+  size
+}) {
+  const [ready, setReady] = React17.useState(false);
+  React17.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 = React17.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 = React17.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 = React17.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 = React17.useMemo(
+      () => amplitude != null ? amplitude : 1.6 * scaleFactor,
+      [amplitude, scaleFactor]
+    );
+    const effectiveWavelength = React17.useMemo(
+      () => wavelength != null ? wavelength : 15 * scaleFactor,
+      [wavelength, scaleFactor]
+    );
+    const wavyActivePath = React17.useMemo(
+      () => isWavy ? generateWavyCircularPath(
+        center,
+        radius,
+        effectiveAmplitude,
+        effectiveWavelength
+      ) : null,
+      [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
+    );
+    const circumference = React17.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React17.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] = React17.useState(0);
+  const observerRef = React17.useRef(null);
+  const ref = React17.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;
+    }
+  }, []);
+  React17.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return [ref, width];
+}
+function useMergedRef(...refs) {
+  return React17.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 = React17.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 = React17.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 = React17.useId();
+  const [containerRef, width] = useContainerWidth();
+  const activePathRef = React17.useRef(null);
+  const trackPathRef = React17.useRef(null);
+  const amplitudeMV = useMotionValue(amplitude);
+  const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
+  React17.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 = React17.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 = React17.useRef(null);
+    const mergedRef = useMergedRef(ref, containerRef);
+    const [isRtl, setIsRtl] = React17.useState(false);
+    React17.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 = React17.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React17.useMemo(
+      () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
+      [isWavy, trackHeight, effectiveAmplitude]
+    );
+    const shouldShowStop = React17.useMemo(
+      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      [isDeterminate, resolvedTrackShape, showStopIndicator]
+    );
+    const stopSize = React17.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 = React17.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 = React17.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] = React17.useState([]);
+  const onPointerDown = React17.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 = React17.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  return { ripples, onPointerDown, removeRipple };
+}
+
+// src/ui/shared/constants.ts
+var SPRING_TRANSITION_FAST = FAST_EFFECTS_SPRING;
+var SPRING_TRANSITION = DEFAULT_EFFECTS_SPRING;
+var ICON_SPAN_VARIANTS = {
+  initial: { scale: 0.01 },
+  animate: { scale: 1 },
+  exit: { scale: 0.01 }
+};
+function TouchTarget() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 min-w-12 min-h-12 cursor-pointer pointer-events-none"
+    }
+  );
+}
+var SIZE_STYLES = {
+  xs: "h-8 w-8",
+  sm: "h-10 w-10",
+  md: "h-14 w-14",
+  lg: "h-24 w-24",
+  xl: "h-[8.5rem] w-[8.5rem]"
+};
+var SIZE_ICON = {
+  xs: { cls: "size-5", px: 20 },
+  sm: { cls: "size-6", px: 24 },
+  md: { cls: "size-6", px: 24 },
+  lg: { cls: "size-8", px: 32 },
+  xl: { cls: "size-10", px: 40 }
+};
+var RADIUS_MAP = {
+  xs: {
+    round: 16,
+    square: 12,
+    pressed: 8,
+    selectedRound: 12,
+    selectedSquare: 16
+  },
+  sm: {
+    round: 20,
+    square: 12,
+    pressed: 8,
+    selectedRound: 12,
+    selectedSquare: 20
+  },
+  md: {
+    round: 28,
+    square: 16,
+    pressed: 12,
+    selectedRound: 16,
+    selectedSquare: 28
+  },
+  lg: {
+    round: 48,
+    square: 28,
+    pressed: 16,
+    selectedRound: 28,
+    selectedSquare: 48
+  },
+  xl: {
+    round: 68,
+    square: 28,
+    pressed: 16,
+    selectedRound: 28,
+    selectedSquare: 68
+  }
+};
+var SIZE_OUTLINE_WIDTH = {
+  xs: "border",
+  sm: "border",
+  md: "border",
+  lg: "border-2",
+  xl: "border-[3px]"
+};
+var colorStyles = {
+  standard: {
+    default: "text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "text-m3-primary hover:bg-m3-primary/8 active:bg-m3-primary/12"
+  },
+  filled: {
+    default: "bg-m3-surface-container text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "bg-m3-primary text-m3-on-primary hover:brightness-95 active:brightness-90"
+  },
+  tonal: {
+    default: "bg-m3-secondary-container text-m3-on-secondary-container hover:bg-m3-on-secondary-container/8 active:bg-m3-on-secondary-container/12",
+    selected: "bg-m3-secondary text-m3-on-secondary hover:brightness-95 active:brightness-90"
+  },
+  outlined: {
+    default: "border-m3-outline-variant text-m3-on-surface-variant hover:bg-m3-on-surface-variant/8 active:bg-m3-on-surface-variant/12",
+    selected: "bg-m3-inverse-surface text-m3-inverse-on-surface border-transparent hover:brightness-95 active:brightness-90"
+  }
+};
+var baseIconButtonClasses = [
+  "relative shrink-0 inline-flex items-center justify-center",
+  "select-none cursor-pointer",
+  "transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+  "disabled:pointer-events-none disabled:opacity-[0.38]"
+];
+function resolveAnimateRadius(radiusConfig, shape, isToggle, isSelected) {
+  if (isToggle && isSelected) {
+    return shape === "round" ? radiusConfig.selectedRound : radiusConfig.selectedSquare;
+  }
+  return shape === "round" ? radiusConfig.round : radiusConfig.square;
+}
+function resolveDisabledBgClass(colorStyle) {
+  if (colorStyle === "filled" || colorStyle === "tonal") {
+    return "disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/[0.38]";
+  }
+  if (colorStyle === "outlined") {
+    return "disabled:text-m3-on-surface/[0.38] disabled:border-m3-on-surface/[0.12]";
+  }
+  return "disabled:text-m3-on-surface/[0.38]";
+}
+var IconButtonComponent = React17.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 = React17.useMemo(
+      () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
+      [isSelected, colorStyle]
+    );
+    const outlineWidthClass = React17.useMemo(
+      () => {
+        var _a3;
+        return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
+      },
+      [colorStyle, isSelected, size]
+    );
+    const disabledBgClass = React17.useMemo(
+      () => resolveDisabledBgClass(colorStyle),
+      [colorStyle]
+    );
+    const radiusConfig = (_a2 = RADIUS_MAP[size]) != null ? _a2 : RADIUS_MAP.sm;
+    const animateRadius = resolveAnimateRadius(
+      radiusConfig,
+      shape,
+      isToggle,
+      isSelected
+    );
+    const pressedRadius = radiusConfig.pressed;
+    const sizeIcon = (_b2 = SIZE_ICON[size]) != null ? _b2 : SIZE_ICON.sm;
+    const iconClass = sizeIcon.cls;
+    const defaultIconPx = sizeIcon.px;
+    const iconPx = iconSize != null ? iconSize : defaultIconPx;
+    const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const needsTouchTarget = size === "xs" || size === "sm";
+    const { ripples, onPointerDown, removeRipple } = useRippleState({
+      disabled: loading
+    });
+    const handleClick = React17.useCallback(
+      (e) => {
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+        onClick == null ? void 0 : onClick(e);
+      },
+      [loading, onClick]
+    );
+    const handleKeyDown = React17.useCallback(
+      (e) => {
+        if (loading) return;
+        if ((e.key === "Enter" || e.key === " ") && onClick) {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+        onKeyDown == null ? void 0 : onKeyDown(e);
+      },
+      [loading, onClick, onKeyDown]
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        "aria-pressed": isToggle ? isSelected : void 0,
+        "aria-label": ariaLabel,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style,
+        animate: { borderRadius: animateRadius },
+        whileTap: { borderRadius: pressedRadius },
+        transition: { borderRadius: SPRING_TRANSITION_FAST },
+        className: cn(
+          baseIconButtonClasses,
+          resolvedColorClass,
+          outlineWidthClass,
+          disabledBgClass,
+          "overflow-hidden",
+          SIZE_STYLES[size],
+          loading && "pointer-events-none opacity-75 cursor-not-allowed",
+          className
+        )
+      }, restProps), {
+        children: [
+          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              className: cn(
+                "flex items-center justify-center shrink-0",
+                iconSize != null ? void 0 : iconClass
+              ),
+              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+                  color: "currentColor",
+                  trackColor: "transparent",
+                  "aria-label": "Loading"
+                }
+              )
+            }),
+            "loading"
+          ) : /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              "aria-hidden": "true",
+              className: cn(
+                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+                iconSize != null ? void 0 : iconClass
+              ),
+              style: {
+                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+                width: isCustomSize ? `${iconSize}px` : void 0,
+                height: isCustomSize ? `${iconSize}px` : void 0
+              },
+              children
+            }),
+            "content"
+          ) })
+        ]
+      })
+    ) });
+  }
+);
+IconButtonComponent.displayName = "IconButton";
+var IconButton = React17.memo(IconButtonComponent);
+var VARIANT_FONT = {
+  outlined: "'Material Symbols Outlined'",
+  rounded: "'Material Symbols Rounded'",
+  sharp: "'Material Symbols Sharp'"
+};
+var IconComponent = React17.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 = React17.memo(IconComponent);
+var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
+var CalendarHeader = ({
+  displayedMonthMs,
+  activeSelector,
+  displayMode,
+  showModeToggle,
+  title,
+  headline,
+  locale,
+  canNavigatePrev,
+  canNavigateNext,
+  canNavigatePreviousYear,
+  canNavigateNextYear,
+  onPrev,
+  onNext,
+  onPreviousYear,
+  onNextYear,
+  onToggleSelector,
+  onToggleMode
+}) => {
+  const date = new Date(displayedMonthMs);
+  const monthLabel = new Intl.DateTimeFormat(locale.locale, {
+    month: "short",
+    timeZone: "UTC"
+  }).format(date);
+  const yearLabel = String(date.getUTCFullYear());
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[length:var(--md-typescale-label-large-size,14px)] font-[number:var(--md-typescale-label-large-weight,500)] text-m3-on-surface-variant", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-[length:var(--md-typescale-headline-large-size,32px)] font-[number:var(--md-typescale-headline-large-weight,400)] text-m3-on-surface-variant", children: headline }),
+    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "-mx-2 flex min-h-10 items-center gap-0.5", children: [
+      activeSelector === null && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: onPrev,
+          "aria-label": "Previous month",
+          disabled: !canNavigatePrev,
+          size: "sm",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onToggleSelector("month"),
+          "aria-expanded": activeSelector === "month",
+          "aria-controls": "date-picker-selection",
+          className: cn(
+            selectorClassName,
+            activeSelector === "month" && "bg-m3-on-surface/8"
+          ),
+          children: [
+            monthLabel,
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "arrow_drop_down",
+                className: cn(
+                  "text-[20px]",
+                  activeSelector === "month" && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      activeSelector === null && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: onNext,
+          "aria-label": "Next month",
+          disabled: !canNavigateNext,
+          size: "sm",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onPreviousYear,
+            "aria-label": "Previous year",
+            disabled: !canNavigatePreviousYear,
+            size: "sm",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleSelector("year"),
+            "aria-expanded": activeSelector === "year",
+            "aria-controls": "date-picker-selection",
+            className: cn(
+              selectorClassName,
+              activeSelector === "year" && "bg-m3-on-surface/8"
+            ),
+            children: [
+              yearLabel,
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "arrow_drop_down",
+                  className: cn(
+                    "text-[20px]",
+                    activeSelector === "year" && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onNextYear,
+            "aria-label": "Next year",
+            disabled: !canNavigateNextYear,
+            size: "sm",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
+          }
+        ),
+        showModeToggle && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onToggleMode,
+            "aria-label": "Switch to text input",
+            size: "sm",
+            children: /* @__PURE__ */ jsx(Icon, { name: "keyboard" })
+          }
+        )
+      ] })
+    ] }),
+    displayMode === "input" && showModeToggle && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onToggleMode,
+        "aria-label": "Switch to calendar",
+        size: "sm",
+        className: "self-end",
+        children: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: formatMonthYear(displayedMonthMs, locale) })
+  ] });
+};
+CalendarHeader.displayName = "CalendarHeader";
+var getMonthLabel = (month, locale) => new Intl.DateTimeFormat(locale, {
+  month: "long",
+  timeZone: "UTC"
+}).format(new Date(Date.UTC(2025, month, 1)));
+var MonthPickerList = ({
+  selectedMonth,
+  locale,
+  onMonthSelect
+}) => {
+  const selectedRef = React17.useRef(null);
+  React17.useEffect(() => {
+    var _a, _b;
+    (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
+      block: "center",
+      behavior: "instant"
+    });
+  }, []);
+  const months = React17.useMemo(
+    () => Array.from({ length: 12 }, (_, month) => month),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full min-h-[240px] overflow-y-auto py-2",
+      role: "listbox",
+      "aria-label": "Select month",
+      children: months.map((month) => {
+        const isSelected = month === selectedMonth;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: isSelected ? selectedRef : void 0,
+            type: "button",
+            role: "option",
+            "aria-selected": isSelected,
+            onClick: () => onMonthSelect(month),
+            className: cn(
+              "flex min-h-12 w-full items-center gap-4 px-6 text-left",
+              "text-[length:var(--md-typescale-body-large-size,16px)]",
+              "text-m3-on-surface transition-m3-fast-effects",
+              "hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary",
+              isSelected && "bg-m3-secondary-container text-m3-on-secondary-container"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-6", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
+              getMonthLabel(month, locale.locale)
+            ]
+          },
+          month
+        );
+      })
+    }
+  );
+};
+MonthPickerList.displayName = "MonthPickerList";
+var YearPickerList = ({
+  selectedYear,
+  yearRange,
+  selectableDates,
+  onYearSelect
+}) => {
+  const selectedRef = React17.useRef(null);
+  const years = React17.useMemo(() => {
+    const [min, max] = yearRange;
+    return Array.from({ length: max - min + 1 }, (_, index) => min + index);
+  }, [yearRange]);
+  React17.useEffect(() => {
+    var _a, _b;
+    (_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
+      block: "center",
+      behavior: "instant"
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full min-h-[240px] overflow-y-auto py-2",
+      role: "listbox",
+      "aria-label": "Select year",
+      children: years.map((year) => {
+        const isSelected = year === selectedYear;
+        const isSelectable = isYearSelectable(year, selectableDates);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: isSelected ? selectedRef : void 0,
+            type: "button",
+            role: "option",
+            "aria-selected": isSelected,
+            "aria-disabled": !isSelectable || void 0,
+            disabled: !isSelectable,
+            onClick: () => onYearSelect(year),
+            className: cn(
+              "flex min-h-12 w-full items-center gap-4 px-6 text-left",
+              "text-[length:var(--md-typescale-body-large-size,16px)]",
+              "text-m3-on-surface transition-m3-fast-effects",
+              "hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary",
+              isSelected && "bg-m3-secondary-container text-m3-on-secondary-container",
+              !isSelectable && "cursor-not-allowed opacity-[0.38]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-6", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
+              year
+            ]
+          },
+          year
+        );
+      })
+    }
+  );
+};
+YearPickerList.displayName = "YearPickerList";
+var formatInputDate = (ms) => new Intl.DateTimeFormat("en-US", {
+  month: "2-digit",
+  day: "2-digit",
+  year: "numeric",
+  timeZone: "UTC"
+}).format(new Date(ms));
+var DatePicker = ({
+  state,
+  showModeToggle = true,
+  title,
+  headline,
+  className
+}) => {
+  const {
+    selectedDateMs,
+    displayedMonthMs,
+    displayMode,
+    yearRange,
+    locale,
+    selectableDates,
+    selectDate,
+    navigateMonth: navigateMonth2,
+    navigateToMonth,
+    setDisplayMode
+  } = state;
+  const [activeSelector, setActiveSelector] = React17.useState(null);
+  const [slideDirection, setSlideDirection] = React17.useState(null);
+  const handlePrev = React17.useCallback(() => {
+    setSlideDirection("prev");
+    navigateMonth2("prev");
+  }, [navigateMonth2]);
+  const handleNext = React17.useCallback(() => {
+    setSlideDirection("next");
+    navigateMonth2("next");
+  }, [navigateMonth2]);
+  const handleYearSelect = React17.useCallback(
+    (year) => {
+      const d = new Date(displayedMonthMs);
+      navigateToMonth(year, d.getUTCMonth());
+      setActiveSelector(null);
+    },
+    [displayedMonthMs, navigateToMonth]
+  );
+  const handleMonthSelect = React17.useCallback(
+    (month) => {
+      const d = new Date(displayedMonthMs);
+      navigateToMonth(d.getUTCFullYear(), month);
+      setActiveSelector(null);
+    },
+    [displayedMonthMs, navigateToMonth]
+  );
+  const [inputValue, setInputValue] = React17.useState(
+    () => selectedDateMs !== null ? formatInputDate(selectedDateMs) : ""
+  );
+  const [inputError, setInputError] = React17.useState();
+  const handleInputCommit = React17.useCallback(
+    (ms) => {
+      if (ms === null && inputValue.length > 0) {
+        setInputError("Invalid date");
+      } else {
+        setInputError(void 0);
+        selectDate(ms);
+      }
+    },
+    [inputValue, selectDate]
+  );
+  const resolvedTitle = title != null ? title : "Select date";
+  const resolvedHeadline = headline != null ? headline : selectedDateMs !== null ? formatDate(selectedDateMs, locale, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC"
+  }) : "\u2014";
+  const currentYear = new Date(displayedMonthMs).getUTCFullYear();
+  const currentMonth = new Date(displayedMonthMs).getUTCMonth();
+  const computedAriaLabel = typeof resolvedTitle === "string" ? resolvedTitle : "Date picker";
+  const canNavigatePrev = getNavigableMonth(displayedMonthMs, "prev", yearRange, selectableDates) !== null;
+  const canNavigateNext = getNavigableMonth(displayedMonthMs, "next", yearRange, selectableDates) !== null;
+  const canNavigatePreviousYear = isMonthNavigable(
+    currentYear - 1,
+    yearRange,
+    selectableDates
+  );
+  const canNavigateNextYear = isMonthNavigable(
+    currentYear + 1,
+    yearRange,
+    selectableDates
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cn("flex flex-col select-none", className),
+      style: { width: "min(100%, 360px)" },
+      "aria-label": computedAriaLabel,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
+        /* @__PURE__ */ jsx(
+          CalendarHeader,
+          {
+            displayedMonthMs,
+            activeSelector,
+            displayMode,
+            showModeToggle,
+            title: resolvedTitle,
+            headline: resolvedHeadline,
+            locale,
+            canNavigatePrev,
+            canNavigateNext,
+            canNavigatePreviousYear,
+            canNavigateNextYear,
+            onPrev: handlePrev,
+            onNext: handleNext,
+            onPreviousYear: () => navigateToMonth(currentYear - 1, currentMonth),
+            onNextYear: () => navigateToMonth(currentYear + 1, currentMonth),
+            onToggleSelector: (selector) => setActiveSelector((active) => active === selector ? null : selector),
+            onToggleMode: () => {
+              setDisplayMode(displayMode === "picker" ? "input" : "picker");
+              setActiveSelector(null);
+              setInputError(void 0);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative flex-1 overflow-hidden",
+            style: { minHeight: "296px" },
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: displayMode === "input" ? (
+              // Input mode
+              /* @__PURE__ */ jsx(
+                DatePickerInput,
+                {
+                  value: inputValue,
+                  onChange: setInputValue,
+                  onCommit: handleInputCommit,
+                  error: inputError,
+                  locale: locale.locale
+                },
+                "input-mode"
+              )
+            ) : activeSelector === "month" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: "date-picker-selection",
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsx(
+                  MonthPickerList,
+                  {
+                    selectedMonth: currentMonth,
+                    locale,
+                    onMonthSelect: handleMonthSelect
+                  }
+                )
+              },
+              "month-list"
+            ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: "date-picker-selection",
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsx(
+                  YearPickerList,
+                  {
+                    selectedYear: currentYear,
+                    yearRange,
+                    selectableDates,
+                    onYearSelect: handleYearSelect
+                  }
+                )
+              },
+              "year-list"
+            ) : (
+              // Calendar grid
+              /* @__PURE__ */ jsx(
+                CalendarGrid,
+                {
+                  displayedMonthMs,
+                  slideDirection,
+                  locale,
+                  selectableDates,
+                  selectedMs: selectedDateMs,
+                  isRangePicker: false,
+                  onDaySelect: (ms) => {
+                    selectDate(ms);
+                    setInputValue(formatInputDate(ms));
+                  }
+                },
+                "calendar"
+              )
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+DatePicker.displayName = "DatePicker";
+
+// src/ui/date-time-pickers/date-picker/date-picker.tokens.ts
+var DP_COLORS = {
+  /** Dialog container — SurfaceContainerHigh */
+  container: "var(--md-sys-color-surface-container-high)",
+  /** Selected day background — Primary */
+  daySelected: "var(--md-sys-color-primary)",
+  /** Selected day text — OnPrimary */
+  daySelectedText: "var(--md-sys-color-on-primary)",
+  /** Today outline — Primary */
+  todayOutline: "var(--md-sys-color-primary)",
+  /** Today text — Primary */
+  todayText: "var(--md-sys-color-primary)",
+  /** Unselected day text — OnSurface */
+  dayText: "var(--md-sys-color-on-surface)",
+  /** Weekday header text — OnSurface */
+  weekdayText: "var(--md-sys-color-on-surface)",
+  /** Header headline + supporting text — OnSurfaceVariant */
+  headerText: "var(--md-sys-color-on-surface-variant)",
+  /** Range highlight background — SecondaryContainer */
+  rangeHighlight: "var(--md-sys-color-secondary-container)",
+  /** Range highlight text — OnSecondaryContainer */
+  rangeText: "var(--md-sys-color-on-secondary-container)",
+  /** Unselected year text — OnSurfaceVariant */
+  yearText: "var(--md-sys-color-on-surface-variant)",
+  /** Selected year background — Primary */
+  yearSelected: "var(--md-sys-color-primary)",
+  /** Selected year text — OnPrimary */
+  yearSelectedText: "var(--md-sys-color-on-primary)",
+  /** Scrim overlay */
+  scrim: "var(--md-sys-color-scrim)"
+};
+var DP_SHAPE = {
+  /** Dialog container — CornerExtraLarge = 28px */
+  container: "var(--md-sys-shape-corner-extra-large)",
+  /** Day cell — CornerFull = pill */
+  day: "var(--md-sys-shape-corner-full)",
+  /** Range start/end indicator — CornerFull */
+  rangeEndpoint: "var(--md-sys-shape-corner-full)",
+  /** Year chip — CornerFull */
+  year: "var(--md-sys-shape-corner-full)"
+};
+var DP_SIZE = {
+  /** Dialog container width */
+  containerWidth: 360,
+  /** Dialog container height */
+  containerHeight: 568,
+  /** Day cell width/height */
+  dayCell: 40,
+  /** Today border width */
+  todayOutlineWidth: 1,
+  /** Header container height */
+  headerHeight: 120,
+  /** Range picker header height */
+  rangeHeaderHeight: 128,
+  /** Year chip height */
+  yearChipHeight: 36,
+  /** Year chip width */
+  yearChipWidth: 72
+};
+var DP_CLASSES = {
+  /** Dialog container */
+  dialog: [
+    "bg-m3-surface-container-high",
+    "rounded-m3-xl",
+    "w-[360px]",
+    "overflow-hidden",
+    "elevation-3"
+  ].join(" "),
+  /** Day cell container */
+  dayCell: [
+    "relative flex items-center justify-center",
+    "w-10 h-10 rounded-m3-full",
+    "text-[length:var(--md-typescale-body-large-size,14px)]",
+    "font-[var(--md-typescale-body-large-weight,400)]",
+    "cursor-pointer select-none",
+    "transition-m3-fast-effects"
+  ].join(" "),
+  /** Day cell: selected state */
+  dayCellSelected: ["bg-m3-primary", "text-m3-on-primary"].join(" "),
+  /** Day cell: today state */
+  dayCellToday: [
+    "outline outline-1 outline-m3-primary",
+    "text-m3-primary"
+  ].join(" "),
+  /** Day cell: disabled state */
+  dayCellDisabled: "opacity-[0.38] pointer-events-none cursor-not-allowed",
+  /** Range highlight (between start and end) */
+  rangeHighlight: "bg-m3-secondary-container",
+  /** Weekday header row */
+  weekdayRow: "text-[length:var(--md-typescale-body-large-size,14px)] text-m3-on-surface"
+};
+var ScrollArea = React17.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      viewportClassName,
+      children,
+      type = "hover",
+      orientation = "vertical",
+      scrollHideDelay = 600,
+      viewportRef,
+      viewportProps
+    } = _b, props = __objRest(_b, [
+      "className",
+      "viewportClassName",
+      "children",
+      "type",
+      "orientation",
+      "scrollHideDelay",
+      "viewportRef",
+      "viewportProps"
+    ]);
+    const [isTouchDevice, setIsTouchDevice] = React17.useState(false);
+    React17.useEffect(() => {
+      if (typeof window !== "undefined") {
+        setIsTouchDevice(
+          "ontouchstart" in window || navigator.maxTouchPoints > 0
+        );
+      }
+    }, []);
+    const resolvedType = React17.useMemo(() => {
+      if (type === "hover" && isTouchDevice) {
+        return "scroll";
+      }
+      return type;
+    }, [type, isTouchDevice]);
+    const radixType = resolvedType === "none" ? "always" : resolvedType;
+    return /* @__PURE__ */ jsxs(
+      RadixScrollArea.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        type: radixType,
+        scrollHideDelay,
+        className: cn("relative overflow-hidden flex flex-col", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixScrollArea.Viewport,
+            __spreadProps(__spreadValues({
+              ref: viewportRef
+            }, viewportProps), {
+              className: cn(
+                "h-full w-full flex-1 min-h-0 min-w-0 rounded-[inherit]",
+                "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+                viewportClassName,
+                viewportProps == null ? void 0 : viewportProps.className
+              ),
+              children
+            })
+          ),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "vertical",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "horizontal",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(RadixScrollArea.Corner, { className: "bg-m3-surface-container" })
+        ]
+      })
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Scrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-all duration-300 ease-in-out",
+        "absolute z-50",
+        orientation === "vertical" && "right-0 top-0 bottom-0 w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent p-px",
+        "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        RadixScrollArea.Thumb,
+        {
+          className: cn(
+            "relative flex-1 rounded-full bg-m3-on-surface/25 transition-colors duration-200",
+            "hover:bg-m3-on-surface/40 active:bg-m3-on-surface/55",
+            "before:absolute before:left-1/2 before:top-1/2 before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2"
+          )
+        }
+      )
+    })
+  );
+});
+ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
+var ScrollAreaCorner = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Corner,
+    __spreadValues({
+      ref,
+      className: cn("bg-m3-surface-container", className)
+    }, props)
+  );
+});
+ScrollAreaCorner.displayName = "ScrollAreaCorner";
+var MD3_SPRING = DEFAULT_SPATIAL_SPRING;
+var MD3_OVERLAY_ANIM = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  exit: { opacity: 0, transition: { duration: 0.15, ease: "easeIn" } }
+};
+var MD3_CONTENT_ANIM = {
+  initial: { opacity: 0, scale: 0.85, y: 24 },
+  animate: { opacity: 1, scale: 1, y: 0, transition: MD3_SPRING },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 8,
+    transition: { duration: 0.15, ease: "easeIn" }
+  }
+};
+var MD3_FULLSCREEN_ANIM = {
+  initial: { y: "100%" },
+  animate: { y: 0, transition: MD3_SPRING },
+  exit: { y: "100%", transition: { duration: 0.2, ease: "easeIn" } }
+};
+var Dialog = ({ open, onOpenChange, children }) => /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange, children });
+Dialog.displayName = "Dialog";
+var DialogTrigger = RadixDialog.Trigger;
+DialogTrigger.displayName = "DialogTrigger";
+var DialogPortal = ({
+  open,
+  children
+}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React17.Children.toArray(children) : null }) });
+DialogPortal.displayName = "DialogPortal";
+var DialogOverlay = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
+    m.div,
+    __spreadValues({
+      className: cn("fixed inset-0 z-50 bg-black/32", className),
+      "aria-hidden": "true"
+    }, MD3_OVERLAY_ANIM)
+  ) }));
+});
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      asChild: true,
+      "aria-describedby": void 0
+    }, props), {
+      children: /* @__PURE__ */ jsxs(
+        m.div,
+        __spreadProps(__spreadValues({
+          className: cn(
+            "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+            "w-[calc(100%-2rem)] max-w-140",
+            "rounded-[28px] bg-m3-surface-container-high p-6",
+            "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+            className
+          ),
+          role: "dialog"
+        }, MD3_CONTENT_ANIM), {
+          children: [
+            children,
+            !hideCloseButton && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                colorStyle: "filled",
+                className: "absolute right-4 top-4",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
+              }
+            ) })
+          ]
+        })
+      )
+    })
+  );
+});
+DialogContent.displayName = "DialogContent";
+var DialogIcon = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex justify-center mb-4 text-m3-secondary", className),
+      "aria-hidden": "true"
+    }, props), {
+      children
+    })
+  );
+});
+DialogIcon.displayName = "DialogIcon";
+var DialogTitle = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Title,
+    __spreadValues({
+      ref,
+      asChild,
+      className: cn(
+        "text-[24px] leading-8 font-normal text-m3-on-surface tracking-[0em]",
+        className
+      )
+    }, props)
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Description,
+    __spreadValues({
+      ref,
+      asChild,
+      className: cn("text-sm text-m3-on-surface-variant leading-5", className)
+    }, props)
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogBody = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    __spreadProps(__spreadValues({
+      ref,
+      type: "hover",
+      dir,
+      className: cn("max-h-[calc(85dvh-200px)] -mx-6", className),
+      viewportClassName: "px-6"
+    }, props), {
+      children
+    })
+  );
+});
+DialogBody.displayName = "DialogBody";
+var DialogFullScreenContent = React17.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      title,
+      actionLabel,
+      onAction,
+      showDivider
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "title",
+      "actionLabel",
+      "onAction",
+      "showDivider"
+    ]);
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        asChild: true,
+        "aria-describedby": void 0
+      }, props), {
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          __spreadProps(__spreadValues({
+            className: cn(
+              "fixed inset-0 z-50 w-full h-full bg-m3-surface flex flex-col",
+              "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary",
+              className
+            ),
+            role: "dialog"
+          }, MD3_FULLSCREEN_ANIM), {
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface", children: [
+                /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", colorStyle: "filled", "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" }) }) }),
+                title && /* @__PURE__ */ jsx(DialogTitle, { className: "flex-1 text-[22px] leading-7 font-medium truncate pr-2", children: title }),
+                actionLabel && onAction && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onAction,
+                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap",
+                    children: actionLabel
+                  }
+                )
+              ] }),
+              showDivider && /* @__PURE__ */ jsx("hr", { className: "border-m3-outline-variant w-full shrink-0 m-0" }),
+              /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: "flex-1 w-full",
+                  viewportClassName: "p-6",
+                  children
+                }
+              )
+            ]
+          })
+        )
+      })
+    );
+  }
+);
+DialogFullScreenContent.displayName = "DialogFullScreenContent";
+var DatePickerDialog = ({
+  open,
+  onDismiss,
+  confirmButton,
+  dismissButton,
+  children,
+  className,
+  title = "Select date"
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onDismiss(), children: /* @__PURE__ */ jsxs(DialogPortal, { open, children: [
+    /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: "fixed inset-0 z-50 bg-m3-scrim/40",
+        initial: PICKER_OVERLAY_ANIM.initial,
+        animate: PICKER_OVERLAY_ANIM.animate,
+        exit: PICKER_OVERLAY_ANIM.exit,
+        onClick: onDismiss
+      },
+      "picker-overlay"
+    ) }),
+    /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      {
+        asChild: true,
+        forceMount: true,
+        onEscapeKeyDown: onDismiss,
+        onPointerDownOutside: (e) => e.preventDefault(),
+        "aria-modal": true,
+        "aria-describedby": void 0,
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            className: cn(
+              "fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              "flex flex-col",
+              "bg-m3-surface-container-high",
+              "rounded-m3-xl",
+              "overflow-hidden",
+              // Elevation Level 3
+              "elevation-3",
+              className
+            ),
+            style: { width: "min(calc(100vw - 32px), 360px)" },
+            initial: PICKER_CONTENT_ANIM.initial,
+            animate: PICKER_CONTENT_ANIM.animate,
+            exit: PICKER_CONTENT_ANIM.exit,
+            children: [
+              /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [
+                dismissButton,
+                confirmButton
+              ] })
+            ]
+          },
+          "picker-content"
+        )
+      }
+    )
+  ] }) });
+};
+DatePickerDialog.displayName = "DatePickerDialog";
+var DateRangePicker = ({
+  state,
+  showModeToggle = false,
+  title,
+  className
+}) => {
+  const {
+    selectedStartMs,
+    selectedEndMs,
+    displayedMonthMs,
+    displayMode,
+    yearRange,
+    locale,
+    selectableDates,
+    selectDate,
+    navigateMonth: navigateMonth2,
+    navigateToMonth,
+    setDisplayMode
+  } = state;
+  const [activeSelector, setActiveSelector] = React17.useState(null);
+  const [slideDirection, setSlideDirection] = React17.useState(null);
+  const handlePrev = React17.useCallback(() => {
+    setSlideDirection("prev");
+    navigateMonth2("prev");
+  }, [navigateMonth2]);
+  const handleNext = React17.useCallback(() => {
+    setSlideDirection("next");
+    navigateMonth2("next");
+  }, [navigateMonth2]);
+  const handleYearSelect = React17.useCallback(
+    (year) => {
+      const d = new Date(displayedMonthMs);
+      navigateToMonth(year, d.getUTCMonth());
+      setActiveSelector(null);
+    },
+    [displayedMonthMs, navigateToMonth]
+  );
+  const handleMonthSelect = React17.useCallback(
+    (month) => {
+      const d = new Date(displayedMonthMs);
+      navigateToMonth(d.getUTCFullYear(), month);
+      setActiveSelector(null);
+    },
+    [displayedMonthMs, navigateToMonth]
+  );
+  const formatShort = React17.useCallback(
+    (ms) => {
+      if (ms === null) return "\u2014";
+      return formatDate(ms, locale, {
+        month: "short",
+        day: "numeric",
+        timeZone: "UTC"
+      });
+    },
+    [locale]
+  );
+  const headline = `${formatShort(selectedStartMs)} \u2013 ${formatShort(selectedEndMs)}`;
+  const currentYear = new Date(displayedMonthMs).getUTCFullYear();
+  const currentMonth = new Date(displayedMonthMs).getUTCMonth();
+  const computedAriaLabel = typeof title === "string" ? title : "Date range picker";
+  const canNavigatePrev = getNavigableMonth(displayedMonthMs, "prev", yearRange, selectableDates) !== null;
+  const canNavigateNext = getNavigableMonth(displayedMonthMs, "next", yearRange, selectableDates) !== null;
+  const canNavigatePreviousYear = isMonthNavigable(
+    currentYear - 1,
+    yearRange,
+    selectableDates
+  );
+  const canNavigateNextYear = isMonthNavigable(
+    currentYear + 1,
+    yearRange,
+    selectableDates
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cn("flex flex-col select-none", className),
+      style: { width: "min(100%, 360px)" },
+      "aria-label": computedAriaLabel,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
+        /* @__PURE__ */ jsx(
+          CalendarHeader,
+          {
+            displayedMonthMs,
+            activeSelector,
+            displayMode,
+            showModeToggle,
+            title: title != null ? title : "Select dates",
+            headline,
+            locale,
+            canNavigatePrev,
+            canNavigateNext,
+            canNavigatePreviousYear,
+            canNavigateNextYear,
+            onPrev: handlePrev,
+            onNext: handleNext,
+            onPreviousYear: () => navigateToMonth(currentYear - 1, currentMonth),
+            onNextYear: () => navigateToMonth(currentYear + 1, currentMonth),
+            onToggleSelector: (selector) => setActiveSelector((active) => active === selector ? null : selector),
+            onToggleMode: () => {
+              setDisplayMode(displayMode === "picker" ? "input" : "picker");
+              setActiveSelector(null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative flex-1 overflow-hidden",
+            style: { minHeight: "296px" },
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeSelector === "month" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: "date-picker-selection",
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsx(
+                  MonthPickerList,
+                  {
+                    selectedMonth: currentMonth,
+                    locale,
+                    onMonthSelect: handleMonthSelect
+                  }
+                )
+              },
+              "month-list"
+            ) : activeSelector === "year" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: "date-picker-selection",
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsx(
+                  YearPickerList,
+                  {
+                    selectedYear: currentYear,
+                    yearRange,
+                    selectableDates,
+                    onYearSelect: handleYearSelect
+                  }
+                )
+              },
+              "year-list"
+            ) : /* @__PURE__ */ jsx(
+              CalendarGrid,
+              {
+                displayedMonthMs,
+                slideDirection,
+                locale,
+                selectableDates,
+                selectedMs: null,
+                selectedStartMs,
+                selectedEndMs,
+                isRangePicker: true,
+                onDaySelect: selectDate
+              },
+              "calendar"
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+DateRangePicker.displayName = "DateRangePicker";
+
+// src/ui/date-time-pickers/shared/types.ts
+var ALL_DATES_SELECTABLE = {
+  isSelectableDate: () => true,
+  isSelectableYear: () => true
+};
+
+// src/ui/date-time-pickers/date-picker/use-date-picker-state.ts
+var DEFAULT_YEAR_RANGE = [1900, 2100];
+var DEFAULT_DISPLAY_MODE = "picker";
+var useDatePickerState = (options) => {
+  var _a, _b, _c, _d, _e;
+  const initialSelectedMs = (_a = options == null ? void 0 : options.initialSelectedDateMs) != null ? _a : null;
+  const initialMonthMs = normalizeToMonthStart(
+    (_b = options == null ? void 0 : options.initialDisplayedMonthMs) != null ? _b : initialSelectedMs !== null ? initialSelectedMs : todayUTC()
+  );
+  const yearRange = (_c = options == null ? void 0 : options.yearRange) != null ? _c : DEFAULT_YEAR_RANGE;
+  const selectableDates = (_d = options == null ? void 0 : options.selectableDates) != null ? _d : ALL_DATES_SELECTABLE;
+  const initialDisplayMode = (_e = options == null ? void 0 : options.initialDisplayMode) != null ? _e : DEFAULT_DISPLAY_MODE;
+  const locale = resolveLocale(options == null ? void 0 : options.locale);
+  const [selectedDateMs, setSelectedDateMs] = useState(
+    initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
+  );
+  const [displayedMonthMs, setDisplayedMonthMs] = useState(initialMonthMs);
+  const [displayMode, setDisplayModeState] = useState(initialDisplayMode);
+  const selectDate = useCallback(
+    (ms) => {
+      if (ms === null) {
+        setSelectedDateMs(null);
+        return;
+      }
+      const normalized = startOfDayUTC(ms);
+      if (!selectableDates.isSelectableDate(normalized)) return;
+      setSelectedDateMs(normalized);
+      setDisplayedMonthMs(normalizeToMonthStart(normalized));
+    },
+    [selectableDates]
+  );
+  const navigateMonthAction = useCallback(
+    (direction) => {
+      setDisplayedMonthMs(
+        (prev) => {
+          var _a2;
+          return (_a2 = getNavigableMonth(prev, direction, yearRange, selectableDates)) != null ? _a2 : prev;
+        }
+      );
+    },
+    [yearRange, selectableDates]
+  );
+  const navigateToMonth = useCallback(
+    (year, month) => {
+      if (!isMonthNavigable(year, yearRange, selectableDates)) return;
+      setDisplayedMonthMs(Date.UTC(year, month, 1));
+    },
+    [yearRange, selectableDates]
+  );
+  const setDisplayMode = useCallback((mode) => {
+    setDisplayModeState(mode);
+  }, []);
+  const reset = useCallback(() => {
+    setSelectedDateMs(
+      initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
+    );
+    setDisplayedMonthMs(initialMonthMs);
+    setDisplayModeState(initialDisplayMode);
+  }, [initialSelectedMs, initialMonthMs, initialDisplayMode]);
+  return useMemo(
+    () => ({
+      selectedDateMs,
+      displayedMonthMs,
+      displayMode,
+      yearRange,
+      locale,
+      selectableDates,
+      selectDate,
+      navigateMonth: navigateMonthAction,
+      navigateToMonth,
+      setDisplayMode,
+      reset
+    }),
+    [
+      selectedDateMs,
+      displayedMonthMs,
+      displayMode,
+      yearRange,
+      locale,
+      selectableDates,
+      selectDate,
+      navigateMonthAction,
+      navigateToMonth,
+      setDisplayMode,
+      reset
+    ]
+  );
+};
+var DEFAULT_YEAR_RANGE2 = [1900, 2100];
+function rangeReducer(state, action) {
+  switch (action.type) {
+    case "SELECT": {
+      const { startMs, endMs } = state;
+      const ms = action.ms;
+      if (startMs === null) return { startMs: ms, endMs: null };
+      if (endMs !== null) return { startMs: ms, endMs: null };
+      if (ms > startMs) return { startMs, endMs: ms };
+      return { startMs: ms, endMs: null };
+    }
+    case "CLEAR":
+      return { startMs: null, endMs: null };
+    case "RESET":
+      return { startMs: action.startMs, endMs: action.endMs };
+    default:
+      return state;
+  }
+}
+var useDateRangePickerState = (options) => {
+  var _a, _b, _c, _d;
+  const initialStartMs = (options == null ? void 0 : options.initialStartMs) != null ? startOfDayUTC(options.initialStartMs) : null;
+  const initialEndMs = (options == null ? void 0 : options.initialEndMs) != null ? startOfDayUTC(options.initialEndMs) : null;
+  const initialMonthMs = normalizeToMonthStart(
+    (_a = options == null ? void 0 : options.initialDisplayedMonthMs) != null ? _a : initialStartMs !== null ? initialStartMs : todayUTC()
+  );
+  const yearRange = (_b = options == null ? void 0 : options.yearRange) != null ? _b : DEFAULT_YEAR_RANGE2;
+  const selectableDates = (_c = options == null ? void 0 : options.selectableDates) != null ? _c : ALL_DATES_SELECTABLE;
+  const initialDisplayMode = (_d = options == null ? void 0 : options.initialDisplayMode) != null ? _d : "picker";
+  const locale = resolveLocale(options == null ? void 0 : options.locale);
+  const [{ startMs: selectedStartMs, endMs: selectedEndMs }, dispatch] = useReducer(rangeReducer, {
+    startMs: initialStartMs,
+    endMs: initialEndMs
+  });
+  const [displayedMonthMs, setDisplayedMonthMs] = useState(initialMonthMs);
+  const [displayMode, setDisplayModeState] = useState(initialDisplayMode);
+  const selectDate = useCallback(
+    (ms) => {
+      const normalized = startOfDayUTC(ms);
+      if (!selectableDates.isSelectableDate(normalized)) return;
+      dispatch({ type: "SELECT", ms: normalized });
+    },
+    [selectableDates]
+  );
+  const clearRange = useCallback(() => {
+    dispatch({ type: "CLEAR" });
+  }, []);
+  const navigateMonthAction = useCallback(
+    (direction) => {
+      setDisplayedMonthMs(
+        (prev) => {
+          var _a2;
+          return (_a2 = getNavigableMonth(prev, direction, yearRange, selectableDates)) != null ? _a2 : prev;
+        }
+      );
+    },
+    [yearRange, selectableDates]
+  );
+  const navigateToMonth = useCallback(
+    (year, month) => {
+      if (!isMonthNavigable(year, yearRange, selectableDates)) return;
+      setDisplayedMonthMs(Date.UTC(year, month, 1));
+    },
+    [yearRange, selectableDates]
+  );
+  const setDisplayMode = useCallback((mode) => {
+    setDisplayModeState(mode);
+  }, []);
+  const reset = useCallback(() => {
+    dispatch({ type: "RESET", startMs: initialStartMs, endMs: initialEndMs });
+    setDisplayedMonthMs(initialMonthMs);
+    setDisplayModeState(initialDisplayMode);
+  }, [initialStartMs, initialEndMs, initialMonthMs, initialDisplayMode]);
+  return useMemo(
+    () => ({
+      selectedStartMs,
+      selectedEndMs,
+      displayedMonthMs,
+      displayMode,
+      yearRange,
+      locale,
+      selectableDates,
+      selectDate,
+      clearRange,
+      navigateMonth: navigateMonthAction,
+      navigateToMonth,
+      setDisplayMode,
+      reset
+    }),
+    [
+      selectedStartMs,
+      selectedEndMs,
+      displayedMonthMs,
+      displayMode,
+      yearRange,
+      locale,
+      selectableDates,
+      selectDate,
+      clearRange,
+      navigateMonthAction,
+      navigateToMonth,
+      setDisplayMode,
+      reset
+    ]
+  );
+};
+
+// src/ui/date-time-pickers/time-picker/time-picker.tokens.ts
+var TP_COLORS = {
+  // ── Clock Dial (TimePickerTokens) ─────────────────────────────────────────
+  /** Dial background — SurfaceContainerHighest */
+  clockDial: "var(--md-sys-color-surface-container-highest)",
+  /** Selected number text — OnPrimary */
+  clockDialSelected: "var(--md-sys-color-on-primary)",
+  /** Unselected number text — OnSurface */
+  clockDialUnselected: "var(--md-sys-color-on-surface)",
+  /** Selector handle circle — Primary */
+  selectorHandle: "var(--md-sys-color-primary)",
+  /** Selector track line — Primary */
+  selectorTrack: "var(--md-sys-color-primary)",
+  /** Selector center dot — Primary */
+  selectorCenter: "var(--md-sys-color-primary)",
+  // ── Container ─────────────────────────────────────────────────────────────
+  /** Picker/Input container — SurfaceContainerHigh */
+  container: "var(--md-sys-color-surface-container-high)",
+  // ── Time Selector Buttons (hour/minute display) ───────────────────────────
+  /** Selected selector (hour/min button) — PrimaryContainer */
+  timeSelectorSelected: "var(--md-sys-color-primary-container)",
+  /** Unselected selector — SurfaceContainerHighest */
+  timeSelectorUnselected: "var(--md-sys-color-surface-container-highest)",
+  /** Selected selector text — OnPrimaryContainer */
+  timeSelectorSelectedText: "var(--md-sys-color-on-primary-container)",
+  /** Unselected selector text — OnSurface */
+  timeSelectorUnselectedText: "var(--md-sys-color-on-surface)",
+  // ── Period Selector AM/PM (updated flag = true → PrimaryContainer) ────────
+  /** AM/PM selected background — TertiaryContainer */
+  periodSelected: "var(--md-sys-color-tertiary-container)",
+  /** AM/PM unselected background — transparent */
+  periodUnselected: "transparent",
+  /** AM/PM selected text — OnTertiaryContainer */
+  periodSelectedText: "var(--md-sys-color-on-tertiary-container)",
+  /** AM/PM unselected text — OnSurfaceVariant */
+  periodUnselectedText: "var(--md-sys-color-on-surface-variant)",
+  /** AM/PM border — Outline */
+  periodOutline: "var(--md-sys-color-outline)",
+  // ── Time Field (TimeInput mode, TimeInputTokens) ───────────────────────────
+  /** Time field default background — SurfaceContainerHighest */
+  timeField: "var(--md-sys-color-surface-container-highest)",
+  /** Time field focused background — PrimaryContainer */
+  timeFieldFocus: "var(--md-sys-color-primary-container)",
+  /** Time field focused text — OnPrimaryContainer */
+  timeFieldFocusText: "var(--md-sys-color-on-primary-container)",
+  /** Time field focus outline — Primary */
+  timeFieldFocusOutline: "var(--md-sys-color-primary)",
+  /** Time field default text — OnSurface */
+  timeFieldText: "var(--md-sys-color-on-surface)",
+  /** ":" separator — OnSurface */
+  separator: "var(--md-sys-color-on-surface)",
+  /** Headline label ("Select time") — OnSurfaceVariant */
+  headline: "var(--md-sys-color-on-surface-variant)"
+};
+var TP_CLASSES = {
+  // ── Container ─────────────────────────────────────────────────────────────
+  /** Main picker/input container */
+  container: "bg-m3-surface-container-high rounded-m3-xl select-none",
+  // ── Time Selector Buttons ─────────────────────────────────────────────────
+  /** Hour/minute selector button — selected */
+  timeSelectorSelected: "bg-m3-primary-container text-m3-on-primary-container",
+  /** Hour/minute selector button — unselected */
+  timeSelectorUnselected: "bg-m3-surface-container-highest text-m3-on-surface",
+  // ── Period Selector ───────────────────────────────────────────────────────
+  /** AM/PM button — selected */
+  periodSelected: "bg-m3-primary-container text-m3-on-primary-container",
+  /** AM/PM button — unselected */
+  periodUnselected: "bg-transparent text-m3-on-surface-variant",
+  // ── Time Field (input mode) ────────────────────────────────────────────────
+  /** Time input field — default */
+  timeField: "bg-m3-surface-container-highest text-m3-on-surface",
+  /** Time input field — focused */
+  timeFieldFocused: "bg-m3-primary-container text-m3-on-primary-container ring-2 ring-m3-primary",
+  // ── Clock Dial ─────────────────────────────────────────────────────────────
+  /** Clock dial background circle */
+  clockDial: "fill-[var(--md-sys-color-surface-container-highest)]",
+  /** Selected number on dial */
+  clockDialSelectedText: "fill-[var(--md-sys-color-on-primary)]",
+  /** Unselected number on dial */
+  clockDialUnselectedText: "fill-[var(--md-sys-color-on-surface)]",
+  /** Selector handle, track, center dot */
+  selectorPrimary: "fill-m3-primary stroke-m3-primary"
+};
+var TP_SHAPE = {
+  /** Dialog container — CornerExtraLarge = 28px */
+  container: "rounded-m3-xl",
+  /** Hour/minute selector button — CornerSmall = 8px */
+  timeSelector: "rounded-m3-sm",
+  /** Period (AM/PM) container — CornerSmall = 8px */
+  periodSelector: "rounded-m3-sm",
+  /** Clock dial circle — CornerFull */
+  clockDial: "rounded-m3-full",
+  /** Time field — CornerSmall = 8px */
+  timeField: "rounded-m3-sm"
+};
+var TP_SIZE = {
+  // ── Clock Dial (TimePickerTokens) ─────────────────────────────────────────
+  /** ClockDialContainerSize = 256dp */
+  clockDialSize: 256,
+  /** ClockDialSelectorHandleContainerSize = 48dp */
+  selectorHandleSize: 48,
+  /** ClockDialSelectorCenterContainerSize = 8dp */
+  selectorCenterSize: 8,
+  /** ClockDialSelectorTrackContainerWidth = 2dp */
+  selectorTrackWidth: 2,
+  // ── Time Selector (TimeSelectorContainer) ─────────────────────────────────
+  /** TimeSelectorContainerWidth = 96dp */
+  timeSelectorWidth: 96,
+  /** TimeSelectorContainerHeight = 80dp */
+  timeSelectorHeight: 80,
+  /** TimeSelector24HVerticalContainerWidth = 114dp (24h mode) */
+  timeSelector24hWidth: 114,
+  // ── Period Selector (Picker mode) ─────────────────────────────────────────
+  /** PeriodSelectorVerticalContainerWidth = 52dp */
+  periodSelectorVerticalWidth: 52,
+  /** PeriodSelectorVerticalContainerHeight = 80dp */
+  periodSelectorVerticalHeight: 80,
+  /** PeriodSelectorHorizontalContainerWidth = 216dp */
+  periodSelectorHorizWidth: 216,
+  /** PeriodSelectorHorizontalContainerHeight = 38dp */
+  periodSelectorHorizHeight: 38,
+  // ── Time Field (Input mode, TimeInputTokens) ───────────────────────────────
+  /** TimeFieldContainerWidth = 96dp */
+  timeFieldWidth: 96,
+  /** TimeFieldContainerHeight = 72dp */
+  timeFieldHeight: 72,
+  /** PeriodSelectorContainerHeight (Input mode) = 72dp */
+  periodInputHeight: 72,
+  /** PeriodSelectorContainerWidth (Input mode) = 52dp */
+  periodInputWidth: 52
+};
+var PeriodSelector = ({
+  state,
+  layout = "vertical",
+  style,
+  className
+}) => {
+  if (state.is24hour) return null;
+  const { isPm, isHourInputValid, setIsPm } = state;
+  const handleAmClick = () => {
+    if (isPm && isHourInputValid) {
+      setIsPm(false);
+    }
+  };
+  const handlePmClick = () => {
+    if (!isPm && isHourInputValid) {
+      setIsPm(true);
+    }
+  };
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-label": "AM/PM",
+      style: __spreadValues({
+        width: isVertical ? TP_SIZE.periodSelectorVerticalWidth : TP_SIZE.periodSelectorHorizWidth,
+        height: isVertical ? TP_SIZE.periodSelectorVerticalHeight : TP_SIZE.periodSelectorHorizHeight
+      }, style),
+      className: cn(
+        // Layout
+        isVertical ? "flex flex-col" : "flex flex-row",
+        "gap-0 overflow-hidden",
+        // Container shape (CornerSmall = rounded-m3-sm)
+        "rounded-m3-sm",
+        // Border (period selector outline — updated toggle uses border on container)
+        "border border-m3-outline",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          PeriodButton,
+          {
+            label: "AM",
+            isSelected: !isPm,
+            onClick: handleAmClick,
+            isFirst: true,
+            isVertical
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PeriodButton,
+          {
+            label: "PM",
+            isSelected: isPm,
+            onClick: handlePmClick,
+            isFirst: false,
+            isVertical
+          }
+        )
+      ]
+    }
+  );
+};
+PeriodSelector.displayName = "PeriodSelector";
+var PeriodButton = ({
+  label,
+  isSelected,
+  onClick,
+  isFirst,
+  isVertical
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": label,
+      onClick,
+      className: cn(
+        // Layout
+        "flex-1 flex items-center justify-center",
+        "min-w-0 min-h-0",
+        // Typography — TitleMedium equivalent (16px, medium weight)
+        "text-[16px] leading-none",
+        // Selected state — from PeriodToggleImpl (useUpdatedToggle = true)
+        isSelected ? [
+          "bg-m3-tertiary-container text-m3-on-tertiary-container",
+          "font-bold"
+        ] : ["bg-transparent text-m3-on-surface-variant", "font-medium"],
+        // Divider between buttons via border
+        !isFirst && isVertical && "border-t border-m3-outline",
+        !isFirst && !isVertical && "border-l border-m3-outline",
+        // Interaction
+        "cursor-pointer transition-colors transition-m3-fast-effects",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary"
+      ),
+      children: label
+    }
+  );
+};
+var TimeField = (props) => {
+  if (props.mode === "selector") {
+    return /* @__PURE__ */ jsx(SelectorField, __spreadValues({}, props));
+  }
+  return /* @__PURE__ */ jsx(InputField, __spreadValues({}, props));
+};
+TimeField.displayName = "TimeField";
+var SelectorField = ({
+  value,
+  field,
+  selection,
+  onActivate,
+  className
+}) => {
+  const isSelected = selection === field;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": field === "hour" ? "Hour" : "Minute",
+      "aria-pressed": isSelected,
+      onClick: onActivate,
+      style: {
+        width: TP_SIZE.timeSelectorWidth,
+        height: TP_SIZE.timeSelectorHeight
+      },
+      className: cn(
+        // Layout
+        "flex items-center justify-center",
+        "rounded-m3-sm",
+        // Typography — DisplayLarge equivalent (57px)
+        "text-[57px] font-normal leading-none tabular-nums",
+        // State
+        isSelected ? "bg-m3-primary-container text-m3-on-primary-container" : "bg-m3-surface-container-highest text-m3-on-surface",
+        // Interaction
+        "cursor-pointer transition-colors transition-m3-fast-effects",
+        "hover:opacity-90 active:opacity-80",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+        className
+      ),
+      children: String(value).padStart(2, "0")
+    }
+  );
+};
+var InputField = ({
+  value,
+  field,
+  isFocused,
+  isValid,
+  onChange,
+  onAutoAdvance,
+  onFocus,
+  onBlur,
+  className
+}) => {
+  const [inputText, setInputText] = React17.useState(
+    String(value).padStart(2, "0")
+  );
+  const inputRef = React17.useRef(null);
+  React17.useEffect(() => {
+    if (!isFocused) {
+      setInputText(String(value).padStart(2, "0"));
+    }
+  }, [value, isFocused]);
+  React17.useEffect(() => {
+    var _a, _b;
+    if (isFocused) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      (_b = inputRef.current) == null ? void 0 : _b.select();
+    }
+  }, [isFocused]);
+  const handleChange = (e) => {
+    const raw = e.target.value.replace(/\D/g, "");
+    const limited = raw.slice(-2);
+    setInputText(limited);
+    const numVal = parseInt(limited, 10);
+    if (!Number.isNaN(numVal)) {
+      onChange(numVal);
+      if (limited.length === 2) {
+        onAutoAdvance == null ? void 0 : onAutoAdvance();
+      }
+    } else if (limited === "") {
+      onChange(0);
+    }
+  };
+  const handleKeyDown = (e) => {
+    const allowed = [
+      "Backspace",
+      "Delete",
+      "Tab",
+      "ArrowLeft",
+      "ArrowRight",
+      "Enter"
+    ];
+    const isDigit = e.key >= "0" && e.key <= "9";
+    if (!isDigit && !allowed.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleFocus = (e) => {
+    e.target.select();
+    onFocus == null ? void 0 : onFocus();
+  };
+  const displayText = isFocused ? inputText : String(value).padStart(2, "0");
+  const isError = isFocused && !isValid && inputText.length === 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: TP_SIZE.timeFieldWidth,
+        height: TP_SIZE.timeFieldHeight
+      },
+      className: cn(
+        "relative flex items-center justify-center rounded-m3-sm",
+        // Background state
+        isFocused ? "bg-m3-primary-container" : "bg-m3-surface-container-highest",
+        // Error border
+        isError && "ring-2 ring-m3-error",
+        // Focus outline (non-error)
+        isFocused && !isError && "ring-2 ring-m3-primary",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          inputMode: "numeric",
+          value: displayText,
+          maxLength: 2,
+          "aria-label": field === "hour" ? "Hour" : "Minute",
+          "aria-invalid": isError,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur,
+          className: cn(
+            // Reset input styles
+            "w-full h-full bg-transparent border-none outline-none",
+            "text-center tabular-nums select-all",
+            // Typography — DisplayMedium equivalent (45px)
+            "text-[45px] font-normal leading-none",
+            // Color
+            isFocused ? "text-m3-on-primary-container" : "text-m3-on-surface",
+            // Caret
+            "caret-m3-primary"
+          )
+        }
+      )
+    }
+  );
+};
+var TimeInput = ({ state, className }) => {
+  const { is24hour, setHourInput, setMinuteInput, setSelection } = state;
+  const [focusedField, setFocusedField] = React17.useState(null);
+  const handleHourAutoAdvance = () => {
+    setFocusedField("minute");
+    setSelection("minute");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-m3-surface-container-high rounded-m3-xl",
+        "flex flex-col",
+        "p-6 gap-0 select-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "w-full text-left text-m3-on-surface-variant mb-5",
+            style: { fontSize: "12px", fontWeight: 500, letterSpacing: "0.1em" },
+            children: "Enter time"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              TimeField,
+              {
+                mode: "input",
+                value: state.hourInput,
+                field: "hour",
+                isFocused: focusedField === "hour",
+                isValid: state.isHourInputValid,
+                onChange: setHourInput,
+                onAutoAdvance: handleHourAutoAdvance,
+                onFocus: () => {
+                  setFocusedField("hour");
+                  setSelection("hour");
+                },
+                onBlur: () => setFocusedField(null)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-m3-on-surface-variant font-normal leading-none mt-1", children: "Hour" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-m3-on-surface text-center self-start",
+              style: {
+                fontSize: "57px",
+                fontWeight: 400,
+                lineHeight: 1,
+                width: 24,
+                // Căn theo height của input field
+                marginTop: `${(TP_SIZE.timeFieldHeight - 57) / 2}px`
+              },
+              "aria-hidden": true,
+              children: ":"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              TimeField,
+              {
+                mode: "input",
+                value: state.minuteInput,
+                field: "minute",
+                isFocused: focusedField === "minute",
+                isValid: state.isMinuteInputValid,
+                onChange: setMinuteInput,
+                onFocus: () => {
+                  setFocusedField("minute");
+                  setSelection("minute");
+                },
+                onBlur: () => setFocusedField(null)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-m3-on-surface-variant font-normal leading-none mt-1", children: "Minute" })
+          ] }),
+          !is24hour && /* @__PURE__ */ jsx(
+            PeriodSelector,
+            {
+              state,
+              layout: "vertical",
+              className: "ml-2 self-start",
+              style: {
+                height: TP_SIZE.periodInputHeight,
+                width: TP_SIZE.periodInputWidth
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+TimeInput.displayName = "TimeInput";
+var FULL_CIRCLE = Math.PI * 2;
+var QUARTER_CIRCLE = Math.PI / 2;
+var RADIANS_PER_HOUR = FULL_CIRCLE / 12;
+var RADIANS_PER_MINUTE = FULL_CIRCLE / 60;
+var OUTER_CIRCLE_RATIO = 101 / TP_SIZE.clockDialSize;
+var INNER_CIRCLE_RATIO = 69 / TP_SIZE.clockDialSize;
+var CENTER = TP_SIZE.clockDialSize / 2;
+var OUTER_RADIUS = TP_SIZE.clockDialSize * OUTER_CIRCLE_RATIO;
+var INNER_RADIUS = TP_SIZE.clockDialSize * INNER_CIRCLE_RATIO;
+var HANDLE_RADIUS = TP_SIZE.selectorHandleSize / 2;
+var SELECTOR_GAP = 4;
+var getPositionOnDial = (index, total, radius) => {
+  const angle = index / total * FULL_CIRCLE - QUARTER_CIRCLE;
+  return {
+    x: CENTER + radius * Math.cos(angle),
+    y: CENTER + radius * Math.sin(angle)
+  };
+};
+var buildHour12Numbers = () => Array.from({ length: 12 }, (_, i) => {
+  const hour = i === 0 ? 12 : i;
+  const pos = getPositionOnDial(i, 12, OUTER_RADIUS);
+  return __spreadProps(__spreadValues({ value: hour }, pos), { radius: OUTER_RADIUS });
+});
+var buildHour24Numbers = () => {
+  const outer = Array.from({ length: 12 }, (_, i) => {
+    const hour = i;
+    const pos = getPositionOnDial(i, 12, OUTER_RADIUS);
+    return __spreadProps(__spreadValues({ value: hour }, pos), { radius: OUTER_RADIUS });
+  });
+  const inner = Array.from({ length: 12 }, (_, i) => {
+    const hour = i + 12;
+    const pos = getPositionOnDial(i, 12, INNER_RADIUS);
+    return __spreadProps(__spreadValues({ value: hour }, pos), { radius: INNER_RADIUS });
+  });
+  return [...outer, ...inner];
+};
+var buildMinuteNumbers = () => Array.from({ length: 12 }, (_, i) => {
+  const minute = i * 5;
+  const pos = getPositionOnDial(i, 12, OUTER_RADIUS);
+  return __spreadProps(__spreadValues({ value: minute }, pos), { radius: OUTER_RADIUS });
+});
+var getAngleFromPointer = (x, y) => {
+  return Math.atan2(y - CENTER, x - CENTER);
+};
+var normalizeAngle = (angle) => {
+  let a = angle % FULL_CIRCLE;
+  if (a < 0) a += FULL_CIRCLE;
+  return a;
+};
+var angleToHour12 = (angle) => {
+  const hourOffset = RADIANS_PER_HOUR / 2;
+  const totalOffset = hourOffset + QUARTER_CIRCLE;
+  const hour = Math.round((angle + totalOffset) / RADIANS_PER_HOUR) % 12;
+  return hour === 0 ? 12 : hour;
+};
+var angleToMinute = (angle, snap = true) => {
+  if (snap) {
+    const minuteOffset = RADIANS_PER_MINUTE / 2;
+    const totalOffset = minuteOffset + QUARTER_CIRCLE;
+    const raw2 = Math.round((angle + totalOffset) / RADIANS_PER_MINUTE) % 60;
+    return raw2 < 0 ? raw2 + 60 : raw2;
+  }
+  const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
+  const raw = Math.round(normalized / FULL_CIRCLE * 60) % 60;
+  return raw < 0 ? raw + 60 : raw;
+};
+var getSelectorPosition = (angle, selection, is24hour, isPm) => {
+  const useInner = is24hour && isPm && selection === "hour";
+  const baseRadius = useInner ? INNER_RADIUS : OUTER_RADIUS;
+  const length = Math.min(baseRadius, CENTER - HANDLE_RADIUS - SELECTOR_GAP);
+  return {
+    x: CENTER + length * Math.cos(angle),
+    y: CENTER + length * Math.sin(angle)
+  };
+};
+var valueToAngle = (value, selection) => {
+  if (selection === "hour") {
+    return RADIANS_PER_HOUR * (value % 12) - QUARTER_CIRCLE;
+  }
+  return RADIANS_PER_MINUTE * value - QUARTER_CIRCLE;
+};
+var ClockDial = ({
+  state,
+  autoSwitchToMinute = true,
+  style,
+  className
+}) => {
+  const {
+    selection,
+    is24hour,
+    isPm,
+    hour,
+    minute,
+    setHour,
+    setMinute,
+    setSelection
+  } = state;
+  const displayAngle = React17.useMemo(() => {
+    if (selection === "hour") {
+      return valueToAngle(hour, "hour");
+    }
+    return valueToAngle(minute, "minute");
+  }, [selection, hour, minute]);
+  const selectorPos = React17.useMemo(
+    () => getSelectorPosition(displayAngle, selection, is24hour, isPm),
+    [displayAngle, selection, is24hour, isPm]
+  );
+  const trackEnd = React17.useMemo(() => {
+    const dx = selectorPos.x - CENTER;
+    const dy = selectorPos.y - CENTER;
+    const length = Math.hypot(dx, dy);
+    if (length === 0) return selectorPos;
+    return {
+      x: selectorPos.x - dx / length * HANDLE_RADIUS,
+      y: selectorPos.y - dy / length * HANDLE_RADIUS
+    };
+  }, [selectorPos]);
+  const numbers = React17.useMemo(() => {
+    if (selection === "minute") return buildMinuteNumbers();
+    if (is24hour) return buildHour24Numbers();
+    return buildHour12Numbers();
+  }, [selection, is24hour]);
+  const isDragging = React17.useRef(false);
+  const svgRef = React17.useRef(null);
+  const getSVGPoint = (e) => {
+    const svg = svgRef.current;
+    if (!svg) return { x: e.clientX, y: e.clientY };
+    const rect = svg.getBoundingClientRect();
+    const scaleX = TP_SIZE.clockDialSize / rect.width;
+    const scaleY = TP_SIZE.clockDialSize / rect.height;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  };
+  const handlePosition = (x, y, isPointerUp = false) => {
+    const angle = getAngleFromPointer(x, y);
+    if (selection === "hour") {
+      let newHour;
+      if (is24hour) {
+        const dist = Math.sqrt((x - CENTER) ** 2 + (y - CENTER) ** 2);
+        const isPmHour = dist < (OUTER_RADIUS + INNER_RADIUS) / 2;
+        const hour12 = angleToHour12(angle);
+        newHour = isPmHour ? hour12 + 12 : hour12 === 12 ? 0 : hour12;
+      } else {
+        const hour12 = angleToHour12(angle);
+        newHour = hour12 === 12 ? isPm ? 12 : 0 : isPm ? hour12 + 12 : hour12;
+      }
+      setHour(newHour);
+      if (isPointerUp && autoSwitchToMinute) {
+        setTimeout(() => setSelection("minute"), 100);
+      }
+    } else {
+      const newMinute = angleToMinute(angle, !isDragging.current);
+      setMinute(newMinute);
+    }
+  };
+  const handlePointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    isDragging.current = false;
+    const { x, y } = getSVGPoint(e);
+    handlePosition(x, y);
+  };
+  const handlePointerMove = (e) => {
+    if (e.buttons === 0) return;
+    isDragging.current = true;
+    const { x, y } = getSVGPoint(e);
+    handlePosition(x, y);
+  };
+  const handlePointerUp = (e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    const { x, y } = getSVGPoint(e);
+    handlePosition(x, y, true);
+    isDragging.current = false;
+  };
+  const getDisplayHour = () => {
+    if (is24hour) return hour;
+    return hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+  };
+  const isNumberHighlighted = (num) => {
+    if (selection === "hour") return num.value === getDisplayHour();
+    const dx = selectorPos.x - num.x;
+    const dy = selectorPos.y - num.y;
+    return Math.sqrt(dx * dx + dy * dy) < HANDLE_RADIUS;
+  };
+  const isNumberAtHandle = (num) => {
+    if (selection === "hour") return num.value === getDisplayHour();
+    return false;
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      width: TP_SIZE.clockDialSize,
+      height: TP_SIZE.clockDialSize,
+      viewBox: `0 0 ${TP_SIZE.clockDialSize} ${TP_SIZE.clockDialSize}`,
+      role: "img",
+      "aria-label": `Clock face, ${selection === "hour" ? "select hour" : "select minute"}`,
+      style,
+      overflow: "visible",
+      className: cn("touch-none select-none cursor-pointer", className),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: CENTER, cy: CENTER, r: CENTER, fill: TP_COLORS.clockDial }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: CENTER,
+            y1: CENTER,
+            x2: trackEnd.x,
+            y2: trackEnd.y,
+            stroke: TP_COLORS.selectorTrack,
+            strokeWidth: TP_SIZE.selectorTrackWidth,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: selectorPos.x,
+            cy: selectorPos.y,
+            r: HANDLE_RADIUS,
+            fill: TP_COLORS.selectorHandle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: CENTER,
+            cy: CENTER,
+            r: TP_SIZE.selectorCenterSize / 2,
+            fill: TP_COLORS.selectorCenter
+          }
+        ),
+        numbers.map((num) => {
+          const highlighted = isNumberHighlighted(num);
+          const atHandle = isNumberAtHandle(num);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: atHandle ? selectorPos.x : num.x,
+              y: atHandle ? selectorPos.y : num.y,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize: is24hour && num.radius === INNER_RADIUS ? 12 : 14,
+              fontWeight: highlighted ? "600" : "400",
+              fill: highlighted ? TP_COLORS.clockDialSelected : TP_COLORS.clockDialUnselected,
+              "aria-label": String(num.value),
+              className: "pointer-events-none",
+              children: selection === "hour" && is24hour ? String(num.value).padStart(2, "0") : num.value
+            },
+            `${num.value}-${num.radius}`
+          );
+        })
+      ]
+    }
+  );
+};
+ClockDial.displayName = "ClockDial";
+var getHourForDisplay = (state) => {
+  const { hour, is24hour, isPm } = state;
+  if (is24hour) return hour;
+  if (hour % 12 === 0) return 12;
+  return isPm ? hour - 12 : hour;
+};
+var getAutoLayout = () => {
+  if (typeof window === "undefined") return "vertical";
+  const { innerHeight, innerWidth } = window;
+  return innerWidth >= 600 && innerHeight >= 300 && innerWidth >= innerHeight ? "horizontal" : "vertical";
+};
+var useResolvedLayout = (layout) => {
+  const [autoLayout, setAutoLayout] = React17.useState("vertical");
+  React17.useEffect(() => {
+    if (layout !== "auto") return;
+    const updateLayout = () => setAutoLayout(getAutoLayout());
+    updateLayout();
+    window.addEventListener("resize", updateLayout);
+    return () => window.removeEventListener("resize", updateLayout);
+  }, [layout]);
+  return layout === "auto" ? autoLayout : layout;
+};
+var ClockDisplay = ({ state, layout }) => {
+  const { selection, setSelection, is24hour } = state;
+  const periodLayout = layout === "horizontal" ? "horizontal" : "vertical";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex",
+        layout === "horizontal" ? "flex-col items-start justify-center" : "flex-row items-center justify-center"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            TimeField,
+            {
+              mode: "selector",
+              value: getHourForDisplay(state),
+              field: "hour",
+              selection,
+              onActivate: () => setSelection("hour")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "w-6 text-center text-[57px] leading-none font-normal text-m3-on-surface",
+              children: ":"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TimeField,
+            {
+              mode: "selector",
+              value: state.minute,
+              field: "minute",
+              selection,
+              onActivate: () => setSelection("minute")
+            }
+          )
+        ] }),
+        !is24hour ? /* @__PURE__ */ jsx(
+          PeriodSelector,
+          {
+            state,
+            layout: periodLayout,
+            className: layout === "horizontal" ? "mt-3" : "ml-3"
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var TimePicker = ({
+  state,
+  layout = "auto",
+  className
+}) => {
+  const resolvedLayout = useResolvedLayout(layout);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-time-picker-layout": resolvedLayout,
+      className: cn(
+        "time-picker rounded-m3-xl bg-m3-surface-container-high p-6 select-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-5 text-left text-[12px] font-medium tracking-[0.1em] text-m3-on-surface-variant", children: "Select time" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              resolvedLayout === "horizontal" ? "flex-row items-center gap-[52px]" : "flex-col items-center gap-9"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ClockDisplay, { state, layout: resolvedLayout }),
+              /* @__PURE__ */ jsx(
+                ClockDial,
+                {
+                  state,
+                  autoSwitchToMinute: true,
+                  style: {
+                    width: TP_SIZE.clockDialSize,
+                    height: TP_SIZE.clockDialSize
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+TimePicker.displayName = "TimePicker";
+var TimePickerDialog = ({
+  open,
+  onDismiss,
+  confirmButton,
+  dismissButton,
+  modeToggleButton,
+  title = "Select time",
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onDismiss(), children: /* @__PURE__ */ jsxs(DialogPortal, { open, children: [
+    /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: "fixed inset-0 z-50 bg-m3-scrim/40",
+        initial: PICKER_OVERLAY_ANIM.initial,
+        animate: PICKER_OVERLAY_ANIM.animate,
+        exit: PICKER_OVERLAY_ANIM.exit,
+        onClick: onDismiss
+      },
+      "time-picker-overlay"
+    ) }),
+    /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      {
+        asChild: true,
+        forceMount: true,
+        onEscapeKeyDown: onDismiss,
+        onPointerDownOutside: (e) => e.preventDefault(),
+        "aria-modal": true,
+        "aria-describedby": void 0,
+        children: /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            className: cn(
+              // Positioning
+              "fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              // Layout
+              "flex flex-col",
+              // MD3 Time Picker container tokens
+              "bg-m3-surface-container-high",
+              "rounded-m3-xl",
+              "overflow-hidden",
+              "max-w-[calc(100vw-32px)] max-h-[calc(100dvh-32px)]",
+              // Elevation Level 3
+              "elevation-3",
+              className
+            ),
+            initial: PICKER_CONTENT_ANIM.initial,
+            animate: PICKER_CONTENT_ANIM.animate,
+            exit: PICKER_CONTENT_ANIM.exit,
+            children: [
+              /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center gap-2 px-6 py-2", children: [
+                modeToggleButton && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: modeToggleButton }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                dismissButton,
+                confirmButton
+              ] })
+            ]
+          },
+          "time-picker-content"
+        )
+      }
+    )
+  ] }) });
+};
+TimePickerDialog.displayName = "TimePickerDialog";
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
+var isValidMinuteInput = (m11) => m11 >= 0 && m11 <= 59;
+var to24Hour = (hour12, isPm) => {
+  if (isPm) {
+    return hour12 === 12 ? 12 : hour12 + 12;
+  }
+  return hour12 === 12 ? 0 : hour12;
+};
+var to12Hour = (hour24) => {
+  if (hour24 === 0) return 12;
+  if (hour24 > 12) return hour24 - 12;
+  return hour24;
+};
+var useTimePickerState = (options) => {
+  var _a, _b, _c;
+  const initialHour = clamp((_a = options == null ? void 0 : options.initialHour) != null ? _a : 0, 0, 23);
+  const initialMinute = clamp((_b = options == null ? void 0 : options.initialMinute) != null ? _b : 0, 0, 59);
+  const is24hour = (_c = options == null ? void 0 : options.is24hour) != null ? _c : false;
+  const [hour, setHourState] = useState(initialHour);
+  const [minute, setMinuteState] = useState(initialMinute);
+  const [hourInput, setHourInputState] = useState(
+    is24hour ? initialHour : to12Hour(initialHour)
+  );
+  const [minuteInput, setMinuteInputState] = useState(initialMinute);
+  const [selection, setSelectionState] = useState("hour");
+  const isPm = hour >= 12;
+  const isHourInputValid = isValidHourInput(hourInput, is24hour);
+  const isMinuteInputValid = isValidMinuteInput(minuteInput);
+  const isInputValid = isHourInputValid && isMinuteInputValid;
+  const setHour = useCallback(
+    (h) => {
+      const clamped = clamp(h, 0, 23);
+      setHourState(clamped);
+      setHourInputState(is24hour ? clamped : to12Hour(clamped));
+    },
+    [is24hour]
+  );
+  const setMinute = useCallback((m11) => {
+    const clamped = clamp(m11, 0, 59);
+    setMinuteState(clamped);
+    setMinuteInputState(clamped);
+  }, []);
+  const setHourInput = useCallback(
+    (h) => {
+      setHourInputState(h);
+      if (isValidHourInput(h, is24hour)) {
+        const h24 = is24hour ? h : to24Hour(h, isPm);
+        setHourState(clamp(h24, 0, 23));
+      }
+    },
+    [is24hour, isPm]
+  );
+  const setMinuteInput = useCallback((m11) => {
+    setMinuteInputState(m11);
+    if (isValidMinuteInput(m11)) {
+      setMinuteState(m11);
+    }
+  }, []);
+  const setSelection = useCallback((mode) => {
+    setSelectionState(mode);
+  }, []);
+  const setIsPm = useCallback((pm) => {
+    setHourState((prev) => {
+      const wasAlreadyPm = prev >= 12;
+      if (pm === wasAlreadyPm) return prev;
+      const newHour = pm ? prev + 12 : prev - 12;
+      const clamped = clamp(newHour, 0, 23);
+      setHourInputState(to12Hour(clamped));
+      return clamped;
+    });
+  }, []);
+  const reset = useCallback(() => {
+    setHourState(initialHour);
+    setMinuteState(initialMinute);
+    setHourInputState(is24hour ? initialHour : to12Hour(initialHour));
+    setMinuteInputState(initialMinute);
+    setSelectionState("hour");
+  }, [initialHour, initialMinute, is24hour]);
+  return useMemo(
+    () => ({
+      hour,
+      minute,
+      hourInput,
+      minuteInput,
+      is24hour,
+      selection,
+      isInputValid,
+      isHourInputValid,
+      isMinuteInputValid,
+      isPm,
+      setHour,
+      setMinute,
+      setHourInput,
+      setMinuteInput,
+      setSelection,
+      setIsPm,
+      reset
+    }),
+    [
+      hour,
+      minute,
+      hourInput,
+      minuteInput,
+      is24hour,
+      selection,
+      isInputValid,
+      isHourInputValid,
+      isMinuteInputValid,
+      isPm,
+      setHour,
+      setMinute,
+      setHourInput,
+      setMinuteInput,
+      setSelection,
+      setIsPm,
+      reset
+    ]
+  );
+};
+
+export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimePicker, TimePickerDialog, useDatePickerState, useDateRangePickerState, useTimePickerState };
+//# sourceMappingURL=pickers.mjs.map
+//# sourceMappingURL=pickers.mjs.map