react-os-shell 4.63.0 → 4.67.0

package/dist/{chunk-CWA27IGB.js → chunk-B3IYV7JN.js}

@@ -1,7 +1,7 @@
 import { Breadcrumbs } from './chunk-HNH7FOYB.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
 import { useIsMobile, PopupMenu, PopupMenuItem, useShellPrefs } from './chunk-ZCDFNZQS.js';
-import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-OXLLRKBC.js';
+import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-CDR2Q64Q.js';
 import { glassStyle } from './chunk-3CUSBZWG.js';
 import { forwardRef, useId, useCallback, useState, useRef, useEffect, createContext, useLayoutEffect, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -164,7 +164,7 @@ function inputClasses(opts) {
   return [shape, opts?.invalid ? INPUT_INVALID : "", INPUT_DISABLED, opts?.className ?? ""].filter(Boolean).join(" ");
 }
 var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size, className = "", ...rest }, ref) {
-  const pad4 = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
+  const pad5 = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
   const field = (
     // `inputMode` needs no plumbing — it rides the native spread onto the
     // <input>, which is how a till sets inputMode="none" to keep the OS
@@ -174,7 +174,7 @@ var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size
       {
         ref,
         "aria-invalid": invalid || void 0,
-        className: inputClasses({ invalid, size, className: [pad4, className].filter(Boolean).join(" ") }),
+        className: inputClasses({ invalid, size, className: [pad5, className].filter(Boolean).join(" ") }),
         ...rest
       }
     )
@@ -282,7 +282,8 @@ function useAnchoredPosition(triggerRef, open) {
       const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT, 160) && spaceAbove > spaceBelow;
       const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT, placeAbove ? spaceAbove : spaceBelow));
       const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, window.innerWidth - rect.width - VIEWPORT_MARGIN));
-      const next = { left, minWidth: rect.width, maxHeight };
+      const width = Math.min(rect.width, window.innerWidth - 2 * VIEWPORT_MARGIN);
+      const next = { left, width, maxHeight };
       if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP;
       else next.top = rect.bottom + MENU_GAP;
       setPos(next);
@@ -497,12 +498,12 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
           ref: listRef,
           id: listboxId,
           role: "listbox",
