@platned/ui 0.7.0 → 0.7.1

package/dist/index.cjs

@@ -2162,25 +2162,382 @@ var Select = (0, import_react16.forwardRef)(function Select2({
 });
 
 // src/components/forms/date-picker.tsx
+var import_react19 = require("react");
+var import_clsx16 = __toESM(require("clsx"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/overlays/popover.tsx
 var import_react17 = require("react");
+var import_radix_ui = require("radix-ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PopoverTriggerNode = (0, import_react17.createContext)(null);
+function Popover({ children, open, defaultOpen, onOpenChange, modal = false }) {
+  const [node, setNode] = (0, import_react17.useState)(null);
+  const trigger = (0, import_react17.useMemo)(() => ({ node, setNode, modal }), [node, modal]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_radix_ui.Popover.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverTriggerNode.Provider, { value: trigger, children })
+    }
+  );
+}
+var PopoverTrigger = (0, import_react17.forwardRef)(
+  function PopoverTrigger2(props, ref) {
+    const trigger = (0, import_react17.useContext)(PopoverTriggerNode);
+    const fallbackId = (0, import_react17.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_radix_ui.Popover.Trigger,
+      {
+        ref: composeRefs(ref, trigger?.setNode),
+        id: props.id ?? fallbackId,
+        ...props
+      }
+    );
+  }
+);
+var PopoverContent = (0, import_react17.forwardRef)(
+  function PopoverContent2({ children, side = "bottom", align = "center", sideOffset = 8, label, container, className, onOpenAutoFocus, ...rest }, ref) {
+    const trigger = (0, import_react17.useContext)(PopoverTriggerNode);
+    const inherited = usePortalContainer();
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui.Popover.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_radix_ui.Popover.Content,
+      {
+        ref,
+        side,
+        align,
+        sideOffset,
+        collisionPadding: 8,
+        onOpenAutoFocus,
+        onEscapeKeyDown: (event) => void deferEscapeToInnerPopup(event),
+        "aria-modal": trigger?.modal || void 0,
+        "aria-label": label,
+        "aria-labelledby": label ? void 0 : trigger?.node?.id || void 0,
+        className: cn(
+          "z-popover max-w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-default bg-default p-4 shadow-400",
+          "focus:outline-none",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var PopoverClose = (0, import_react17.forwardRef)(
+  function PopoverClose2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui.Popover.Close, { ref, ...props });
+  }
+);
+var PopoverAnchor = (0, import_react17.forwardRef)(
+  function PopoverAnchor2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui.Popover.Anchor, { ref, ...props });
+  }
+);
+
+// src/components/forms/calendar.tsx
+var import_react18 = require("react");
 var import_clsx15 = __toESM(require("clsx"), 1);
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var inputBase2 = {
-  lg: "h-12 px-5 py-3.5 pr-12 text-body",
-  md: "h-9 px-4 py-2.5 pr-8 text-body-sm",
-  sm: "h-6 px-3 py-[5px] pr-6 text-body-tiny"
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CAPTION_SELECT = (0, import_clsx15.default)(
+  "h-7 appearance-none rounded-md border border-default bg-default px-2 text-body-xs font-medium text-default",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default"
+);
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var isBefore = (a, b) => startOfDay(a).getTime() < startOfDay(b).getTime();
+var isAfter = (a, b) => startOfDay(a).getTime() > startOfDay(b).getTime();
+var inRange = (d, from, to) => startOfDay(d).getTime() > startOfDay(from).getTime() && startOfDay(d).getTime() < startOfDay(to).getTime();
+function monthGrid(month, weekStartsOn) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const offset2 = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -offset2);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+}
+function Calendar({
+  mode = "single",
+  value,
+  range,
+  onSelect,
+  onRangeChange,
+  defaultMonth,
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale,
+  label = "Calendar",
+  captionLayout = "label",
+  startYear,
+  endYear,
+  className,
+  ...rest
+}) {
+  const today = (0, import_react18.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const gridId = (0, import_react18.useId)();
+  const [month, setMonth] = (0, import_react18.useState)(
+    () => defaultMonth ?? value ?? range?.from ?? today
+  );
+  const [focusedDate, setFocusedDate] = (0, import_react18.useState)(
+    () => value ?? range?.from ?? today
+  );
+  const cellRefs = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
+  const monthFormatter = (0, import_react18.useMemo)(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  const dayNameFormatter = (0, import_react18.useMemo)(
+    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
+    [locale]
+  );
+  const monthNameFormatter = (0, import_react18.useMemo)(
+    () => new Intl.DateTimeFormat(locale, { month: "long" }),
+    [locale]
+  );
+  const fullDateFormatter = (0, import_react18.useMemo)(
+    () => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
+    [locale]
+  );
+  const disabled = (0, import_react18.useCallback)(
+    (date) => {
+      if (min && isBefore(date, min)) return true;
+      if (max && isAfter(date, max)) return true;
+      return isDateDisabled?.(date) ?? false;
+    },
+    [min, max, isDateDisabled]
+  );
+  const key = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  const pendingFocus = (0, import_react18.useRef)(false);
+  const focusDate = (0, import_react18.useCallback)((date) => {
+    pendingFocus.current = true;
+    setFocusedDate(date);
+    setMonth(
+      (current) => current.getFullYear() === date.getFullYear() && current.getMonth() === date.getMonth() ? current : new Date(date.getFullYear(), date.getMonth(), 1)
+    );
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    if (!pendingFocus.current) return;
+    const node = cellRefs.current.get(key(focusedDate));
+    if (node) {
+      node.focus();
+      pendingFocus.current = false;
+    }
+  }, [focusedDate, month]);
+  const select = (date) => {
+    if (disabled(date)) return;
+    setFocusedDate(date);
+    if (mode === "single") {
+      onSelect?.(date);
+      return;
+    }
+    const current = range ?? { from: null, to: null };
+    if (!current.from || current.to || isBefore(date, current.from)) {
+      onRangeChange?.({ from: date, to: null });
+    } else {
+      onRangeChange?.({ from: current.from, to: date });
+    }
+  };
+  const onKeyDown = (event) => {
+    const moves = {
+      ArrowLeft: () => addDays(focusedDate, -1),
+      ArrowRight: () => addDays(focusedDate, 1),
+      ArrowUp: () => addDays(focusedDate, -7),
+      ArrowDown: () => addDays(focusedDate, 7),
+      Home: () => addDays(focusedDate, -((focusedDate.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focusedDate, 6 - (focusedDate.getDay() - weekStartsOn + 7) % 7),
+      // Shift moves a year (APG date-picker dialog); without it, a month.
+      PageUp: () => new Date(focusedDate.getFullYear() - (event.shiftKey ? 1 : 0), focusedDate.getMonth() - (event.shiftKey ? 0 : 1), focusedDate.getDate()),
+      PageDown: () => new Date(focusedDate.getFullYear() + (event.shiftKey ? 1 : 0), focusedDate.getMonth() + (event.shiftKey ? 0 : 1), focusedDate.getDate())
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      focusDate(move());
+    }
+  };
+  const firstYear = startYear ?? min?.getFullYear() ?? today.getFullYear() - 100;
+  const lastYear = endYear ?? max?.getFullYear() ?? today.getFullYear() + 10;
+  const years = Array.from({ length: Math.max(0, lastYear - firstYear) + 1 }, (_, i) => firstYear + i);
+  const monthOutOfRange = (m) => !!min && (month.getFullYear() < min.getFullYear() || month.getFullYear() === min.getFullYear() && m < min.getMonth()) || !!max && (month.getFullYear() > max.getFullYear() || month.getFullYear() === max.getFullYear() && m > max.getMonth());
+  const showMonth = (year, m) => {
+    let next = new Date(year, m, 1);
+    if (min && next < new Date(min.getFullYear(), min.getMonth(), 1)) next = new Date(min.getFullYear(), min.getMonth(), 1);
+    if (max && next > new Date(max.getFullYear(), max.getMonth(), 1)) next = new Date(max.getFullYear(), max.getMonth(), 1);
+    setMonth(next);
+    const day = Math.min(focusedDate.getDate(), new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate());
+    setFocusedDate(new Date(next.getFullYear(), next.getMonth(), day));
+  };
+  const days = monthGrid(month, weekStartsOn);
+  const weekdayNames = days.slice(0, 7).map((d) => dayNameFormatter.format(d));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      "data-slot": "calendar",
+      className: cn("w-fit rounded-xl border border-default bg-default p-3", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            IconButton,
+            {
+              variant: "subtle",
+              size: "sm",
+              "aria-label": "Previous month",
+              disabled: !!min && isBefore(addMonths(month, -1), new Date(min.getFullYear(), min.getMonth(), 1)),
+              onClick: () => setMonth(addMonths(month, -1)),
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react2.ChevronLeftIcon, { "aria-hidden": true, size: 16 })
+            }
+          ),
+          captionLayout === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "select",
+              {
+                "aria-label": "Month",
+                value: month.getMonth(),
+                onChange: (event) => showMonth(month.getFullYear(), Number(event.target.value)),
+                className: CAPTION_SELECT,
+                children: Array.from({ length: 12 }, (_, m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: m, disabled: monthOutOfRange(m), children: monthNameFormatter.format(new Date(2e3, m, 1)) }, m))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "select",
+              {
+                "aria-label": "Year",
+                value: month.getFullYear(),
+                onChange: (event) => showMonth(Number(event.target.value), month.getMonth()),
+                className: CAPTION_SELECT,
+                children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: year, children: year }, year))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-live": "polite", className: "sr-only", children: monthFormatter.format(month) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-live": "polite", className: "text-body-sm font-semibold text-default", children: monthFormatter.format(month) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            IconButton,
+            {
+              variant: "subtle",
+              size: "sm",
+              "aria-label": "Next month",
+              disabled: !!max && isAfter(addMonths(month, 1), new Date(max.getFullYear(), max.getMonth(), 1)),
+              onClick: () => setMonth(addMonths(month, 1)),
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react2.ChevronRightIcon, { "aria-hidden": true, size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            role: "grid",
+            "aria-label": label,
+            id: gridId,
+            tabIndex: -1,
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "row", className: "mb-1 grid grid-cols-7", children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  role: "columnheader",
+                  className: "flex h-8 items-center justify-center text-body-tiny font-medium text-default-tertiary",
+                  children: name
+                },
+                name
+              )) }),
+              Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "row", className: "grid grid-cols-7", children: days.slice(week * 7, week * 7 + 7).map((date) => {
+                const outside = date.getMonth() !== month.getMonth();
+                const isDisabled = disabled(date);
+                const selected = mode === "single" ? sameDay(date, value) : sameDay(date, range?.from) || sameDay(date, range?.to);
+                const between = mode === "range" && range?.from && range?.to ? inRange(date, range.from, range.to) : false;
+                const isFocused = sameDay(date, focusedDate);
+                return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "gridcell", "aria-selected": selected || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "button",
+                  {
+                    ref: (node) => {
+                      if (node) cellRefs.current.set(key(date), node);
+                      else cellRefs.current.delete(key(date));
+                    },
+                    type: "button",
+                    tabIndex: isFocused ? 0 : -1,
+                    disabled: isDisabled,
+                    "aria-label": fullDateFormatter.format(date),
+                    "aria-current": sameDay(date, today) ? "date" : void 0,
+                    onClick: () => select(date),
+                    onFocus: () => setFocusedDate(date),
+                    className: (0, import_clsx15.default)(
+                      "flex size-9 items-center justify-center rounded-lg text-body-sm tabular-nums transition-colors",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
+                      "disabled:cursor-not-allowed disabled:text-disabled disabled:hover:bg-transparent",
+                      selected ? "bg-brand font-semibold text-brand-on-brand" : between ? "rounded-none bg-brand-tertiary text-default" : outside ? "text-default-tertiary hover:bg-default-secondary" : "text-default hover:bg-default-secondary",
+                      // Today is marked by a ring rather than a fill, so it stays legible
+                      // when it is also the selected day.
+                      sameDay(date, today) && !selected && "ring-1 ring-inset ring-brand-tertiary"
+                    ),
+                    children: date.getDate()
+                  }
+                ) }, key(date));
+              }) }, week))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/forms/date-picker.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var triggerBase = {
+  lg: "h-12 px-5 pr-12 text-body",
+  md: "h-9 px-4 pr-8 text-body-sm",
+  sm: "h-6 px-3 pr-6 text-body-tiny"
 };
 var iconWrap2 = {
   lg: { right: "right-4", size: "size-5" },
   md: { right: "right-3", size: "size-4" },
   sm: { right: "right-2", size: "size-3" }
 };
-var DatePicker = (0, import_react17.forwardRef)(function DatePicker2({ label, description, error, hint, size: sizeProp, className, disabled, required, id, ...props }, ref) {
+var ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseIso(value) {
+  const match = value ? ISO.exec(value) : null;
+  if (!match) return null;
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function toIso(date) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+var DatePicker = (0, import_react19.forwardRef)(function DatePicker2({
+  label,
+  description,
+  error,
+  hint,
+  size: sizeProp,
+  className,
+  disabled,
+  required,
+  id,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onValueChange,
+  onBlur,
+  placeholder = "Pick a date",
+  locale,
+  weekStartsOn,
+  captionLayout = "dropdown",
+  startYear,
+  endYear,
+  min,
+  max,
+  ...props
+}, ref) {
   const size2 = useControlSize(sizeProp);
-  const hasError = !!error;
-  const iw = iconWrap2[size2];
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     Field,
     {
       id,
@@ -2188,79 +2545,190 @@ var DatePicker = (0, import_react17.forwardRef)(function DatePicker2({ label, de
       disabled,
       required,
       hasDescription: !!description,
-      hasError,
+      hasError: !!error,
       hasHint: !!hint,
       className,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel, { children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldDescription, { children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            DateInput,
-            {
-              ref,
-              size: size2,
-              invalid: hasError,
-              disabled,
-              required,
-              ...props
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "span",
-            {
-              "aria-hidden": true,
-              className: (0, import_clsx15.default)(
-                "pointer-events-none absolute",
-                iw.right,
-                iw.size,
-                "flex items-center justify-center",
-                disabled ? "text-icon-disabled" : "text-icon-default-secondary"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.CalendarIcon, { className: "size-full" })
-            }
-          )
-        ] }),
-        hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldError, { children: error }),
-        !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldHint, { children: hint })
+        label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldLabel, { children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldDescription, { children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          DateControl,
+          {
+            ref,
+            size: size2,
+            invalid: !!error,
+            disabled,
+            required,
+            value: valueProp,
+            defaultValue,
+            onChange,
+            onValueChange,
+            onBlur,
+            placeholder,
+            locale,
+            weekStartsOn,
+            captionLayout,
+            startYear,
+            endYear,
+            min: typeof min === "number" ? String(min) : min,
+            max: typeof max === "number" ? String(max) : max,
+            label,
+            inputProps: props
+          }
+        ),
+        error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldError, { children: error }) : hint && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldHint, { children: hint })
       ]
     }
   );
 });
