@platned/ui 0.7.0 → 0.7.1

package/dist/index.js

@@ -1834,25 +1834,402 @@ var Select = forwardRef8(function Select2({
 });
 
 // src/components/forms/date-picker.tsx
-import { forwardRef as forwardRef9 } from "react";
-import clsx15 from "clsx";
+import {
+  forwardRef as forwardRef10,
+  useId as useId5,
+  useMemo as useMemo3,
+  useRef as useRef8,
+  useState as useState8
+} from "react";
+import clsx16 from "clsx";
 import { CalendarIcon } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs8 } from "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"
+
+// src/components/overlays/popover.tsx
+import {
+  createContext as createContext4,
+  forwardRef as forwardRef9,
+  useContext as useContext4,
+  useId as useId3,
+  useMemo,
+  useState as useState6
+} from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var PopoverTriggerNode = createContext4(null);
+function Popover({ children, open, defaultOpen, onOpenChange, modal = false }) {
+  const [node, setNode] = useState6(null);
+  const trigger = useMemo(() => ({ node, setNode, modal }), [node, modal]);
+  return /* @__PURE__ */ jsx13(
+    PopoverPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: /* @__PURE__ */ jsx13(PopoverTriggerNode.Provider, { value: trigger, children })
+    }
+  );
+}
+var PopoverTrigger = forwardRef9(
+  function PopoverTrigger2(props, ref) {
+    const trigger = useContext4(PopoverTriggerNode);
+    const fallbackId = useId3();
+    return /* @__PURE__ */ jsx13(
+      PopoverPrimitive.Trigger,
+      {
+        ref: composeRefs(ref, trigger?.setNode),
+        id: props.id ?? fallbackId,
+        ...props
+      }
+    );
+  }
+);
+var PopoverContent = forwardRef9(
+  function PopoverContent2({ children, side = "bottom", align = "center", sideOffset = 8, label, container, className, onOpenAutoFocus, ...rest }, ref) {
+    const trigger = useContext4(PopoverTriggerNode);
+    const inherited = usePortalContainer();
+    return /* @__PURE__ */ jsx13(PopoverPrimitive.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ jsx13(
+      PopoverPrimitive.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 = forwardRef9(
+  function PopoverClose2(props, ref) {
+    return /* @__PURE__ */ jsx13(PopoverPrimitive.Close, { ref, ...props });
+  }
+);
+var PopoverAnchor = forwardRef9(
+  function PopoverAnchor2(props, ref) {
+    return /* @__PURE__ */ jsx13(PopoverPrimitive.Anchor, { ref, ...props });
+  }
+);
+
+// src/components/forms/calendar.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect6,
+  useId as useId4,
+  useMemo as useMemo2,
+  useRef as useRef7,
+  useState as useState7
+} from "react";
+import clsx15 from "clsx";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var CAPTION_SELECT = clsx15(
+  "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 = useMemo2(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const gridId = useId4();
+  const [month, setMonth] = useState7(
+    () => defaultMonth ?? value ?? range?.from ?? today
+  );
+  const [focusedDate, setFocusedDate] = useState7(
+    () => value ?? range?.from ?? today
+  );
+  const cellRefs = useRef7(/* @__PURE__ */ new Map());
+  const monthFormatter = useMemo2(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  const dayNameFormatter = useMemo2(
+    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
+    [locale]
+  );
+  const monthNameFormatter = useMemo2(
+    () => new Intl.DateTimeFormat(locale, { month: "long" }),
+    [locale]
+  );
+  const fullDateFormatter = useMemo2(
+    () => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
+    [locale]
+  );
+  const disabled = useCallback3(
+    (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 = useRef7(false);
+  const focusDate = useCallback3((date) => {
+    pendingFocus.current = true;
+    setFocusedDate(date);
+    setMonth(
+      (current) => current.getFullYear() === date.getFullYear() && current.getMonth() === date.getMonth() ? current : new Date(date.getFullYear(), date.getMonth(), 1)
+    );
+  }, []);
+  useEffect6(() => {
+    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__ */ jsxs8(
+    "div",
+    {
+      "data-slot": "calendar",
+      className: cn("w-fit rounded-xl border border-default bg-default p-3", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx14(
+            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__ */ jsx14(ChevronLeftIcon, { "aria-hidden": true, size: 16 })
+            }
+          ),
+          captionLayout === "dropdown" ? /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx14(
+              "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__ */ jsx14("option", { value: m, disabled: monthOutOfRange(m), children: monthNameFormatter.format(new Date(2e3, m, 1)) }, m))
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "select",
+              {
+                "aria-label": "Year",
+                value: month.getFullYear(),
+                onChange: (event) => showMonth(Number(event.target.value), month.getMonth()),
+                className: CAPTION_SELECT,
+                children: years.map((year) => /* @__PURE__ */ jsx14("option", { value: year, children: year }, year))
+              }
+            ),
+            /* @__PURE__ */ jsx14("span", { "aria-live": "polite", className: "sr-only", children: monthFormatter.format(month) })
+          ] }) : /* @__PURE__ */ jsx14("span", { "aria-live": "polite", className: "text-body-sm font-semibold text-default", children: monthFormatter.format(month) }),
+          /* @__PURE__ */ jsx14(
+            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__ */ jsx14(ChevronRightIcon, { "aria-hidden": true, size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            role: "grid",
+            "aria-label": label,
+            id: gridId,
+            tabIndex: -1,
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ jsx14("div", { role: "row", className: "mb-1 grid grid-cols-7", children: weekdayNames.map((name) => /* @__PURE__ */ jsx14(
+                "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__ */ jsx14("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__ */ jsx14("div", { role: "gridcell", "aria-selected": selected || void 0, children: /* @__PURE__ */ jsx14(
+                  "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: clsx15(
+                      "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
+import { jsx as jsx15, jsxs as jsxs9 } from "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 = forwardRef9(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 = forwardRef10(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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     Field,
     {
       id,
@@ -1860,79 +2237,190 @@ var DatePicker = forwardRef9(function DatePicker2({ label, description, error, h
       disabled,
       required,
       hasDescription: !!description,
-      hasError,
+      hasError: !!error,
       hasHint: !!hint,
       className,
       children: [
-        label && /* @__PURE__ */ jsx13(FieldLabel, { children: label }),
-        description && /* @__PURE__ */ jsx13(FieldDescription, { children: description }),
-        /* @__PURE__ */ jsxs8("div", { className: "relative flex items-center", children: [
-          /* @__PURE__ */ jsx13(
-            DateInput,
-            {
-              ref,
-              size: size2,
-              invalid: hasError,
-              disabled,
-              required,
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsx13(
-            "span",
-            {
-              "aria-hidden": true,
-              className: clsx15(
-                "pointer-events-none absolute",
-                iw.right,
-                iw.size,
-                "flex items-center justify-center",
-                disabled ? "text-icon-disabled" : "text-icon-default-secondary"
-              ),
-              children: /* @__PURE__ */ jsx13(CalendarIcon, { className: "size-full" })
-            }
-          )
-        ] }),
-        hasError && /* @__PURE__ */ jsx13(FieldError, { children: error }),
-        !hasError && hint && /* @__PURE__ */ jsx13(FieldHint, { children: hint })
+        label && /* @__PURE__ */ jsx15(FieldLabel, { children: label }),
+        description && /* @__PURE__ */ jsx15(FieldDescription, { children: description }),
+        /* @__PURE__ */ jsx15(
+          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__ */ jsx15(FieldError, { children: error }) : hint && /* @__PURE__ */ jsx15(FieldHint, { children: hint })
       ]
     }
   );
 });
-var DateInput = forwardRef9(function DateInput2({ size: sizeProp, invalid = false, className, ...props }, ref) {
-  const size2 = useControlSize(sizeProp);
+var DateControl = forwardRef10(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 = useId5();
+  const dialogId = useId5();
+  const [open, setOpen] = useState8(false);
+  const [internal, setInternal] = useState8(defaultValue ?? "");
+  const iso = value ?? internal;
+  const date = parseIso(iso);
+  const triggerRef = useRef8(null);
+  const inputRef = useRef8(null);
+  const contentRef = useRef8(null);
   const isInvalid = invalid || !!field["aria-invalid"];
-  const isDisabled = props.disabled ?? field.disabled;
-  return /* @__PURE__ */ jsx13(
-    "input",
-    {
-      ref,
-      type: "date",
-      ...field,
-      className: clsx15(
-        "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 = useMemo3(() => 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__ */ jsxs9("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+        "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: clsx16(
+            "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__ */ jsx15("span", { id: valueId, className: clsx16("block truncate", !date && "text-default-tertiary"), children: date ? formatter.format(date) : placeholder })
+        }
+      ) }),
+      /* @__PURE__ */ jsx15(
+        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__ */ jsx15(
+            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__ */ jsx15(
+      "span",
+      {
+        "aria-hidden": true,
+        className: clsx16(
+          "pointer-events-none absolute",
+          iw.right,
+          iw.size,
+          "flex items-center justify-center",
+          isDisabled ? "text-icon-disabled" : "text-icon-default-secondary"
+        ),
+        children: /* @__PURE__ */ jsx15(CalendarIcon, { className: "size-full" })
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "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
-import clsx16 from "clsx";
-import { CheckIcon as CheckIcon2, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import clsx17 from "clsx";
+import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var STATUS_TEXT = {
   complete: "completed",
   active: "current step",
@@ -1945,41 +2433,41 @@ var SIZE2 = {
 function StepIndicator({ status, size: size2 }) {
   const s = SIZE2[size2];
   if (status === "complete") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(
       "span",
       {
         "aria-hidden": true,
-        className: clsx16(
+        className: clsx17(
           "flex shrink-0 items-center justify-center rounded-full bg-brand text-brand-on-brand",
           s.indicator
         ),
-        children: /* @__PURE__ */ jsx14(CheckIcon2, { size: s.glyph })
+        children: /* @__PURE__ */ jsx16(CheckIcon2, { size: s.glyph })
       }
     );
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(
       "span",
       {
         "aria-hidden": true,
-        className: clsx16(
+        className: clsx17(
           "flex shrink-0 items-center justify-center rounded-full border-2 border-brand-emphasis",
           s.indicator
         ),
-        children: /* @__PURE__ */ jsx14("span", { className: "size-2.5 rounded-full bg-brand" })
+        children: /* @__PURE__ */ jsx16("span", { className: "size-2.5 rounded-full bg-brand" })
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       "aria-hidden": true,
-      className: clsx16("shrink-0 rounded-full border-2 border-disabled", s.indicator)
+      className: clsx17("shrink-0 rounded-full border-2 border-disabled", s.indicator)
     }
   );
 }
 function ChevronSeparator() {
-  return /* @__PURE__ */ jsx14(ChevronRightIcon, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
+  return /* @__PURE__ */ jsx16(ChevronRightIcon2, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
 }
 var labelClass = {
   complete: "text-brand font-semibold",
@@ -1990,26 +2478,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__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       "ol",
       {
-        className: clsx16("flex items-center overflow-x-auto", SCROLLBAR_CLASSES, className),
+        className: clsx17("flex items-center overflow-x-auto", SCROLLBAR_CLASSES, className),
         "aria-label": label,
-        children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
+        children: steps.map((step, i) => /* @__PURE__ */ jsxs10(
           "li",
           {
             className: "flex items-center",
             "aria-current": step.status === "active" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx14(StepIndicator, { status: step.status, size: size2 }),
-                /* @__PURE__ */ jsx14("span", { className: clsx16("whitespace-nowrap", s.label, labelClass[step.status]), children: step.label }),
-                /* @__PURE__ */ jsxs9("span", { className: "sr-only", children: [
+              /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx16(StepIndicator, { status: step.status, size: size2 }),
+                /* @__PURE__ */ jsx16("span", { className: clsx17("whitespace-nowrap", s.label, labelClass[step.status]), children: step.label }),
+                /* @__PURE__ */ jsxs10("span", { className: "sr-only", children: [
                   ", ",
                   STATUS_TEXT[step.status]
                 ] })
               ] }),
-              i < steps.length - 1 && /* @__PURE__ */ jsx14(ChevronSeparator, {})
+              i < steps.length - 1 && /* @__PURE__ */ jsx16(ChevronSeparator, {})
             ]
           },
           step.label
@@ -2020,9 +2508,9 @@ function Stepper({ steps, size: size2 = "md", label = "Progress", className }) {
 }
 
 // src/components/forms/multiselect-card.tsx
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import { CheckIcon as CheckIcon3 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var SIZE3 = {
   default: {
     pad: "p-4",
@@ -2052,7 +2540,7 @@ function MultiSelectCard({
   className
 }) {
   const s = SIZE3[size2];
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       type: "button",
@@ -2060,7 +2548,7 @@ function MultiSelectCard({
       "aria-checked": selected,
       disabled,
       onClick: onToggle,
-      className: clsx17(
+      className: clsx18(
         "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",
@@ -2069,40 +2557,40 @@ function MultiSelectCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsx17(
             "span",
             {
               "aria-hidden": true,
-              className: clsx17(
+              className: clsx18(
                 "flex shrink-0 items-center justify-center",
                 s.iconBox,
                 selected ? "bg-brand" : "bg-brand-tertiary"
               ),
-              children: /* @__PURE__ */ jsx15("span", { className: clsx17(s.icon, selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
+              children: /* @__PURE__ */ jsx17("span", { className: clsx18(s.icon, selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
             }
           ),
-          selected ? /* @__PURE__ */ jsx15(
+          selected ? /* @__PURE__ */ jsx17(
             "span",
             {
               "aria-hidden": true,
-              className: clsx17(
+              className: clsx18(
                 "flex shrink-0 items-center justify-center rounded-full bg-brand text-icon-brand-on-brand",
                 s.mark
               ),
-              children: /* @__PURE__ */ jsx15(CheckIcon3, { className: "size-3", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsx17(CheckIcon3, { className: "size-3", strokeWidth: 2.5 })
             }
-          ) : /* @__PURE__ */ jsx15(
+          ) : /* @__PURE__ */ jsx17(
             "span",
             {
               "aria-hidden": true,
-              className: clsx17("shrink-0 rounded-full border-2 border-default", s.mark)
+              className: clsx18("shrink-0 rounded-full border-2 border-default", s.mark)
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: s.gap, children: [
-          /* @__PURE__ */ jsx15("p", { className: clsx17("font-semibold", s.title, selected ? "text-brand" : "text-default"), children: title }),
-          description && /* @__PURE__ */ jsx15("p", { className: "mt-0.5 text-body-tiny text-default-secondary", children: description })
+        /* @__PURE__ */ jsxs11("div", { className: s.gap, children: [
+          /* @__PURE__ */ jsx17("p", { className: clsx18("font-semibold", s.title, selected ? "text-brand" : "text-default"), children: title }),
+          description && /* @__PURE__ */ jsx17("p", { className: "mt-0.5 text-body-tiny text-default-secondary", children: description })
         ] })
       ]
     }
@@ -2110,8 +2598,8 @@ function MultiSelectCard({
 }
 
 // src/components/forms/switch.tsx
-import { forwardRef as forwardRef10, useId as useId3 } from "react";
-import clsx18 from "clsx";
+import { forwardRef as forwardRef11, useId as useId6 } from "react";
+import clsx19 from "clsx";
 
 // src/lib/compose-event-handlers.ts
 function composeEventHandlers(theirs, ours) {
@@ -2122,12 +2610,12 @@ function composeEventHandlers(theirs, ours) {
 }
 
 // src/components/forms/switch.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "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 = forwardRef10(function Switch2({
+var Switch = forwardRef11(function Switch2({
   checked: checkedProp,
   defaultChecked = false,
   onCheckedChange,
@@ -2150,11 +2638,11 @@ var Switch = forwardRef10(function Switch2({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const generatedId = useId3();
+  const generatedId = useId6();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
   const s = SIZE4[size2];
-  const control = /* @__PURE__ */ jsxs11(
+  const control = /* @__PURE__ */ jsxs12(
     "button",
     {
       ref,
@@ -2168,7 +2656,7 @@ var Switch = forwardRef10(function Switch2({
       "aria-describedby": description ? descriptionId : void 0,
       disabled,
       onClick: composeEventHandlers(onClick, () => setChecked(!checked)),
-      className: clsx18(
+      className: clsx19(
         "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",
@@ -2176,11 +2664,11 @@ var Switch = forwardRef10(function Switch2({
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "span",
           {
             "aria-hidden": true,
-            className: clsx18(
+            className: clsx19(
               "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
@@ -2188,10 +2676,10 @@ var Switch = forwardRef10(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__ */ jsx16(
+            children: /* @__PURE__ */ jsx18(
               "span",
               {
-                className: clsx18(
+                className: clsx19(
                   "absolute left-0.5 top-0.5 rounded-full bg-default shadow-100 transition-transform",
                   s.knob,
                   checked ? s.translate : "translate-x-0"
@@ -2200,11 +2688,11 @@ var Switch = forwardRef10(function Switch2({
             )
           }
         ),
-        label && /* @__PURE__ */ jsx16("span", { className: "text-body-xs text-default", children: label })
+        label && /* @__PURE__ */ jsx18("span", { className: "text-body-xs text-default", children: label })
       ]
     }
   );
-  const formInput = name ? /* @__PURE__ */ jsx16(
+  const formInput = name ? /* @__PURE__ */ jsx18(
     "input",
     {
       type: "checkbox",
@@ -2221,19 +2709,19 @@ var Switch = forwardRef10(function Switch2({
     }
   ) : null;
   if (!description) {
-    return formInput ? /* @__PURE__ */ jsxs11("span", { className: clsx18("relative inline-flex", className), children: [
+    return formInput ? /* @__PURE__ */ jsxs12("span", { className: clsx19("relative inline-flex", className), children: [
       control,
       formInput
     ] }) : control;
   }
-  return /* @__PURE__ */ jsxs11("div", { className: clsx18("relative flex flex-col", className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: clsx19("relative flex flex-col", className), children: [
     control,
     formInput,
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       "span",
       {
         id: descriptionId,
-        className: clsx18(
+        className: clsx19(
           "mt-0.5 text-body-tiny",
           size2 === "md" ? "pl-[52px]" : "pl-[44px]",
           disabled ? "text-disabled" : "text-default-secondary"
@@ -2246,14 +2734,14 @@ var Switch = forwardRef10(function Switch2({
 
 // src/components/forms/toggle.tsx
 import {
-  createContext as createContext4,
-  forwardRef as forwardRef11,
-  useContext as useContext4,
-  useMemo,
-  useRef as useRef7
+  createContext as createContext5,
+  forwardRef as forwardRef12,
+  useContext as useContext5,
+  useMemo as useMemo4,
+  useRef as useRef9
 } from "react";
-import clsx19 from "clsx";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import clsx20 from "clsx";
+import { jsx as jsx19 } from "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",
@@ -2263,7 +2751,7 @@ var VARIANT = {
   ghost: "border border-transparent bg-transparent",
   outline: "border border-default bg-default"
 };
-var Toggle = forwardRef11(function Toggle2({
+var Toggle = forwardRef12(function Toggle2({
   pressed: pressedProp,
   defaultPressed = false,
   onPressedChange,
@@ -2275,7 +2763,7 @@ var Toggle = forwardRef11(function Toggle2({
   onClick,
   ...rest
 }, ref) {
-  const group = useContext4(ToggleGroupContext);
+  const group = useContext5(ToggleGroupContext);
   const [standalonePressed, setStandalonePressed] = useControllableState({
     value: pressedProp,
     defaultValue: defaultPressed,
@@ -2283,7 +2771,7 @@ var Toggle = forwardRef11(function Toggle2({
   });
   const pressed = group ? group.isPressed(rest.value) : standalonePressed;
   const isDisabled = disabled ?? group?.disabled;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       ref,
@@ -2314,7 +2802,7 @@ var Toggle = forwardRef11(function Toggle2({
     }
   );
 });
-var ToggleGroupContext = createContext4(null);
+var ToggleGroupContext = createContext5(null);
 function ToggleGroup({
   children,
   type = "single",
@@ -2336,8 +2824,8 @@ function ToggleGroup({
     orientation: orientation === "vertical" ? "vertical" : "horizontal",
     loop: true
   });
-  const cursor = useRef7(0);
-  const context = useMemo(
+  const cursor = useRef9(0);
+  const context = useMemo4(
     () => ({
       isPressed: (itemValue) => Array.isArray(value) ? value.includes(itemValue) : value === itemValue,
       toggle: (itemValue) => {
@@ -2357,13 +2845,13 @@ function ToggleGroup({
     [value, setValue, type, disabled, roving]
   );
   cursor.current = 0;
-  return /* @__PURE__ */ jsx17(ToggleGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(ToggleGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx19(
     "div",
     {
       role: "group",
       "aria-label": label,
       "data-slot": "toggle-group",
-      className: clsx19(
+      className: clsx20(
         "inline-flex gap-0.5",
         orientation === "vertical" ? "flex-col" : "flex-row items-center",
         className
@@ -2374,16 +2862,16 @@ function ToggleGroup({
     }
   ) });
 }
-var ToggleGroupItem = forwardRef11(
+var ToggleGroupItem = forwardRef12(
   function ToggleGroupItem2({ value, children, onFocus, ...rest }, ref) {
-    const group = useContext4(ToggleGroupContext);
+    const group = useContext5(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__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       Toggle,
       {
         ref: composeRefs(ref, rovingRef),
@@ -2403,14 +2891,14 @@ var ToggleGroupItem = forwardRef11(
 
 // src/components/forms/input-otp.tsx
 import {
-  forwardRef as forwardRef12,
-  useId as useId4,
-  useRef as useRef8,
-  useState as useState6
+  forwardRef as forwardRef13,
+  useId as useId7,
+  useRef as useRef10,
+  useState as useState9
 } from "react";
-import clsx20 from "clsx";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var InputOTP = forwardRef12(function InputOTP2({
+import clsx21 from "clsx";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var InputOTP = forwardRef13(function InputOTP2({
   length = 6,
   value: valueProp,
   defaultValue = "",
@@ -2429,9 +2917,9 @@ var InputOTP = forwardRef12(function InputOTP2({
     defaultValue,
     onChange: onValueChange
   });
-  const inputRef = useRef8(null);
-  const [focused, setFocused] = useState6(false);
-  const describedById = useId4();
+  const inputRef = useRef10(null);
+  const [focused, setFocused] = useState9(false);
+  const describedById = useId7();
   const pattern = mode === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
   const commit = (next) => {
     const cleaned = next.replace(pattern, "").slice(0, length);
@@ -2440,14 +2928,14 @@ var InputOTP = forwardRef12(function InputOTP2({
   };
   const chars = value.split("");
   const activeIndex = Math.min(value.length, length - 1);
-  return /* @__PURE__ */ jsxs12("div", { className: clsx20("inline-flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13("div", { className: clsx21("inline-flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         className: "relative inline-flex items-center gap-2",
         onClick: () => inputRef.current?.focus(),
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx20(
             "input",
             {
               ref: composeRefs(inputRef, ref),
@@ -2476,11 +2964,11 @@ var InputOTP = forwardRef12(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__ */ jsx18(
+          Array.from({ length }, (_, index) => /* @__PURE__ */ jsx20(
             "span",
             {
               "aria-hidden": true,
-              className: clsx20(
+              className: clsx21(
                 "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",
@@ -2493,15 +2981,15 @@ var InputOTP = forwardRef12(function InputOTP2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx18("span", { id: describedById, className: "sr-only", children: `Enter the ${length}-character code. ${value.length} of ${length} entered.` })
+    /* @__PURE__ */ jsx20("span", { id: describedById, className: "sr-only", children: `Enter the ${length}-character code. ${value.length} of ${length} entered.` })
   ] });
 });
 
 // src/components/forms/file-drop-zone.tsx
-import { useRef as useRef9, useState as useState7 } from "react";
-import clsx21 from "clsx";
+import { useRef as useRef11, useState as useState10 } from "react";
+import clsx22 from "clsx";
 import { UploadIcon } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_ACCEPT = ".pdf,.jpg,.jpeg,.png";
 var DEFAULT_MAX_SIZE_BYTES = 10 * 1024 * 1024;
 function formatFileSize(bytes) {
@@ -2522,8 +3010,8 @@ function useFilePicker({
   maxSizeBytes = DEFAULT_MAX_SIZE_BYTES,
   onFileSelected
 } = {}) {
-  const inputRef = useRef9(null);
-  const [error, setError] = useState7(null);
+  const inputRef = useRef11(null);
+  const [error, setError] = useState10(null);
   function handleFiles(files) {
     const file = files?.[0];
     if (!file) return;
@@ -2563,13 +3051,13 @@ function FileDropZone({
   onFileSelected,
   disabled = false
 }) {
-  const [isDragging, setIsDragging] = useState7(false);
+  const [isDragging, setIsDragging] = useState10(false);
   const picker = useFilePicker({ accept, maxSizeBytes, onFileSelected });
   const { error, handleFiles } = picker;
   const inputRef = picker.inputProps.ref;
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    /* @__PURE__ */ jsx19("input", { ...picker.inputProps, disabled }),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx21("input", { ...picker.inputProps, disabled }),
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         role: "button",
@@ -2599,40 +3087,40 @@ function FileDropZone({
           setIsDragging(false);
           if (!disabled) handleFiles(e.dataTransfer.files);
         },
-        className: clsx21(
+        className: clsx22(
           "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" : clsx21(
+          disabled ? "cursor-not-allowed border-disabled bg-disabled" : clsx22(
             "cursor-pointer",
             isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary"
           ),
           className
         ),
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx21(
             "span",
             {
               "aria-hidden": true,
               className: disabled ? "text-disabled" : isDragging ? "text-brand" : "text-default-secondary",
-              children: /* @__PURE__ */ jsx19(UploadIcon, { className: "size-5" })
+              children: /* @__PURE__ */ jsx21(UploadIcon, { className: "size-5" })
             }
           ),
-          /* @__PURE__ */ jsx19("span", { className: clsx21("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
-          /* @__PURE__ */ jsx19("span", { className: "text-body-xs text-default-secondary text-center", children: description })
+          /* @__PURE__ */ jsx21("span", { className: clsx22("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
+          /* @__PURE__ */ jsx21("span", { className: "text-body-xs text-default-secondary text-center", children: description })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx19("span", { role: "alert", className: "text-body-xs text-danger", children: error })
+    error && /* @__PURE__ */ jsx21("span", { role: "alert", className: "text-body-xs text-danger", children: error })
   ] });
 }
 
 // src/components/forms/tag-input.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
-import clsx23 from "clsx";
+import { useEffect as useEffect7, useState as useState11 } from "react";
+import clsx24 from "clsx";
 
 // src/components/status/badge.tsx
-import clsx22 from "clsx";
+import clsx23 from "clsx";
 import { XIcon } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultClasses = {
   gray: "bg-badge-gray   text-badge-gray",
   red: "bg-badge-red    text-badge-red",
@@ -2645,15 +3133,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,
@@ -2665,47 +3153,47 @@ function Badge({
   className
 }) {
   const isDefault = variant === "default";
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "span",
     {
       "data-variant": variant,
-      className: clsx22(
+      className: clsx23(
         "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__ */ jsx20(
+        indicator && /* @__PURE__ */ jsx22(
           "span",
           {
-            className: clsx22(
+            className: clsx23(
               "shrink-0 rounded-full bg-current",
               size2 === "sm" ? "h-1.5 w-1.5" : "h-2 w-2"
             )
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22(
           "span",
           {
-            className: clsx22(
+            className: clsx23(
               "whitespace-nowrap",
-              size2 === "sm" ? clsx22("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
+              size2 === "sm" ? clsx23("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
             ),
             children: label
           }
         ),
-        onClose && /* @__PURE__ */ jsx20(
+        onClose && /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
             onClick: onClose,
-            className: clsx22(
+            className: clsx23(
               "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__ */ jsx20(XIcon, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
+            children: /* @__PURE__ */ jsx22(XIcon, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
           }
         )
       ]
@@ -2714,12 +3202,12 @@ function Badge({
 }
 
 // src/components/forms/tag-input.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultParse = (raw) => ({ value: raw.trim() });
 function TagInput({ label, hint, error, required, disabled, id, className, ...rest }) {
-  const [parseError, setParseError] = useState8(null);
+  const [parseError, setParseError] = useState11(null);
   const shownError = error ?? parseError ?? void 0;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     Field,
     {
       id,
@@ -2729,9 +3217,9 @@ function TagInput({ label, hint, error, required, disabled, id, className, ...re
       hasHint: Boolean(hint),
       className,
       children: [
-        label && /* @__PURE__ */ jsx21(FieldLabel, { children: label }),
-        /* @__PURE__ */ jsx21(TagInputControl, { disabled, required, invalid: Boolean(shownError), onParseError: setParseError, ...rest }),
-        shownError ? /* @__PURE__ */ jsx21(FieldError, { children: shownError }) : hint && /* @__PURE__ */ jsx21(FieldHint, { children: hint })
+        label && /* @__PURE__ */ jsx23(FieldLabel, { children: label }),
+        /* @__PURE__ */ jsx23(TagInputControl, { disabled, required, invalid: Boolean(shownError), onParseError: setParseError, ...rest }),
+        shownError ? /* @__PURE__ */ jsx23(FieldError, { children: shownError }) : hint && /* @__PURE__ */ jsx23(FieldHint, { children: hint })
       ]
     }
   );
@@ -2761,9 +3249,9 @@ function TagInputControl({
     delimiter.lastIndex = 0;
     return delimiter.test(text);
   };
-  const [draft, setDraft] = useState8("");
-  const [rejected, setRejected] = useState8(null);
-  useEffect6(() => {
+  const [draft, setDraft] = useState11("");
+  const [rejected, setRejected] = useState11(null);
+  useEffect7(() => {
     onParseError(rejected);
     onInvalidChange?.(rejected !== null);
   }, [rejected, onParseError, onInvalidChange]);
@@ -2808,7 +3296,7 @@ function TagInputControl({
     event.preventDefault();
     commit(`${draft}${text}`);
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       "data-invalid": invalid || void 0,
@@ -2820,7 +3308,7 @@ function TagInputControl({
         "data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled"
       ),
       children: [
-        values.map((value) => /* @__PURE__ */ jsx21(
+        values.map((value) => /* @__PURE__ */ jsx23(
           Badge,
           {
             label: value,
@@ -2829,7 +3317,7 @@ function TagInputControl({
           },
           value
         )),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "input",
           {
             ...field,
@@ -2845,30 +3333,30 @@ function TagInputControl({
             onKeyDown: handleKeyDown,
             onPaste: handlePaste,
             onBlur: () => commit(draft),
-            className: clsx23(
+            className: clsx24(
               "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__ */ jsx21("input", { type: "hidden", name, value }, value))
+        name && values.map((value) => /* @__PURE__ */ jsx23("input", { type: "hidden", name, value }, value))
       ]
     }
   );
 }
 
 // src/components/forms/form-card.tsx
-import clsx24 from "clsx";
+import clsx25 from "clsx";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function FormCard({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
-      className: clsx24(
+      className: clsx25(
         "overflow-hidden rounded-xl border border-default bg-default",
         className
       ),
@@ -2877,9 +3365,9 @@ function FormCard({
   );
 }
 function FormCardHeader({ title, subtitle }) {
-  return /* @__PURE__ */ jsxs16("div", { className: "border-b border-default px-7 py-6", children: [
-    /* @__PURE__ */ jsx22("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
-    subtitle && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
+  return /* @__PURE__ */ jsxs17("div", { className: "border-b border-default px-7 py-6", children: [
+    /* @__PURE__ */ jsx24("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
+    subtitle && /* @__PURE__ */ jsx24("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
   ] });
 }
 function FormCardFooter({
@@ -2897,8 +3385,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__ */ jsxs16("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__ */ jsx22(
+    /* @__PURE__ */ jsxs17("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__ */ jsx24(
         Button,
         {
           variant: "neutral",
@@ -2908,25 +3396,25 @@ function FormCardFooter({
           className: "order-last w-full justify-center sm:order-none sm:w-auto",
           children: "Save as draft"
         }
-      ) : /* @__PURE__ */ jsx22("span", { className: "hidden sm:block" }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: [
-        !backDisabled && /* @__PURE__ */ jsx22(
+      ) : /* @__PURE__ */ jsx24("span", { className: "hidden sm:block" }),
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: [
+        !backDisabled && /* @__PURE__ */ jsx24(
           Button,
           {
             variant: "neutral",
             size: "md",
-            leadingIcon: /* @__PURE__ */ jsx22(ArrowLeftIcon, { "aria-hidden": true, size: 16 }),
+            leadingIcon: /* @__PURE__ */ jsx24(ArrowLeftIcon, { "aria-hidden": true, size: 16 }),
             onClick: onBack,
             className: "flex-1 justify-center sm:flex-none",
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           Button,
           {
             variant: "primary",
             size: "md",
-            trailingIcon: continueIcon === null ? void 0 : continueIcon ?? /* @__PURE__ */ jsx22(ArrowRightIcon, { "aria-hidden": true, size: 16 }),
+            trailingIcon: continueIcon === null ? void 0 : continueIcon ?? /* @__PURE__ */ jsx24(ArrowRightIcon, { "aria-hidden": true, size: 16 }),
             onClick: onContinue,
             disabled: continueDisabled,
             className: "flex-1 justify-center sm:flex-none",
@@ -2939,8 +3427,8 @@ function FormCardFooter({
 }
 
 // src/components/status/role-badge.tsx
-import clsx25 from "clsx";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import clsx26 from "clsx";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ROLE_TONES = {
   "Super Admin": "slate",
   "Admin": "slate",
@@ -2969,11 +3457,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__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       "data-tone": tone,
-      className: clsx25(
+      className: clsx26(
         "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]
@@ -2986,16 +3474,16 @@ function RoleBadge({ role, size: size2 = "sm", tone, color }) {
 
 // src/components/forms/combobox.tsx
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect7,
-  useId as useId5,
-  useMemo as useMemo2,
-  useRef as useRef10,
-  useState as useState9
+  useCallback as useCallback4,
+  useEffect as useEffect8,
+  useId as useId8,
+  useMemo as useMemo5,
+  useRef as useRef12,
+  useState as useState12
 } from "react";
-import clsx26 from "clsx";
+import clsx27 from "clsx";
 import { CheckIcon as CheckIcon4, ChevronDownIcon as ChevronDownIcon2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var HEIGHT = {
   lg: "h-12 px-4 text-body",
   md: "h-9 px-3 text-body-sm",
@@ -3023,23 +3511,23 @@ function Combobox({
     defaultValue,
     onChange: onValueChange
   });
-  const [open, setOpen] = useState9(false);
-  const [query, setQuery] = useState9("");
-  const [activeIndex, setActiveIndex] = useState9(0);
-  const baseId = useId5();
+  const [open, setOpen] = useState12(false);
+  const [query, setQuery] = useState12("");
+  const [activeIndex, setActiveIndex] = useState12(0);
+  const baseId = useId8();
   const listboxId = `${baseId}-listbox`;
   const optionId = (index) => `${baseId}-option-${index}`;
-  const inputRef = useRef10(null);
-  const listRef = useRef10(null);
-  const rootRef = useRef10(null);
+  const inputRef = useRef12(null);
+  const listRef = useRef12(null);
+  const rootRef = useRef12(null);
   const field = useFieldControl();
-  const matches = useMemo2(() => {
+  const matches = useMemo5(() => {
     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 = useCallback3((restoreFocus = true) => {
+  const close = useCallback4((restoreFocus = true) => {
     setOpen(false);
     setQuery("");
     if (restoreFocus) inputRef.current?.focus();
@@ -3068,20 +3556,20 @@ function Combobox({
     sideOffset: 4,
     matchAnchorWidth: true
   });
-  useEffect7(() => {
+  useEffect8(() => {
     refs.setReference(rootRef.current);
   }, [refs, open]);
-  useEffect7(() => {
+  useEffect8(() => {
     setActiveIndex(0);
   }, [query, options]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     const node = listRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
     if (node instanceof Element && typeof node.scrollIntoView === "function") {
       node.scrollIntoView({ block: "nearest" });
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     function onPointerDown(event) {
       const withinRoot = rootRef.current?.contains(event.target);
@@ -3092,18 +3580,18 @@ function Combobox({
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [open, close]);
   let renderedGroup;
-  return /* @__PURE__ */ jsxs17("div", { ref: rootRef, className: clsx26("relative w-full", className), children: [
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: clsx27("relative w-full", className), children: [
+    /* @__PURE__ */ jsxs18(
       "div",
       {
-        className: clsx26(
+        className: clsx27(
           "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__ */ jsx24(
+          /* @__PURE__ */ jsx26(
             "input",
             {
               ref: inputRef,
@@ -3165,18 +3653,18 @@ function Combobox({
                     break;
                 }
               },
-              className: clsx26(
+              className: clsx27(
                 "min-w-0 flex-1 bg-transparent text-default outline-none",
                 "placeholder:text-default-tertiary",
                 "disabled:cursor-not-allowed disabled:text-disabled"
               )
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx26(
             ChevronDownIcon2,
             {
               "aria-hidden": true,
-              className: clsx26(
+              className: clsx27(
                 "shrink-0 transition-transform",
                 size2 === "sm" ? "size-3" : "size-4",
                 disabled ? "text-icon-disabled" : "text-icon-default-secondary",
@@ -3187,7 +3675,7 @@ function Combobox({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx24(Portal, { children: /* @__PURE__ */ jsxs17(
+    open && /* @__PURE__ */ jsx26(Portal, { children: /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: (node) => {
@@ -3198,16 +3686,16 @@ function Combobox({
         role: "listbox",
         "aria-label": label,
         style: { ...floatingStyles, width: "var(--panel-anchor-width)" },
-        className: clsx26("z-popover", OVERLAY_PANEL, OVERLAY_PANEL_SCROLL),
+        className: clsx27("z-popover", OVERLAY_PANEL, OVERLAY_PANEL_SCROLL),
         children: [
-          matches.length === 0 && /* @__PURE__ */ jsx24("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: emptyMessage }),
+          matches.length === 0 && /* @__PURE__ */ jsx26("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__ */ jsxs17("div", { children: [
-              groupHeading && /* @__PURE__ */ jsx24(
+            return /* @__PURE__ */ jsxs18("div", { children: [
+              groupHeading && /* @__PURE__ */ jsx26(
                 "div",
                 {
                   role: "presentation",
@@ -3215,7 +3703,7 @@ function Combobox({
                   children: groupHeading
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "div",
                 {
                   id: optionId(index),
@@ -3225,18 +3713,18 @@ function Combobox({
                   onPointerDown: (event) => event.preventDefault(),
                   onClick: () => commit(option),
                   onPointerEnter: () => !option.disabled && setActiveIndex(index),
-                  className: clsx26(
+                  className: clsx27(
                     OVERLAY_ITEM_BASE,
                     OVERLAY_ITEM_SIZE.md,
                     "items-center",
-                    option.disabled ? "cursor-not-allowed text-disabled" : isActive ? clsx26(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
+                    option.disabled ? "cursor-not-allowed text-disabled" : isActive ? clsx27(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
                   ),
-                  children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
-                    /* @__PURE__ */ jsxs17("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx24("span", { className: "block truncate", children: option.label }),
-                      option.description && /* @__PURE__ */ jsx24("span", { className: "block truncate text-body-tiny text-default-secondary", children: option.description })
+                  children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs18(Fragment4, { children: [
+                    /* @__PURE__ */ jsxs18("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx26("span", { className: "block truncate", children: option.label }),
+                      option.description && /* @__PURE__ */ jsx26("span", { className: "block truncate text-body-tiny text-default-secondary", children: option.description })
                     ] }),
-                    isSelected && /* @__PURE__ */ jsx24(CheckIcon4, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand", strokeWidth: 3 })
+                    isSelected && /* @__PURE__ */ jsx26(CheckIcon4, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand", strokeWidth: 3 })
                   ] })
                 }
               )
@@ -3249,7 +3737,7 @@ function Combobox({
 }
 
 // src/components/forms/role-combo-box.tsx
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var ROLE_COMBO_OPTIONS = [
   { role: "Reviewer", description: "Reviews onboarding requests" },
   { role: "Admin", description: "Full org control" },
@@ -3272,7 +3760,7 @@ function RoleComboBox({
     label: option.role,
     description: option.description
   }));
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     Combobox,
     {
       options: comboboxOptions,
@@ -3284,17 +3772,17 @@ function RoleComboBox({
       clearable: false,
       emptyMessage: "No roles match",
       className,
-      renderOption: (option) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-        /* @__PURE__ */ jsx25(RoleBadge, { role: option.value, size: "sm" }),
-        /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate text-body-xs text-default-secondary", children: option.description })
+      renderOption: (option) => /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsx27(RoleBadge, { role: option.value, size: "sm" }),
+        /* @__PURE__ */ jsx27("span", { className: "min-w-0 flex-1 truncate text-body-xs text-default-secondary", children: option.description })
       ] })
     }
   );
 }
 
 // src/components/forms/country-select.tsx
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx28 } from "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) {
@@ -3314,12 +3802,12 @@ function CountrySelect({
 }) {
   const keep = [props.value, props.defaultValue].filter((v) => !!v);
   const keepKey = keep.join("|");
-  const options = useMemo3(() => {
+  const options = useMemo6(() => {
     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__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     Combobox,
     {
       ...props,
@@ -3335,8 +3823,8 @@ function CountrySelect({
 }
 
 // src/components/forms/time-zone-select.tsx
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var RENAMED = {
   "America/Godthab": "America/Nuuk",
   "Asia/Calcutta": "Asia/Kolkata",
@@ -3388,13 +3876,13 @@ function TimeZoneSelect({
   const atTime = at?.getTime();
   const keep = [props.value, props.defaultValue].filter((v) => !!v);
   const keepKey = keep.join("|");
-  const options = useMemo4(() => {
+  const options = useMemo7(() => {
     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__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     Combobox,
     {
       ...props,
@@ -3410,10 +3898,10 @@ function TimeZoneSelect({
 }
 
 // src/components/forms/command.tsx
-import { useEffect as useEffect8, useId as useId6, useMemo as useMemo5, useRef as useRef11, useState as useState10 } from "react";
-import clsx27 from "clsx";
+import { useEffect as useEffect9, useId as useId9, useMemo as useMemo8, useRef as useRef13, useState as useState13 } from "react";
+import clsx28 from "clsx";
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function Command({
   items,
   label = "Command palette",
@@ -3423,13 +3911,13 @@ function Command({
   autoFocus = true,
   className
 }) {
-  const [query, setQuery] = useState10("");
-  const [activeIndex, setActiveIndex] = useState10(0);
-  const baseId = useId6();
+  const [query, setQuery] = useState13("");
+  const [activeIndex, setActiveIndex] = useState13(0);
+  const baseId = useId9();
   const listboxId = `${baseId}-listbox`;
   const optionId = (index) => `${baseId}-option-${index}`;
-  const listRef = useRef11(null);
-  const matches = useMemo5(() => {
+  const listRef = useRef13(null);
+  const matches = useMemo8(() => {
     if (!query) return items;
     const q = query.toLowerCase();
     return items.filter((item) => {
@@ -3438,10 +3926,10 @@ function Command({
       return item.keywords?.some((keyword) => keyword.toLowerCase().includes(q)) ?? false;
     });
   }, [items, query]);
-  useEffect8(() => {
+  useEffect9(() => {
     setActiveIndex(0);
   }, [query]);
-  useEffect8(() => {
+  useEffect9(() => {
     const node = listRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
     if (node instanceof Element && typeof node.scrollIntoView === "function") {
       node.scrollIntoView({ block: "nearest" });
@@ -3464,10 +3952,10 @@ function Command({
     });
   };
   let renderedGroup;
-  return /* @__PURE__ */ jsxs19("div", { className: clsx27("flex w-full flex-col", className), children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 border-b border-default px-3.5 py-3", children: [
-      /* @__PURE__ */ jsx28(SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-icon-default-secondary" }),
-      /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs20("div", { className: clsx28("flex w-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 border-b border-default px-3.5 py-3", children: [
+      /* @__PURE__ */ jsx30(SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-icon-default-secondary" }),
+      /* @__PURE__ */ jsx30(
         "input",
         {
           role: "combobox",
@@ -3514,22 +4002,22 @@ function Command({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs19(
+    /* @__PURE__ */ jsxs20(
       "div",
       {
         ref: listRef,
         id: listboxId,
         role: "listbox",
         "aria-label": label,
-        className: clsx27("max-h-80 overflow-y-auto p-1.5", SCROLLBAR_CLASSES),
+        className: clsx28("max-h-80 overflow-y-auto p-1.5", SCROLLBAR_CLASSES),
         children: [
-          matches.length === 0 && /* @__PURE__ */ jsx28("p", { className: "px-2.5 py-6 text-center text-body-sm text-default-secondary", children: emptyMessage }),
+          matches.length === 0 && /* @__PURE__ */ jsx30("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__ */ jsxs19("div", { children: [
-              groupHeading && /* @__PURE__ */ jsx28(
+            return /* @__PURE__ */ jsxs20("div", { children: [
+              groupHeading && /* @__PURE__ */ jsx30(
                 "div",
                 {
                   role: "presentation",
@@ -3537,7 +4025,7 @@ function Command({
                   children: groupHeading
                 }
               ),
-              /* @__PURE__ */ jsxs19(
+              /* @__PURE__ */ jsxs20(
                 "div",
                 {
                   id: optionId(index),
@@ -3547,19 +4035,19 @@ function Command({
                   onPointerDown: (event) => event.preventDefault(),
                   onClick: () => run(item),
                   onPointerEnter: () => !item.disabled && setActiveIndex(index),
-                  className: clsx27(
+                  className: clsx28(
                     OVERLAY_ITEM_BASE,
                     OVERLAY_ITEM_SIZE.md,
                     "items-center",
-                    item.disabled ? "cursor-not-allowed text-disabled" : isActive ? clsx27(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
+                    item.disabled ? "cursor-not-allowed text-disabled" : isActive ? clsx28(OVERLAY_ITEM_ACTIVE, "text-default") : "text-default"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
-                    /* @__PURE__ */ jsxs19("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "block truncate", children: item.label }),
-                      item.description && /* @__PURE__ */ jsx28("span", { className: "block truncate text-body-tiny text-default-secondary", children: item.description })
+                    item.icon && /* @__PURE__ */ jsx30("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
+                    /* @__PURE__ */ jsxs20("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx30("span", { className: "block truncate", children: item.label }),
+                      item.description && /* @__PURE__ */ jsx30("span", { className: "block truncate text-body-tiny text-default-secondary", children: item.description })
                     ] }),
-                    item.shortcut && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: item.shortcut })
+                    item.shortcut && /* @__PURE__ */ jsx30("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: item.shortcut })
                   ]
                 }
               )
@@ -3568,13 +4056,13 @@ function Command({
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("span", { "aria-live": "polite", className: "sr-only", children: `${matches.length} ${matches.length === 1 ? "result" : "results"}` })
+    /* @__PURE__ */ jsx30("span", { "aria-live": "polite", className: "sr-only", children: `${matches.length} ${matches.length === 1 ? "result" : "results"}` })
   ] });
 }
 
 // src/components/status/status-badge.tsx
-import clsx28 from "clsx";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import clsx29 from "clsx";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var TONE_STYLES2 = {
   neutral: "bg-status-neutral  text-status-neutral",
   info: "bg-status-info     text-status-info",
@@ -3605,18 +4093,18 @@ function StatusBadge({
   icon,
   className
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "span",
     {
       "data-tone": tone,
-      className: clsx28(
+      className: clsx29(
         "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__ */ jsx29("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ jsx29("span", { className: clsx28("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
+        icon ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ jsx31("span", { className: clsx29("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
         label
       ]
     }
@@ -3624,8 +4112,8 @@ function StatusBadge({
 }
 
 // src/components/status/status-dot.tsx
-import clsx29 from "clsx";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import clsx30 from "clsx";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var dotTones = {
   brand: "bg-brand",
   positive: "bg-positive",
@@ -3635,63 +4123,63 @@ var dotTones = {
   default: "bg-default-tertiary"
 };
 function StatusDot({ tone = "default", color, className }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       "data-tone": tone,
-      className: clsx29("inline-block size-1.5 shrink-0 rounded-full", !color && dotTones[tone], className),
+      className: clsx30("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
-import clsx30 from "clsx";
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function StatusChip({ label, count, tone = "default", dotColor, bg, className }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "span",
     {
       "data-tone": tone,
-      className: clsx30(
+      className: clsx31(
         "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__ */ jsx31(StatusDot, { tone, color: dotColor }),
-        /* @__PURE__ */ jsx31("span", { className: "text-body-xs font-medium text-default", children: count }),
-        /* @__PURE__ */ jsx31("span", { className: "text-body-xs text-default-secondary", children: label })
+        /* @__PURE__ */ jsx33(StatusDot, { tone, color: dotColor }),
+        /* @__PURE__ */ jsx33("span", { className: "text-body-xs font-medium text-default", children: count }),
+        /* @__PURE__ */ jsx33("span", { className: "text-body-xs text-default-secondary", children: label })
       ]
     }
   );
 }
 
 // src/components/status/count-badge.tsx
-import clsx31 from "clsx";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import clsx32 from "clsx";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function CountBadge({ count, label, tone = "positive", className }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "span",
     {
       "data-tone": tone,
-      className: clsx31(
+      className: clsx32(
         "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__ */ jsx32(StatusDot, { tone }),
+        /* @__PURE__ */ jsx34(StatusDot, { tone }),
         count,
-        label && /* @__PURE__ */ jsx32("span", { className: "text-default-secondary", children: label })
+        label && /* @__PURE__ */ jsx34("span", { className: "text-default-secondary", children: label })
       ]
     }
   );
 }
 
 // src/components/status/tag-pill.tsx
-import clsx32 from "clsx";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import clsx33 from "clsx";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var toneStyles = {
   default: "bg-default-secondary text-default-secondary",
   brand: "bg-brand-tertiary text-brand",
@@ -3700,11 +4188,11 @@ var toneStyles = {
   danger: "bg-danger-tertiary text-danger"
 };
 function TagPill({ label, tone = "default", bg, color, className }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     "span",
     {
       "data-tone": tone,
-      className: clsx32(
+      className: clsx33(
         "inline-flex items-center rounded-full px-2 py-0.5 text-body-xs font-medium",
         !bg && !color && toneStyles[tone],
         className
@@ -3719,8 +4207,8 @@ function TagPill({ label, tone = "default", bg, color, className }) {
 }
 
 // src/components/status/trail-chip.tsx
-import clsx33 from "clsx";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import clsx34 from "clsx";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 var DOT = {
   neutral: "bg-status-dot-neutral",
   info: "bg-status-dot-info",
@@ -3731,31 +4219,31 @@ var DOT = {
   danger: "bg-status-dot-danger"
 };
 function TrailChip({ label, value, tone = "info", dotColor, className }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       "data-tone": tone,
-      className: clsx33(
+      className: clsx34(
         "flex items-center gap-2 rounded-full border border-default bg-default px-3 py-1.5",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "span",
           {
-            className: clsx33("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
+            className: clsx34("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
             style: dotColor ? { backgroundColor: dotColor } : void 0
           }
         ),
-        /* @__PURE__ */ jsx34("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
-        /* @__PURE__ */ jsx34("span", { className: "text-body-xs font-medium text-default", children: value })
+        /* @__PURE__ */ jsx36("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
+        /* @__PURE__ */ jsx36("span", { className: "text-body-xs font-medium text-default", children: value })
       ]
     }
   );
 }
 
 // src/components/status/user-status-pill.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var STATUS_META = {
   active: { label: "Active", tone: "positive" },
   // `caution` (pale yellow), not `warning` (orange) — Pending is one step below a
@@ -3765,13 +4253,13 @@ var STATUS_META = {
 };
 function UserStatusPill({ status }) {
   const { label, tone } = STATUS_META[status];
-  return /* @__PURE__ */ jsx35(StatusBadge, { label, tone });
+  return /* @__PURE__ */ jsx37(StatusBadge, { label, tone });
 }
 
 // src/components/status/check-indicator.tsx
-import clsx34 from "clsx";
+import clsx35 from "clsx";
 import { CheckIcon as CheckIcon5, CircleAlertIcon, LoaderCircleIcon, MinusIcon, XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "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",
@@ -3783,25 +4271,25 @@ var STATUS_STYLES = {
 function StatusGlyph({ status }) {
   switch (status) {
     case "passed":
-      return /* @__PURE__ */ jsx36(CheckIcon5, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ jsx38(CheckIcon5, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "failed":
-      return /* @__PURE__ */ jsx36(XIcon2, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ jsx38(XIcon2, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "waived":
-      return /* @__PURE__ */ jsx36(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ jsx38(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "in_progress":
-      return /* @__PURE__ */ jsx36(LoaderCircleIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+      return /* @__PURE__ */ jsx38(LoaderCircleIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
     case "action_required":
-      return /* @__PURE__ */ jsx36(CircleAlertIcon, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
+      return /* @__PURE__ */ jsx38(CircleAlertIcon, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
     case "pending":
       return null;
   }
 }
 function CheckIndicator({ status, label, className }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       "data-status": status,
-      className: clsx34(
+      className: clsx35(
         "flex size-[22px] shrink-0 items-center justify-center rounded-full border-[1.5px]",
         STATUS_STYLES[status],
         className
@@ -3809,14 +4297,14 @@ function CheckIndicator({ status, label, className }) {
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      children: /* @__PURE__ */ jsx36(StatusGlyph, { status })
+      children: /* @__PURE__ */ jsx38(StatusGlyph, { status })
     }
   );
 }
 
 // src/components/status/entity-icon-badge.tsx
-import clsx35 from "clsx";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import clsx36 from "clsx";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "size-8",
   md: "size-10"
@@ -3834,11 +4322,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__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "span",
     {
       "data-tone": tone,
-      className: clsx35(
+      className: clsx36(
         "inline-flex shrink-0 items-center justify-center",
         sizeStyles4[size2],
         shapeStyles[shape][size2],
@@ -3855,13 +4343,13 @@ function EntityIconBadge({ size: size2 = "sm", tone = "default", shape = "square
 }
 
 // src/components/forms/checkbox.tsx
-import { forwardRef as forwardRef13, useEffect as useEffect9, useId as useId7, useRef as useRef12 } from "react";
-import clsx37 from "clsx";
+import { forwardRef as forwardRef14, useEffect as useEffect10, useId as useId10, useRef as useRef14 } from "react";
+import clsx38 from "clsx";
 
 // src/components/forms/check-control.tsx
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 import { CheckIcon as CheckIcon6, MinusIcon as MinusIcon2 } from "lucide-react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "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" }
@@ -3876,11 +4364,11 @@ function CheckControl({
 }) {
   const s = CHECK_SIZE[size2];
   const on = checked || indeterminate;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(
     "span",
     {
       "aria-hidden": true,
-      className: clsx36(
+      className: clsx37(
         "mt-px flex shrink-0 items-center justify-center border-[1.5px] transition-colors",
         s.box,
         type === "radio" ? "rounded-full" : "rounded-[4px]",
@@ -3889,18 +4377,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__ */ jsx38(MinusIcon2, { className: s.glyph, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx38(CheckIcon6, { className: s.glyph, strokeWidth: 3 }) : null : checked ? /* @__PURE__ */ jsx38("span", { className: clsx36("rounded-full bg-current", s.dot) }) : null
+      children: type === "checkbox" ? indeterminate ? /* @__PURE__ */ jsx40(MinusIcon2, { className: s.glyph, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx40(CheckIcon6, { className: s.glyph, strokeWidth: 3 }) : null : checked ? /* @__PURE__ */ jsx40("span", { className: clsx37("rounded-full bg-current", s.dot) }) : null
     }
   );
 }
 
 // src/components/forms/checkbox.tsx
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 var LABEL_TEXT2 = {
   sm: "text-body-tiny",
   md: "text-body-xs"
 };
-var Checkbox = forwardRef13(function Checkbox2({
+var Checkbox = forwardRef14(function Checkbox2({
   checked: checkedProp,
   defaultChecked = false,
   onCheckedChange,
@@ -3919,24 +4407,24 @@ var Checkbox = forwardRef13(function Checkbox2({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const inputRef = useRef12(null);
-  const generatedId = useId7();
+  const inputRef = useRef14(null);
+  const generatedId = useId10();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
-  useEffect9(() => {
+  useEffect10(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs24("div", { className: clsx37("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25("div", { className: clsx38("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs25(
       "label",
       {
         htmlFor: controlId,
-        className: clsx37(
+        className: clsx38(
           "group inline-flex items-start gap-2.5",
           disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(
             "input",
             {
               ref: composeRefs(inputRef, ref),
@@ -3951,7 +4439,7 @@ var Checkbox = forwardRef13(function Checkbox2({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(
             CheckControl,
             {
               type: "checkbox",
@@ -3962,15 +4450,15 @@ var Checkbox = forwardRef13(function Checkbox2({
               size: size2
             }
           ),
-          label && /* @__PURE__ */ jsx39("span", { className: clsx37(LABEL_TEXT2[size2], "text-default"), children: label })
+          label && /* @__PURE__ */ jsx41("span", { className: clsx38(LABEL_TEXT2[size2], "text-default"), children: label })
         ]
       }
     ),
-    description && /* @__PURE__ */ jsx39(
+    description && /* @__PURE__ */ jsx41(
       "span",
       {
         id: descriptionId,
-        className: clsx37(
+        className: clsx38(
           "mt-0.5 pl-[26px]",
           LABEL_TEXT2[size2],
           disabled ? "text-disabled" : "text-default-secondary"
@@ -3983,15 +4471,15 @@ var Checkbox = forwardRef13(function Checkbox2({
 
 // src/components/forms/radio-group.tsx
 import {
-  createContext as createContext5,
-  forwardRef as forwardRef14,
-  useContext as useContext5,
-  useId as useId8
+  createContext as createContext6,
+  forwardRef as forwardRef15,
+  useContext as useContext6,
+  useId as useId11
 } from "react";
-import clsx38 from "clsx";
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
-var RadioGroupContext = createContext5(null);
-var RadioGroup = forwardRef14(function RadioGroup2({
+import clsx39 from "clsx";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+var RadioGroupContext = createContext6(null);
+var RadioGroup = forwardRef15(function RadioGroup2({
   children,
   value: valueProp,
   defaultValue,
@@ -4006,13 +4494,13 @@ var RadioGroup = forwardRef14(function RadioGroup2({
   className,
   ...rest
 }, ref) {
-  const generatedName = useId8();
+  const generatedName = useId11();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     RadioGroupContext.Provider,
     {
       value: {
@@ -4023,7 +4511,7 @@ var RadioGroup = forwardRef14(function RadioGroup2({
         disabled,
         invalid
       },
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx42(
         "div",
         {
           ref,
@@ -4033,7 +4521,7 @@ var RadioGroup = forwardRef14(function RadioGroup2({
           "aria-invalid": invalid || void 0,
           "aria-orientation": orientation,
           "data-slot": "radio-group",
-          className: clsx38(
+          className: clsx39(
             "flex",
             orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4",
             className
@@ -4049,25 +4537,25 @@ var LABEL_TEXT3 = {
   sm: "text-body-tiny",
   md: "text-body-xs"
 };
-var Radio = forwardRef14(function Radio2({ value, label, description, disabled, id, className, ...props }, ref) {
-  const group = useContext5(RadioGroupContext);
+var Radio = forwardRef15(function Radio2({ value, label, description, disabled, id, className, ...props }, ref) {
+  const group = useContext6(RadioGroupContext);
   if (!group) throw new Error("<Radio> must be used inside <RadioGroup>");
-  const generatedId = useId8();
+  const generatedId = useId11();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
   const isDisabled = disabled ?? group.disabled;
   const checked = group.value === value;
-  return /* @__PURE__ */ jsxs25("div", { className: clsx38("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26("div", { className: clsx39("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs26(
       "label",
       {
         htmlFor: controlId,
-        className: clsx38(
+        className: clsx39(
           "group inline-flex items-start gap-2.5",
           isDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             "input",
             {
               ref,
@@ -4083,7 +4571,7 @@ var Radio = forwardRef14(function Radio2({ value, label, description, disabled,
               ...props
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             CheckControl,
             {
               type: "radio",
@@ -4093,15 +4581,15 @@ var Radio = forwardRef14(function Radio2({ value, label, description, disabled,
               size: group.size
             }
           ),
-          label && /* @__PURE__ */ jsx40("span", { className: clsx38(LABEL_TEXT3[group.size], "text-default"), children: label })
+          label && /* @__PURE__ */ jsx42("span", { className: clsx39(LABEL_TEXT3[group.size], "text-default"), children: label })
         ]
       }
     ),
-    description && /* @__PURE__ */ jsx40(
+    description && /* @__PURE__ */ jsx42(
       "span",
       {
         id: descriptionId,
-        className: clsx38(
+        className: clsx39(
           "mt-0.5 pl-[26px]",
           LABEL_TEXT3[group.size],
           isDisabled ? "text-disabled" : "text-default-secondary"
@@ -4114,15 +4602,15 @@ var Radio = forwardRef14(function Radio2({ value, label, description, disabled,
 
 // src/components/forms/radio-cards.tsx
 import {
-  createContext as createContext6,
-  forwardRef as forwardRef15,
-  useContext as useContext6,
-  useId as useId9
+  createContext as createContext7,
+  forwardRef as forwardRef16,
+  useContext as useContext7,
+  useId as useId12
 } from "react";
-import clsx39 from "clsx";
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
-var RadioCardsContext = createContext6(null);
-var RadioCards = forwardRef15(function RadioCards2({
+import clsx40 from "clsx";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+var RadioCardsContext = createContext7(null);
+var RadioCards = forwardRef16(function RadioCards2({
   children,
   value: valueProp,
   defaultValue,
@@ -4135,17 +4623,17 @@ var RadioCards = forwardRef15(function RadioCards2({
   className,
   ...rest
 }, ref) {
-  const generatedName = useId9();
+  const generatedName = useId12();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     RadioCardsContext.Provider,
     {
       value: { name: name ?? generatedName, value, setValue, size: size2, disabled, required },
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx43(
         "div",
         {
           ref,
@@ -4165,14 +4653,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 = forwardRef15(function RadioCardsItem2({ value, title, description, icon, disabled: itemDisabled = false, className }, ref) {
-  const group = useContext6(RadioCardsContext);
+var RadioCardsItem = forwardRef16(function RadioCardsItem2({ value, title, description, icon, disabled: itemDisabled = false, className }, ref) {
+  const group = useContext7(RadioCardsContext);
   if (!group) throw new Error("<RadioCardsItem> must be used inside <RadioCards>");
   const s = SIZE6[group.size];
   const disabled = group.disabled || itemDisabled;
-  const titleId = useId9();
-  const descriptionId = useId9();
-  return /* @__PURE__ */ jsxs26(
+  const titleId = useId12();
+  const descriptionId = useId12();
+  return /* @__PURE__ */ jsxs27(
     "label",
     {
       "data-slot": "radio-cards-item",
@@ -4187,7 +4675,7 @@ var RadioCardsItem = forwardRef15(function RadioCardsItem2({ value, title, descr
         className
       ),
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           "input",
           {
             ref,
@@ -4203,35 +4691,35 @@ var RadioCardsItem = forwardRef15(function RadioCardsItem2({ value, title, descr
             className: "sr-only"
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-2", children: [
-          icon ? /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between gap-2", children: [
+          icon ? /* @__PURE__ */ jsx43(
             "span",
             {
               "aria-hidden": true,
-              className: clsx39(
+              className: clsx40(
                 "flex shrink-0 items-center justify-center bg-brand-tertiary",
                 "[label:has(:checked)_&]:bg-brand",
                 s.iconBox
               ),
-              children: /* @__PURE__ */ jsx41("span", { className: clsx39(s.icon, "text-icon-brand [label:has(:checked)_&]:text-icon-brand-on-brand"), children: icon })
+              children: /* @__PURE__ */ jsx43("span", { className: clsx40(s.icon, "text-icon-brand [label:has(:checked)_&]:text-icon-brand-on-brand"), children: icon })
             }
-          ) : /* @__PURE__ */ jsx41("span", {}),
-          /* @__PURE__ */ jsx41(
+          ) : /* @__PURE__ */ jsx43("span", {}),
+          /* @__PURE__ */ jsx43(
             "span",
             {
               "aria-hidden": true,
-              className: clsx39(
+              className: clsx40(
                 "flex shrink-0 items-center justify-center rounded-full border-2 border-default",
                 "[label:has(:checked)_&]:border-brand",
                 s.mark
               ),
-              children: /* @__PURE__ */ jsx41("span", { className: "size-2 scale-0 rounded-full bg-brand transition-transform [label:has(:checked)_&]:scale-100" })
+              children: /* @__PURE__ */ jsx43("span", { className: "size-2 scale-0 rounded-full bg-brand transition-transform [label:has(:checked)_&]:scale-100" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: s.gap, children: [
-          /* @__PURE__ */ jsx41("span", { id: titleId, className: clsx39("block font-semibold text-default [label:has(:checked)_&]:text-brand", s.title), children: title }),
-          description && /* @__PURE__ */ jsx41("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
+        /* @__PURE__ */ jsxs27("div", { className: s.gap, children: [
+          /* @__PURE__ */ jsx43("span", { id: titleId, className: clsx40("block font-semibold text-default [label:has(:checked)_&]:text-brand", s.title), children: title }),
+          description && /* @__PURE__ */ jsx43("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
         ] })
       ]
     }
@@ -4239,10 +4727,10 @@ var RadioCardsItem = forwardRef15(function RadioCardsItem2({ value, title, descr
 });
 
 // src/components/forms/checkbox-group.tsx
-import { createContext as createContext7, forwardRef as forwardRef16, useContext as useContext7, useId as useId10 } from "react";
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext7(null);
-var CheckboxGroup = forwardRef16(function CheckboxGroup2({
+import { createContext as createContext8, forwardRef as forwardRef17, useContext as useContext8, useId as useId13 } from "react";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext8(null);
+var CheckboxGroup = forwardRef17(function CheckboxGroup2({
   children,
   legend,
   value: valueProp,
@@ -4255,7 +4743,7 @@ var CheckboxGroup = forwardRef16(function CheckboxGroup2({
   required = false,
   className
 }, ref) {
-  const generatedName = useId10();
+  const generatedName = useId13();
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
@@ -4270,8 +4758,8 @@ var CheckboxGroup = forwardRef16(function CheckboxGroup2({
     disabled,
     required: required && value.length === 0
   };
-  return /* @__PURE__ */ jsx42(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsxs27(FieldSet, { ref, "data-slot": "checkbox-group", "data-required": required || void 0, className, children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsxs28(FieldSet, { ref, "data-slot": "checkbox-group", "data-required": required || void 0, className, children: [
+    /* @__PURE__ */ jsx44(
       FieldLegend,
       {
         variant: "label",
@@ -4279,14 +4767,14 @@ var CheckboxGroup = forwardRef16(function CheckboxGroup2({
         children: legend
       }
     ),
-    /* @__PURE__ */ jsx42("div", { className: cn("flex", orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4"), children })
+    /* @__PURE__ */ jsx44("div", { className: cn("flex", orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-4"), children })
   ] }) });
 });
-var CheckboxGroupItem = forwardRef16(
+var CheckboxGroupItem = forwardRef17(
   function CheckboxGroupItem2({ value, label, description, disabled }, ref) {
-    const group = useContext7(CheckboxGroupContext);
+    const group = useContext8(CheckboxGroupContext);
     if (!group) throw new Error("<CheckboxGroupItem> must be used inside <CheckboxGroup>");
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       Checkbox,
       {
         ref,
@@ -4305,8 +4793,8 @@ var CheckboxGroupItem = forwardRef16(
 );
 
 // src/components/forms/segmented-control.tsx
-import clsx40 from "clsx";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import clsx41 from "clsx";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
   value: valueProp,
@@ -4329,12 +4817,12 @@ function SegmentedControl({
     loop: true,
     defaultIndex: selectedIndex
   });
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       role: "radiogroup",
       "aria-label": label,
-      className: clsx40(
+      className: clsx41(
         "inline-flex items-center rounded-xl border border-default bg-default-secondary p-0.5",
         className
       ),
@@ -4345,7 +4833,7 @@ function SegmentedControl({
           disabled: option.disabled,
           label: option.label
         });
-        return /* @__PURE__ */ jsx43(
+        return /* @__PURE__ */ jsx45(
           "button",
           {
             type: "button",
@@ -4359,7 +4847,7 @@ function SegmentedControl({
               if (!option.disabled) setValue(option.value);
             },
             onClick: () => !option.disabled && setValue(option.value),
-            className: clsx40(
+            className: clsx41(
               "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",
@@ -4375,10 +4863,10 @@ function SegmentedControl({
 }
 
 // src/components/forms/slider.tsx
-import { forwardRef as forwardRef17, useId as useId11 } from "react";
-import clsx41 from "clsx";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
-var Slider = forwardRef17(function Slider2({
+import { forwardRef as forwardRef18, useId as useId14 } from "react";
+import clsx42 from "clsx";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+var Slider = forwardRef18(function Slider2({
   value,
   defaultValue,
   onValueChange,
@@ -4394,315 +4882,104 @@ var Slider = forwardRef17(function Slider2({
   className,
   ...props
 }, ref) {
-  const generatedId = useId11();
+  const generatedId = useId14();
   const controlId = id ?? generatedId;
   const descriptionId = `${controlId}-description`;
   const current = value ?? defaultValue ?? min;
   const display = formatValue ? formatValue(current) : String(current);
-  return /* @__PURE__ */ jsxs28("div", { className: clsx41("flex w-full flex-col gap-1.5", className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-baseline justify-between gap-2", children: [
-      label && /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs29("div", { className: clsx42("flex w-full flex-col gap-1.5", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex items-baseline justify-between gap-2", children: [
+      label && /* @__PURE__ */ jsx46(
         "label",
         {
           htmlFor: controlId,
-          className: clsx41("text-body-sm", disabled ? "text-disabled" : "text-default"),
+          className: clsx42("text-body-sm", disabled ? "text-disabled" : "text-default"),
           children: label
         }
       ),
-      showValue && /* @__PURE__ */ jsx44("span", { className: "text-body-sm font-medium tabular-nums text-default", children: display })
+      showValue && /* @__PURE__ */ jsx46("span", { className: "text-body-sm font-medium tabular-nums text-default", children: display })
     ] }),
-    description && /* @__PURE__ */ jsx44(
+    description && /* @__PURE__ */ jsx46(
       "p",
       {
         id: descriptionId,
-        className: clsx41("text-body-xs", disabled ? "text-disabled" : "text-default-secondary"),
+        className: clsx42("text-body-xs", disabled ? "text-disabled" : "text-default-secondary"),
         children: description
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx46(
       "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: clsx41(
-          "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
-import { forwardRef as forwardRef18 } from "react";
-import clsx42 from "clsx";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var SIZE7 = {
-  lg: "text-body",
-  md: "text-body-sm",
-  sm: "text-body-tiny"
-};
-var Label = forwardRef18(function Label2({ children, size: size2, className, htmlFor, ...rest }, ref) {
-  const field = useFieldContext();
-  const resolvedSize = size2 ?? field?.size ?? "md";
-  return /* @__PURE__ */ jsx45(
-    "label",
-    {
-      ref,
-      htmlFor: htmlFor ?? field?.controlId,
-      "data-slot": "label",
-      className: clsx42(
-        "select-none",
-        SIZE7[resolvedSize],
-        field?.disabled ? "text-disabled" : "text-default",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-});
-
-// src/components/forms/calendar.tsx
-import {
-  useCallback as useCallback4,
-  useEffect as useEffect10,
-  useId as useId12,
-  useMemo as useMemo6,
-  useRef as useRef13,
-  useState as useState11
-} from "react";
-import clsx43 from "clsx";
-import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs29 } from "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 = useMemo6(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const gridId = useId12();
-  const [month, setMonth] = useState11(
-    () => defaultMonth ?? value ?? range?.from ?? today
-  );
-  const [focusedDate, setFocusedDate] = useState11(
-    () => value ?? range?.from ?? today
-  );
-  const cellRefs = useRef13(/* @__PURE__ */ new Map());
-  const monthFormatter = useMemo6(
-    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
-    [locale]
-  );
-  const dayNameFormatter = useMemo6(
-    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
-    [locale]
-  );
-  const fullDateFormatter = useMemo6(
-    () => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
-    [locale]
-  );
-  const disabled = useCallback4(
-    (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 = useRef13(false);
-  const focusDate = useCallback4((date) => {
-    pendingFocus.current = true;
-    setFocusedDate(date);
-    setMonth(
-      (current) => current.getFullYear() === date.getFullYear() && current.getMonth() === date.getMonth() ? current : new Date(date.getFullYear(), date.getMonth(), 1)
-    );
-  }, []);
-  useEffect10(() => {
-    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__ */ jsxs29(
-    "div",
+      {
+        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: clsx42(
+          "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
+import { forwardRef as forwardRef19 } from "react";
+import clsx43 from "clsx";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var SIZE7 = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var Label = forwardRef19(function Label2({ children, size: size2, className, htmlFor, ...rest }, ref) {
+  const field = useFieldContext();
+  const resolvedSize = size2 ?? field?.size ?? "md";
+  return /* @__PURE__ */ jsx47(
+    "label",
     {
-      "data-slot": "calendar",
-      className: clsx43("w-fit rounded-xl border border-default bg-default p-3", className),
+      ref,
+      htmlFor: htmlFor ?? field?.controlId,
+      "data-slot": "label",
+      className: clsx43(
+        "select-none",
+        SIZE7[resolvedSize],
+        field?.disabled ? "text-disabled" : "text-default",
+        className
+      ),
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxs29("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx46(
-            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__ */ jsx46(ChevronLeftIcon, { "aria-hidden": true, size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx46("span", { "aria-live": "polite", className: "text-body-sm font-semibold text-default", children: monthFormatter.format(month) }),
-          /* @__PURE__ */ jsx46(
-            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__ */ jsx46(ChevronRightIcon2, { "aria-hidden": true, size: 16 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs29(
-          "div",
-          {
-            role: "grid",
-            "aria-label": label,
-            id: gridId,
-            tabIndex: -1,
-            onKeyDown,
-            children: [
-              /* @__PURE__ */ jsx46("div", { role: "row", className: "mb-1 grid grid-cols-7", children: weekdayNames.map((name) => /* @__PURE__ */ jsx46(
-                "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__ */ jsx46("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__ */ jsx46("div", { role: "gridcell", "aria-selected": selected || void 0, children: /* @__PURE__ */ jsx46(
-                  "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: clsx43(
-                      "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
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import clsx44 from "clsx";
 import { SearchIcon as SearchIcon2, XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 var HEIGHT2 = {
   lg: "h-12 text-body",
   md: "h-9 text-body-sm",
@@ -4713,9 +4990,9 @@ var PAD = {
   md: "px-3 gap-1.5",
   sm: "px-2 gap-1"
 };
-var InputGroup = forwardRef19(function InputGroup2({ children, size: sizeProp, invalid = false, disabled = false, className, ...rest }, ref) {
+var InputGroup = forwardRef20(function InputGroup2({ children, size: sizeProp, invalid = false, disabled = false, className, ...rest }, ref) {
   const size2 = useControlSize(sizeProp);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -4737,10 +5014,10 @@ var InputGroup = forwardRef19(function InputGroup2({ children, size: sizeProp, i
     }
   );
 });
-var InputGroupInput = forwardRef19(
+var InputGroupInput = forwardRef20(
   function InputGroupInput2({ className, ...props }, ref) {
     const field = useFieldControl();
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "input",
       {
         ref,
@@ -4756,9 +5033,9 @@ var InputGroupInput = forwardRef19(
     );
   }
 );
-var InputGroupAddon = forwardRef19(
+var InputGroupAddon = forwardRef20(
   function InputGroupAddon2({ children, align = "inline-start", decorative = true, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "span",
       {
         ref,
@@ -4777,9 +5054,9 @@ var InputGroupAddon = forwardRef19(
     );
   }
 );
-var InputGroupText = forwardRef19(
+var InputGroupText = forwardRef20(
   function InputGroupText2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "span",
       {
         ref,
@@ -4790,12 +5067,12 @@ var InputGroupText = forwardRef19(
     );
   }
 );
-var SearchInput = forwardRef19(function SearchInput2({ size: sizeProp, onClear, label = "Search", disabled, value, className, ...props }, ref) {
+var SearchInput = forwardRef20(function SearchInput2({ size: sizeProp, onClear, label = "Search", disabled, value, className, ...props }, ref) {
   const size2 = useControlSize(sizeProp);
   const hasValue = value !== void 0 && value !== "";
   return /* @__PURE__ */ jsxs30(InputGroup, { size: size2, disabled, className, children: [
-    /* @__PURE__ */ jsx47(InputGroupAddon, { children: /* @__PURE__ */ jsx47(SearchIcon2, { className: size2 === "sm" ? "size-3" : "size-4" }) }),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(InputGroupAddon, { children: /* @__PURE__ */ jsx48(SearchIcon2, { className: size2 === "sm" ? "size-3" : "size-4" }) }),
+    /* @__PURE__ */ jsx48(
       InputGroupInput,
       {
         ref,
@@ -4807,7 +5084,7 @@ var SearchInput = forwardRef19(function SearchInput2({ size: sizeProp, onClear,
         ...props
       }
     ),
-    onClear && hasValue && /* @__PURE__ */ jsx47(InputGroupAddon, { align: "inline-end", decorative: false, children: /* @__PURE__ */ jsx47(
+    onClear && hasValue && /* @__PURE__ */ jsx48(InputGroupAddon, { align: "inline-end", decorative: false, children: /* @__PURE__ */ jsx48(
       "button",
       {
         type: "button",
@@ -4815,7 +5092,7 @@ var SearchInput = forwardRef19(function SearchInput2({ size: sizeProp, onClear,
         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__ */ jsx47(XIcon3, { "aria-hidden": true, className: size2 === "sm" ? "size-3" : "size-4" })
+        children: /* @__PURE__ */ jsx48(XIcon3, { "aria-hidden": true, className: size2 === "sm" ? "size-3" : "size-4" })
       }
     ) })
   ] });
@@ -4823,11 +5100,11 @@ var SearchInput = forwardRef19(function SearchInput2({ size: sizeProp, onClear,
 
 // src/components/overlays/modal.tsx
 import {
-  createContext as createContext8,
-  forwardRef as forwardRef20,
-  useContext as useContext8,
+  createContext as createContext9,
+  forwardRef as forwardRef21,
+  useContext as useContext9,
   useEffect as useEffect11,
-  useState as useState12
+  useState as useState14
 } from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { CircleCheckBigIcon, InfoIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon as XIcon4 } from "lucide-react";
@@ -4839,7 +5116,7 @@ function isInsideToaster(target) {
 }
 
 // src/components/overlays/modal.tsx
-import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 var SIZE8 = {
   sm: "sm:max-w-[420px]",
   md: "sm:max-w-[540px]",
@@ -4847,10 +5124,10 @@ var SIZE8 = {
   xl: "sm:max-w-[800px]"
 };
 var TONE_ICON = {
-  info: /* @__PURE__ */ jsx48(InfoIcon, { "aria-hidden": true, className: "size-5" }),
-  positive: /* @__PURE__ */ jsx48(CircleCheckBigIcon, { "aria-hidden": true, className: "size-5" }),
-  warning: /* @__PURE__ */ jsx48(TriangleAlertIcon, { "aria-hidden": true, className: "size-5" }),
-  danger: /* @__PURE__ */ jsx48(OctagonAlertIcon, { "aria-hidden": true, className: "size-5" })
+  info: /* @__PURE__ */ jsx49(InfoIcon, { "aria-hidden": true, className: "size-5" }),
+  positive: /* @__PURE__ */ jsx49(CircleCheckBigIcon, { "aria-hidden": true, className: "size-5" }),
+  warning: /* @__PURE__ */ jsx49(TriangleAlertIcon, { "aria-hidden": true, className: "size-5" }),
+  danger: /* @__PURE__ */ jsx49(OctagonAlertIcon, { "aria-hidden": true, className: "size-5" })
 };
 var TONE_BADGE = {
   info: "brand",
@@ -4863,14 +5140,14 @@ var FOOTER_ALIGN = {
   between: "justify-between",
   end: "justify-end"
 };
-var ModalNaming = createContext8(null);
-var Modal = forwardRef20(function Modal2({ open, defaultOpen, onOpenChange, container, ...shell }, ref) {
+var ModalNaming = createContext9(null);
+var Modal = forwardRef21(function Modal2({ open, defaultOpen, onOpenChange, container, ...shell }, ref) {
   return /* @__PURE__ */ jsxs31(DialogPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
     extractTrigger(shell.children),
-    /* @__PURE__ */ jsx48(DialogPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx48(ModalShell, { ref, ...shell }) })
+    /* @__PURE__ */ jsx49(DialogPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx49(ModalShell, { ref, ...shell }) })
   ] });
 });
-var ModalShell = forwardRef20(
+var ModalShell = forwardRef21(
   function ModalShell2({
     label,
     children,
@@ -4882,13 +5159,13 @@ var ModalShell = forwardRef20(
     onInteractOutside,
     initialFocus
   }, ref) {
-    const [hasTitle, setHasTitle] = useState12(false);
-    const [hasDescription, setHasDescription] = useState12(false);
-    const [contentNode, setContentNode] = useState12(null);
-    const [returnFocusTo] = useState12(
+    const [hasTitle, setHasTitle] = useState14(false);
+    const [hasDescription, setHasDescription] = useState14(false);
+    const [contentNode, setContentNode] = useState14(null);
+    const [returnFocusTo] = useState14(
       () => typeof document === "undefined" ? null : document.activeElement
     );
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       DialogPrimitive.Overlay,
       {
         className: cn(
@@ -4939,22 +5216,22 @@ var ModalShell = forwardRef20(
               className
             ),
             children: [
-              !hasTitle && label && /* @__PURE__ */ jsx48(DialogPrimitive.Title, { className: "sr-only", children: label }),
-              showClose && /* @__PURE__ */ jsx48(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx48(
+              !hasTitle && label && /* @__PURE__ */ jsx49(DialogPrimitive.Title, { className: "sr-only", children: label }),
+              showClose && /* @__PURE__ */ jsx49(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx49(
                 IconButton,
                 {
                   variant: "subtle",
                   size: "sm",
                   "aria-label": "Close dialog",
                   className: "absolute right-6 top-5 z-raised",
-                  children: /* @__PURE__ */ jsx48(XIcon4, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx49(XIcon4, { size: 16, "aria-hidden": true })
                 }
               ) }),
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx49(
                 ModalNaming.Provider,
                 {
                   value: { registerTitle: setHasTitle, registerDescription: setHasDescription },
-                  children: /* @__PURE__ */ jsx48(PortalContainerProvider, { container: contentNode, children: withoutTrigger(children) })
+                  children: /* @__PURE__ */ jsx49(PortalContainerProvider, { container: contentNode, children: withoutTrigger(children) })
                 }
               )
             ]
@@ -4964,15 +5241,15 @@ var ModalShell = forwardRef20(
     );
   }
 );
-var ModalTrigger = forwardRef20(
+var ModalTrigger = forwardRef21(
   function ModalTrigger2(props, ref) {
-    return /* @__PURE__ */ jsx48(DialogPrimitive.Trigger, { ref, ...props });
+    return /* @__PURE__ */ jsx49(DialogPrimitive.Trigger, { ref, ...props });
   }
 );
 ModalTrigger.__modalTrigger = true;
-var ModalClose = forwardRef20(
+var ModalClose = forwardRef21(
   function ModalClose2(props, ref) {
-    return /* @__PURE__ */ jsx48(DialogPrimitive.Close, { ref, ...props });
+    return /* @__PURE__ */ jsx49(DialogPrimitive.Close, { ref, ...props });
   }
 );
 function isTrigger(node) {
@@ -4984,7 +5261,7 @@ function extractTrigger(children) {
 function withoutTrigger(children) {
   return Array.isArray(children) ? children.filter((child) => !isTrigger(child)) : isTrigger(children) ? null : children;
 }
-var ModalHeader = forwardRef20(function ModalHeader2({ children, tone = "default", divider = true, className, ...rest }, ref) {
+var ModalHeader = forwardRef21(function ModalHeader2({ children, tone = "default", divider = true, className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs31(
     "div",
     {
@@ -4999,43 +5276,43 @@ var ModalHeader = forwardRef20(function ModalHeader2({ children, tone = "default
       ),
       ...rest,
       children: [
-        tone !== "default" && /* @__PURE__ */ jsx48(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
-        /* @__PURE__ */ jsx48("div", { className: "min-w-0 flex-1", children })
+        tone !== "default" && /* @__PURE__ */ jsx49(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
+        /* @__PURE__ */ jsx49("div", { className: "min-w-0 flex-1", children })
       ]
     }
   );
 });
-var ModalTitle = forwardRef20(function ModalTitle2({ children, className, ...rest }, ref) {
-  const naming = useContext8(ModalNaming);
+var ModalTitle = forwardRef21(function ModalTitle2({ children, className, ...rest }, ref) {
+  const naming = useContext9(ModalNaming);
   useEffect11(() => {
     naming?.registerTitle(true);
     return () => naming?.registerTitle(false);
   }, [naming]);
   const classes = cn("text-heading-sm font-semibold text-default", className);
   if (!naming) {
-    return /* @__PURE__ */ jsx48("h2", { ref, className: classes, ...rest, children });
+    return /* @__PURE__ */ jsx49("h2", { ref, className: classes, ...rest, children });
   }
-  return /* @__PURE__ */ jsx48(DialogPrimitive.Title, { ref, className: classes, ...rest, children });
+  return /* @__PURE__ */ jsx49(DialogPrimitive.Title, { ref, className: classes, ...rest, children });
 });
-var ModalDescription = forwardRef20(
+var ModalDescription = forwardRef21(
   function ModalDescription2({ children, className, ...rest }, ref) {
-    const naming = useContext8(ModalNaming);
+    const naming = useContext9(ModalNaming);
     useEffect11(() => {
       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__ */ jsx48("p", { ref, className: classes, ...rest, children });
+      return /* @__PURE__ */ jsx49("p", { ref, className: classes, ...rest, children });
     }
-    return /* @__PURE__ */ jsx48(DialogPrimitive.Description, { ref, className: classes, ...rest, children });
+    return /* @__PURE__ */ jsx49(DialogPrimitive.Description, { ref, className: classes, ...rest, children });
   }
 );
-var ModalBody = forwardRef20(function ModalBody2({ children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx48("div", { ref, className: cn("px-6 py-5", className), ...rest, children });
+var ModalBody = forwardRef21(function ModalBody2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx49("div", { ref, className: cn("px-6 py-5", className), ...rest, children });
 });
-var ModalFooter = forwardRef20(function ModalFooter2({ children, align = "end", divider = true, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx48(
+var ModalFooter = forwardRef21(function ModalFooter2({ children, align = "end", divider = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       ref,
@@ -5052,9 +5329,9 @@ var ModalFooter = forwardRef20(function ModalFooter2({ children, align = "end",
 });
 
 // src/components/overlays/tooltip.tsx
-import { useId as useId13 } from "react";
+import { useId as useId15 } from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 function Tooltip({
   children,
   title,
@@ -5069,14 +5346,14 @@ function Tooltip({
   className
 }) {
   const container = usePortalContainer();
-  const labelId = useId13();
+  const labelId = useId15();
   const labelled = association === "labelledby";
   const content = /* @__PURE__ */ jsxs32(Fragment6, { children: [
-    title && /* @__PURE__ */ jsx49("p", { className: "font-semibold", children: title }),
-    body && /* @__PURE__ */ jsx49("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
+    title && /* @__PURE__ */ jsx50("p", { className: "font-semibold", children: title }),
+    body && /* @__PURE__ */ jsx50("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
   ] });
-  return /* @__PURE__ */ jsx49(TooltipPrimitive.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ jsxs32(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(TooltipPrimitive.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ jsxs32(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx50(
       TooltipPrimitive.Trigger,
       {
         asChild: true,
@@ -5089,7 +5366,7 @@ function Tooltip({
       body ? " " : null,
       body
     ] }),
-    /* @__PURE__ */ jsx49(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx50(
       TooltipPrimitive.Content,
       {
         side,
@@ -5107,86 +5384,8 @@ function Tooltip({
   ] }) });
 }
 
-// src/components/overlays/popover.tsx
-import {
-  createContext as createContext9,
-  forwardRef as forwardRef21,
-  useContext as useContext9,
-  useId as useId14,
-  useMemo as useMemo7,
-  useState as useState13
-} from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var PopoverTriggerNode = createContext9(null);
-function Popover({ children, open, defaultOpen, onOpenChange, modal = false }) {
-  const [node, setNode] = useState13(null);
-  const trigger = useMemo7(() => ({ node, setNode, modal }), [node, modal]);
-  return /* @__PURE__ */ jsx50(
-    PopoverPrimitive.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange,
-      modal,
-      children: /* @__PURE__ */ jsx50(PopoverTriggerNode.Provider, { value: trigger, children })
-    }
-  );
-}
-var PopoverTrigger = forwardRef21(
-  function PopoverTrigger2(props, ref) {
-    const trigger = useContext9(PopoverTriggerNode);
-    const fallbackId = useId14();
-    return /* @__PURE__ */ jsx50(
-      PopoverPrimitive.Trigger,
-      {
-        ref: composeRefs(ref, trigger?.setNode),
-        id: props.id ?? fallbackId,
-        ...props
-      }
-    );
-  }
-);
-var PopoverContent = forwardRef21(
-  function PopoverContent2({ children, side = "bottom", align = "center", sideOffset = 8, label, container, className, ...rest }, ref) {
-    const trigger = useContext9(PopoverTriggerNode);
-    const inherited = usePortalContainer();
-    return /* @__PURE__ */ jsx50(PopoverPrimitive.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ jsx50(
-      PopoverPrimitive.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 = forwardRef21(
-  function PopoverClose2(props, ref) {
-    return /* @__PURE__ */ jsx50(PopoverPrimitive.Close, { ref, ...props });
-  }
-);
-var PopoverAnchor = forwardRef21(
-  function PopoverAnchor2(props, ref) {
-    return /* @__PURE__ */ jsx50(PopoverPrimitive.Anchor, { ref, ...props });
-  }
-);
-
 // src/components/overlays/hover-card.tsx
-import { useId as useId15, useState as useState14 } from "react";
+import { useId as useId16, useState as useState15 } from "react";
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
 import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
 function HoverCard({
@@ -5202,10 +5401,10 @@ function HoverCard({
   className
 }) {
   const container = usePortalContainer();
-  const baseId = useId15();
+  const baseId = useId16();
   const contentId = `${baseId}-content`;
   const triggerId = `${baseId}-trigger`;
-  const [openState, setOpenState] = useState14(defaultOpen);
+  const [openState, setOpenState] = useState15(defaultOpen);
   const open = openProp ?? openState;
   const handleOpenChange = (next) => {
     setOpenState(next);
@@ -5259,7 +5458,7 @@ import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 // src/components/overlays/menu-core.tsx
 import {
   forwardRef as forwardRef22,
-  useId as useId16
+  useId as useId17
 } from "react";
 import clsx45 from "clsx";
 import { CheckIcon as CheckIcon7, ChevronRightIcon as ChevronRightIcon3 } from "lucide-react";
@@ -5292,7 +5491,7 @@ function focusMenuEdge(event, edge) {
 }
 function createMenuParts(P) {
   const Item = forwardRef22(function MenuItem({ children, onSelect, tone = "default", disabled = false, icon, description, shortcut, textValue, className, ...rest }, ref) {
-    const descriptionId = useId16();
+    const descriptionId = useId17();
     return /* @__PURE__ */ jsxs34(
       P.Item,
       {
@@ -5358,7 +5557,7 @@ function createMenuParts(P) {
     );
   });
   const Group = forwardRef22(function MenuGroup({ children, label, className, ...rest }, ref) {
-    const labelId = useId16();
+    const labelId = useId17();
     return /* @__PURE__ */ jsxs34(P.Group, { ref, "aria-labelledby": label ? labelId : void 0, className, ...rest, children: [
       label && /* @__PURE__ */ jsx52("div", { id: labelId, className: OVERLAY_HEADING, children: label }),
       children
@@ -5611,13 +5810,13 @@ import {
   forwardRef as forwardRef26,
   useContext as useContext10,
   useEffect as useEffect13,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { Dialog as DialogPrimitive2 } from "radix-ui";
 import { XIcon as XIcon5 } from "lucide-react";
 
 // src/components/cards/scroll-area.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect12, useRef as useRef14, useState as useState15 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect12, useRef as useRef15, useState as useState16 } from "react";
 import clsx46 from "clsx";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var OVERFLOW = {
@@ -5626,8 +5825,8 @@ var OVERFLOW = {
   both: "overflow-auto"
 };
 var ScrollArea = forwardRef25(function ScrollArea2({ children, axis = "vertical", label, className, ...rest }, ref) {
-  const localRef = useRef14(null);
-  const [overflows, setOverflows] = useState15(false);
+  const localRef = useRef15(null);
+  const [overflows, setOverflows] = useState16(false);
   useEffect12(() => {
     const node = localRef.current;
     if (!node) return;
@@ -5708,10 +5907,10 @@ var Drawer = forwardRef26(function Drawer2({
   ] });
 });
 var DrawerPanel = forwardRef26(function DrawerPanel2({ side = "right", width, label, className, onEscapeKeyDown, onInteractOutside, initialFocus, children }, ref) {
-  const [hasTitle, setHasTitle] = useState16(false);
-  const [hasDescription, setHasDescription] = useState16(false);
-  const [panelNode, setPanelNode] = useState16(null);
-  const [returnFocusTo] = useState16(
+  const [hasTitle, setHasTitle] = useState17(false);
+  const [hasDescription, setHasDescription] = useState17(false);
+  const [panelNode, setPanelNode] = useState17(null);
+  const [returnFocusTo] = useState17(
     () => typeof document === "undefined" ? null : document.activeElement
   );
   return /* @__PURE__ */ jsx56(
@@ -5867,7 +6066,7 @@ var DrawerFooter = forwardRef26(function DrawerFooter2({ align = "end", classNam
 });
 
 // src/components/overlays/confirm-dialog.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
@@ -5885,7 +6084,7 @@ function ConfirmDialog({
   onConfirm,
   onOpenChange
 }) {
-  const cancelRef = useRef15(null);
+  const cancelRef = useRef16(null);
   const requestOpenChange = (next) => {
     if (!next && isConfirming) return;
     onOpenChange(next);
@@ -5940,7 +6139,7 @@ function ConfirmDialog({
 }
 
 // src/components/overlays/note-confirm-modal.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 function NoteConfirmModal({ open, ...rest }) {
   if (!open) return null;
@@ -5964,7 +6163,7 @@ function NoteConfirmModalShell({
   onConfirm,
   onDiscardNote
 }) {
-  const [note, setNote] = useState17("");
+  const [note, setNote] = useState18("");
   const noteMissing = requireNote && !note.trim();
   const requestOpenChange = (next) => {
     if (!next && isSubmitting) return;
@@ -6037,8 +6236,8 @@ import {
   createContext as createContext11,
   forwardRef as forwardRef27,
   useContext as useContext11,
-  useMemo as useMemo8,
-  useRef as useRef16
+  useMemo as useMemo9,
+  useRef as useRef17
 } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { EllipsisIcon } from "lucide-react";
@@ -6061,8 +6260,8 @@ function DropdownMenu({
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const pendingEdge = useRef16("start");
-  const state = useMemo8(() => ({ setOpen, pendingEdge }), [setOpen]);
+  const pendingEdge = useRef17("start");
+  const state = useMemo9(() => ({ setOpen, pendingEdge }), [setOpen]);
   return /* @__PURE__ */ jsx59(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ jsx59(DropdownMenuStateContext.Provider, { value: state, children }) });
 }
 var DropdownMenuTrigger = forwardRef27(
@@ -6178,7 +6377,7 @@ function Scrim({ onClose, label, position = "fixed", open, className }) {
 }
 
 // src/components/overlays/fullscreen-surface.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { Dialog as DialogPrimitive3 } from "radix-ui";
 import { XIcon as XIcon6 } from "lucide-react";
 import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -6194,7 +6393,7 @@ function FullscreenSurface({
   children,
   className
 }) {
-  const [node, setNode] = useState18(null);
+  const [node, setNode] = useState19(null);
   return /* @__PURE__ */ jsx61(DialogPrimitive3.Root, { open: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx61(DialogPrimitive3.Portal, { children: /* @__PURE__ */ jsxs38(
     DialogPrimitive3.Content,
     {
@@ -6497,13 +6696,13 @@ import {
   createContext as createContext14,
   forwardRef as forwardRef30,
   useContext as useContext14,
-  useId as useId17
+  useId as useId18
 } from "react";
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var CollapsibleState = createContext14(null);
 var Collapsible = forwardRef30(function Collapsible2({ children, open: openProp, defaultOpen = false, onOpenChange, disabled, ...rest }, ref) {
-  const triggerId = useId17();
+  const triggerId = useId18();
   const [open, setOpen] = useControllableState({
     value: openProp,
     defaultValue: defaultOpen,
@@ -6838,10 +7037,10 @@ import {
   useCallback as useCallback5,
   useContext as useContext15,
   useEffect as useEffect14,
-  useId as useId18,
-  useMemo as useMemo9,
-  useRef as useRef17,
-  useState as useState19
+  useId as useId19,
+  useMemo as useMemo10,
+  useRef as useRef18,
+  useState as useState20
 } from "react";
 import clsx49 from "clsx";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon4 } from "lucide-react";
@@ -6869,12 +7068,12 @@ function Carousel({
     defaultValue: defaultIndex,
     onChange: onIndexChange
   });
-  const baseId = useId18();
-  const cursor = useRef17(0);
-  const [paused, setPaused] = useState19(false);
-  const [userTookControl, setUserTookControl] = useState19(false);
+  const baseId = useId19();
+  const cursor = useRef18(0);
+  const [paused, setPaused] = useState20(false);
+  const [userTookControl, setUserTookControl] = useState20(false);
   const hasAutoplay = autoplayInterval !== void 0 && autoplayInterval > 0;
-  const context = useMemo9(
+  const context = useMemo10(
     () => ({
       index,
       setIndex: (next) => {
@@ -7043,10 +7242,10 @@ import {
   useCallback as useCallback6,
   useContext as useContext16,
   useEffect as useEffect15,
-  useId as useId19,
-  useMemo as useMemo10,
-  useRef as useRef18,
-  useState as useState20
+  useId as useId20,
+  useMemo as useMemo11,
+  useRef as useRef19,
+  useState as useState21
 } from "react";
 import clsx50 from "clsx";
 import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -7072,10 +7271,10 @@ function Resizable({
     defaultValue: defaultSize,
     onChange: onSizeChange
   });
-  const containerRef = useRef18(null);
-  const baseId = useId19();
-  const [dragging, setDragging] = useState20(false);
-  const context = useMemo10(
+  const containerRef = useRef19(null);
+  const baseId = useId20();
+  const [dragging, setDragging] = useState21(false);
+  const context = useMemo11(
     () => ({
       direction,
       size: size2,
@@ -7135,7 +7334,7 @@ function ResizableHandle({
 }) {
   const ctx = useResizable("ResizableHandle");
   const horizontal = ctx.direction === "horizontal";
-  const collapsedFrom = useRef18(null);
+  const collapsedFrom = useRef19(null);
   const fromPointer = useCallback6(
     (clientX, clientY) => {
       const container = ctx.containerRef.current;
@@ -7333,7 +7532,7 @@ import {
   createContext as createContext17,
   forwardRef as forwardRef33,
   useContext as useContext17,
-  useId as useId20
+  useId as useId21
 } from "react";
 import clsx54 from "clsx";
 import { Tabs as TabsPrimitive } from "radix-ui";
@@ -7404,7 +7603,7 @@ function ItemsTabs({
   label,
   className
 }) {
-  const generatedPrefix = useId20();
+  const generatedPrefix = useId21();
   const prefix = idPrefix ?? generatedPrefix;
   const [value, setValue] = useControllableState({
     value: valueProp,
@@ -8004,8 +8203,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))
@@ -8328,21 +8527,21 @@ function slotWidthPx(gridWidthPx, columnGapPx, cols) {
 }
 
 // src/lib/use-width-tier.ts
-import { useCallback as useCallback7, useEffect as useEffect16, useLayoutEffect, useRef as useRef19, useState as useState21 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useLayoutEffect, useRef as useRef20, useState as useState22 } from "react";
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect16 : useLayoutEffect;
 var TIER_SETTLE_MS = 200;
 function useWidthTier({ frozen = false } = {}) {
-  const [node, setNode] = useState21(null);
-  const [{ widthPx, tier }, setMeasured] = useState21({
+  const [node, setNode] = useState22(null);
+  const [{ widthPx, tier }, setMeasured] = useState22({
     widthPx: null,
     tier: "wide"
   });
-  const observed = useRef19(null);
-  const frozenRef = useRef19(frozen);
+  const observed = useRef20(null);
+  const frozenRef = useRef20(frozen);
   frozenRef.current = frozen;
-  const tierRef = useRef19(tier);
+  const tierRef = useRef20(tier);
   tierRef.current = tier;
-  const widthRef = useRef19(widthPx);
+  const widthRef = useRef20(widthPx);
   widthRef.current = widthPx;
   const commit = useCallback7(() => {
     const raw = observed.current;
@@ -8827,7 +9026,7 @@ function RadialGauge({
 }
 
 // src/components/charts/sparkline.tsx
-import { useId as useId21 } from "react";
+import { useId as useId22 } from "react";
 import clsx74 from "clsx";
 import { Fragment as Fragment12, jsx as jsx94, jsxs as jsxs58 } from "react/jsx-runtime";
 var SIZE17 = {
@@ -8849,7 +9048,7 @@ function Sparkline({
   label,
   className
 }) {
-  const gradientId = useId21();
+  const gradientId = useId22();
   if (data.length < 2) return null;
   const w = width ?? SIZE17[size2].width;
   const h = height ?? SIZE17[size2].height;
@@ -9352,7 +9551,7 @@ function ScoredRow({
 import clsx82 from "clsx";
 
 // src/components/feedback/progress-bar.tsx
-import { useId as useId22 } from "react";
+import { useId as useId23 } from "react";
 import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
 var SIZE20 = {
   xs: "h-1",
@@ -9381,7 +9580,7 @@ function ProgressBar({
 }) {
   const clamped = Math.min(100, Math.max(0, value));
   const rounded = radius ? void 0 : "rounded-full";
-  const labelId = useId22();
+  const labelId = useId23();
   const filledSegments = segments ? Math.round(clamped / 100 * segments) : 0;
   const track = segments ? /* @__PURE__ */ jsx102(
     "div",
@@ -9582,7 +9781,7 @@ function DetailGrid({ children, columns = "auto", className }) {
 }
 
 // src/components/lists/description-list.tsx
-import { useEffect as useEffect17, useState as useState22 } from "react";
+import { useEffect as useEffect17, useState as useState23 } from "react";
 import clsx87 from "clsx";
 import { CheckIcon as CheckIcon9, CopyIcon } from "lucide-react";
 import { Fragment as Fragment14, jsx as jsx108, jsxs as jsxs70 } from "react/jsx-runtime";
@@ -9600,7 +9799,7 @@ function DescriptionItem({ label, value, copyValue, className }) {
   ] });
 }
 function CopyButton({ value, label, copiedLabel = "Copied", className }) {
-  const [copied, setCopied] = useState22(false);
+  const [copied, setCopied] = useState23(false);
   useEffect17(() => {
     if (!copied) return;
     const timer = window.setTimeout(() => setCopied(false), 2e3);
@@ -9667,7 +9866,7 @@ function CheckedGroupList({
 }
 
 // src/components/lists/tree-view.tsx
-import { useMemo as useMemo11, useRef as useRef20, useState as useState23 } from "react";
+import { useMemo as useMemo12, useRef as useRef21, useState as useState24 } from "react";
 import clsx89 from "clsx";
 import { ChevronRightIcon as ChevronRightIcon7 } from "lucide-react";
 import { jsx as jsx110, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -9700,10 +9899,10 @@ function TreeView({
     value: selectedProp,
     defaultValue: defaultSelected
   });
-  const [focusedId, setFocusedId] = useState23(null);
-  const rowRefs = useRef20(/* @__PURE__ */ new Map());
-  const expandedSet = useMemo11(() => new Set(expanded), [expanded]);
-  const visible = useMemo11(() => {
+  const [focusedId, setFocusedId] = useState24(null);
+  const rowRefs = useRef21(/* @__PURE__ */ new Map());
+  const expandedSet = useMemo12(() => new Set(expanded), [expanded]);
+  const visible = useMemo12(() => {
     const out = [];
     const walk = (nodes, level, parentId) => {
       for (const item of nodes) {
@@ -9852,25 +10051,37 @@ import { forwardRef as forwardRef40 } from "react";
 import clsx90 from "clsx";
 import { ChevronDownIcon as ChevronDownIcon4, ChevronsUpDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx as jsx111, jsxs as jsxs73 } from "react/jsx-runtime";
-var Table = forwardRef40(function Table2({ label, density = "default", fixed = false, className, children, ...rest }, ref) {
+var Table = forwardRef40(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__ */ jsx111("div", { className: clsx90("w-full overflow-x-auto", SCROLLBAR_CLASSES), children: /* @__PURE__ */ jsx111(
-      "table",
+    /* @__PURE__ */ jsx111(
+      "div",
       {
-        ref,
-        "aria-label": label,
-        "data-slot": "table",
-        "data-density": density,
-        className: cn("w-full border-collapse", fixed && "table-fixed", className),
-        ...rest,
-        children
+        className: clsx90(
+          "w-full",
+          maxHeight ? clsx90("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__ */ jsx111(
+          "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 = forwardRef40(
@@ -9993,9 +10204,9 @@ import {
   useCallback as useCallback8,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo12,
-  useRef as useRef21,
-  useState as useState25
+  useMemo as useMemo13,
+  useRef as useRef22,
+  useState as useState26
 } from "react";
 import clsx94 from "clsx";
 import {
@@ -10008,11 +10219,11 @@ import {
 } from "@tanstack/react-table";
 
 // src/lib/use-element-width.ts
-import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect2, useState as useState24 } from "react";
+import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect2, useState as useState25 } from "react";
 var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? useEffect18 : useLayoutEffect2;
 function useElementWidth() {
-  const [node, setNode] = useState24(null);
-  const [width, setWidth] = useState24(void 0);
+  const [node, setNode] = useState25(null);
+  const [width, setWidth] = useState25(void 0);
   useIsomorphicLayoutEffect2(() => {
     if (!node) return;
     const apply = (next) => {
@@ -10218,7 +10429,7 @@ function DataTableViewOptions({ table, label = "Columns" }) {
   const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
   if (columns.length === 0) return null;
   return /* @__PURE__ */ jsxs75(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx114(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx114(Button, { variant: "neutral", size: "sm", leadingIcon: /* @__PURE__ */ jsx114(Columns3Icon, { "aria-hidden": true }), children: label }) }),
+    /* @__PURE__ */ jsx114(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx114(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ jsx114(Columns3Icon, { "aria-hidden": true }), children: label }) }),
     /* @__PURE__ */ jsxs75(DropdownMenuContent, { align: "end", children: [
       /* @__PURE__ */ jsx114(DropdownMenuLabel, { children: "Show columns" }),
       columns.map((column) => /* @__PURE__ */ jsx114(
@@ -10321,18 +10532,18 @@ function TableCellProgress({
   className
 }) {
   const clamped = Math.min(100, Math.max(0, percent));
-  return /* @__PURE__ */ jsxs76("div", { className: clsx93("flex flex-col gap-1", className), children: [
+  return /* @__PURE__ */ jsxs76("div", { className: clsx93("flex w-full min-w-0 items-center gap-2", className), children: [
     /* @__PURE__ */ jsx115(
       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__ */ jsxs76("span", { className: "text-body-tiny leading-none text-default-secondary", children: [
+    /* @__PURE__ */ jsxs76("span", { className: "shrink-0 text-body-tiny leading-none tabular-nums text-default-secondary", children: [
       percent,
       "%"
     ] })
@@ -10367,12 +10578,12 @@ function resolve(updater, previous) {
   return typeof updater === "function" ? updater(previous) : updater;
 }
 function useTableState(controlled, initial, onChange) {
-  const [inner, setInner] = useState25(initial);
+  const [inner, setInner] = useState26(initial);
   const value = controlled ?? inner;
-  const latest = useRef21(value);
+  const latest = useRef22(value);
   latest.current = value;
   const isControlled = controlled !== void 0;
-  const onChangeRef = useRef21(onChange);
+  const onChangeRef = useRef22(onChange);
   onChangeRef.current = onChange;
   const set = useCallback8(
     (updater) => {
@@ -10401,8 +10612,8 @@ function CellInteractionGuard({ children }) {
 }
 var HEADER_PADDING_PX = { default: 32, compact: 24 };
 function useHeaderWidths(padding2, deps) {
-  const nodes = useRef21(/* @__PURE__ */ new Map());
-  const [widths, setWidths] = useState25({});
+  const nodes = useRef22(/* @__PURE__ */ new Map());
+  const [widths, setWidths] = useState26({});
   const measure = useCallback8(() => {
     const next = {};
     nodes.current.forEach((node, id) => {
@@ -10432,18 +10643,20 @@ function useHeaderWidths(padding2, deps) {
   return { widths, register };
 }
 function useScrollEdges() {
-  const [node, setNode] = useState25(null);
-  const [edges, setEdges] = useState25({ overflowing: false, atStart: true, atEnd: true });
+  const [node, setNode] = useState26(null);
+  const [edges, setEdges] = useState26({ overflowing: false, atStart: true, atEnd: true, overflowingY: false, atTop: true });
   const measure = useCallback8(() => {
     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]);
   useLayoutEffect3(() => {
@@ -10489,6 +10702,7 @@ function DataTable({
   density = "default",
   align = "center",
   responsive = true,
+  maxHeight,
   manual = {},
   state = {},
   onSortingChange,
@@ -10520,7 +10734,7 @@ function DataTable({
     onColumnVisibilityChange
   );
   const [rowSelection, setRowSelection] = useTableState(state.rowSelection, {}, onRowSelectionChange);
-  const allColumns = useMemo12(() => {
+  const allColumns = useMemo13(() => {
     const cols = columns;
     if (!enableRowSelection || cols.some((column) => column.id === SELECT_COLUMN_ID)) return cols;
     return [createSelectColumn({ getRowLabel: getRowLabel && ((row) => `Select ${getRowLabel(row)}`) }), ...cols];
@@ -10547,7 +10761,7 @@ function DataTable({
     rowCount: manual.rowCount,
     ...tableOptions
   });
-  const selectionReported = useRef21(false);
+  const selectionReported = useRef22(false);
   useEffect19(() => {
     if (!onSelectionChange) return;
     if (!selectionReported.current) {
@@ -10558,7 +10772,7 @@ function DataTable({
   }, [rowSelection]);
   const [wrapRef, containerWidth] = useElementWidth();
   const breakpoint = responsive === false ? 0 : typeof responsive === "object" ? responsive.breakpoint ?? DEFAULT_CARD_BREAKPOINT_PX : DEFAULT_CARD_BREAKPOINT_PX;
-  const modeRef = useRef21("table");
+  const modeRef = useRef22("table");
   const mode = nextLayoutMode(modeRef.current, containerWidth, breakpoint);
   modeRef.current = mode;
   const search = searchable === true ? {} : searchable || void 0;
@@ -10598,14 +10812,15 @@ function DataTable({
     renderRowLink,
     getRowTone,
     getRowDimmed,
-    getRowLabel
+    getRowLabel,
+    maxHeight
   };
   return /* @__PURE__ */ jsxs77("div", { "data-slot": "data-table", className: cn("flex flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ jsxs77("div", { className: "flex flex-wrap items-center gap-2", children: [
       search && /* @__PURE__ */ jsx116(
         SearchInput,
         {
-          size: "sm",
+          size: "md",
           label: search.label ?? "Search",
           placeholder: search.placeholder ?? "Search\u2026",
           value: searchValue,
@@ -10619,7 +10834,7 @@ function DataTable({
     ] }),
     /* @__PURE__ */ jsx116("p", { role: "status", "aria-live": "polite", className: "sr-only", children: filtering && !loading ? `${resultCount} ${resultCount === 1 ? "result" : "results"}` : "" }),
     /* @__PURE__ */ jsxs77("div", { ref: wrapRef, className: "overflow-hidden rounded-xl border border-default bg-default", children: [
-      mode === "cards" ? /* @__PURE__ */ jsx116(CardList, { ...view }) : /* @__PURE__ */ jsx116(TableView, { ...view }),
+      mode === "cards" ? maxHeight ? /* @__PURE__ */ jsx116(CardScroll, { label, maxHeight, children: /* @__PURE__ */ jsx116(CardList, { ...view }) }) : /* @__PURE__ */ jsx116(CardList, { ...view }) : /* @__PURE__ */ jsx116(TableView, { ...view }),
       showPager && /* @__PURE__ */ jsx116("div", { className: "border-t border-default px-4 py-3", children: /* @__PURE__ */ jsx116(DataTablePagination, { table, pageSizeOptions }) }),
       footer && /* @__PURE__ */ jsx116("div", { className: "border-t border-default px-4 py-3", children: footer })
     ] })
@@ -10642,7 +10857,8 @@ function TableView({
   getRowHref,
   renderRowLink,
   getRowTone,
-  getRowDimmed
+  getRowDimmed,
+  maxHeight
 }) {
   const d = DENSITY2[density];
   const columns = table.getVisibleLeafColumns();
@@ -10670,15 +10886,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 ? clsx94("sticky top-0 z-sticky bg-default-secondary", !scroll.atTop && "shadow-[inset_0_-1px_0_var(--color-border-default-default)]") : void 0;
   return /* @__PURE__ */ jsxs77("div", { className: "relative", children: [
     /* @__PURE__ */ jsx116(
       "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__ */ jsxs77(
           "table",
           {
@@ -10715,6 +10939,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__ */ jsx116("span", { ref: meta?.hideHeader ? void 0 : headers.register(header.column.id), className: "inline-block", children: /* @__PURE__ */ jsx116(DataTableColumnHeader, { column: header.column }) }) : flexRender(definition, header.getContext())
@@ -10834,6 +11059,20 @@ function BodyCell({
     }
   );
 }
+function CardScroll({ label, maxHeight, children }) {
+  const scroll = useScrollEdges();
+  return /* @__PURE__ */ jsx116(
+    "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,
@@ -10914,7 +11153,7 @@ function CardList({
                   /* @__PURE__ */ jsx116("div", { className: "flex max-w-[45%] shrink-0 justify-end [&_.whitespace-nowrap]:whitespace-normal", children: render(slots.status.id) }),
                   slots.actions && /* @__PURE__ */ jsx116("div", { className: "relative z-raised shrink-0", children: /* @__PURE__ */ jsx116(CellInteractionGuard, { children: render(slots.actions.id) }) })
                 ] }),
-                slots.fields.length > 0 && /* @__PURE__ */ jsx116("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__ */ jsxs77("div", { className: clsx94("min-w-0", column.columnDef.meta?.interactive && "relative z-raised"), children: [
+                slots.fields.length > 0 && /* @__PURE__ */ jsx116("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__ */ jsxs77("div", { className: clsx94("min-w-0", column.columnDef.meta?.interactive && "relative z-raised"), children: [
                   /* @__PURE__ */ jsx116("dt", { className: "text-body-tiny text-default-secondary", children: columnLabel(column) }),
                   /* @__PURE__ */ jsx116("dd", { className: "mt-0.5 min-w-0 text-body-xs text-default", children: column.columnDef.meta?.interactive ? /* @__PURE__ */ jsx116(CellInteractionGuard, { children: render(id) }) : render(id) })
                 ] }, id)) })
@@ -11002,7 +11241,7 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/components/feedback/banner.tsx
-import { forwardRef as forwardRef42, useId as useId23 } from "react";
+import { forwardRef as forwardRef42, useId as useId24 } from "react";
 import clsx96 from "clsx";
 import { CircleCheckBigIcon as CircleCheckBigIcon3, InfoIcon as InfoIcon3, TriangleAlertIcon as TriangleAlertIcon3, XIcon as XIcon7 } from "lucide-react";
 import { jsx as jsx119, jsxs as jsxs79 } from "react/jsx-runtime";
@@ -11035,7 +11274,7 @@ var Banner = forwardRef42(function Banner2({
   className,
   ...rest
 }, ref) {
-  const titleId = useId23();
+  const titleId = useId24();
   const glyph = icon === void 0 ? TONE_ICON2[tone] : icon;
   return /* @__PURE__ */ jsxs79(
     "div",
@@ -11081,9 +11320,9 @@ import {
   useCallback as useCallback9,
   useContext as useContext18,
   useEffect as useEffect20,
-  useMemo as useMemo13,
-  useRef as useRef22,
-  useState as useState26
+  useMemo as useMemo14,
+  useRef as useRef23,
+  useState as useState27
 } from "react";
 import clsx97 from "clsx";
 import { CircleCheckBigIcon as CircleCheckBigIcon4, InfoIcon as InfoIcon4, TriangleAlertIcon as TriangleAlertIcon4, XIcon as XIcon8 } from "lucide-react";
@@ -11120,9 +11359,9 @@ function Toaster({
   max = 4,
   duration = 5e3
 }) {
-  const [toasts, setToasts] = useState26([]);
-  const timers = useRef22(/* @__PURE__ */ new Map());
-  const counter = useRef22(0);
+  const [toasts, setToasts] = useState27([]);
+  const timers = useRef23(/* @__PURE__ */ new Map());
+  const counter = useRef23(0);
   const dismiss = useCallback9((id) => {
     const timer = timers.current.get(id);
     if (timer) {
@@ -11159,7 +11398,7 @@ function Toaster({
       map.clear();
     };
   }, []);
-  const context = useMemo13(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);
+  const context = useMemo14(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);
   return /* @__PURE__ */ jsxs80(ToastContext.Provider, { value: context, children: [
     children,
     /* @__PURE__ */ jsx120(Portal, { children: /* @__PURE__ */ jsx120(
@@ -11211,11 +11450,11 @@ function ToastItem({ toast, onDismiss }) {
 }
 
 // src/components/forms/password-input.tsx
-import { forwardRef as forwardRef43, useState as useState27 } from "react";
+import { forwardRef as forwardRef43, useState as useState28 } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { jsx as jsx121 } from "react/jsx-runtime";
 var PasswordInput = forwardRef43(function PasswordInput2(props, ref) {
-  const [visible, setVisible] = useState27(false);
+  const [visible, setVisible] = useState28(false);
   return /* @__PURE__ */ jsx121(
     Input,
     {