-          className: "fixed z-[400] overflow-y-auto rounded-2xl py-1",
+          className: "fixed z-[10000] overflow-y-auto rounded-2xl py-1",
           style: {
             left: menuPos?.left,
             top: menuPos?.top,
             bottom: menuPos?.bottom,
-            minWidth: menuPos?.minWidth,
+            width: menuPos?.width,
             maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT,
             visibility: menuPos ? void 0 : "hidden",
             ...glassStyle()
@@ -1098,6 +1099,273 @@ function MediaUploadGrid({
     }
   ) });
 }
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var DAY_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var pad = (n) => String(n).padStart(2, "0");
+function toKey(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function fromKey(key) {
+  if (!key) return null;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+var monthKey = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+var YEARS_PER_PAGE = 12;
+var yearPageStart = (y) => Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+function monthStart(key) {
+  const m = /^(\d{4})-(\d{2})$/.exec(key);
+  return m ? new Date(Number(m[1]), Number(m[2]) - 1, 1) : /* @__PURE__ */ new Date();
+}
+function buildCells(view, weekStartsOn) {
+  const first = new Date(view.getFullYear(), view.getMonth(), 1);
+  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = new Date(first.getFullYear(), first.getMonth(), 1 - lead);
+  return Array.from({ length: 42 }, (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
+}
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var addMonths = (d, n) => {
+  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+};
+function Calendar({
+  value,
+  endValue,
+  mode = "single",
+  onSelect,
+  min,
+  max,
+  month,
+  defaultMonth,
+  onMonthChange,
+  weekStartsOn = 0,
+  quickJump = true,
+  "aria-label": ariaLabel,
+  className = ""
+}) {
+  const selected = fromKey(value);
+  const today = /* @__PURE__ */ new Date();
+  const todayKey = toKey(today);
+  const [innerMonth, setInnerMonth] = useState(() => {
+    if (defaultMonth) return defaultMonth;
+    if (selected) return monthKey(selected);
+    const here = monthKey(today);
+    if (min && here < min.slice(0, 7)) return min.slice(0, 7);
+    if (max && here > max.slice(0, 7)) return max.slice(0, 7);
+    return here;
+  });
+  const viewMonth = month ?? innerMonth;
+  const view = monthStart(viewMonth);
+  const [active, setActive] = useState(() => value ?? todayKey);
+  const gridRef = useRef(null);
+  const shouldFocus = useRef(false);
+  const [panel, setPanel] = useState("days");
+  const cells = useMemo(() => buildCells(view, weekStartsOn), [viewMonth, weekStartsOn]);
+  const outOfRange = (key) => !!min && key < min || !!max && key > max;
+  const activeInView = cells.some((c) => toKey(c) === active);
+  const fallbackActive = toKey(cells.find((c) => c.getMonth() === view.getMonth()) ?? cells[0]);
+  const activeKey = activeInView ? active : fallbackActive;
+  useEffect(() => {
+    if (!shouldFocus.current) return;
+    shouldFocus.current = false;
+    gridRef.current?.querySelector('[data-active="true"]')?.focus();
+  }, [activeKey, viewMonth]);
+  const pageBy = (n) => {
+    if (panel === "years") return new Date(view.getFullYear() + n * YEARS_PER_PAGE, view.getMonth(), 1);
+    if (panel === "months") return new Date(view.getFullYear() + n, view.getMonth(), 1);
+    return addMonths(view, n);
+  };
+  const pageBack = () => pageBy(-1);
+  const pageForward = () => pageBy(1);
+  const goToMonth = (next) => {
+    const key = monthKey(next);
+    if (month === void 0) setInnerMonth(key);
+    onMonthChange?.(key);
+  };
+  const moveTo = (next) => {
+    shouldFocus.current = true;
+    setActive(toKey(next));
+    if (monthKey(next) !== viewMonth) goToMonth(next);
+  };
+  const onKeyDown = (e) => {
+    const current = fromKey(activeKey) ?? today;
+    const step = {
+      ArrowLeft: () => addDays(current, -1),
+      ArrowRight: () => addDays(current, 1),
+      ArrowUp: () => addDays(current, -7),
+      ArrowDown: () => addDays(current, 7),
+      // Home and End are the week, not the month: the grid's rows are weeks, and
+      // this is what the ARIA date-grid pattern asks for.
+      Home: () => addDays(current, -((current.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(current, 6 - (current.getDay() - weekStartsOn + 7) % 7),
+      PageUp: () => addMonths(current, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(current, e.shiftKey ? 12 : 1)
+    };
+    if (step[e.key]) {
+      e.preventDefault();
+      moveTo(step[e.key]());
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!outOfRange(activeKey)) onSelect(activeKey);
+    }
+  };
+  const inRange = (key) => {
+    if (mode !== "range" || !value || !endValue) return false;
+    return key > value && key < endValue;
+  };
+  const label = ariaLabel ?? `${MONTH_NAMES[view.getMonth()]} ${view.getFullYear()}`;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": panel === "years" ? "Previous years" : panel === "months" ? "Previous year" : "Previous month",
+          onClick: () => goToMonth(pageBack()),
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "flex items-center gap-1 text-sm font-semibold text-gray-800", children: quickJump ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        panel !== "years" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Choose a month, currently ${MONTH_NAMES[view.getMonth()]}`,
+            onClick: () => setPanel((p) => p === "months" ? "days" : "months"),
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+            children: MONTH_NAMES[view.getMonth()]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Choose a year, currently ${view.getFullYear()}`,
+            onClick: () => setPanel((p) => p === "years" ? "days" : "years"),
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+            children: view.getFullYear()
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("span", { children: [
+        MONTH_NAMES[view.getMonth()],
+        " ",
+        view.getFullYear()
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": panel === "years" ? "Next years" : panel === "months" ? "Next year" : "Next month",
+          onClick: () => goToMonth(pageForward()),
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    panel === "months" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a month", className: "grid grid-cols-3 gap-1 text-center text-sm", children: MONTH_NAMES.map((name, m) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": m === view.getMonth(),
+        onClick: () => {
+          goToMonth(new Date(view.getFullYear(), m, 1));
+          setPanel("days");
+        },
+        className: [
+          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          m === view.getMonth() ? "bg-blue-600 font-semibold text-white" : m === today.getMonth() && view.getFullYear() === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+        ].join(" "),
+        children: name.slice(0, 3)
+      },
+      name
+    )) }),
+    panel === "years" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a year", className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPageStart(view.getFullYear()) + i).map((y) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": y === view.getFullYear(),
+        onClick: () => {
+          goToMonth(new Date(y, view.getMonth(), 1));
+          setPanel("months");
+        },
+        className: [
+          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          y === view.getFullYear() ? "bg-blue-600 font-semibold text-white" : y === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+        ].join(" "),
+        children: y
+      },
+      y
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: gridRef,
+        role: "grid",
+        "aria-label": label,
+        onKeyDown,
+        hidden: panel !== "days",
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-xs font-medium text-gray-500", children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map((d) => (
+            // abbr carries the full name: "Su" is read as a word otherwise.
+            /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": DAY_NAMES[d], className: "py-1", children: /* @__PURE__ */ jsx("abbr", { title: DAY_NAMES[d], className: "no-underline", children: DAY_SHORT[d] }) }, d)
+          )) }),
+          Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-sm", children: cells.slice(row * 7, row * 7 + 7).map((cell) => {
+            const key = toKey(cell);
+            const outside = cell.getMonth() !== view.getMonth();
+            const isSelected = key === value || mode === "range" && key === endValue;
+            const between = inRange(key);
+            const disabled = outOfRange(key);
+            return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-active": key === activeKey,
+                tabIndex: key === activeKey ? 0 : -1,
+                disabled,
+                "aria-label": `${cell.getDate()} ${MONTH_NAMES[cell.getMonth()]} ${cell.getFullYear()}`,
+                "aria-current": key === todayKey ? "date" : void 0,
+                onClick: () => {
+                  setActive(key);
+                  onSelect(key);
+                },
+                className: [
+                  // 44px below `sm`, compact above it. A 32px cell is under
+                  // every touch-target guideline there is, and a date grid
+                  // is seven of them side by side — the case where missing
+                  // by four pixels picks the wrong day rather than nothing.
+                  "w-full rounded-md py-1.5 min-h-11 sm:min-h-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+                  disabled ? "cursor-not-allowed text-gray-300" : isSelected ? "bg-blue-600 font-semibold text-white" : between ? "bg-blue-100 text-blue-800" : outside ? "text-gray-300 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100",
+                  key === todayKey && !isSelected ? "font-semibold text-blue-600" : ""
+                ].filter(Boolean).join(" "),
+                children: cell.getDate()
+              }
+            ) }, key);
+          }) }, row))
+        ]
+      }
+    )
+  ] });
+}
 function useClickOutside(ref, onClose) {
   useEffect(() => {
     const handler = (e) => {
@@ -1108,10 +1376,8 @@ function useClickOutside(ref, onClose) {
   }, [ref, onClose]);
 }
 var PRESET_LABELS = ["Last 2 Weeks", "Last Month", "Last 3 Months", "Last 6 Months", "Last 12 Months"];
-var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var YEARS_PER_PAGE = 12;
-var yearPageStart = (y) => Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE;
-var pad = (n) => String(n).padStart(2, "0");
+var monthKeyOf = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`;
+var pad2 = (n) => String(n).padStart(2, "0");
 var EDGE_MARGIN = 8;
 function clipBounds(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -1125,7 +1391,7 @@ function clipBounds(el) {
   return { left: 0, right: window.innerWidth };
 }
 function toISODate(d) {
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 }
 function parseDate(s) {
   const [y, m, d] = s.split("-").map(Number);
@@ -1151,10 +1417,7 @@ function DateRangePicker({
   const panelRef = useRef(null);
   const [align, setAlign] = useState("left");
   const now = /* @__PURE__ */ new Date();
-  const [month, setMonth] = useState(from ? parseDate(from).getMonth() : now.getMonth());
-  const [year, setYear] = useState(from ? parseDate(from).getFullYear() : now.getFullYear());
-  const [view, setView] = useState("days");
-  const [yearPage, setYearPage] = useState(() => yearPageStart(year));
+  const [viewMonth, setViewMonth] = useState(() => monthKeyOf(from ? parseDate(from) : now));
   const displayDate = (s) => s ? formatDisplay(s) : "";
   useClickOutside(ref, useCallback(() => {
     if (open) setOpen(false);
@@ -1179,11 +1442,7 @@ function DateRangePicker({
     setTempFrom(from);
     setTempTo(to);
     setActivePreset(null);
-    const anchor = from ? parseDate(from) : now;
-    setMonth(anchor.getMonth());
-    setYear(anchor.getFullYear());
-    setYearPage(yearPageStart(anchor.getFullYear()));
-    setView("days");
+    setViewMonth(monthKeyOf(from ? parseDate(from) : now));
     setOpen(true);
   };
   const handlePreset = (label) => {
@@ -1216,10 +1475,7 @@ function DateRangePicker({
     setTempFrom(toISODate(start));
     setTempTo(toISODate(end));
     setActivePreset(label);
-    setMonth(start.getMonth());
-    setYear(start.getFullYear());
-    setYearPage(yearPageStart(start.getFullYear()));
-    setView("days");
+    setViewMonth(monthKeyOf(start));
   };
   const handleCalendarSelect = (date) => {
     setActivePreset("Custom");
@@ -1243,57 +1499,6 @@ function DateRangePicker({
     onChange("", "");
     setOpen(false);
   };
-  const changeMonth = (delta) => {
-    let m = month + delta, y = year;
-    if (m < 0) {
-      m = 11;
-      y--;
-    } else if (m > 11) {
-      m = 0;
-      y++;
-    }
-    setMonth(m);
-    setYear(y);
-  };
-  const handleStep = (delta) => {
-    if (view === "days") changeMonth(delta);
-    else if (view === "months") setYear(year + delta);
-    else setYearPage(yearPage + delta * YEARS_PER_PAGE);
-  };
-  const selectMonth = (m) => {
-    setMonth(m);
-    setView("days");
-  };
-  const selectYear = (y) => {
-    setYear(y);
-    setView("months");
-  };
-  const openYears = () => {
-    setYearPage(yearPageStart(year));
-    setView("years");
-  };
-  const firstDay = new Date(year, month, 1).getDay();
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const prevDays = new Date(year, month, 0).getDate();
-  const monthName = new Date(year, month).toLocaleString("default", { month: "long" });
-  const cells = [];
-  for (let i = firstDay - 1; i >= 0; i--) {
-    const d = new Date(year, month - 1, prevDays - i);
-    cells.push({ day: prevDays - i, current: false, date: toISODate(d) });
-  }
-  for (let d = 1; d <= daysInMonth; d++) {
-    cells.push({ day: d, current: true, date: toISODate(new Date(year, month, d)) });
-  }
-  const remaining = 42 - cells.length;
-  for (let d = 1; d <= remaining; d++) {
-    cells.push({ day: d, current: false, date: toISODate(new Date(year, month + 1, d)) });
-  }
-  const isInRange = (date) => {
-    if (!tempFrom || !tempTo) return false;
-    const s = tempFrom < tempTo ? tempFrom : tempTo;
-    const e = tempFrom < tempTo ? tempTo : tempFrom;
-    return date > s && date < e;
-  };
   const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? `From ${displayDate(from)}` : to ? `To ${displayDate(to)}` : "";
   return /* @__PURE__ */ jsxs("div", { className: "relative", ref, children: [
     /* @__PURE__ */ jsxs(
@@ -1349,85 +1554,18 @@ function DateRangePicker({
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "w-64", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleStep(-1), "aria-label": "Previous", className: "p-1 rounded-full hover:bg-gray-100 text-gray-600", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm font-semibold text-gray-800", children: [
-                  view === "days" && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setView("months"),
-                      className: "px-1.5 py-0.5 rounded-md hover:bg-gray-100 transition-colors",
-                      children: monthName
-                    }
-                  ),
-                  view === "years" ? /* @__PURE__ */ jsxs("span", { className: "px-1.5 py-0.5", children: [
-                    yearPage,
-                    " \u2013 ",
-                    yearPage + YEARS_PER_PAGE - 1
-                  ] }) : /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: openYears,
-                      className: "px-1.5 py-0.5 rounded-md hover:bg-gray-100 transition-colors",
-                      children: year
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleStep(1), "aria-label": "Next", className: "p-1 rounded-full hover:bg-gray-100 text-gray-600", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "min-h-[13.75rem]", children: [
-                view === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-center text-xs font-medium text-gray-500 mb-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, d)) }),
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-center text-sm", children: cells.map((c, i) => {
-                    const isStart = c.date === tempFrom;
-                    const isEnd = c.date === tempTo;
-                    const isSelected = isStart || isEnd;
-                    const inRange = isInRange(c.date);
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleCalendarSelect(c.date),
-                        className: `py-1.5 rounded-md transition-colors ${!c.current ? "text-gray-300" : isSelected ? "bg-blue-600 text-white font-semibold" : inRange ? "bg-blue-100 text-blue-800" : "text-gray-700 hover:bg-gray-100"}`,
-                        children: c.day
-                      },
-                      i
-                    );
-                  }) })
-                ] }),
-                view === "months" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 text-center text-sm", children: MONTH_NAMES.map((name, m) => {
-                  const isCurrent = m === month;
-                  const isThisMonth = m === now.getMonth() && year === now.getFullYear();
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => selectMonth(m),
-                      className: `py-4 rounded-md transition-colors ${isCurrent ? "bg-blue-600 text-white font-semibold" : isThisMonth ? "text-blue-600 font-medium hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"}`,
-                      children: name
-                    },
-                    name
-                  );
-                }) }),
-                view === "years" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPage + i).map((y) => {
-                  const isCurrent = y === year;
-                  const isThisYear = y === now.getFullYear();
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => selectYear(y),
-                      className: `py-4 rounded-md transition-colors ${isCurrent ? "bg-blue-600 text-white font-semibold" : isThisYear ? "text-blue-600 font-medium hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"}`,
-                      children: y
-                    },
-                    y
-                  );
-                }) })
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                value: tempFrom || null,
+                endValue: tempTo || null,
+                month: viewMonth,
+                onMonthChange: setViewMonth,
+                onSelect: handleCalendarSelect,
+                "aria-label": "Date range"
+              }
+            ) }),
             /* @__PURE__ */ jsxs("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: [
               PRESET_LABELS.map((label) => /* @__PURE__ */ jsx(
                 "button",
@@ -1469,45 +1607,14 @@ function DateRangePicker({
     )
   ] });
 }
-var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-function toInputValue(value) {
-  if (value === null || value === void 0 || value === "") return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
-  if (ISO_DATE.test(value)) return value;
-  const parsed = new Date(value);
-  return Number.isNaN(parsed.getTime()) ? "" : toISODate(parsed);
-}
-function fromInputValue(raw) {
-  if (!ISO_DATE.test(raw)) return null;
-  const [year, month, day] = raw.split("-").map(Number);
-  const date = new Date(year, month - 1, day);
-  return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
-}
-var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      type: "date",
-      "aria-invalid": invalid || void 0,
-      value: toInputValue(value),
-      min: toInputValue(min) || void 0,
-      max: toInputValue(max) || void 0,
-      onChange: (event) => onChange?.(fromInputValue(event.target.value)),
-      className: inputClasses({ invalid, size, className }),
-      ...rest
-    }
-  );
-});
-var DatePicker_default = DatePicker;
 var TIME = /^\d{2}:\d{2}(:\d{2})?$/;
-var pad2 = (n) => String(n).padStart(2, "0");
-function toInputValue2(value, withSeconds) {
+var pad3 = (n) => String(n).padStart(2, "0");
+function toInputValue(value, withSeconds) {
   if (value === null || value === void 0 || value === "") return "";
   if (value instanceof Date) {
     if (Number.isNaN(value.getTime())) return "";
-    const base = `${pad2(value.getHours())}:${pad2(value.getMinutes())}`;
-    return withSeconds ? `${base}:${pad2(value.getSeconds())}` : base;
+    const base = `${pad3(value.getHours())}:${pad3(value.getMinutes())}`;
+    return withSeconds ? `${base}:${pad3(value.getSeconds())}` : base;
   }
   return TIME.test(value) ? value : "";
 }
@@ -1520,9 +1627,9 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
       type: "time",
       step,
       "aria-invalid": invalid || void 0,
-      value: toInputValue2(value, withSeconds),
-      min: toInputValue2(min, withSeconds) || void 0,
-      max: toInputValue2(max, withSeconds) || void 0,
+      value: toInputValue(value, withSeconds),
+      min: toInputValue(min, withSeconds) || void 0,
+      max: toInputValue(max, withSeconds) || void 0,
       onChange: (event) => onChange?.(TIME.test(event.target.value) ? event.target.value : null),
       className: inputClasses({ invalid, size, className }),
       ...rest
@@ -1530,10 +1637,252 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
   );
 });
 var TimePicker_default = TimePicker;
+var POPUP_MAX_WIDTH = 448;
+var MENU_MAX_HEIGHT2 = 240;
+var MENU_GAP2 = 4;
+var VIEWPORT_MARGIN2 = 8;
+function useDropdownPosition(triggerRef, open) {
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
+    const compute = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      lastLeft = rect.left;
+      lastTop = rect.top;
+      lastRight = rect.right;
+      lastBottom = rect.bottom;
+      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const spaceAbove = rect.top - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT2, 160) && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT2, placeAbove ? spaceAbove : spaceBelow));
+      const next = { minWidth: rect.width, maxHeight };
+      if (window.innerWidth - rect.left < POPUP_MAX_WIDTH) {
+        next.right = Math.max(VIEWPORT_MARGIN2, window.innerWidth - rect.right);
+      } else {
+        next.left = Math.max(VIEWPORT_MARGIN2, rect.left);
+      }
+      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP2;
+      else next.top = rect.bottom + MENU_GAP2;
+      setPos(next);
+    };
+    compute();
+    let raf = requestAnimationFrame(function tick() {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
+        compute();
+      }
+      raf = requestAnimationFrame(tick);
+    });
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open, triggerRef]);
+  return pos;
+}
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+var MONTH_NAMES2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function toInputValue2(value) {
+  if (value === null || value === void 0 || value === "") return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
+  if (ISO_DATE.test(value)) return value;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? "" : toISODate(parsed);
+}
+function fromInputValue(raw) {
+  if (!ISO_DATE.test(raw)) return null;
+  const [year, month, day] = raw.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function display(key) {
+  const d = fromInputValue(key);
+  return d ? `${d.getDate()} ${MONTH_NAMES2[d.getMonth()]} ${d.getFullYear()}` : "";
+}
+var DatePicker = forwardRef(function DatePicker2({
+  value,
+  onChange,
+  min,
+  max,
+  invalid,
+  size,
+  native,
+  weekStartsOn,
+  className = "",
+  "aria-label": ariaLabel,
+  "aria-describedby": describedBy,
+  id,
+  name,
+  disabled,
+  placeholder,
+  ...rest
+}, ref) {
+  const current = toInputValue2(value);
+  const lo = toInputValue2(min);
+  const hi = toInputValue2(max);
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const panelId = useId();
+  const pos = useDropdownPosition(triggerRef, open);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    return registerModalEscapeInterceptor((event) => {
+      if (event.key !== "Escape") return false;
+      setOpen(false);
+      triggerRef.current?.focus();
+      return true;
+    });
+  }, [open]);
+  if (native) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "date",
+        id,
+        name,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        value: current,
+        min: lo || void 0,
+        max: hi || void 0,
+        onChange: (event) => onChange?.(fromInputValue(event.target.value)),
+        className: inputClasses({ invalid, size, className }),
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, value: current }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        id,
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current)}` : ""}` : void 0,
+        onClick: () => setOpen((o) => !o),
+        className: `${inputClasses({ invalid, size, className })} flex items-center justify-between text-left`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current) : placeholder ?? "Select a date" }),
+          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3M4 11h16M5 7h14a1 1 0 011 1v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1z" }) })
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          id: panelId,
+          role: "dialog",
+          "aria-label": ariaLabel ?? "Choose a date",
+          className: "fixed z-[400] w-72 rounded-xl border border-gray-200 bg-white p-3 shadow-lg",
+          style: {
+            left: pos?.left,
+            right: pos?.right,
+            top: pos?.top,
+            bottom: pos?.bottom,
+            // Hidden for the first paint until the layout effect measures the
+            // trigger, so the panel never flashes at (0,0).
+            visibility: pos ? void 0 : "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                value: current || null,
+                min: lo || null,
+                max: hi || null,
+                weekStartsOn,
+                onSelect: (key) => {
+                  setOpen(false);
+                  triggerRef.current?.focus();
+                  onChange?.(fromInputValue(key));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    onChange?.(null);
+                  },
+                  className: "rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700",
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    onChange?.(/* @__PURE__ */ new Date());
+                  },
+                  className: "rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
+                  children: "Today"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+var DatePicker_default = DatePicker;
 var ISO_LOCAL = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/;
-var pad3 = (n) => String(n).padStart(2, "0");
+var pad4 = (n) => String(n).padStart(2, "0");
 function serialise(date) {
-  return `${date.getFullYear()}-${pad3(date.getMonth() + 1)}-${pad3(date.getDate())}T${pad3(date.getHours())}:${pad3(date.getMinutes())}`;
+  return `${date.getFullYear()}-${pad4(date.getMonth() + 1)}-${pad4(date.getDate())}T${pad4(date.getHours())}:${pad4(date.getMinutes())}`;
 }
 function toInputValue3(value) {
   if (value === null || value === void 0 || value === "") return "";
@@ -1677,8 +2026,8 @@ function Segmented({
   className = ""
 }) {
   const groupId = useId();
-  const track = `inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1 ${block ? "w-full" : ""} ${className}`.trim();
-  const itemBase = `inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors ${block ? "flex-1" : ""}`;
+  const track = `inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg bg-gray-100 p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${block ? "w-full" : ""} ${className}`.trim();
+  const itemBase = `inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-colors ${block ? "flex-1" : ""}`;
   if (name) {
     return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: track, children: options.map((opt) => {
       const id = `${groupId}-${opt.value}`;
@@ -2029,57 +2378,6 @@ function FilePicker({
     error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-red-600", children: error })
   ] });
 }
-var POPUP_MAX_WIDTH = 448;
-var MENU_MAX_HEIGHT2 = 240;
-var MENU_GAP2 = 4;
-var VIEWPORT_MARGIN2 = 8;
-function useDropdownPosition(triggerRef, open) {
-  const [pos, setPos] = useState(null);
-  useLayoutEffect(() => {
-    if (!open) {
-      setPos(null);
-      return;
-    }
-    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
-    const compute = () => {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      lastLeft = rect.left;
-      lastTop = rect.top;
-      lastRight = rect.right;
-      lastBottom = rect.bottom;
-      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP2 - VIEWPORT_MARGIN2;
-      const spaceAbove = rect.top - MENU_GAP2 - VIEWPORT_MARGIN2;
-      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT2, 160) && spaceAbove > spaceBelow;
-      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT2, placeAbove ? spaceAbove : spaceBelow));
-      const next = { minWidth: rect.width, maxHeight };
-      if (window.innerWidth - rect.left < POPUP_MAX_WIDTH) {
-        next.right = Math.max(VIEWPORT_MARGIN2, window.innerWidth - rect.right);
-      } else {
-        next.left = Math.max(VIEWPORT_MARGIN2, rect.left);
-      }
-      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP2;
-      else next.top = rect.bottom + MENU_GAP2;
-      setPos(next);
-    };
-    compute();
-    let raf = requestAnimationFrame(function tick() {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
-        compute();
-      }
-      raf = requestAnimationFrame(tick);
-    });
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [open, triggerRef]);
-  return pos;
-}
 function ClearButton({ onClear, ariaLabel = "Clear selection" }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -2229,7 +2527,7 @@ function SearchableSelect({
         "div",
         {
           ref: menuRef,
-          className: "fixed z-[400] rounded-2xl overflow-hidden",
+          className: "fixed z-[10000] rounded-2xl overflow-hidden",
           style: {
             left: menuPos?.left,
             right: menuPos?.right,
@@ -2398,7 +2696,7 @@ function TagInput({
         "div",
         {
           ref: menuRef,
-          className: "fixed z-[400] rounded-2xl overflow-hidden",
+          className: "fixed z-[10000] rounded-2xl overflow-hidden",
           style: {
             left: menuPos?.left,
             right: menuPos?.right,
@@ -2714,23 +3012,23 @@ function DescriptionList({
   const resolved = typeof columns === "number" ? { base: columns } : columns;
   const base = resolved.base ?? 1;
   const widest = Math.max(base, resolved.sm ?? 0, resolved.lg ?? 0);
-  const pad4 = size === "sm" ? "px-3 py-2" : "px-4 py-3";
+  const pad5 = size === "sm" ? "px-3 py-2" : "px-4 py-3";
   const text = size === "sm" ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsxs("div", { className: [bordered ? "rounded-lg border border-gray-200 bg-white" : "", className].filter(Boolean).join(" "), children: [
-    title && /* @__PURE__ */ jsx("div", { className: `${pad4} ${bordered ? "border-b border-gray-100" : ""} text-sm font-semibold text-gray-900`.trim(), children: title }),
+    title && /* @__PURE__ */ jsx("div", { className: `${pad5} ${bordered ? "border-b border-gray-100" : ""} text-sm font-semibold text-gray-900`.trim(), children: title }),
     /* @__PURE__ */ jsx("dl", { className: [
       "grid",
       COLS2[base],
       resolved.sm ? SM[resolved.sm] : "",
       resolved.lg ? LG[resolved.lg] : "",
       bordered ? "" : "gap-x-6 gap-y-3",
-      bordered ? "" : pad4 === "px-4 py-3" ? "py-1" : ""
+      bordered ? "" : pad5 === "px-4 py-3" ? "py-1" : ""
     ].filter(Boolean).join(" "), children: items.map((item, i) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: [
           item.span ? SPAN[widest] : "",
-          bordered ? `${pad4} border-b border-gray-100 last:border-b-0` : ""
+          bordered ? `${pad5} border-b border-gray-100 last:border-b-0` : ""
         ].filter(Boolean).join(" "),
         children: [
           /* @__PURE__ */ jsx("dt", { className: `${text} text-gray-500`, children: item.label }),
@@ -4484,12 +4782,28 @@ function DropdownMenu({
     )
   ] });
 }
-var SIZE_PX2 = { sm: 320, md: 448, lg: 640 };
+var SIZE_CLASS = {
+  sm: "sm:w-[320px]",
+  md: "sm:w-[448px]",
+  lg: "sm:w-[640px]"
+};
 var SIDE_POSITION = {
   right: "inset-y-0 right-0",
   left: "inset-y-0 left-0",
   bottom: "inset-x-0 bottom-0"
 };
+function CloseButton({ onClose }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      "aria-label": "Close",
+      className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+      children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
+    }
+  );
+}
 function Drawer({
   open,
   onClose,
@@ -4500,10 +4814,12 @@ function Drawer({
   children,
   blocking = false,
   initialFocus,
+  "aria-label": ariaLabel,
   className = ""
 }) {
   const panelRef = useRef(null);
   const bodyId = useId();
+  const titleId = useId();
   useFocusTrap(panelRef, open, initialFocus);
   useScrollLock(open);
   useEffect(() => {
@@ -4516,7 +4832,7 @@ function Drawer({
   }, [open, blocking, onClose]);
   if (!open) return null;
   const isBottom = side === "bottom";
-  const panelStyle = isBottom ? { maxHeight: "85vh" } : { width: SIZE_PX2[size], maxWidth: "100vw" };
+  const panelStyle = isBottom ? { maxHeight: "85vh" } : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999]", role: "presentation", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/30", onClick: blocking ? void 0 : onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs(
@@ -4525,29 +4841,27 @@ function Drawer({
         ref: panelRef,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": typeof title === "string" ? title : void 0,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
         "aria-describedby": children ? bodyId : void 0,
         style: panelStyle,
         className: [
           "fixed flex flex-col bg-white shadow-xl",
+          // Full width on a phone, the asked-for width from `sm` up. A 320px
+          // drawer on a 375px screen leaves a 55px strip of scrim: too narrow
+          // to aim at, too wide to read as an edge, and it makes the panel look
+          // like a desktop rail that was squeezed rather than a sheet built for
+          // the screen it is on.
+          isBottom ? "" : `w-full max-w-full ${SIZE_CLASS[size]}`,
           SIDE_POSITION[side],
           isBottom ? "rounded-t-xl" : "",
           className
         ].filter(Boolean).join(" "),
         children: [
-          (title || !blocking) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-4 border-b border-gray-100 px-4 py-3", children: [
-            title ? /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-900", children: title }) : /* @__PURE__ */ jsx("span", {}),
-            !blocking && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                "aria-label": "Close",
-                className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600",
-                children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
-              }
-            )
-          ] }),
+          title ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-4 border-b border-gray-100 px-4 py-3", children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold text-gray-900", children: title }),
+            !blocking && /* @__PURE__ */ jsx(CloseButton, { onClose })
+          ] }) : !blocking && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ jsx(CloseButton, { onClose }) }),
           /* @__PURE__ */ jsx("div", { id: bodyId, className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children }),
           footer && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end gap-3 border-t border-gray-100 px-4 py-3", children: footer })
         ]
@@ -5204,8 +5518,8 @@ function Sparkline({
   const max = Math.max(...data);
   const min = Math.min(...data);
   const span = max - min || 1;
-  const pad4 = strokeWidth + (showDots ? 2 : 0);
-  const y = (v) => height - pad4 - (v - min) / span * (height - pad4 * 2);
+  const pad5 = strokeWidth + (showDots ? 2 : 0);
+  const y = (v) => height - pad5 - (v - min) / span * (height - pad5 * 2);
   const pts = data.length === 1 ? [[0, height / 2], [width, height / 2]] : data.map((v, i) => [i * width / (data.length - 1), y(v)]);
   const line = pts.map(([x, yy], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${yy.toFixed(2)}`).join(" ");
   const area = `${line} L${width.toFixed(2)},${height} L0,${height} Z`;
@@ -6107,6 +6421,6 @@ var ALT_SHIFT_D = isMac ? "\u2325\u21E7D" : "Alt+Shift+D";
 var ALT_SHIFT_E = isMac ? "\u2325\u21E7E" : "Alt+Shift+E";
 var ALT_SHIFT_N = isMac ? "\u2325\u21E7N" : "Alt+Shift+N";
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, ENTER, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker, FormField, FormLayoutPage, GROUP_COLORS, GalleryTemplate, GlobalSearch, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Stepper, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, tabButtonId, tabPanelId, toISODate, useClickOutside, useTheme };
-//# sourceMappingURL=chunk-CWA27IGB.js.map
-//# sourceMappingURL=chunk-CWA27IGB.js.map
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Calendar, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, ENTER, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker, FormField, FormLayoutPage, GROUP_COLORS, GalleryTemplate, GlobalSearch, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Stepper, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, fromKey, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, tabButtonId, tabPanelId, toISODate, toKey, useClickOutside, useTheme };
+//# sourceMappingURL=chunk-B3IYV7JN.js.map
+//# sourceMappingURL=chunk-B3IYV7JN.js.map