-var DateInput = (0, import_react17.forwardRef)(function DateInput2({ size: sizeProp, invalid = false, className, ...props }, ref) {
-  const size2 = useControlSize(sizeProp);
+var DateControl = (0, import_react19.forwardRef)(function DateControl2({
+  size: size2,
+  invalid,
+  disabled,
+  required,
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  onBlur,
+  placeholder,
+  locale,
+  weekStartsOn,
+  captionLayout,
+  startYear,
+  endYear,
+  min,
+  max,
+  label,
+  inputProps: { name, ...inputProps }
+}, ref) {
   const field = useFieldControl();
+  const fieldContext = useFieldContext();
+  const valueId = (0, import_react19.useId)();
+  const dialogId = (0, import_react19.useId)();
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const [internal, setInternal] = (0, import_react19.useState)(defaultValue ?? "");
+  const iso = value ?? internal;
+  const date = parseIso(iso);
+  const triggerRef = (0, import_react19.useRef)(null);
+  const inputRef = (0, import_react19.useRef)(null);
+  const contentRef = (0, import_react19.useRef)(null);
   const isInvalid = invalid || !!field["aria-invalid"];
-  const isDisabled = props.disabled ?? field.disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "input",
-    {
-      ref,
-      type: "date",
-      ...field,
-      className: (0, import_clsx15.default)(
-        "w-full rounded-lg border outline-none transition-colors",
-        "bg-default text-default",
-        "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-default",
-        "[&::-webkit-calendar-picker-indicator]:opacity-0",
-        "[&::-webkit-calendar-picker-indicator]:absolute",
-        "[&::-webkit-calendar-picker-indicator]:right-0",
-        "[&::-webkit-calendar-picker-indicator]:h-full",
-        "[&::-webkit-calendar-picker-indicator]:w-10",
-        "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
-        inputBase2[size2],
-        isDisabled ? "cursor-not-allowed border-disabled bg-disabled text-disabled" : isInvalid ? "border-danger-secondary focus-visible:border-danger focus-visible:ring-danger" : "border-default focus-visible:border-brand focus-visible:ring-brand",
-        className
-      ),
-      ...props
+  const isDisabled = disabled ?? field.disabled;
+  const iw = iconWrap2[size2];
+  const formatter = (0, import_react19.useMemo)(() => new Intl.DateTimeFormat(locale, { dateStyle: "medium" }), [locale]);
+  const commit = (next) => {
+    const nextIso = toIso(next);
+    if (value === void 0) setInternal(nextIso);
+    onValueChange?.(nextIso);
+    const input = inputRef.current;
+    if (input) {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, nextIso);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
     }
-  );
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          role: "combobox",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-controls": open ? dialogId : void 0,
+          "aria-labelledby": fieldContext ? `${fieldContext.labelId} ${valueId}` : void 0,
+          "aria-label": fieldContext ? void 0 : label,
+          "data-size": size2,
+          ...field,
+          disabled: isDisabled,
+          onBlur,
+          className: (0, import_clsx16.default)(
+            "w-full appearance-none rounded-lg border text-left outline-none transition-colors",
+            "bg-default text-default",
+            "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-default",
+            triggerBase[size2],
+            isDisabled ? "cursor-not-allowed border-disabled bg-disabled text-disabled" : isInvalid ? "border-danger-secondary focus-visible:border-danger focus-visible:ring-danger" : "border-default focus-visible:border-brand focus-visible:ring-brand"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: valueId, className: (0, import_clsx16.default)("block truncate", !date && "text-default-tertiary"), children: date ? formatter.format(date) : placeholder })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        PopoverContent,
+        {
+          ref: contentRef,
+          id: dialogId,
+          label: label ? `Choose ${label.toLowerCase()}` : "Choose date",
+          align: "start",
+          className: "w-auto max-w-none p-0",
+          onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            contentRef.current?.querySelector('[role="grid"] [tabindex="0"]')?.focus();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Calendar,
+            {
+              value: date,
+              onSelect: commit,
+              min: parseIso(min) ?? void 0,
+              max: parseIso(max) ?? void 0,
+              locale,
+              weekStartsOn,
+              captionLayout,
+              startYear,
+              endYear,
+              label: label ?? "Calendar",
+              className: "border-0"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "span",
+      {
+        "aria-hidden": true,
+        className: (0, import_clsx16.default)(
+          "pointer-events-none absolute",
+          iw.right,
+          iw.size,
+          "flex items-center justify-center",
+          isDisabled ? "text-icon-disabled" : "text-icon-default-secondary"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react3.CalendarIcon, { className: "size-full" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "input",
+      {
+        ref: composeRefs(ref, inputRef),
+        type: "date",
+        "aria-hidden": true,
+        tabIndex: -1,
+        ...inputProps,
+        name,
+        value: iso,
+        min,
+        max,
+        required,
+        disabled: isDisabled,
+        onChange: (event) => {
+          if (value === void 0) setInternal(event.target.value);
+          onChange?.(event);
+        },
+        onFocus: () => triggerRef.current?.focus(),
+        className: "pointer-events-none absolute inset-x-0 bottom-0 h-px w-full opacity-0"
+      }
+    )
+  ] });
 });
 
 // src/components/forms/stepper.tsx
-var import_clsx16 = __toESM(require("clsx"), 1);
-var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_clsx17 = __toESM(require("clsx"), 1);
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var STATUS_TEXT = {
   complete: "completed",
   active: "current step",
@@ -2273,41 +2741,41 @@ var SIZE2 = {
 function StepIndicator({ status, size: size2 }) {
   const s = SIZE2[size2];
   if (status === "complete") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "span",
       {
         "aria-hidden": true,
-        className: (0, import_clsx16.default)(
+        className: (0, import_clsx17.default)(
           "flex shrink-0 items-center justify-center rounded-full bg-brand text-brand-on-brand",
           s.indicator
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react3.CheckIcon, { size: s.glyph })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.CheckIcon, { size: s.glyph })
       }
     );
   }
   if (status === "active") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "span",
       {
         "aria-hidden": true,
-        className: (0, import_clsx16.default)(
+        className: (0, import_clsx17.default)(
           "flex shrink-0 items-center justify-center rounded-full border-2 border-brand-emphasis",
           s.indicator
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "size-2.5 rounded-full bg-brand" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "size-2.5 rounded-full bg-brand" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "span",
     {
       "aria-hidden": true,
-      className: (0, import_clsx16.default)("shrink-0 rounded-full border-2 border-disabled", s.indicator)
+      className: (0, import_clsx17.default)("shrink-0 rounded-full border-2 border-disabled", s.indicator)
     }
   );
 }
 function ChevronSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react3.ChevronRightIcon, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.ChevronRightIcon, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
 }
 var labelClass = {
   complete: "text-brand font-semibold",
@@ -2318,26 +2786,26 @@ function Stepper({ steps, size: size2 = "md", label = "Progress", className }) {
   const s = SIZE2[size2];
   return (
     // An <ol> cannot be wrapped without breaking the list relationship with its <li>s.
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "ol",
       {
-        className: (0, import_clsx16.default)("flex items-center overflow-x-auto", SCROLLBAR_CLASSES, className),
+        className: (0, import_clsx17.default)("flex items-center overflow-x-auto", SCROLLBAR_CLASSES, className),
         "aria-label": label,
-        children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "li",
           {
             className: "flex items-center",
             "aria-current": step.status === "active" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StepIndicator, { status: step.status, size: size2 }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: (0, import_clsx16.default)("whitespace-nowrap", s.label, labelClass[step.status]), children: step.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StepIndicator, { status: step.status, size: size2 }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: (0, import_clsx17.default)("whitespace-nowrap", s.label, labelClass[step.status]), children: step.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "sr-only", children: [
                   ", ",
                   STATUS_TEXT[step.status]
                 ] })
               ] }),
-              i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronSeparator, {})
+              i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronSeparator, {})
             ]
           },
           step.label
@@ -2348,9 +2816,9 @@ function Stepper({ steps, size: size2 = "md", label = "Progress", className }) {
 }
 
 // src/components/forms/multiselect-card.tsx
-var import_clsx17 = __toESM(require("clsx"), 1);
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_clsx18 = __toESM(require("clsx"), 1);
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SIZE3 = {
   default: {
     pad: "p-4",
@@ -2380,7 +2848,7 @@ function MultiSelectCard({
   className
 }) {
   const s = SIZE3[size2];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "button",
     {
       type: "button",
@@ -2388,7 +2856,7 @@ function MultiSelectCard({
       "aria-checked": selected,
       disabled,
       onClick: onToggle,
-      className: (0, import_clsx17.default)(
+      className: (0, import_clsx18.default)(
         "relative w-full rounded-2xl border-2 text-left transition-all",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
         "disabled:cursor-not-allowed disabled:opacity-60",
@@ -2397,40 +2865,40 @@ function MultiSelectCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx17.default)(
+              className: (0, import_clsx18.default)(
                 "flex shrink-0 items-center justify-center",
                 s.iconBox,
                 selected ? "bg-brand" : "bg-brand-tertiary"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: (0, import_clsx17.default)(s.icon, selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: (0, import_clsx18.default)(s.icon, selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
             }
           ),
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx17.default)(
+              className: (0, import_clsx18.default)(
                 "flex shrink-0 items-center justify-center rounded-full bg-brand text-icon-brand-on-brand",
                 s.mark
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.CheckIcon, { className: "size-3", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react5.CheckIcon, { className: "size-3", strokeWidth: 2.5 })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx17.default)("shrink-0 rounded-full border-2 border-default", s.mark)
+              className: (0, import_clsx18.default)("shrink-0 rounded-full border-2 border-default", s.mark)
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: s.gap, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: (0, import_clsx17.default)("font-semibold", s.title, selected ? "text-brand" : "text-default"), children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-0.5 text-body-tiny text-default-secondary", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: s.gap, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: (0, import_clsx18.default)("font-semibold", s.title, selected ? "text-brand" : "text-default"), children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-0.5 text-body-tiny text-default-secondary", children: description })
         ] })
       ]
     }
@@ -2438,8 +2906,8 @@ function MultiSelectCard({
 }
 
 // src/components/forms/switch.tsx
-var import_react18 = require("react");
-var import_clsx18 = __toESM(require("clsx"), 1);
+var import_react20 = require("react");
+var import_clsx19 = __toESM(require("clsx"), 1);
 
 // src/lib/compose-event-handlers.ts
 function composeEventHandlers(theirs, ours) {
@@ -2450,12 +2918,12 @@ function composeEventHandlers(theirs, ours) {
 }
 
 // src/components/forms/switch.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SIZE4 = {
   sm: { track: "h-5 w-9", knob: "size-4", translate: "translate-x-4" },
   md: { track: "h-6 w-11", knob: "size-5", translate: "translate-x-5" }
 };
-var Switch = (0, import_react18.forwardRef)(function Switch2({
+var Switch = (0, import_react20.forwardRef)(function Switch2({
   checked: checkedProp,
   defaultChecked = false,
   onCheckedChange,
@@ -2478,11 +2946,11 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const generatedId = (0, import_react18.useId)();
+  const generatedId = (0, import_react20.useId)();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
   const s = SIZE4[size2];
-  const control = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       ref,
@@ -2496,7 +2964,7 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
       "aria-describedby": description ? descriptionId : void 0,
       disabled,
       onClick: composeEventHandlers(onClick, () => setChecked(!checked)),
-      className: (0, import_clsx18.default)(
+      className: (0, import_clsx19.default)(
         "group flex items-center gap-2",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
         disabled && "cursor-not-allowed opacity-50",
@@ -2504,11 +2972,11 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "span",
           {
             "aria-hidden": true,
-            className: (0, import_clsx18.default)(
+            className: (0, import_clsx19.default)(
               "relative inline-flex shrink-0 rounded-full transition-colors",
               s.track,
               // The unchecked track is borderless per the spec. A border here would also shift
@@ -2516,10 +2984,10 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
               // against the padding box.
               disabled ? "bg-disabled" : checked ? "bg-brand group-hover:bg-brand-hover" : "bg-default-secondary group-hover:bg-default-secondary-hover"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "span",
               {
-                className: (0, import_clsx18.default)(
+                className: (0, import_clsx19.default)(
                   "absolute left-0.5 top-0.5 rounded-full bg-default shadow-100 transition-transform",
                   s.knob,
                   checked ? s.translate : "translate-x-0"
@@ -2528,11 +2996,11 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-xs text-default", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-body-xs text-default", children: label })
       ]
     }
   );
-  const formInput = name ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const formInput = name ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "input",
     {
       type: "checkbox",
@@ -2549,19 +3017,19 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
     }
   ) : null;
   if (!description) {
-    return formInput ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: (0, import_clsx18.default)("relative inline-flex", className), children: [
+    return formInput ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: (0, import_clsx19.default)("relative inline-flex", className), children: [
       control,
       formInput
     ] }) : control;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx18.default)("relative flex flex-col", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx19.default)("relative flex flex-col", className), children: [
     control,
     formInput,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "span",
       {
         id: descriptionId,
-        className: (0, import_clsx18.default)(
+        className: (0, import_clsx19.default)(
           "mt-0.5 text-body-tiny",
           size2 === "md" ? "pl-[52px]" : "pl-[44px]",
           disabled ? "text-disabled" : "text-default-secondary"
@@ -2573,9 +3041,9 @@ var Switch = (0, import_react18.forwardRef)(function Switch2({
 });
 
 // src/components/forms/toggle.tsx
-var import_react19 = require("react");
-var import_clsx19 = __toESM(require("clsx"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_clsx20 = __toESM(require("clsx"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SIZE5 = {
   sm: "h-8 min-w-8 px-2 text-body-tiny [&_svg]:size-3.5",
   md: "h-9 min-w-9 px-2.5 text-body-xs [&_svg]:size-4",
@@ -2585,7 +3053,7 @@ var VARIANT = {
   ghost: "border border-transparent bg-transparent",
   outline: "border border-default bg-default"
 };
-var Toggle = (0, import_react19.forwardRef)(function Toggle2({
+var Toggle = (0, import_react21.forwardRef)(function Toggle2({
   pressed: pressedProp,
   defaultPressed = false,
   onPressedChange,
@@ -2597,7 +3065,7 @@ var Toggle = (0, import_react19.forwardRef)(function Toggle2({
   onClick,
   ...rest
 }, ref) {
-  const group = (0, import_react19.useContext)(ToggleGroupContext);
+  const group = (0, import_react21.useContext)(ToggleGroupContext);
   const [standalonePressed, setStandalonePressed] = useControllableState({
     value: pressedProp,
     defaultValue: defaultPressed,
@@ -2605,7 +3073,7 @@ var Toggle = (0, import_react19.forwardRef)(function Toggle2({
   });
   const pressed = group ? group.isPressed(rest.value) : standalonePressed;
   const isDisabled = disabled ?? group?.disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "button",
     {
       ref,
@@ -2636,7 +3104,7 @@ var Toggle = (0, import_react19.forwardRef)(function Toggle2({
     }
   );
 });
-var ToggleGroupContext = (0, import_react19.createContext)(null);
+var ToggleGroupContext = (0, import_react21.createContext)(null);
 function ToggleGroup({
   children,
   type = "single",
@@ -2658,8 +3126,8 @@ function ToggleGroup({
     orientation: orientation === "vertical" ? "vertical" : "horizontal",
     loop: true
   });
-  const cursor = (0, import_react19.useRef)(0);
-  const context = (0, import_react19.useMemo)(
+  const cursor = (0, import_react21.useRef)(0);
+  const context = (0, import_react21.useMemo)(
     () => ({
       isPressed: (itemValue) => Array.isArray(value) ? value.includes(itemValue) : value === itemValue,
       toggle: (itemValue) => {
@@ -2679,13 +3147,13 @@ function ToggleGroup({
     [value, setValue, type, disabled, roving]
   );
   cursor.current = 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToggleGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       role: "group",
       "aria-label": label,
       "data-slot": "toggle-group",
-      className: (0, import_clsx19.default)(
+      className: (0, import_clsx20.default)(
         "inline-flex gap-0.5",
         orientation === "vertical" ? "flex-col" : "flex-row items-center",
         className
@@ -2696,16 +3164,16 @@ function ToggleGroup({
     }
   ) });
 }
-var ToggleGroupItem = (0, import_react19.forwardRef)(
+var ToggleGroupItem = (0, import_react21.forwardRef)(
   function ToggleGroupItem2({ value, children, onFocus, ...rest }, ref) {
-    const group = (0, import_react19.useContext)(ToggleGroupContext);
+    const group = (0, import_react21.useContext)(ToggleGroupContext);
     if (!group) throw new Error("<ToggleGroupItem> must be used inside <ToggleGroup>");
     const index = group.claimIndex();
     const { ref: rovingRef, ...itemProps } = group.roving.itemProps(index, {
       disabled: rest.disabled ?? group.disabled,
       label: typeof children === "string" ? children : void 0
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Toggle,
       {
         ref: composeRefs(ref, rovingRef),
@@ -2724,10 +3192,10 @@ var ToggleGroupItem = (0, import_react19.forwardRef)(
 );
 
 // src/components/forms/input-otp.tsx
-var import_react20 = require("react");
-var import_clsx20 = __toESM(require("clsx"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var InputOTP = (0, import_react20.forwardRef)(function InputOTP2({
+var import_react22 = require("react");
+var import_clsx21 = __toESM(require("clsx"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var InputOTP = (0, import_react22.forwardRef)(function InputOTP2({
   length = 6,
   value: valueProp,
   defaultValue = "",
@@ -2746,9 +3214,9 @@ var InputOTP = (0, import_react20.forwardRef)(function InputOTP2({
     defaultValue,
     onChange: onValueChange
   });
-  const inputRef = (0, import_react20.useRef)(null);
-  const [focused, setFocused] = (0, import_react20.useState)(false);
-  const describedById = (0, import_react20.useId)();
+  const inputRef = (0, import_react22.useRef)(null);
+  const [focused, setFocused] = (0, import_react22.useState)(false);
+  const describedById = (0, import_react22.useId)();
   const pattern = mode === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
   const commit = (next) => {
     const cleaned = next.replace(pattern, "").slice(0, length);
@@ -2757,14 +3225,14 @@ var InputOTP = (0, import_react20.forwardRef)(function InputOTP2({
   };
   const chars = value.split("");
   const activeIndex = Math.min(value.length, length - 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx20.default)("inline-flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: (0, import_clsx21.default)("inline-flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         className: "relative inline-flex items-center gap-2",
         onClick: () => inputRef.current?.focus(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               ref: composeRefs(inputRef, ref),
@@ -2793,11 +3261,11 @@ var InputOTP = (0, import_react20.forwardRef)(function InputOTP2({
               className: "absolute inset-0 z-raised w-full cursor-default bg-transparent text-transparent caret-transparent outline-none"
             }
           ),
-          Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx20.default)(
+              className: (0, import_clsx21.default)(
                 "flex h-12 w-10 items-center justify-center rounded-lg border text-body font-semibold tabular-nums transition-colors",
                 groupAfter && index === groupAfter && "ml-3",
                 disabled ? "border-disabled bg-disabled text-disabled" : invalid ? "border-danger-secondary bg-default text-default" : "border-default bg-default text-default",
@@ -2810,15 +3278,15 @@ var InputOTP = (0, import_react20.forwardRef)(function InputOTP2({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: describedById, className: "sr-only", children: `Enter the ${length}-character code. ${value.length} of ${length} entered.` })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: describedById, className: "sr-only", children: `Enter the ${length}-character code. ${value.length} of ${length} entered.` })
   ] });
 });
 
 // src/components/forms/file-drop-zone.tsx
-var import_react21 = require("react");
-var import_clsx21 = __toESM(require("clsx"), 1);
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_clsx22 = __toESM(require("clsx"), 1);
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_ACCEPT = ".pdf,.jpg,.jpeg,.png";
 var DEFAULT_MAX_SIZE_BYTES = 10 * 1024 * 1024;
 function formatFileSize(bytes) {
@@ -2839,8 +3307,8 @@ function useFilePicker({
   maxSizeBytes = DEFAULT_MAX_SIZE_BYTES,
   onFileSelected
 } = {}) {
-  const inputRef = (0, import_react21.useRef)(null);
-  const [error, setError] = (0, import_react21.useState)(null);
+  const inputRef = (0, import_react23.useRef)(null);
+  const [error, setError] = (0, import_react23.useState)(null);
   function handleFiles(files) {
     const file = files?.[0];
     if (!file) return;
@@ -2880,13 +3348,13 @@ function FileDropZone({
   onFileSelected,
   disabled = false
 }) {
-  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
   const picker = useFilePicker({ accept, maxSizeBytes, onFileSelected });
   const { error, handleFiles } = picker;
   const inputRef = picker.inputProps.ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ...picker.inputProps, disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ...picker.inputProps, disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         role: "button",
@@ -2916,40 +3384,40 @@ function FileDropZone({
           setIsDragging(false);
           if (!disabled) handleFiles(e.dataTransfer.files);
         },
-        className: (0, import_clsx21.default)(
+        className: (0, import_clsx22.default)(
           "flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
-          disabled ? "cursor-not-allowed border-disabled bg-disabled" : (0, import_clsx21.default)(
+          disabled ? "cursor-not-allowed border-disabled bg-disabled" : (0, import_clsx22.default)(
             "cursor-pointer",
             isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary"
           ),
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "span",
             {
               "aria-hidden": true,
               className: disabled ? "text-disabled" : isDragging ? "text-brand" : "text-default-secondary",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.UploadIcon, { className: "size-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react6.UploadIcon, { className: "size-5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: (0, import_clsx21.default)("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-body-xs text-default-secondary text-center", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx22.default)("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-body-xs text-default-secondary text-center", children: description })
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { role: "alert", className: "text-body-xs text-danger", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { role: "alert", className: "text-body-xs text-danger", children: error })
   ] });
 }
 
 // src/components/forms/tag-input.tsx
-var import_react22 = require("react");
-var import_clsx23 = __toESM(require("clsx"), 1);
+var import_react24 = require("react");
+var import_clsx24 = __toESM(require("clsx"), 1);
 
 // src/components/status/badge.tsx
-var import_clsx22 = __toESM(require("clsx"), 1);
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_clsx23 = __toESM(require("clsx"), 1);
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultClasses = {
   gray: "bg-badge-gray   text-badge-gray",
   red: "bg-badge-red    text-badge-red",
@@ -2962,15 +3430,15 @@ var defaultClasses = {
   slate: "bg-badge-slate  text-badge-slate"
 };
 var subtleClasses = {
-  gray: "border border-badge-gray   text-default-secondary",
-  red: "border border-badge-red    text-default-secondary",
-  yellow: "border border-badge-yellow text-default-secondary",
-  lime: "border border-badge-lime   text-default-secondary",
-  green: "border border-badge-green  text-default-secondary",
-  teal: "border border-badge-teal   text-default-secondary",
-  blue: "border border-badge-blue   text-default-secondary",
-  pink: "border border-badge-pink   text-default-secondary",
-  slate: "border border-badge-slate  text-default-secondary"
+  gray: "border border-badge-gray   text-badge-gray",
+  red: "border border-badge-red    text-badge-red",
+  yellow: "border border-badge-yellow text-badge-yellow",
+  lime: "border border-badge-lime   text-badge-lime",
+  green: "border border-badge-green  text-badge-green",
+  teal: "border border-badge-teal   text-badge-teal",
+  blue: "border border-badge-blue   text-badge-blue",
+  pink: "border border-badge-pink   text-badge-pink",
+  slate: "border border-badge-slate  text-badge-slate"
 };
 function Badge({
   label,
@@ -2982,47 +3450,47 @@ function Badge({
   className
 }) {
   const isDefault = variant === "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "span",
     {
       "data-variant": variant,
-      className: (0, import_clsx22.default)(
+      className: (0, import_clsx23.default)(
         "inline-flex items-center rounded-full px-2 py-0.5",
         size2 === "sm" ? "gap-1" : "gap-1.5",
         isDefault ? defaultClasses[color] : subtleClasses[color],
         className
       ),
       children: [
-        indicator && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        indicator && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "span",
           {
-            className: (0, import_clsx22.default)(
+            className: (0, import_clsx23.default)(
               "shrink-0 rounded-full bg-current",
               size2 === "sm" ? "h-1.5 w-1.5" : "h-2 w-2"
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "span",
           {
-            className: (0, import_clsx22.default)(
+            className: (0, import_clsx23.default)(
               "whitespace-nowrap",
-              size2 === "sm" ? (0, import_clsx22.default)("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
+              size2 === "sm" ? (0, import_clsx23.default)("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
             ),
             children: label
           }
         ),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
             onClick: onClose,
-            className: (0, import_clsx22.default)(
+            className: (0, import_clsx23.default)(
               "inline-flex shrink-0 items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100",
               size2 === "sm" ? "h-3 w-3" : "h-4 w-4"
             ),
             "aria-label": `Remove ${label}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react6.XIcon, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react7.XIcon, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
           }
         )
       ]
@@ -3031,12 +3499,12 @@ function Badge({
 }
 
 // src/components/forms/tag-input.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var defaultParse = (raw) => ({ value: raw.trim() });
 function TagInput({ label, hint, error, required, disabled, id, className, ...rest }) {
-  const [parseError, setParseError] = (0, import_react22.useState)(null);
+  const [parseError, setParseError] = (0, import_react24.useState)(null);
   const shownError = error ?? parseError ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Field,
     {
       id,
@@ -3046,9 +3514,9 @@ function TagInput({ label, hint, error, required, disabled, id, className, ...re
       hasHint: Boolean(hint),
       className,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldLabel, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TagInputControl, { disabled, required, invalid: Boolean(shownError), onParseError: setParseError, ...rest }),
-        shownError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldError, { children: shownError }) : hint && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldHint, { children: hint })
+        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldLabel, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TagInputControl, { disabled, required, invalid: Boolean(shownError), onParseError: setParseError, ...rest }),
+        shownError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldError, { children: shownError }) : hint && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldHint, { children: hint })
       ]
     }
   );
@@ -3078,9 +3546,9 @@ function TagInputControl({
     delimiter.lastIndex = 0;
     return delimiter.test(text);
   };
-  const [draft, setDraft] = (0, import_react22.useState)("");
-  const [rejected, setRejected] = (0, import_react22.useState)(null);
-  (0, import_react22.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react24.useState)("");
+  const [rejected, setRejected] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
     onParseError(rejected);
     onInvalidChange?.(rejected !== null);
   }, [rejected, onParseError, onInvalidChange]);
@@ -3125,7 +3593,7 @@ function TagInputControl({
     event.preventDefault();
     commit(`${draft}${text}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       "data-invalid": invalid || void 0,
@@ -3137,7 +3605,7 @@ function TagInputControl({
         "data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled"
       ),
       children: [
-        values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Badge,
           {
             label: value,
@@ -3146,7 +3614,7 @@ function TagInputControl({
           },
           value
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             ...field,
@@ -3162,30 +3630,30 @@ function TagInputControl({
             onKeyDown: handleKeyDown,
             onPaste: handlePaste,
             onBlur: () => commit(draft),
-            className: (0, import_clsx23.default)(
+            className: (0, import_clsx24.default)(
               "min-w-[8rem] flex-1 bg-transparent px-1 text-body-sm text-default outline-none",
               "placeholder:text-default-tertiary disabled:cursor-not-allowed"
             )
           }
         ),
-        name && values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "hidden", name, value }, value))
+        name && values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "hidden", name, value }, value))
       ]
     }
   );
 }
 
 // src/components/forms/form-card.tsx
-var import_clsx24 = __toESM(require("clsx"), 1);
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function FormCard({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
-      className: (0, import_clsx24.default)(
+      className: (0, import_clsx25.default)(
         "overflow-hidden rounded-xl border border-default bg-default",
         className
       ),
@@ -3194,9 +3662,9 @@ function FormCard({
   );
 }
 function FormCardHeader({ title, subtitle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "border-b border-default px-7 py-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "border-b border-default px-7 py-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
   ] });
 }
 function FormCardFooter({
@@ -3214,8 +3682,8 @@ function FormCardFooter({
     // opens (WCAG 2.2 SC 2.4.11 Focus Not Obscured). Below `sm` Back/Continue share one
     // full-width row and the draft action wraps under them; DOM order stays draft → back →
     // continue for keyboards. Ported from SCIC in 0.7.0.
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-default px-4 py-4 sm:px-7 sm:py-5", children: [
-      onSaveDraft ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-default px-4 py-4 sm:px-7 sm:py-5", children: [
+      onSaveDraft ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Button,
         {
           variant: "neutral",
@@ -3225,25 +3693,25 @@ function FormCardFooter({
           className: "order-last w-full justify-center sm:order-none sm:w-auto",
           children: "Save as draft"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden sm:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: [
-        !backDisabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hidden sm:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: [
+        !backDisabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
             variant: "neutral",
             size: "md",
-            leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react7.ArrowLeftIcon, { "aria-hidden": true, size: 16 }),
+            leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.ArrowLeftIcon, { "aria-hidden": true, size: 16 }),
             onClick: onBack,
             className: "flex-1 justify-center sm:flex-none",
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
             variant: "primary",
             size: "md",
-            trailingIcon: continueIcon === null ? void 0 : continueIcon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react7.ArrowRightIcon, { "aria-hidden": true, size: 16 }),
+            trailingIcon: continueIcon === null ? void 0 : continueIcon ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.ArrowRightIcon, { "aria-hidden": true, size: 16 }),
             onClick: onContinue,
             disabled: continueDisabled,
             className: "flex-1 justify-center sm:flex-none",
@@ -3256,8 +3724,8 @@ function FormCardFooter({
 }
 
 // src/components/status/role-badge.tsx
-var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ROLE_TONES = {
   "Super Admin": "slate",
   "Admin": "slate",
@@ -3286,11 +3754,11 @@ var HEX6 = /^#[0-9a-fA-F]{6}$/;
 function RoleBadge({ role, size: size2 = "sm", tone, color }) {
   const rawColor = color && HEX6.test(color) ? color : void 0;
   const resolved = tone ?? ROLE_TONES[role] ?? FALLBACK_TONE;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx25.default)(
+      className: (0, import_clsx26.default)(
         "inline-flex items-center rounded-full font-medium whitespace-nowrap",
         size2 === "sm" ? "px-2 py-0.5 text-body-tiny" : "px-3 py-1 text-body-xs",
         !rawColor && TONE_STYLES[resolved]
@@ -3302,10 +3770,10 @@ function RoleBadge({ role, size: size2 = "sm", tone, color }) {
 }
 
 // src/components/forms/combobox.tsx
-var import_react23 = require("react");
-var import_clsx26 = __toESM(require("clsx"), 1);
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var HEIGHT = {
   lg: "h-12 px-4 text-body",
   md: "h-9 px-3 text-body-sm",
@@ -3333,23 +3801,23 @@ function Combobox({
     defaultValue,
     onChange: onValueChange
   });
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const [query, setQuery] = (0, import_react23.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react23.useState)(0);
-  const baseId = (0, import_react23.useId)();
+  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [query, setQuery] = (0, import_react25.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react25.useState)(0);
+  const baseId = (0, import_react25.useId)();
   const listboxId = `${baseId}-listbox`;
   const optionId = (index) => `${baseId}-option-${index}`;
-  const inputRef = (0, import_react23.useRef)(null);
-  const listRef = (0, import_react23.useRef)(null);
-  const rootRef = (0, import_react23.useRef)(null);
+  const inputRef = (0, import_react25.useRef)(null);
+  const listRef = (0, import_react25.useRef)(null);
+  const rootRef = (0, import_react25.useRef)(null);
   const field = useFieldControl();
-  const matches = (0, import_react23.useMemo)(() => {
+  const matches = (0, import_react25.useMemo)(() => {
     const predicate = filter ?? ((option, q) => option.label.toLowerCase().includes(q.toLowerCase()));
     return query ? options.filter((option) => predicate(option, query)) : options;
   }, [options, query, filter]);
   const selected = options.find((option) => option.value === value) ?? null;
   const displayValue = open ? query : selected?.label ?? "";
-  const close = (0, import_react23.useCallback)((restoreFocus = true) => {
+  const close = (0, import_react25.useCallback)((restoreFocus = true) => {
     setOpen(false);
     setQuery("");
     if (restoreFocus) inputRef.current?.focus();
@@ -3378,20 +3846,20 @@ function Combobox({
     sideOffset: 4,
     matchAnchorWidth: true
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     refs.setReference(rootRef.current);
   }, [refs, open]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setActiveIndex(0);
   }, [query, options]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open) return;
     const node = listRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
     if (node instanceof Element && typeof node.scrollIntoView === "function") {
       node.scrollIntoView({ block: "nearest" });
     }
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open) return;
     function onPointerDown(event) {
       const withinRoot = rootRef.current?.contains(event.target);
@@ -3402,18 +3870,18 @@ function Combobox({
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [open, close]);
   let renderedGroup;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: (0, import_clsx26.default)("relative w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref: rootRef, className: (0, import_clsx27.default)("relative w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
-        className: (0, import_clsx26.default)(
+        className: (0, import_clsx27.default)(
           "flex w-full items-center gap-2 rounded-lg border transition-colors",
           HEIGHT[size2],
           "focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-offset-default",
           disabled ? "cursor-not-allowed border-disabled bg-disabled" : invalid || field["aria-invalid"] ? "border-danger-secondary focus-within:border-danger focus-within:ring-danger" : "border-default bg-default focus-within:border-brand focus-within:ring-brand"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "input",
             {
               ref: inputRef,
@@ -3475,18 +3943,18 @@ function Combobox({
                     break;
                 }
               },
-              className: (0, import_clsx26.default)(
+              className: (0, import_clsx27.default)(
                 "min-w-0 flex-1 bg-transparent text-default outline-none",
                 "placeholder:text-default-tertiary",
                 "disabled:cursor-not-allowed disabled:text-disabled"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_lucide_react8.ChevronDownIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_lucide_react9.ChevronDownIcon,
             {
               "aria-hidden": true,
-              className: (0, import_clsx26.default)(
+              className: (0, import_clsx27.default)(
                 "shrink-0 transition-transform",
                 size2 === "sm" ? "size-3" : "size-4",
                 disabled ? "text-icon-disabled" : "text-icon-default-secondary",
@@ -3497,7 +3965,7 @@ function Combobox({
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -3508,16 +3976,16 @@ function Combobox({
         role: "listbox",
         "aria-label": label,
         style: { ...floatingStyles, width: "var(--panel-anchor-width)" },
-        className: (0, import_clsx26.default)("z-popover", OVERLAY_PANEL, OVERLAY_PANEL_SCROLL),
+        className: (0, import_clsx27.default)("z-popover", OVERLAY_PANEL, OVERLAY_PANEL_SCROLL),
         children: [
-          matches.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: emptyMessage }),
+          matches.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: emptyMessage }),
           matches.map((option, index) => {
             const isSelected = option.value === value;
             const isActive = index === activeIndex;
             const groupHeading = option.group !== renderedGroup ? option.group : void 0;
             renderedGroup = option.group;
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-              groupHeading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+              groupHeading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   role: "presentation",
@@ -3525,7 +3993,7 @@ function Combobox({
                   children: groupHeading
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   id: optionId(index),
@@ -3535,18 +4003,18 @@ function Combobox({
                   onPointerDown: (event) => event.preventDefault(),
                   onClick: () => commit(option),
                   onPointerEnter: () => !option.disabled && setActiveIndex(index),
-                  className: (0, import_clsx26.default)(
+                  className: (0, import_clsx27.default)(
                     OVERLAY_ITEM_BASE,
                     OVERLAY_ITEM_SIZE.md,
                     "items-center",
-                    option.disabled ? "cursor-not-allowed text-disabled" : isActive ? (0, import_clsx26.default)(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
+                    option.disabled ? "cursor-not-allowed text-disabled" : isActive ? (0, import_clsx27.default)(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
                   ),
-                  children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block truncate", children: option.label }),
-                      option.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block truncate text-body-tiny text-default-secondary", children: option.description })
+                  children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block truncate", children: option.label }),
+                      option.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block truncate text-body-tiny text-default-secondary", children: option.description })
                     ] }),
-                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react8.CheckIcon, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand", strokeWidth: 3 })
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react9.CheckIcon, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand", strokeWidth: 3 })
                   ] })
                 }
               )
@@ -3559,7 +4027,7 @@ function Combobox({
 }
 
 // src/components/forms/role-combo-box.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ROLE_COMBO_OPTIONS = [
   { role: "Reviewer", description: "Reviews onboarding requests" },
   { role: "Admin", description: "Full org control" },
@@ -3582,7 +4050,7 @@ function RoleComboBox({
     label: option.role,
     description: option.description
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Combobox,
     {
       options: comboboxOptions,
@@ -3594,17 +4062,17 @@ function RoleComboBox({
       clearable: false,
       emptyMessage: "No roles match",
       className,
-      renderOption: (option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RoleBadge, { role: option.value, size: "sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "min-w-0 flex-1 truncate text-body-xs text-default-secondary", children: option.description })
+      renderOption: (option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RoleBadge, { role: option.value, size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 flex-1 truncate text-body-xs text-default-secondary", children: option.description })
       ] })
     }
   );
 }
 
 // src/components/forms/country-select.tsx
-var import_react24 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var ISO_3166_ALPHA_2 = "AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS YE YT ZA ZM ZW";
 var COUNTRY_CODES = ISO_3166_ALPHA_2.split(" ");
 function countryOptions(codes = COUNTRY_CODES, locale) {
@@ -3624,12 +4092,12 @@ function CountrySelect({
 }) {
   const keep = [props.value, props.defaultValue].filter((v) => !!v);
   const keepKey = keep.join("|");
-  const options = (0, import_react24.useMemo)(() => {
+  const options = (0, import_react26.useMemo)(() => {
     const list = countryOptions(countries, locale);
     const missing = keep.filter((v) => !list.some((o) => o.value === v));
     return [...countryOptions(missing, locale), ...list];
   }, [countries, locale, keepKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Combobox,
     {
       ...props,
@@ -3645,8 +4113,8 @@ function CountrySelect({
 }
 
 // src/components/forms/time-zone-select.tsx
-var import_react25 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RENAMED = {
   "America/Godthab": "America/Nuuk",
   "Asia/Calcutta": "Asia/Kolkata",
@@ -3698,13 +4166,13 @@ function TimeZoneSelect({
   const atTime = at?.getTime();
   const keep = [props.value, props.defaultValue].filter((v) => !!v);
   const keepKey = keep.join("|");
-  const options = (0, import_react25.useMemo)(() => {
+  const options = (0, import_react27.useMemo)(() => {
     const when = atTime === void 0 ? /* @__PURE__ */ new Date() : new Date(atTime);
     const list = timeZoneOptions(timeZones, when);
     const missing = keep.filter((v) => !list.some((o) => o.value === v));
     return [...missing.map((v) => zoneOption(v, when)), ...list];
   }, [timeZones, atTime, keepKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Combobox,
     {
       ...props,
@@ -3720,10 +4188,10 @@ function TimeZoneSelect({
 }
 
 // src/components/forms/command.tsx
-var import_react26 = require("react");
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Command({
   items,
   label = "Command palette",
@@ -3733,13 +4201,13 @@ function Command({
   autoFocus = true,
   className
 }) {
-  const [query, setQuery] = (0, import_react26.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react26.useState)(0);
-  const baseId = (0, import_react26.useId)();
+  const [query, setQuery] = (0, import_react28.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react28.useState)(0);
+  const baseId = (0, import_react28.useId)();
   const listboxId = `${baseId}-listbox`;
   const optionId = (index) => `${baseId}-option-${index}`;
-  const listRef = (0, import_react26.useRef)(null);
-  const matches = (0, import_react26.useMemo)(() => {
+  const listRef = (0, import_react28.useRef)(null);
+  const matches = (0, import_react28.useMemo)(() => {
     if (!query) return items;
     const q = query.toLowerCase();
     return items.filter((item) => {
@@ -3748,10 +4216,10 @@ function Command({
       return item.keywords?.some((keyword) => keyword.toLowerCase().includes(q)) ?? false;
     });
   }, [items, query]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setActiveIndex(0);
   }, [query]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const node = listRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
     if (node instanceof Element && typeof node.scrollIntoView === "function") {
       node.scrollIntoView({ block: "nearest" });
@@ -3774,10 +4242,10 @@ function Command({
     });
   };
   let renderedGroup;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_clsx27.default)("flex w-full flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 border-b border-default px-3.5 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-icon-default-secondary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_clsx28.default)("flex w-full flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 border-b border-default px-3.5 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-icon-default-secondary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "input",
         {
           role: "combobox",
@@ -3824,22 +4292,22 @@ function Command({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         ref: listRef,
         id: listboxId,
         role: "listbox",
         "aria-label": label,
-        className: (0, import_clsx27.default)("max-h-80 overflow-y-auto p-1.5", SCROLLBAR_CLASSES),
+        className: (0, import_clsx28.default)("max-h-80 overflow-y-auto p-1.5", SCROLLBAR_CLASSES),
         children: [
-          matches.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "px-2.5 py-6 text-center text-body-sm text-default-secondary", children: emptyMessage }),
+          matches.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "px-2.5 py-6 text-center text-body-sm text-default-secondary", children: emptyMessage }),
           matches.map((item, index) => {
             const isActive = index === activeIndex;
             const groupHeading = item.group !== renderedGroup ? item.group : void 0;
             renderedGroup = item.group;
-            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-              groupHeading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+              groupHeading && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "div",
                 {
                   role: "presentation",
@@ -3847,7 +4315,7 @@ function Command({
                   children: groupHeading
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "div",
                 {
                   id: optionId(index),
@@ -3857,19 +4325,19 @@ function Command({
                   onPointerDown: (event) => event.preventDefault(),
                   onClick: () => run(item),
                   onPointerEnter: () => !item.disabled && setActiveIndex(index),
-                  className: (0, import_clsx27.default)(
+                  className: (0, import_clsx28.default)(
                     OVERLAY_ITEM_BASE,
                     OVERLAY_ITEM_SIZE.md,
                     "items-center",
-                    item.disabled ? "cursor-not-allowed text-disabled" : isActive ? (0, import_clsx27.default)(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
+                    item.disabled ? "cursor-not-allowed text-disabled" : isActive ? (0, import_clsx28.default)(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block truncate", children: item.label }),
-                      item.description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block truncate text-body-tiny text-default-secondary", children: item.description })
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "block truncate", children: item.label }),
+                      item.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "block truncate text-body-tiny text-default-secondary", children: item.description })
                     ] }),
-                    item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: item.shortcut })
+                    item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: item.shortcut })
                   ]
                 }
               )
@@ -3878,13 +4346,13 @@ function Command({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-live": "polite", className: "sr-only", children: `${matches.length} ${matches.length === 1 ? "result" : "results"}` })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-live": "polite", className: "sr-only", children: `${matches.length} ${matches.length === 1 ? "result" : "results"}` })
   ] });
 }
 
 // src/components/status/status-badge.tsx
-var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_clsx29 = __toESM(require("clsx"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TONE_STYLES2 = {
   neutral: "bg-status-neutral  text-status-neutral",
   info: "bg-status-info     text-status-info",
@@ -3915,18 +4383,18 @@ function StatusBadge({
   icon,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx28.default)(
+      className: (0, import_clsx29.default)(
         "inline-flex items-center gap-1.5 rounded-full font-medium leading-tight whitespace-nowrap",
         SIZE_STYLES[size2],
         TONE_STYLES2[tone],
         className
       ),
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_clsx28.default)("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_clsx29.default)("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
         label
       ]
     }
@@ -3934,8 +4402,8 @@ function StatusBadge({
 }
 
 // src/components/status/status-dot.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var dotTones = {
   brand: "bg-brand",
   positive: "bg-positive",
@@ -3945,63 +4413,63 @@ var dotTones = {
   default: "bg-default-tertiary"
 };
 function StatusDot({ tone = "default", color, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx29.default)("inline-block size-1.5 shrink-0 rounded-full", !color && dotTones[tone], className),
+      className: (0, import_clsx30.default)("inline-block size-1.5 shrink-0 rounded-full", !color && dotTones[tone], className),
       style: color ? { backgroundColor: color } : void 0
     }
   );
 }
 
 // src/components/status/status-chip.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function StatusChip({ label, count, tone = "default", dotColor, bg, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx30.default)(
+      className: (0, import_clsx31.default)(
         "inline-flex items-center gap-1.5 rounded-full px-3 py-1",
         !bg && "bg-default-secondary",
         className
       ),
       style: bg ? { backgroundColor: bg } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StatusDot, { tone, color: dotColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-body-xs font-medium text-default", children: count }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-body-xs text-default-secondary", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusDot, { tone, color: dotColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-body-xs font-medium text-default", children: count }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-body-xs text-default-secondary", children: label })
       ]
     }
   );
 }
 
 // src/components/status/count-badge.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function CountBadge({ count, label, tone = "positive", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx31.default)(
+      className: (0, import_clsx32.default)(
         "inline-flex items-center gap-1.5 rounded-full border border-default px-3 py-1 text-body-xs font-medium text-default",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StatusDot, { tone }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StatusDot, { tone }),
         count,
-        label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-default-secondary", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-default-secondary", children: label })
       ]
     }
   );
 }
 
 // src/components/status/tag-pill.tsx
-var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var toneStyles = {
   default: "bg-default-secondary text-default-secondary",
   brand: "bg-brand-tertiary text-brand",
@@ -4010,11 +4478,11 @@ var toneStyles = {
   danger: "bg-danger-tertiary text-danger"
 };
 function TagPill({ label, tone = "default", bg, color, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx32.default)(
+      className: (0, import_clsx33.default)(
         "inline-flex items-center rounded-full px-2 py-0.5 text-body-xs font-medium",
         !bg && !color && toneStyles[tone],
         className
@@ -4029,8 +4497,8 @@ function TagPill({ label, tone = "default", bg, color, className }) {
 }
 
 // src/components/status/trail-chip.tsx
-var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var DOT = {
   neutral: "bg-status-dot-neutral",
   info: "bg-status-dot-info",
@@ -4041,31 +4509,31 @@ var DOT = {
   danger: "bg-status-dot-danger"
 };
 function TrailChip({ label, value, tone = "info", dotColor, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       "data-tone": tone,
-      className: (0, import_clsx33.default)(
+      className: (0, import_clsx34.default)(
         "flex items-center gap-2 rounded-full border border-default bg-default px-3 py-1.5",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "span",
           {
-            className: (0, import_clsx33.default)("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
+            className: (0, import_clsx34.default)("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
             style: dotColor ? { backgroundColor: dotColor } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-body-xs font-medium text-default", children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-body-xs font-medium text-default", children: value })
       ]
     }
   );
 }
 
 // src/components/status/user-status-pill.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var STATUS_META = {
   active: { label: "Active", tone: "positive" },
   // `caution` (pale yellow), not `warning` (orange) — Pending is one step below a
@@ -4075,13 +4543,13 @@ var STATUS_META = {
 };
 function UserStatusPill({ status }) {
   const { label, tone } = STATUS_META[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StatusBadge, { label, tone });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusBadge, { label, tone });
 }
 
 // src/components/status/check-indicator.tsx
-var import_clsx34 = __toESM(require("clsx"), 1);
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var STATUS_STYLES = {
   passed: "bg-status-check-passed   border-status-check-passed   text-status-check-passed",
   in_progress: "bg-status-check-progress border-status-check-progress text-status-check-progress",
@@ -4093,25 +4561,25 @@ var STATUS_STYLES = {
 function StatusGlyph({ status }) {
   switch (status) {
     case "passed":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "failed":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.XIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.XIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "waived":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "in_progress":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.LoaderCircleIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.LoaderCircleIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "action_required":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.CircleAlertIcon, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.CircleAlertIcon, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
     case "pending":
       return null;
   }
 }
 function CheckIndicator({ status, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       "data-status": status,
-      className: (0, import_clsx34.default)(
+      className: (0, import_clsx35.default)(
         "flex size-[22px] shrink-0 items-center justify-center rounded-full border-[1.5px]",
         STATUS_STYLES[status],
         className
@@ -4119,14 +4587,14 @@ function CheckIndicator({ status, label, className }) {
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatusGlyph, { status })
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StatusGlyph, { status })
     }
   );
 }
 
 // src/components/status/entity-icon-badge.tsx
-var import_clsx35 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var sizeStyles4 = {
   sm: "size-8",
   md: "size-10"
@@ -4144,11 +4612,11 @@ var toneStyles2 = {
   neutral: "bg-neutral-tertiary text-icon-neutral"
 };
 function EntityIconBadge({ size: size2 = "sm", tone = "default", shape = "square", bg, iconColor, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "span",
     {
       "data-tone": tone,
-      className: (0, import_clsx35.default)(
+      className: (0, import_clsx36.default)(
         "inline-flex shrink-0 items-center justify-center",
         sizeStyles4[size2],
         shapeStyles[shape][size2],
@@ -4165,13 +4633,13 @@ function EntityIconBadge({ size: size2 = "sm", tone = "default", shape = "square
 }
 
 // src/components/forms/checkbox.tsx
-var import_react27 = require("react");
-var import_clsx37 = __toESM(require("clsx"), 1);
+var import_react29 = require("react");
+var import_clsx38 = __toESM(require("clsx"), 1);
 
 // src/components/forms/check-control.tsx
-var import_clsx36 = __toESM(require("clsx"), 1);
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_clsx37 = __toESM(require("clsx"), 1);
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var CHECK_SIZE = {
   sm: { box: "size-4", glyph: "size-2.5", dot: "size-1.5" },
   md: { box: "size-[18px]", glyph: "size-3", dot: "size-2" }
@@ -4186,11 +4654,11 @@ function CheckControl({
 }) {
   const s = CHECK_SIZE[size2];
   const on = checked || indeterminate;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "span",
     {
       "aria-hidden": true,
-      className: (0, import_clsx36.default)(
+      className: (0, import_clsx37.default)(
         "mt-px flex shrink-0 items-center justify-center border-[1.5px] transition-colors",
         s.box,
         type === "radio" ? "rounded-full" : "rounded-[4px]",
@@ -4199,18 +4667,18 @@ function CheckControl({
         "peer-focus-visible:ring-2 peer-focus-visible:ring-brand peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-default",
         disabled ? on ? "border-disabled bg-disabled text-disabled-on-disabled" : "border-disabled bg-disabled" : on ? "border-brand-emphasis bg-brand text-brand-on-brand" : invalid ? "border-danger bg-default" : "border-default-secondary bg-default"
       ),
-      children: type === "checkbox" ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.MinusIcon, { className: s.glyph, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.CheckIcon, { className: s.glyph, strokeWidth: 3 }) : null : checked ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_clsx36.default)("rounded-full bg-current", s.dot) }) : null
+      children: type === "checkbox" ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.MinusIcon, { className: s.glyph, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.CheckIcon, { className: s.glyph, strokeWidth: 3 }) : null : checked ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_clsx37.default)("rounded-full bg-current", s.dot) }) : null
     }
   );
 }
 
 // src/components/forms/checkbox.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var LABEL_TEXT2 = {
   sm: "text-body-tiny",
   md: "text-body-xs"
 };
-var Checkbox = (0, import_react27.forwardRef)(function Checkbox2({
+var Checkbox = (0, import_react29.forwardRef)(function Checkbox2({
   checked: checkedProp,
   defaultChecked = false,
   onCheckedChange,
@@ -4229,24 +4697,24 @@ var Checkbox = (0, import_react27.forwardRef)(function Checkbox2({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const inputRef = (0, import_react27.useRef)(null);
-  const generatedId = (0, import_react27.useId)();
+  const inputRef = (0, import_react29.useRef)(null);
+  const generatedId = (0, import_react29.useId)();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_clsx37.default)("flex flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx38.default)("flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "label",
       {
         htmlFor: controlId,
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           "group inline-flex items-start gap-2.5",
           disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "input",
             {
               ref: composeRefs(inputRef, ref),
@@ -4261,7 +4729,7 @@ var Checkbox = (0, import_react27.forwardRef)(function Checkbox2({
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             CheckControl,
             {
               type: "checkbox",
@@ -4272,15 +4740,15 @@ var Checkbox = (0, import_react27.forwardRef)(function Checkbox2({
               size: size2
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: (0, import_clsx37.default)(LABEL_TEXT2[size2], "text-default"), children: label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx38.default)(LABEL_TEXT2[size2], "text-default"), children: label })
         ]
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "span",
       {
         id: descriptionId,
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           "mt-0.5 pl-[26px]",
           LABEL_TEXT2[size2],
           disabled ? "text-disabled" : "text-default-secondary"
@@ -4292,11 +4760,11 @@ var Checkbox = (0, import_react27.forwardRef)(function Checkbox2({
 });
 
 // src/components/forms/radio-group.tsx
-var import_react28 = require("react");
-var import_clsx38 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react28.createContext)(null);
-var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2({
+var import_react30 = require("react");
+var import_clsx39 = __toESM(require("clsx"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react30.createContext)(null);
+var RadioGroup = (0, import_react30.forwardRef)(function RadioGroup2({
   children,
   value: valueProp,
   defaultValue,
@@ -4311,13 +4779,13 @@ var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2({
   className,
   ...rest
 }, ref) {
-  const generatedName = (0, import_react28.useId)();
+  const generatedName = (0, import_react30.useId)();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     RadioGroupContext.Provider,
     {
       value: {
@@ -4328,7 +4796,7 @@ var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2({
         disabled,
         invalid
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
           ref,
@@ -4338,7 +4806,7 @@ var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2({
           "aria-invalid": invalid || void 0,
           "aria-orientation": orientation,
           "data-slot": "radio-group",
-          className: (0, import_clsx38.default)(
+          className: (0, import_clsx39.default)(
             "flex",
             orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4",
             className
@@ -4354,25 +4822,25 @@ var LABEL_TEXT3 = {
   sm: "text-body-tiny",
   md: "text-body-xs"
 };
-var Radio = (0, import_react28.forwardRef)(function Radio2({ value, label, description, disabled, id, className, ...props }, ref) {
-  const group = (0, import_react28.useContext)(RadioGroupContext);
+var Radio = (0, import_react30.forwardRef)(function Radio2({ value, label, description, disabled, id, className, ...props }, ref) {
+  const group = (0, import_react30.useContext)(RadioGroupContext);
   if (!group) throw new Error("<Radio> must be used inside <RadioGroup>");
-  const generatedId = (0, import_react28.useId)();
+  const generatedId = (0, import_react30.useId)();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
   const isDisabled = disabled ?? group.disabled;
   const checked = group.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx38.default)("flex flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx39.default)("flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "label",
       {
         htmlFor: controlId,
-        className: (0, import_clsx38.default)(
+        className: (0, import_clsx39.default)(
           "group inline-flex items-start gap-2.5",
           isDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "input",
             {
               ref,
@@ -4388,7 +4856,7 @@ var Radio = (0, import_react28.forwardRef)(function Radio2({ value, label, descr
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             CheckControl,
             {
               type: "radio",
@@ -4398,15 +4866,15 @@ var Radio = (0, import_react28.forwardRef)(function Radio2({ value, label, descr
               size: group.size
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_clsx38.default)(LABEL_TEXT3[group.size], "text-default"), children: label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_clsx39.default)(LABEL_TEXT3[group.size], "text-default"), children: label })
         ]
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "span",
       {
         id: descriptionId,
-        className: (0, import_clsx38.default)(
+        className: (0, import_clsx39.default)(
           "mt-0.5 pl-[26px]",
           LABEL_TEXT3[group.size],
           isDisabled ? "text-disabled" : "text-default-secondary"
@@ -4418,11 +4886,11 @@ var Radio = (0, import_react28.forwardRef)(function Radio2({ value, label, descr
 });
 
 // src/components/forms/radio-cards.tsx
-var import_react29 = require("react");
-var import_clsx39 = __toESM(require("clsx"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var RadioCardsContext = (0, import_react29.createContext)(null);
-var RadioCards = (0, import_react29.forwardRef)(function RadioCards2({
+var import_react31 = require("react");
+var import_clsx40 = __toESM(require("clsx"), 1);
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var RadioCardsContext = (0, import_react31.createContext)(null);
+var RadioCards = (0, import_react31.forwardRef)(function RadioCards2({
   children,
   value: valueProp,
   defaultValue,
@@ -4435,17 +4903,17 @@ var RadioCards = (0, import_react29.forwardRef)(function RadioCards2({
   className,
   ...rest
 }, ref) {
-  const generatedName = (0, import_react29.useId)();
+  const generatedName = (0, import_react31.useId)();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     RadioCardsContext.Provider,
     {
       value: { name: name ?? generatedName, value, setValue, size: size2, disabled, required },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
           ref,
@@ -4465,14 +4933,14 @@ var SIZE6 = {
   default: { pad: "p-4", iconBox: "size-10 rounded-xl", icon: "size-5", mark: "size-5", gap: "mt-3", title: "text-body-sm" },
   sm: { pad: "p-3", iconBox: "size-8 rounded-lg", icon: "size-4", mark: "size-4", gap: "mt-2", title: "text-body-xs" }
 };
-var RadioCardsItem = (0, import_react29.forwardRef)(function RadioCardsItem2({ value, title, description, icon, disabled: itemDisabled = false, className }, ref) {
-  const group = (0, import_react29.useContext)(RadioCardsContext);
+var RadioCardsItem = (0, import_react31.forwardRef)(function RadioCardsItem2({ value, title, description, icon, disabled: itemDisabled = false, className }, ref) {
+  const group = (0, import_react31.useContext)(RadioCardsContext);
   if (!group) throw new Error("<RadioCardsItem> must be used inside <RadioCards>");
   const s = SIZE6[group.size];
   const disabled = group.disabled || itemDisabled;
-  const titleId = (0, import_react29.useId)();
-  const descriptionId = (0, import_react29.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  const titleId = (0, import_react31.useId)();
+  const descriptionId = (0, import_react31.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "label",
     {
       "data-slot": "radio-cards-item",
@@ -4487,7 +4955,7 @@ var RadioCardsItem = (0, import_react29.forwardRef)(function RadioCardsItem2({ v
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "input",
           {
             ref,
@@ -4503,35 +4971,35 @@ var RadioCardsItem = (0, import_react29.forwardRef)(function RadioCardsItem2({ v
             className: "sr-only"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx39.default)(
+              className: (0, import_clsx40.default)(
                 "flex shrink-0 items-center justify-center bg-brand-tertiary",
                 "[label:has(:checked)_&]:bg-brand",
                 s.iconBox
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx39.default)(s.icon, "text-icon-brand [label:has(:checked)_&]:text-icon-brand-on-brand"), children: icon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: (0, import_clsx40.default)(s.icon, "text-icon-brand [label:has(:checked)_&]:text-icon-brand-on-brand"), children: icon })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: (0, import_clsx39.default)(
+              className: (0, import_clsx40.default)(
                 "flex shrink-0 items-center justify-center rounded-full border-2 border-default",
                 "[label:has(:checked)_&]:border-brand",
                 s.mark
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "size-2 scale-0 rounded-full bg-brand transition-transform [label:has(:checked)_&]:scale-100" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "size-2 scale-0 rounded-full bg-brand transition-transform [label:has(:checked)_&]:scale-100" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: s.gap, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { id: titleId, className: (0, import_clsx39.default)("block font-semibold text-default [label:has(:checked)_&]:text-brand", s.title), children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: s.gap, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: titleId, className: (0, import_clsx40.default)("block font-semibold text-default [label:has(:checked)_&]:text-brand", s.title), children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
         ] })
       ]
     }
@@ -4539,10 +5007,10 @@ var RadioCardsItem = (0, import_react29.forwardRef)(function RadioCardsItem2({ v
 });
 
 // src/components/forms/checkbox-group.tsx
-var import_react30 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react30.createContext)(null);
-var CheckboxGroup = (0, import_react30.forwardRef)(function CheckboxGroup2({
+var import_react32 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react32.createContext)(null);
+var CheckboxGroup = (0, import_react32.forwardRef)(function CheckboxGroup2({
   children,
   legend,
   value: valueProp,
@@ -4555,7 +5023,7 @@ var CheckboxGroup = (0, import_react30.forwardRef)(function CheckboxGroup2({
   required = false,
   className
 }, ref) {
-  const generatedName = (0, import_react30.useId)();
+  const generatedName = (0, import_react32.useId)();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
@@ -4570,8 +5038,8 @@ var CheckboxGroup = (0, import_react30.forwardRef)(function CheckboxGroup2({
     disabled,
     required: required && value.length === 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(FieldSet, { ref, "data-slot": "checkbox-group", "data-required": required || void 0, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(FieldSet, { ref, "data-slot": "checkbox-group", "data-required": required || void 0, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       FieldLegend,
       {
         variant: "label",
@@ -4579,14 +5047,14 @@ var CheckboxGroup = (0, import_react30.forwardRef)(function CheckboxGroup2({
         children: legend
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("flex", orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4"), children })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex", orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4"), children })
   ] }) });
 });
-var CheckboxGroupItem = (0, import_react30.forwardRef)(
+var CheckboxGroupItem = (0, import_react32.forwardRef)(
   function CheckboxGroupItem2({ value, label, description, disabled }, ref) {
-    const group = (0, import_react30.useContext)(CheckboxGroupContext);
+    const group = (0, import_react32.useContext)(CheckboxGroupContext);
     if (!group) throw new Error("<CheckboxGroupItem> must be used inside <CheckboxGroup>");
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Checkbox,
       {
         ref,
@@ -4605,8 +5073,8 @@ var CheckboxGroupItem = (0, import_react30.forwardRef)(
 );
 
 // src/components/forms/segmented-control.tsx
-var import_clsx40 = __toESM(require("clsx"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function SegmentedControl({
   options,
   value: valueProp,
@@ -4629,12 +5097,12 @@ function SegmentedControl({
     loop: true,
     defaultIndex: selectedIndex
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       role: "radiogroup",
       "aria-label": label,
-      className: (0, import_clsx40.default)(
+      className: (0, import_clsx41.default)(
         "inline-flex items-center rounded-xl border border-default bg-default-secondary p-0.5",
         className
       ),
@@ -4645,7 +5113,7 @@ function SegmentedControl({
           disabled: option.disabled,
           label: option.label
         });
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "button",
           {
             type: "button",
@@ -4659,7 +5127,7 @@ function SegmentedControl({
               if (!option.disabled) setValue(option.value);
             },
             onClick: () => !option.disabled && setValue(option.value),
-            className: (0, import_clsx40.default)(
+            className: (0, import_clsx41.default)(
               "rounded-lg px-3.5 py-1.5 text-body-xs font-medium transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default-secondary",
               "disabled:cursor-not-allowed disabled:opacity-50",
@@ -4675,10 +5143,10 @@ function SegmentedControl({
 }
 
 // src/components/forms/slider.tsx
-var import_react31 = require("react");
-var import_clsx41 = __toESM(require("clsx"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Slider = (0, import_react31.forwardRef)(function Slider2({
+var import_react33 = require("react");
+var import_clsx42 = __toESM(require("clsx"), 1);
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Slider = (0, import_react33.forwardRef)(function Slider2({
   value,
   defaultValue,
   onValueChange,
@@ -4690,312 +5158,108 @@ var Slider = (0, import_react31.forwardRef)(function Slider2({
   showValue = false,
   formatValue,
   disabled = false,
-  id,
-  className,
-  ...props
-}, ref) {
-  const generatedId = (0, import_react31.useId)();
-  const controlId = id ?? generatedId;
-  const descriptionId = `${controlId}-description`;
-  const current = value ?? defaultValue ?? min;
-  const display = formatValue ? formatValue(current) : String(current);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_clsx41.default)("flex w-full flex-col gap-1.5", className), children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "label",
-        {
-          htmlFor: controlId,
-          className: (0, import_clsx41.default)("text-body-sm", disabled ? "text-disabled" : "text-default"),
-          children: label
-        }
-      ),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-body-sm font-medium tabular-nums text-default", children: display })
-    ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "p",
-      {
-        id: descriptionId,
-        className: (0, import_clsx41.default)("text-body-xs", disabled ? "text-disabled" : "text-default-secondary"),
-        children: description
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "input",
-      {
-        ref,
-        id: controlId,
-        type: "range",
-        min,
-        max,
-        step,
-        value,
-        defaultValue: value === void 0 ? defaultValue : void 0,
-        disabled,
-        "aria-describedby": description ? descriptionId : void 0,
-        "aria-valuetext": formatValue ? display : void 0,
-        onChange: (event) => onValueChange?.(Number(event.target.value)),
-        className: (0, import_clsx41.default)(
-          "h-5 w-full cursor-pointer appearance-none bg-transparent",
-          "focus-visible:outline-none",
-          disabled && "cursor-not-allowed opacity-50",
-          // Track
-          "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-default-tertiary",
-          "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-default-tertiary",
-          "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand",
-          // Thumb. The negative margin centres it on the track, since the input box is
-          // taller than the track to keep a comfortable pointer target.
-          "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-default [&::-webkit-slider-thumb]:shadow-100",
-          "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-default",
-          // Focus ring on the thumb, not the whole 100%-wide input — a ring around the
-          // full track reads as the row being focused rather than the handle.
-          "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-brand focus-visible:[&::-webkit-slider-thumb]:ring-offset-1",
-          "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-brand"
-        ),
-        ...props
-      }
-    )
-  ] });
-});
-
-// src/components/forms/label.tsx
-var import_react32 = require("react");
-var import_clsx42 = __toESM(require("clsx"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var SIZE7 = {
-  lg: "text-body",
-  md: "text-body-sm",
-  sm: "text-body-tiny"
-};
-var Label = (0, import_react32.forwardRef)(function Label2({ children, size: size2, className, htmlFor, ...rest }, ref) {
-  const field = useFieldContext();
-  const resolvedSize = size2 ?? field?.size ?? "md";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    "label",
-    {
-      ref,
-      htmlFor: htmlFor ?? field?.controlId,
-      "data-slot": "label",
-      className: (0, import_clsx42.default)(
-        "select-none",
-        SIZE7[resolvedSize],
-        field?.disabled ? "text-disabled" : "text-default",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-});
-
-// src/components/forms/calendar.tsx
-var import_react33 = require("react");
-var import_clsx43 = __toESM(require("clsx"), 1);
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
-var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
-var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
-var isBefore = (a, b) => startOfDay(a).getTime() < startOfDay(b).getTime();
-var isAfter = (a, b) => startOfDay(a).getTime() > startOfDay(b).getTime();
-var inRange = (d, from, to) => startOfDay(d).getTime() > startOfDay(from).getTime() && startOfDay(d).getTime() < startOfDay(to).getTime();
-function monthGrid(month, weekStartsOn) {
-  const first = new Date(month.getFullYear(), month.getMonth(), 1);
-  const offset2 = (first.getDay() - weekStartsOn + 7) % 7;
-  const start = addDays(first, -offset2);
-  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
-}
-function Calendar({
-  mode = "single",
-  value,
-  range,
-  onSelect,
-  onRangeChange,
-  defaultMonth,
-  min,
-  max,
-  isDateDisabled,
-  weekStartsOn = 1,
-  locale,
-  label = "Calendar",
-  className,
-  ...rest
-}) {
-  const today = (0, import_react33.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const gridId = (0, import_react33.useId)();
-  const [month, setMonth] = (0, import_react33.useState)(
-    () => defaultMonth ?? value ?? range?.from ?? today
-  );
-  const [focusedDate, setFocusedDate] = (0, import_react33.useState)(
-    () => value ?? range?.from ?? today
-  );
-  const cellRefs = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
-  const monthFormatter = (0, import_react33.useMemo)(
-    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
-    [locale]
-  );
-  const dayNameFormatter = (0, import_react33.useMemo)(
-    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
-    [locale]
-  );
-  const fullDateFormatter = (0, import_react33.useMemo)(
-    () => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
-    [locale]
-  );
-  const disabled = (0, import_react33.useCallback)(
-    (date) => {
-      if (min && isBefore(date, min)) return true;
-      if (max && isAfter(date, max)) return true;
-      return isDateDisabled?.(date) ?? false;
-    },
-    [min, max, isDateDisabled]
-  );
-  const key = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
-  const pendingFocus = (0, import_react33.useRef)(false);
-  const focusDate = (0, import_react33.useCallback)((date) => {
-    pendingFocus.current = true;
-    setFocusedDate(date);
-    setMonth(
-      (current) => current.getFullYear() === date.getFullYear() && current.getMonth() === date.getMonth() ? current : new Date(date.getFullYear(), date.getMonth(), 1)
-    );
-  }, []);
-  (0, import_react33.useEffect)(() => {
-    if (!pendingFocus.current) return;
-    const node = cellRefs.current.get(key(focusedDate));
-    if (node) {
-      node.focus();
-      pendingFocus.current = false;
-    }
-  }, [focusedDate, month]);
-  const select = (date) => {
-    if (disabled(date)) return;
-    setFocusedDate(date);
-    if (mode === "single") {
-      onSelect?.(date);
-      return;
-    }
-    const current = range ?? { from: null, to: null };
-    if (!current.from || current.to || isBefore(date, current.from)) {
-      onRangeChange?.({ from: date, to: null });
-    } else {
-      onRangeChange?.({ from: current.from, to: date });
-    }
-  };
-  const onKeyDown = (event) => {
-    const moves = {
-      ArrowLeft: () => addDays(focusedDate, -1),
-      ArrowRight: () => addDays(focusedDate, 1),
-      ArrowUp: () => addDays(focusedDate, -7),
-      ArrowDown: () => addDays(focusedDate, 7),
-      Home: () => addDays(focusedDate, -((focusedDate.getDay() - weekStartsOn + 7) % 7)),
-      End: () => addDays(focusedDate, 6 - (focusedDate.getDay() - weekStartsOn + 7) % 7),
-      PageUp: () => addDays(focusedDate, 0) && new Date(focusedDate.getFullYear(), focusedDate.getMonth() - 1, focusedDate.getDate()),
-      PageDown: () => new Date(focusedDate.getFullYear(), focusedDate.getMonth() + 1, focusedDate.getDate())
-    };
-    const move = moves[event.key];
-    if (move) {
-      event.preventDefault();
-      focusDate(move());
-    }
-  };
-  const days = monthGrid(month, weekStartsOn);
-  const weekdayNames = days.slice(0, 7).map((d) => dayNameFormatter.format(d));
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-    "div",
+  id,
+  className,
+  ...props
+}, ref) {
+  const generatedId = (0, import_react33.useId)();
+  const controlId = id ?? generatedId;
+  const descriptionId = `${controlId}-description`;
+  const current = value ?? defaultValue ?? min;
+  const display = formatValue ? formatValue(current) : String(current);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx42.default)("flex w-full flex-col gap-1.5", className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "label",
+        {
+          htmlFor: controlId,
+          className: (0, import_clsx42.default)("text-body-sm", disabled ? "text-disabled" : "text-default"),
+          children: label
+        }
+      ),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-body-sm font-medium tabular-nums text-default", children: display })
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "p",
+      {
+        id: descriptionId,
+        className: (0, import_clsx42.default)("text-body-xs", disabled ? "text-disabled" : "text-default-secondary"),
+        children: description
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "input",
+      {
+        ref,
+        id: controlId,
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        disabled,
+        "aria-describedby": description ? descriptionId : void 0,
+        "aria-valuetext": formatValue ? display : void 0,
+        onChange: (event) => onValueChange?.(Number(event.target.value)),
+        className: (0, import_clsx42.default)(
+          "h-5 w-full cursor-pointer appearance-none bg-transparent",
+          "focus-visible:outline-none",
+          disabled && "cursor-not-allowed opacity-50",
+          // Track
+          "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-default-tertiary",
+          "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-default-tertiary",
+          "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand",
+          // Thumb. The negative margin centres it on the track, since the input box is
+          // taller than the track to keep a comfortable pointer target.
+          "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-default [&::-webkit-slider-thumb]:shadow-100",
+          "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-default",
+          // Focus ring on the thumb, not the whole 100%-wide input — a ring around the
+          // full track reads as the row being focused rather than the handle.
+          "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-brand focus-visible:[&::-webkit-slider-thumb]:ring-offset-1",
+          "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-brand"
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+
+// src/components/forms/label.tsx
+var import_react34 = require("react");
+var import_clsx43 = __toESM(require("clsx"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var SIZE7 = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var Label = (0, import_react34.forwardRef)(function Label2({ children, size: size2, className, htmlFor, ...rest }, ref) {
+  const field = useFieldContext();
+  const resolvedSize = size2 ?? field?.size ?? "md";
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "label",
     {
-      "data-slot": "calendar",
-      className: (0, import_clsx43.default)("w-fit rounded-xl border border-default bg-default p-3", className),
+      ref,
+      htmlFor: htmlFor ?? field?.controlId,
+      "data-slot": "label",
+      className: (0, import_clsx43.default)(
+        "select-none",
+        SIZE7[resolvedSize],
+        field?.disabled ? "text-disabled" : "text-default",
+        className
+      ),
       ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            IconButton,
-            {
-              variant: "subtle",
-              size: "sm",
-              "aria-label": "Previous month",
-              disabled: !!min && isBefore(addMonths(month, -1), new Date(min.getFullYear(), min.getMonth(), 1)),
-              onClick: () => setMonth(addMonths(month, -1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.ChevronLeftIcon, { "aria-hidden": true, size: 16 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-live": "polite", className: "text-body-sm font-semibold text-default", children: monthFormatter.format(month) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            IconButton,
-            {
-              variant: "subtle",
-              size: "sm",
-              "aria-label": "Next month",
-              disabled: !!max && isAfter(addMonths(month, 1), new Date(max.getFullYear(), max.getMonth(), 1)),
-              onClick: () => setMonth(addMonths(month, 1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.ChevronRightIcon, { "aria-hidden": true, size: 16 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-          "div",
-          {
-            role: "grid",
-            "aria-label": label,
-            id: gridId,
-            tabIndex: -1,
-            onKeyDown,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "row", className: "mb-1 grid grid-cols-7", children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                "div",
-                {
-                  role: "columnheader",
-                  className: "flex h-8 items-center justify-center text-body-tiny font-medium text-default-tertiary",
-                  children: name
-                },
-                name
-              )) }),
-              Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "row", className: "grid grid-cols-7", children: days.slice(week * 7, week * 7 + 7).map((date) => {
-                const outside = date.getMonth() !== month.getMonth();
-                const isDisabled = disabled(date);
-                const selected = mode === "single" ? sameDay(date, value) : sameDay(date, range?.from) || sameDay(date, range?.to);
-                const between = mode === "range" && range?.from && range?.to ? inRange(date, range.from, range.to) : false;
-                const isFocused = sameDay(date, focusedDate);
-                return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "gridcell", "aria-selected": selected || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                  "button",
-                  {
-                    ref: (node) => {
-                      if (node) cellRefs.current.set(key(date), node);
-                      else cellRefs.current.delete(key(date));
-                    },
-                    type: "button",
-                    tabIndex: isFocused ? 0 : -1,
-                    disabled: isDisabled,
-                    "aria-label": fullDateFormatter.format(date),
-                    "aria-current": sameDay(date, today) ? "date" : void 0,
-                    onClick: () => select(date),
-                    onFocus: () => setFocusedDate(date),
-                    className: (0, import_clsx43.default)(
-                      "flex size-9 items-center justify-center rounded-lg text-body-sm tabular-nums transition-colors",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
-                      "disabled:cursor-not-allowed disabled:text-disabled disabled:hover:bg-transparent",
-                      selected ? "bg-brand font-semibold text-brand-on-brand" : between ? "rounded-none bg-brand-tertiary text-default" : outside ? "text-default-tertiary hover:bg-default-secondary" : "text-default hover:bg-default-secondary",
-                      // Today is marked by a ring rather than a fill, so it stays legible
-                      // when it is also the selected day.
-                      sameDay(date, today) && !selected && "ring-1 ring-inset ring-brand-tertiary"
-                    ),
-                    children: date.getDate()
-                  }
-                ) }, key(date));
-              }) }, week))
-            ]
-          }
-        )
-      ]
+      children
     }
   );
-}
+});
 
 // src/components/forms/input-group.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_clsx44 = __toESM(require("clsx"), 1);
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var HEIGHT2 = {
   lg: "h-12 text-body",
   md: "h-9 text-body-sm",
@@ -5006,9 +5270,9 @@ var PAD = {
   md: "px-3 gap-1.5",
   sm: "px-2 gap-1"
 };
-var InputGroup = (0, import_react34.forwardRef)(function InputGroup2({ children, size: sizeProp, invalid = false, disabled = false, className, ...rest }, ref) {
+var InputGroup = (0, import_react35.forwardRef)(function InputGroup2({ children, size: sizeProp, invalid = false, disabled = false, className, ...rest }, ref) {
   const size2 = useControlSize(sizeProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       ref,
@@ -5030,10 +5294,10 @@ var InputGroup = (0, import_react34.forwardRef)(function InputGroup2({ children,
     }
   );
 });
-var InputGroupInput = (0, import_react34.forwardRef)(
+var InputGroupInput = (0, import_react35.forwardRef)(
   function InputGroupInput2({ className, ...props }, ref) {
     const field = useFieldControl();
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
       {
         ref,
@@ -5049,9 +5313,9 @@ var InputGroupInput = (0, import_react34.forwardRef)(
     );
   }
 );
-var InputGroupAddon = (0, import_react34.forwardRef)(
+var InputGroupAddon = (0, import_react35.forwardRef)(
   function InputGroupAddon2({ children, align = "inline-start", decorative = true, className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "span",
       {
         ref,
@@ -5070,9 +5334,9 @@ var InputGroupAddon = (0, import_react34.forwardRef)(
     );
   }
 );
-var InputGroupText = (0, import_react34.forwardRef)(
+var InputGroupText = (0, import_react35.forwardRef)(
   function InputGroupText2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "span",
       {
         ref,
@@ -5083,12 +5347,12 @@ var InputGroupText = (0, import_react34.forwardRef)(
     );
   }
 );
-var SearchInput = (0, import_react34.forwardRef)(function SearchInput2({ size: sizeProp, onClear, label = "Search", disabled, value, className, ...props }, ref) {
+var SearchInput = (0, import_react35.forwardRef)(function SearchInput2({ size: sizeProp, onClear, label = "Search", disabled, value, className, ...props }, ref) {
   const size2 = useControlSize(sizeProp);
   const hasValue = value !== void 0 && value !== "";
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(InputGroup, { size: size2, disabled, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react13.SearchIcon, { className: size2 === "sm" ? "size-3" : "size-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(InputGroup, { size: size2, disabled, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.SearchIcon, { className: size2 === "sm" ? "size-3" : "size-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       InputGroupInput,
       {
         ref,
@@ -5100,7 +5364,7 @@ var SearchInput = (0, import_react34.forwardRef)(function SearchInput2({ size: s
         ...props
       }
     ),
-    onClear && hasValue && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InputGroupAddon, { align: "inline-end", decorative: false, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    onClear && hasValue && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InputGroupAddon, { align: "inline-end", decorative: false, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "button",
       {
         type: "button",
@@ -5108,15 +5372,15 @@ var SearchInput = (0, import_react34.forwardRef)(function SearchInput2({ size: s
         onClick: onClear,
         disabled,
         className: "flex items-center justify-center rounded transition-colors hover:text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand",
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react13.XIcon, { "aria-hidden": true, className: size2 === "sm" ? "size-3" : "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.XIcon, { "aria-hidden": true, className: size2 === "sm" ? "size-3" : "size-4" })
       }
     ) })
   ] });
 });
 
 // src/components/overlays/modal.tsx
-var import_react35 = require("react");
-var import_radix_ui = require("radix-ui");
+var import_react36 = require("react");
+var import_radix_ui2 = require("radix-ui");
 var import_lucide_react14 = require("lucide-react");
 
 // src/components/overlays/toaster-guard.ts
@@ -5126,7 +5390,7 @@ function isInsideToaster(target) {
 }
 
 // src/components/overlays/modal.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var SIZE8 = {
   sm: "sm:max-w-[420px]",
   md: "sm:max-w-[540px]",
@@ -5134,10 +5398,10 @@ var SIZE8 = {
   xl: "sm:max-w-[800px]"
 };
 var TONE_ICON = {
-  info: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.InfoIcon, { "aria-hidden": true, className: "size-5" }),
-  positive: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.CircleCheckBigIcon, { "aria-hidden": true, className: "size-5" }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.TriangleAlertIcon, { "aria-hidden": true, className: "size-5" }),
-  danger: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.OctagonAlertIcon, { "aria-hidden": true, className: "size-5" })
+  info: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.InfoIcon, { "aria-hidden": true, className: "size-5" }),
+  positive: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.CircleCheckBigIcon, { "aria-hidden": true, className: "size-5" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.TriangleAlertIcon, { "aria-hidden": true, className: "size-5" }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.OctagonAlertIcon, { "aria-hidden": true, className: "size-5" })
 };
 var TONE_BADGE = {
   info: "brand",
@@ -5150,14 +5414,14 @@ var FOOTER_ALIGN = {
   between: "justify-between",
   end: "justify-end"
 };
-var ModalNaming = (0, import_react35.createContext)(null);
-var Modal = (0, import_react35.forwardRef)(function Modal2({ open, defaultOpen, onOpenChange, container, ...shell }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_radix_ui.Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+var ModalNaming = (0, import_react36.createContext)(null);
+var Modal = (0, import_react36.forwardRef)(function Modal2({ open, defaultOpen, onOpenChange, container, ...shell }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_radix_ui2.Dialog.Root, { open, defaultOpen, onOpenChange, children: [
     extractTrigger(shell.children),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalShell, { ref, ...shell }) })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalShell, { ref, ...shell }) })
   ] });
 });
-var ModalShell = (0, import_react35.forwardRef)(
+var ModalShell = (0, import_react36.forwardRef)(
   function ModalShell2({
     label,
     children,
@@ -5169,14 +5433,14 @@ var ModalShell = (0, import_react35.forwardRef)(
     onInteractOutside,
     initialFocus
   }, ref) {
-    const [hasTitle, setHasTitle] = (0, import_react35.useState)(false);
-    const [hasDescription, setHasDescription] = (0, import_react35.useState)(false);
-    const [contentNode, setContentNode] = (0, import_react35.useState)(null);
-    const [returnFocusTo] = (0, import_react35.useState)(
+    const [hasTitle, setHasTitle] = (0, import_react36.useState)(false);
+    const [hasDescription, setHasDescription] = (0, import_react36.useState)(false);
+    const [contentNode, setContentNode] = (0, import_react36.useState)(null);
+    const [returnFocusTo] = (0, import_react36.useState)(
       () => typeof document === "undefined" ? null : document.activeElement
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_radix_ui.Dialog.Overlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_radix_ui2.Dialog.Overlay,
       {
         className: cn(
           // The overlay wraps the content (a Radix-supported layout), so it also does the
@@ -5184,8 +5448,8 @@ var ModalShell = (0, import_react35.forwardRef)(
           "fixed inset-0 z-modal flex items-end justify-center sm:items-center",
           OVERLAY_SCRIM
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          import_radix_ui.Dialog.Content,
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          import_radix_ui2.Dialog.Content,
           {
             ref: composeRefs(ref, setContentNode),
             role,
@@ -5226,22 +5490,22 @@ var ModalShell = (0, import_react35.forwardRef)(
               className
             ),
             children: [
-              !hasTitle && label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Title, { className: "sr-only", children: label }),
-              showClose && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              !hasTitle && label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Title, { className: "sr-only", children: label }),
+              showClose && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 IconButton,
                 {
                   variant: "subtle",
                   size: "sm",
                   "aria-label": "Close dialog",
                   className: "absolute right-6 top-5 z-raised",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.XIcon, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.XIcon, { size: 16, "aria-hidden": true })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 ModalNaming.Provider,
                 {
                   value: { registerTitle: setHasTitle, registerDescription: setHasDescription },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PortalContainerProvider, { container: contentNode, children: withoutTrigger(children) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PortalContainerProvider, { container: contentNode, children: withoutTrigger(children) })
                 }
               )
             ]
@@ -5251,15 +5515,15 @@ var ModalShell = (0, import_react35.forwardRef)(
     );
   }
 );
-var ModalTrigger = (0, import_react35.forwardRef)(
+var ModalTrigger = (0, import_react36.forwardRef)(
   function ModalTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Trigger, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Trigger, { ref, ...props });
   }
 );
 ModalTrigger.__modalTrigger = true;
-var ModalClose = (0, import_react35.forwardRef)(
+var ModalClose = (0, import_react36.forwardRef)(
   function ModalClose2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Close, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Close, { ref, ...props });
   }
 );
 function isTrigger(node) {
@@ -5271,8 +5535,8 @@ function extractTrigger(children) {
 function withoutTrigger(children) {
   return Array.isArray(children) ? children.filter((child) => !isTrigger(child)) : isTrigger(children) ? null : children;
 }
-var ModalHeader = (0, import_react35.forwardRef)(function ModalHeader2({ children, tone = "default", divider = true, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+var ModalHeader = (0, import_react36.forwardRef)(function ModalHeader2({ children, tone = "default", divider = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       ref,
@@ -5286,43 +5550,43 @@ var ModalHeader = (0, import_react35.forwardRef)(function ModalHeader2({ childre
       ),
       ...rest,
       children: [
-        tone !== "default" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "min-w-0 flex-1", children })
+        tone !== "default" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "min-w-0 flex-1", children })
       ]
     }
   );
 });
-var ModalTitle = (0, import_react35.forwardRef)(function ModalTitle2({ children, className, ...rest }, ref) {
-  const naming = (0, import_react35.useContext)(ModalNaming);
-  (0, import_react35.useEffect)(() => {
+var ModalTitle = (0, import_react36.forwardRef)(function ModalTitle2({ children, className, ...rest }, ref) {
+  const naming = (0, import_react36.useContext)(ModalNaming);
+  (0, import_react36.useEffect)(() => {
     naming?.registerTitle(true);
     return () => naming?.registerTitle(false);
   }, [naming]);
   const classes = cn("text-heading-sm font-semibold text-default", className);
   if (!naming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h2", { ref, className: classes, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h2", { ref, className: classes, ...rest, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Title, { ref, className: classes, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Title, { ref, className: classes, ...rest, children });
 });
-var ModalDescription = (0, import_react35.forwardRef)(
+var ModalDescription = (0, import_react36.forwardRef)(
   function ModalDescription2({ children, className, ...rest }, ref) {
-    const naming = (0, import_react35.useContext)(ModalNaming);
-    (0, import_react35.useEffect)(() => {
+    const naming = (0, import_react36.useContext)(ModalNaming);
+    (0, import_react36.useEffect)(() => {
       naming?.registerDescription(true);
       return () => naming?.registerDescription(false);
     }, [naming]);
     const classes = cn("mt-0.5 text-body-xs text-default-secondary", className);
     if (!naming) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { ref, className: classes, ...rest, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { ref, className: classes, ...rest, children });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui.Dialog.Description, { ref, className: classes, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Dialog.Description, { ref, className: classes, ...rest, children });
   }
 );
-var ModalBody = (0, import_react35.forwardRef)(function ModalBody2({ children, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("px-6 py-5", className), ...rest, children });
+var ModalBody = (0, import_react36.forwardRef)(function ModalBody2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref, className: cn("px-6 py-5", className), ...rest, children });
 });
-var ModalFooter = (0, import_react35.forwardRef)(function ModalFooter2({ children, align = "end", divider = true, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var ModalFooter = (0, import_react36.forwardRef)(function ModalFooter2({ children, align = "end", divider = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref,
@@ -5339,9 +5603,9 @@ var ModalFooter = (0, import_react35.forwardRef)(function ModalFooter2({ childre
 });
 
 // src/components/overlays/tooltip.tsx
-var import_react36 = require("react");
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react37 = require("react");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Tooltip({
   children,
   title,
@@ -5356,28 +5620,28 @@ function Tooltip({
   className
 }) {
   const container = usePortalContainer();
-  const labelId = (0, import_react36.useId)();
+  const labelId = (0, import_react37.useId)();
   const labelled = association === "labelledby";
-  const content = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "font-semibold", children: title }),
-    body && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "font-semibold", children: title }),
+    body && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Tooltip.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_radix_ui2.Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      import_radix_ui2.Tooltip.Trigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui3.Tooltip.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_radix_ui3.Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_radix_ui3.Tooltip.Trigger,
       {
         asChild: true,
         ...labelled ? { "aria-labelledby": labelId, "aria-describedby": void 0 } : {},
         children
       }
     ),
-    labelled && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { id: labelId, hidden: true, children: [
+    labelled && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { id: labelId, hidden: true, children: [
       title,
       body ? " " : null,
       body
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui2.Tooltip.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      import_radix_ui2.Tooltip.Content,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui3.Tooltip.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_radix_ui3.Tooltip.Content,
       {
         side,
         align,
@@ -5394,77 +5658,6 @@ function Tooltip({
   ] }) });
 }
 
-// src/components/overlays/popover.tsx
-var import_react37 = require("react");
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var PopoverTriggerNode = (0, import_react37.createContext)(null);
-function Popover({ children, open, defaultOpen, onOpenChange, modal = false }) {
-  const [node, setNode] = (0, import_react37.useState)(null);
-  const trigger = (0, import_react37.useMemo)(() => ({ node, setNode, modal }), [node, modal]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_radix_ui3.Popover.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange,
-      modal,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTriggerNode.Provider, { value: trigger, children })
-    }
-  );
-}
-var PopoverTrigger = (0, import_react37.forwardRef)(
-  function PopoverTrigger2(props, ref) {
-    const trigger = (0, import_react37.useContext)(PopoverTriggerNode);
-    const fallbackId = (0, import_react37.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_radix_ui3.Popover.Trigger,
-      {
-        ref: composeRefs(ref, trigger?.setNode),
-        id: props.id ?? fallbackId,
-        ...props
-      }
-    );
-  }
-);
-var PopoverContent = (0, import_react37.forwardRef)(
-  function PopoverContent2({ children, side = "bottom", align = "center", sideOffset = 8, label, container, className, ...rest }, ref) {
-    const trigger = (0, import_react37.useContext)(PopoverTriggerNode);
-    const inherited = usePortalContainer();
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui3.Popover.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_radix_ui3.Popover.Content,
-      {
-        ref,
-        side,
-        align,
-        sideOffset,
-        collisionPadding: 8,
-        onEscapeKeyDown: (event) => void deferEscapeToInnerPopup(event),
-        "aria-modal": trigger?.modal || void 0,
-        "aria-label": label,
-        "aria-labelledby": label ? void 0 : trigger?.node?.id || void 0,
-        className: cn(
-          "z-popover max-w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-default bg-default p-4 shadow-400",
-          "focus:outline-none",
-          className
-        ),
-        ...rest,
-        children
-      }
-    ) });
-  }
-);
-var PopoverClose = (0, import_react37.forwardRef)(
-  function PopoverClose2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui3.Popover.Close, { ref, ...props });
-  }
-);
-var PopoverAnchor = (0, import_react37.forwardRef)(
-  function PopoverAnchor2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui3.Popover.Anchor, { ref, ...props });
-  }
-);
-
 // src/components/overlays/hover-card.tsx
 var import_react38 = require("react");
 var import_radix_ui4 = require("radix-ui");
@@ -8239,8 +8432,8 @@ function PaginationBar({
               SelectControl,
               {
                 "aria-label": "Rows per page",
-                size: "sm",
-                className: "w-[72px]",
+                size: "md",
+                className: "w-20",
                 value: String(pageSize),
                 options: options.map((size2) => ({ value: String(size2), label: String(size2) })),
                 onValueChange: (value) => onPageSizeChange?.(Number(value))
@@ -10087,25 +10280,37 @@ var import_react68 = require("react");
 var import_clsx90 = __toESM(require("clsx"), 1);
 var import_lucide_react29 = require("lucide-react");
 var import_jsx_runtime112 = require("react/jsx-runtime");
-var Table = (0, import_react68.forwardRef)(function Table2({ label, density = "default", fixed = false, className, children, ...rest }, ref) {
+var Table = (0, import_react68.forwardRef)(function Table2({ label, density = "default", fixed = false, maxHeight, className, children, ...rest }, ref) {
   return (
     // The scroll container is separate from the table so the header stays inside the
     // scrolling region — a table that is its own scroll container cannot have a sticky
     // header.
     // The scroll wrapper is required for a <table>, which cannot itself scroll, so this
     // takes the scrollbar styling rather than ScrollArea.
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: (0, import_clsx90.default)("w-full overflow-x-auto", SCROLLBAR_CLASSES), children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      "table",
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      "div",
       {
-        ref,
-        "aria-label": label,
-        "data-slot": "table",
-        "data-density": density,
-        className: cn("w-full border-collapse", fixed && "table-fixed", className),
-        ...rest,
-        children
+        className: (0, import_clsx90.default)(
+          "w-full",
+          maxHeight ? (0, import_clsx90.default)("overflow-auto overscroll-contain", FOCUS_RING_INSET) : "overflow-x-auto",
+          SCROLLBAR_CLASSES
+        ),
+        style: maxHeight ? { maxHeight } : void 0,
+        ...maxHeight ? { role: "region", tabIndex: 0, "aria-label": label ? `${label} (scrolls)` : "Table (scrolls)" } : {},
+        children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          "table",
+          {
+            ref,
+            "aria-label": label,
+            "data-slot": "table",
+            "data-density": density,
+            className: cn("w-full border-collapse", fixed && "table-fixed", className),
+            ...rest,
+            children
+          }
+        )
       }
-    ) })
+    )
   );
 });
 var TableCaption = (0, import_react68.forwardRef)(
@@ -10439,7 +10644,7 @@ function DataTableViewOptions({ table, label = "Columns" }) {
   const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
   if (columns.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { variant: "neutral", size: "sm", leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react30.Columns3Icon, { "aria-hidden": true }), children: label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react30.Columns3Icon, { "aria-hidden": true }), children: label }) }),
     /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(DropdownMenuContent, { align: "end", children: [
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DropdownMenuLabel, { children: "Show columns" }),
       columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
@@ -10542,18 +10747,18 @@ function TableCellProgress({
   className
 }) {
   const clamped = Math.min(100, Math.max(0, percent));
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: (0, import_clsx93.default)("flex flex-col gap-1", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: (0, import_clsx93.default)("flex w-full min-w-0 items-center gap-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
       ProgressBar,
       {
         value: clamped,
         tone,
-        size: "sm",
-        className: size2 === "sm" ? "w-12" : "w-16",
+        size: size2 === "sm" ? "xs" : "sm",
+        className: "min-w-12 flex-1",
         "aria-label": `${clamped}%`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { className: "text-body-tiny leading-none text-default-secondary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { className: "shrink-0 text-body-tiny leading-none tabular-nums text-default-secondary", children: [
       percent,
       "%"
     ] })
@@ -10654,17 +10859,19 @@ function useHeaderWidths(padding2, deps) {
 }
 function useScrollEdges() {
   const [node, setNode] = (0, import_react71.useState)(null);
-  const [edges, setEdges] = (0, import_react71.useState)({ overflowing: false, atStart: true, atEnd: true });
+  const [edges, setEdges] = (0, import_react71.useState)({ overflowing: false, atStart: true, atEnd: true, overflowingY: false, atTop: true });
   const measure = (0, import_react71.useCallback)(() => {
     if (!node) return;
-    const { scrollLeft, scrollWidth, clientWidth } = node;
+    const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = node;
     const next = {
       overflowing: scrollWidth > clientWidth + 1,
       atStart: scrollLeft <= 1,
-      atEnd: scrollLeft + clientWidth >= scrollWidth - 1
+      atEnd: scrollLeft + clientWidth >= scrollWidth - 1,
+      overflowingY: scrollHeight > clientHeight + 1,
+      atTop: scrollTop <= 1
     };
     setEdges(
-      (previous) => previous.overflowing === next.overflowing && previous.atStart === next.atStart && previous.atEnd === next.atEnd ? previous : next
+      (previous) => previous.overflowing === next.overflowing && previous.atStart === next.atStart && previous.atEnd === next.atEnd && previous.overflowingY === next.overflowingY && previous.atTop === next.atTop ? previous : next
     );
   }, [node]);
   (0, import_react71.useLayoutEffect)(() => {
@@ -10710,6 +10917,7 @@ function DataTable({
   density = "default",
   align = "center",
   responsive = true,
+  maxHeight,
   manual = {},
   state = {},
   onSortingChange,
@@ -10819,14 +11027,15 @@ function DataTable({
     renderRowLink,
     getRowTone,
     getRowDimmed,
-    getRowLabel
+    getRowLabel,
+    maxHeight
   };
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { "data-slot": "data-table", className: cn("flex flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
       search && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         SearchInput,
         {
-          size: "sm",
+          size: "md",
           label: search.label ?? "Search",
           placeholder: search.placeholder ?? "Search\u2026",
           value: searchValue,
@@ -10840,7 +11049,7 @@ function DataTable({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: filtering && !loading ? `${resultCount} ${resultCount === 1 ? "result" : "results"}` : "" }),
     /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { ref: wrapRef, className: "overflow-hidden rounded-xl border border-default bg-default", children: [
-      mode === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CardList, { ...view }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableView, { ...view }),
+      mode === "cards" ? maxHeight ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CardScroll, { label, maxHeight, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CardList, { ...view }) }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CardList, { ...view }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableView, { ...view }),
       showPager && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "border-t border-default px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DataTablePagination, { table, pageSizeOptions }) }),
       footer && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "border-t border-default px-4 py-3", children: footer })
     ] })
@@ -10863,7 +11072,8 @@ function TableView({
   getRowHref,
   renderRowLink,
   getRowTone,
-  getRowDimmed
+  getRowDimmed,
+  maxHeight
 }) {
   const d = DENSITY2[density];
   const columns = table.getVisibleLeafColumns();
@@ -10891,15 +11101,23 @@ function TableView({
     ],
     (id === stickyStart || id === stickyEnd) && (header ? "bg-default-secondary" : ["bg-default", rowAction && "group-hover:bg-default-secondary"])
   );
-  const regionLabel = label ? `${label} (scrolls horizontally)` : "Table (scrolls horizontally)";
+  const scrolls = scroll.overflowing || Boolean(maxHeight) && scroll.overflowingY;
+  const direction = scroll.overflowing && maxHeight && scroll.overflowingY ? "scrolls" : scroll.overflowing ? "scrolls horizontally" : "scrolls vertically";
+  const regionLabel = `${label ?? "Table"} (${direction})`;
+  const pinnedHeader = maxHeight ? (0, import_clsx94.default)("sticky top-0 z-sticky bg-default-secondary", !scroll.atTop && "shadow-[inset_0_-1px_0_var(--color-border-default-default)]") : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "div",
       {
         ref: scroll.ref,
         onScroll: scroll.onScroll,
-        className: cn("overflow-x-auto overscroll-x-contain", SCROLLBAR_CLASSES, scroll.overflowing && FOCUS_RING_INSET),
-        ...scroll.overflowing ? { role: "region", tabIndex: 0, "aria-label": regionLabel } : {},
+        className: cn(
+          maxHeight ? "overflow-auto overscroll-contain" : "overflow-x-auto overscroll-x-contain",
+          SCROLLBAR_CLASSES,
+          scrolls && FOCUS_RING_INSET
+        ),
+        style: maxHeight ? { maxHeight } : void 0,
+        ...scrolls ? { role: "region", tabIndex: 0, "aria-label": regionLabel } : {},
         children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
           "table",
           {
@@ -10936,6 +11154,7 @@ function TableView({
                       TEXT_ALIGN[meta?.align ?? "start"],
                       !meta?.interactive && "overflow-hidden",
                       stickyClass(header.column.id, true),
+                      pinnedHeader,
                       meta?.headerClassName
                     ),
                     children: header.isPlaceholder ? null : typeof definition === "string" || definition === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { ref: meta?.hideHeader ? void 0 : headers.register(header.column.id), className: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DataTableColumnHeader, { column: header.column }) }) : (0, import_react_table.flexRender)(definition, header.getContext())
@@ -11055,6 +11274,20 @@ function BodyCell({
     }
   );
 }
+function CardScroll({ label, maxHeight, children }) {
+  const scroll = useScrollEdges();
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    "div",
+    {
+      ref: scroll.ref,
+      onScroll: scroll.onScroll,
+      style: { maxHeight },
+      className: cn("overflow-y-auto overscroll-contain", SCROLLBAR_CLASSES, scroll.overflowingY && FOCUS_RING_INSET),
+      ...scroll.overflowingY ? { role: "region", tabIndex: 0, "aria-label": `${label ?? "Table"} (scrolls vertically)` } : {},
+      children
+    }
+  );
+}
 function CardList({
   table,
   label,
@@ -11135,7 +11368,7 @@ function CardList({
                   /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "flex max-w-[45%] shrink-0 justify-end [&_.whitespace-nowrap]:whitespace-normal", children: render(slots.status.id) }),
                   slots.actions && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "relative z-raised shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CellInteractionGuard, { children: render(slots.actions.id) }) })
                 ] }),
-                slots.fields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("dl", { className: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,8.5rem),1fr))] gap-x-4 gap-y-2.5", children: slots.fields.map(({ id, column }) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: (0, import_clsx94.default)("min-w-0", column.columnDef.meta?.interactive && "relative z-raised"), children: [
+                slots.fields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("dl", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,8.5rem),1fr))] gap-x-4 gap-y-2.5", children: slots.fields.map(({ id, column }) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: (0, import_clsx94.default)("min-w-0", column.columnDef.meta?.interactive && "relative z-raised"), children: [
                   /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("dt", { className: "text-body-tiny text-default-secondary", children: columnLabel(column) }),
                   /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("dd", { className: "mt-0.5 min-w-0 text-body-xs text-default", children: column.columnDef.meta?.interactive ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CellInteractionGuard, { children: render(id) }) : render(id) })
                 ] }, id)) })