@mediaradar/design-components 0.19.0 → 0.21.0

package/dist/index.cjs

@@ -37,11 +37,13 @@ __export(index_exports, {
   DateRangeFilter: () => DateRangeFilter,
   DateRangePicker: () => DateRangePicker,
   Delta: () => Delta,
+  EmptyState: () => EmptyState,
   FilterChipBar: () => FilterChipBar,
   FilterDropdownFooter: () => FilterDropdownFooter,
   Freshness: () => Freshness,
   InfoTip: () => InfoTip,
   LineChartPlaceholder: () => LineChartPlaceholder,
+  Modal: () => Modal,
   MultiSelectFilter: () => MultiSelectFilter,
   NO_RESULTS_BODY: () => NO_RESULTS_BODY,
   NO_RESULTS_TITLE: () => NO_RESULTS_TITLE,
@@ -56,6 +58,7 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   SectionHeading: () => SectionHeading,
   SectionRail: () => SectionRail,
+  SegmentedControl: () => SegmentedControl,
   SelectAllVisible: () => SelectAllVisible,
   SelectFilter: () => SelectFilter,
   SelectedSection: () => SelectedSection,
@@ -63,7 +66,10 @@ __export(index_exports, {
   SortButton: () => SortButton,
   StackedColumnPlaceholder: () => StackedColumnPlaceholder,
   TablePagination: () => TablePagination,
+  Tabs: () => Tabs,
   Tag: () => Tag,
+  TextField: () => TextField,
+  Toast: () => Toast,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
   WorkspaceAvatar: () => WorkspaceAvatar,
@@ -311,7 +317,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
@@ -990,6 +996,7 @@ function NavBtn({ children, onClick, ...rest }) {
 var import_react4 = require("react");
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var HEIGHT = { sm: "h-8", md: "h-10", lg: "h-11" };
 var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
 var MODE_LABEL = {
   anyWord: "Any Word",
@@ -1005,6 +1012,7 @@ function SearchBar({
   value,
   onChange,
   variant = "default",
+  size = "lg",
   matchValue,
   onMatchChange,
   className,
@@ -1012,6 +1020,7 @@ function SearchBar({
 }) {
   const [open, setOpen] = (0, import_react4.useState)(false);
   const ref = (0, import_react4.useRef)(null);
+  const input = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && setOpen(false);
@@ -1030,7 +1039,8 @@ function SearchBar({
     "div",
     {
       className: cx2(
-        "flex h-11 min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input",
+        "flex min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+        HEIGHT[size],
         className
       ),
       children: [
@@ -1039,16 +1049,31 @@ function SearchBar({
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
+              ref: input,
               type: "text",
               value,
               onChange: (e) => onChange?.(e.target.value),
               placeholder,
               "aria-label": placeholder,
               "data-testid": testIdPrefix && `${testIdPrefix}-search`,
-              className: "min-w-0 flex-1 bg-transparent text-[13px] text-text-primary outline-hidden placeholder:text-text-tertiary"
+              className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary"
             }
           )
         ] }),
+        value && onChange && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onChange("");
+              input.current?.focus();
+            },
+            "aria-label": "Clear search",
+            "data-testid": testIdPrefix && `${testIdPrefix}-clear`,
+            className: "mr-1.5 flex size-6 shrink-0 items-center justify-center self-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-border-focus",
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.X, { size: 14, "aria-hidden": "true" })
+          }
+        ),
         showMatch && // border-border-default, not the bare `border-border` both source
         // implementations used -- confirmed by actually compiling against
         // @mediaradar/design-tokens' real published theme.css (not assumed):
@@ -2400,7 +2425,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-8 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
@@ -2714,7 +2739,7 @@ function FilterDropdown({
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
-        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        className: "inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
         children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2920,7 +2945,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       size: {
         xs: "h-6 px-2 text-xs",
         sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm"
+        md: "h-10 px-4 text-sm",
+        // 44, the filter row's height, so a button at the end of a row of
+        // filter dropdowns lines up with them. One control scale: 32 / 40 / 44.
+        lg: "h-11 px-5 text-sm"
       },
       // Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
       // be one dimension, so an icon button never lined up with the labelled
@@ -2935,6 +2963,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       { size: "xs", iconOnly: true, class: "w-6" },
       { size: "sm", iconOnly: true, class: "w-8" },
       { size: "md", iconOnly: true, class: "w-10" },
+      { size: "lg", iconOnly: true, class: "w-11" },
       // A boxed button is a target you aim at, so its label carries the weight
       // of one. `link` sits inline in a sentence, where semibold reads as
       // emphasis on the words rather than as a control.
@@ -3048,7 +3077,7 @@ function NameListModal({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
-        className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4",
         onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "div",
@@ -3058,7 +3087,7 @@ function NameListModal({
             "aria-modal": "true",
             "aria-labelledby": titleId,
             onKeyDown: trapTab,
-            className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
+            className: "w-full max-w-110 rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
@@ -3071,7 +3100,7 @@ function NameListModal({
                     value: name,
                     onChange: (e) => setName(e.target.value),
                     placeholder,
-                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-dense focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus"
                   }
                 )
               ] }),
@@ -3348,10 +3377,83 @@ function WorkspaceAvatar({ name, size = "md" }) {
   );
 }
 
-// src/Tag.tsx
+// src/Toast.tsx
+var import_react15 = require("react");
+var import_react_dom6 = require("react-dom");
+var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
+var ICON = {
+  neutral: null,
+  success: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.Check, { size: 15, className: "shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.AlertTriangle, { size: 15, className: "shrink-0", "aria-hidden": "true" })
+};
+function Toast({ message, action, onClose, tone = "neutral", duration, className }) {
+  const ms = duration ?? (action ? 1e4 : 5e3);
+  const [paused, setPaused] = (0, import_react15.useState)(false);
+  const closed = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
+    if (paused) return;
+    const t = window.setTimeout(() => {
+      if (closed.current) return;
+      closed.current = true;
+      onClose();
+    }, ms);
+    return () => window.clearTimeout(t);
+  }, [message, ms, paused]);
+  return (0, import_react_dom6.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        onFocusCapture: () => setPaused(true),
+        onBlurCapture: () => setPaused(false),
+        className: cn(
+          "fixed bottom-6 left-1/2 z-toast flex max-w-[92vw] -translate-x-1/2 items-center gap-2.5",
+          "rounded-control bg-inverseSurface py-2.5 pl-4 pr-2.5 text-sm font-medium text-text-inverse shadow-overlay",
+          className
+        ),
+        children: [
+          ICON[tone] && // The inverse pair, not text-success / text-warning: those are tuned
+          // for the page, and on the toast's flipped surface amber drops to 2:1.
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "span",
+            {
+              className: cn(
+                "flex",
+                tone === "success" ? "text-text-inverseSuccess" : "text-text-inverseWarning"
+              ),
+              children: ICON[tone]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0", children: message }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (!closed.current) {
+                  closed.current = true;
+                  action.onClick();
+                }
+              },
+              className: "shrink-0 rounded-control px-2.5 py-1 text-sm font-semibold text-text-inverse underline-offset-2 transition-colors duration-(--mr-motion-duration-interactive) ease-interactive hover:bg-text-inverse/15 hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+              children: action.label
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/Tag.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Tag({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "span",
     {
       className: cn(
@@ -3370,8 +3472,8 @@ function Tag({ children, className }) {
 }
 
 // src/TablePagination.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function TablePagination({
   page,
   perPage,
@@ -3392,10 +3494,10 @@ function TablePagination({
     btn,
     "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "select",
           {
             value: perPage,
@@ -3403,11 +3505,11 @@ function TablePagination({
             "aria-label": "Items per page",
             "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
             className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
-            children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: n, children: n }, n))
+            children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: n, children: n }, n))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          import_lucide_react20.ChevronDown,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_lucide_react21.ChevronDown,
           {
             size: 13,
             "aria-hidden": "true",
@@ -3417,8 +3519,8 @@ function TablePagination({
       ] }),
       "items per page"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -3427,10 +3529,10 @@ function TablePagination({
           "aria-label": "First page",
           "data-testid": testIdPrefix && `${testIdPrefix}-first`,
           className: stepBtn,
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronFirst, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronFirst, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -3439,11 +3541,11 @@ function TablePagination({
           "aria-label": "Previous page",
           "data-testid": testIdPrefix && `${testIdPrefix}-prev`,
           className: stepBtn,
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLeft, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLeft, { size: 16, "aria-hidden": "true" })
         }
       ),
       pageWindow(current, totalPages).map(
-        (p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        (p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "button",
           {
             type: "button",
@@ -3459,7 +3561,7 @@ function TablePagination({
           p
         )
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -3468,10 +3570,10 @@ function TablePagination({
           "aria-label": "Next page",
           "data-testid": testIdPrefix && `${testIdPrefix}-next`,
           className: stepBtn,
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronRight, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronRight, { size: 16, "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -3480,11 +3582,11 @@ function TablePagination({
           "aria-label": "Last page",
           "data-testid": testIdPrefix && `${testIdPrefix}-last`,
           className: stepBtn,
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLast, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLast, { size: 16, "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
       rangeStart.toLocaleString(),
       " \u2013 ",
       rangeEnd.toLocaleString(),
@@ -3497,9 +3599,9 @@ function TablePagination({
 }
 
 // src/DateRangePicker.tsx
-var import_react15 = require("react");
-var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
 var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
@@ -3535,7 +3637,7 @@ function spanLabel(label, today) {
   return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
 }
 function MiniSelect({ value, onChange, options }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "select",
     {
       value: String(value),
@@ -3543,8 +3645,8 @@ function MiniSelect({ value, onChange, options }) {
         const opt = options.find((o) => String(o.value) === e.target.value);
         if (opt) onChange(opt.value);
       },
-      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
-      children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
+      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+      children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
 }
@@ -3559,19 +3661,19 @@ function DateRangePicker({
   today,
   years
 }) {
-  const end = (0, import_react15.useMemo)(() => today ?? startOfToday(), [today]);
+  const end = (0, import_react16.useMemo)(() => today ?? startOfToday(), [today]);
   const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  const [value, setValue] = (0, import_react15.useState)(defaultValue);
-  const [draft, setDraft] = (0, import_react15.useState)(defaultValue);
-  const ref = (0, import_react15.useRef)(null);
-  const [fromMo, setFromMo] = (0, import_react15.useState)(end.getMonth());
-  const [fromYr, setFromYr] = (0, import_react15.useState)(end.getFullYear() - 1);
-  const [toMo, setToMo] = (0, import_react15.useState)(end.getMonth());
-  const [toYr, setToYr] = (0, import_react15.useState)(end.getFullYear());
-  const [fromQ, setFromQ] = (0, import_react15.useState)(Math.floor(end.getMonth() / 3));
-  const [toQ, setToQ] = (0, import_react15.useState)(Math.floor(end.getMonth() / 3));
-  (0, import_react15.useEffect)(() => {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [value, setValue] = (0, import_react16.useState)(defaultValue);
+  const [draft, setDraft] = (0, import_react16.useState)(defaultValue);
+  const ref = (0, import_react16.useRef)(null);
+  const [fromMo, setFromMo] = (0, import_react16.useState)(end.getMonth());
+  const [fromYr, setFromYr] = (0, import_react16.useState)(end.getFullYear() - 1);
+  const [toMo, setToMo] = (0, import_react16.useState)(end.getMonth());
+  const [toYr, setToYr] = (0, import_react16.useState)(end.getFullYear());
+  const [fromQ, setFromQ] = (0, import_react16.useState)(Math.floor(end.getMonth() / 3));
+  const [toQ, setToQ] = (0, import_react16.useState)(Math.floor(end.getMonth() / 3));
+  (0, import_react16.useEffect)(() => {
     const [s, e] = resolveRange(value, end);
     onRangeChange?.(s, e);
   }, [value]);
@@ -3579,7 +3681,7 @@ function DateRangePicker({
     if (!open) setDraft(value);
     setOpen((o) => !o);
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -3605,8 +3707,8 @@ function DateRangePicker({
     if (showFooter) setDraft(label);
     else commit(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "button",
       {
         type: "button",
@@ -3615,16 +3717,16 @@ function DateRangePicker({
         "aria-haspopup": "listbox",
         className: chipTriggerClass(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
-      presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
+      presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -3634,26 +3736,26 @@ function DateRangePicker({
         },
         p
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "From",
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
             "To",
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
-              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
-              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex gap-1", children: [
+              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "button",
             {
               type: "button",
@@ -3665,15 +3767,15 @@ function DateRangePicker({
           )
         ] })
       ] }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
     ] })
   ] });
 }
 
 // src/MultiSelectFilter.tsx
-var import_react16 = require("react");
-var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function MultiSelectFilter({
   caption,
   options = [],
@@ -3697,11 +3799,11 @@ function MultiSelectFilter({
 }) {
   const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
   const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
-  const [open, setOpen] = (0, import_react16.useState)(false);
-  const [q, setQ] = (0, import_react16.useState)("");
-  const [draft, setDraft] = (0, import_react16.useState)(selected);
-  const ref = (0, import_react16.useRef)(null);
-  const close = (0, import_react16.useCallback)(() => {
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [q, setQ] = (0, import_react17.useState)("");
+  const [draft, setDraft] = (0, import_react17.useState)(selected);
+  const ref = (0, import_react17.useRef)(null);
+  const close = (0, import_react17.useCallback)(() => {
     setOpen(false);
     setQ("");
     if (showFooter) return;
@@ -3718,7 +3820,7 @@ function MultiSelectFilter({
     setOpen(false);
     setQ("");
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => e.key === "Escape" && close();
     const onClick = (e) => {
@@ -3764,8 +3866,8 @@ function MultiSelectFilter({
     const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
     return kids.length ? { ...g, children: kids } : null;
   }).filter((g) => g !== null) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "button",
       {
         type: "button",
@@ -3773,9 +3875,9 @@ function MultiSelectFilter({
         "aria-expanded": open,
         className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChipContent, { caption, value, icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            import_lucide_react22.ChevronDown,
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChipContent, { caption, value, icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_lucide_react23.ChevronDown,
             {
               size: 14,
               "aria-hidden": "true",
@@ -3785,7 +3887,7 @@ function MultiSelectFilter({
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         className: cn(
@@ -3796,9 +3898,9 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "input",
               {
                 type: "text",
@@ -3808,37 +3910,37 @@ function MultiSelectFilter({
                 className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
               }
             ),
-            q && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.X, { size: 13 }) })
+            q && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.X, { size: 13 }) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
             groups ? visibleGroups.map((g) => {
               const state = groupState(g);
-              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                   "button",
                   {
                     type: "button",
                     onClick: () => toggleGroup(g),
                     className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
-                      counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(g.id) })
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TriCheck, { state }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
+                      counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(g.id) })
                     ]
                   }
                 ),
                 g.children.map((c) => {
                   const checked = draft.includes(c.id);
-                  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                     "button",
                     {
                       type: "button",
                       onClick: () => toggle(c.id),
                       className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state: checked ? "all" : "none" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
-                        counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(c.id) })
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TriCheck, { state: checked ? "all" : "none" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
+                        counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(c.id) })
                       ]
                     },
                     c.id
@@ -3847,33 +3949,33 @@ function MultiSelectFilter({
               ] }, g.id);
             }) : items.map((o) => {
               const checked = draft.includes(o.id);
-              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggle(o.id),
                   className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       "span",
                       {
                         className: cn(
                           "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
                           checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
                         ),
-                        children: checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 })
+                        children: checked && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Check, { size: 13, strokeWidth: 3 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
-                    counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(o.id) })
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
+                    counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(o.id) })
                   ]
                 },
                 o.id
               );
             }),
-            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
+            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
           ] }),
-          showFooter ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          showFooter ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             "button",
             {
               type: "button",
@@ -3892,7 +3994,7 @@ function MultiSelectFilter({
 }
 function TriCheck({ state }) {
   const filled = state !== "none";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "span",
     {
       className: cn(
@@ -3900,14 +4002,14 @@ function TriCheck({ state }) {
         filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
       ),
       children: [
-        state === "all" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 }),
-        state === "some" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Minus, { size: 13, strokeWidth: 3 })
+        state === "all" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Check, { size: 13, strokeWidth: 3 }),
+        state === "some" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Minus, { size: 13, strokeWidth: 3 })
       ]
     }
   );
 }
 function OptionCount({ n }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
     "(",
     n.toLocaleString(),
     ")"
@@ -3915,7 +4017,7 @@ function OptionCount({ n }) {
 }
 
 // src/Toggle.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
@@ -3923,7 +4025,7 @@ var SIZES2 = {
 var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "button",
     {
       type: "button",
@@ -3941,7 +4043,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "span",
         {
           className: cn(
@@ -3956,22 +4058,22 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
 }
 
 // src/AISpark.tsx
-var import_react17 = require("react");
-var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_lucide_react24 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function AISpark({ size = 16, className }) {
-  const id = (0, import_react17.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
+  const id = (0, import_react18.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react23.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react24.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
   ] });
 }
 
 // src/Freshness.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var dotColor = {
   fresh: "bg-status-success",
   recent: "bg-status-warning",
@@ -3983,7 +4085,7 @@ var srLabel = {
   stale: "Older than a day"
 };
 function Freshness({ level }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "span",
     {
       className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
@@ -3994,28 +4096,306 @@ function Freshness({ level }) {
 }
 
 // src/SectionHeading.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
 
 // src/PageHeader.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function PageHeader({ title, description, actions, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function PageHeader({ title, description, actions, back, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
+      back && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        "a",
+        {
+          href: back.href ?? "#",
+          onClick: back.onClick,
+          className: "mb-1.5 inline-flex items-center gap-1.5 rounded-control text-micro font-semibold uppercase tracking-wider text-text-tertiary hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.ArrowLeft, { size: 13, "aria-hidden": "true" }),
+            back.label
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
   ] });
 }
+
+// src/Modal.tsx
+var import_react19 = require("react");
+var import_react_dom7 = require("react-dom");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var WIDTH = {
+  sm: "max-w-110",
+  md: "max-w-160",
+  lg: "max-w-220"
+};
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({ open, onClose, title, description, size = "md", footer, children, className }) {
+  const titleId = (0, import_react19.useId)();
+  const descId = (0, import_react19.useId)();
+  const panel = (0, import_react19.useRef)(null);
+  const close = (0, import_react19.useRef)(onClose);
+  close.current = onClose;
+  (0, import_react19.useEffect)(() => {
+    if (!open) return;
+    const opener = document.activeElement;
+    const first = panel.current?.querySelector(`[data-modal-body] :is(${FOCUSABLE})`) ?? panel.current?.querySelector(`[data-modal-footer] :is(${FOCUSABLE})`);
+    (first ?? panel.current)?.focus();
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) return;
+      const [head, tail] = [items[0], items[items.length - 1]];
+      if (e.shiftKey && document.activeElement === head) {
+        e.preventDefault();
+        tail.focus();
+      } else if (!e.shiftKey && document.activeElement === tail) {
+        e.preventDefault();
+        head.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = overflow;
+      opener?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom7.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim px-4 py-6",
+        onMouseDown: (e) => e.target === e.currentTarget && onClose(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "div",
+          {
+            ref: panel,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description ? descId : void 0,
+            tabIndex: -1,
+            className: cn(
+              "flex max-h-full w-full flex-col rounded-card border border-border-default bg-surface shadow-overlay outline-hidden",
+              WIDTH[size],
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-start gap-3 px-5 pt-5 pb-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h2", { id: titleId, className: "text-base font-semibold text-text-primary", children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { id: descId, className: "mt-0.5 text-sm text-text-secondary", children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    className: "-mr-1.5 -mt-1 flex size-8 shrink-0 items-center justify-center rounded-control text-text-tertiary hover:bg-subtle hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.X, { size: 16, "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "data-modal-body": true, className: "min-h-0 flex-1 overflow-y-auto px-5 pb-5 text-sm text-text-primary", children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "data-modal-footer": true, className: "flex items-center justify-end gap-2 border-t border-border-default px-5 py-3", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/EmptyState.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action, size = "sm", className }) {
+  const md = size === "md";
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        md ? "gap-2 px-6 py-16" : "gap-1.5 px-4 py-8",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center justify-center text-text-tertiary",
+              md && "mb-1 size-11 rounded-full bg-subtle"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: cn("font-semibold text-text-primary", md ? "text-base" : "text-sm"), children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: cn("max-w-sm text-text-secondary", md ? "text-sm" : "text-xs"), children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: md ? "mt-3" : "mt-2", children: action })
+      ]
+    }
+  );
+}
+
+// src/Tabs.tsx
+var import_react20 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function arrowKeys(e, row) {
+  if (!row || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+  const items = Array.from(row.querySelectorAll("button:not([disabled])"));
+  const at = items.indexOf(document.activeElement);
+  const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (at + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length;
+  e.preventDefault();
+  items[next]?.focus();
+  items[next]?.click();
+}
+function Tabs({ items, value, onChange, idPrefix = "tabs", className, ...rest }) {
+  const row = (0, import_react20.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      ref: row,
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("flex gap-6 border-b border-border-default", className),
+      children: items.map((item) => {
+        const on = item.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            id: `${idPrefix}-tab-${item.value}`,
+            "aria-controls": `${idPrefix}-panel-${item.value}`,
+            "aria-selected": on,
+            tabIndex: on ? 0 : -1,
+            disabled: item.disabled,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "-mb-px flex items-center gap-1.5 rounded-control border-b-2 pt-1 pb-2.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:opacity-50",
+              on ? "border-brand-primaryAction font-semibold text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"
+            ),
+            children: [
+              item.label,
+              item.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-text-tertiary", children: item.count })
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const row = (0, import_react20.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      ref: row,
+      role: "radiogroup",
+      "aria-label": rest["aria-label"],
+      onKeyDown: (e) => arrowKeys(e, row.current),
+      className: cn("inline-flex w-fit items-stretch gap-0.5 rounded-full bg-subtle p-1", size === "md" ? "h-10" : "h-8", className),
+      children: options.map((o) => {
+        const on = o.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            tabIndex: on ? 0 : -1,
+            onClick: () => onChange(o.value),
+            className: cn(
+              "rounded-full px-3 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+              size === "md" ? "text-sm" : "text-xs",
+              on ? "bg-surface font-semibold text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
+            ),
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+// src/TextField.tsx
+var import_react21 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var HEIGHT2 = { sm: "h-8", md: "h-10", lg: "h-11" };
+var TextField = (0, import_react21.forwardRef)(
+  ({ label, hint, error, size = "md", icon, className, id, disabled, ...props }, ref) => {
+    const auto = (0, import_react21.useId)();
+    const fieldId = id ?? auto;
+    const noteId = `${fieldId}-note`;
+    const note = error ?? hint;
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { htmlFor: fieldId, className: "text-xs font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-2 rounded-control border bg-input px-3 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-border-focus",
+            HEIGHT2[size],
+            error ? "border-status-danger" : "border-border-strong",
+            disabled && "opacity-50"
+          ),
+          children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-hidden": "true", className: "flex shrink-0 text-text-tertiary", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                ref,
+                id: fieldId,
+                disabled,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": note ? noteId : void 0,
+                className: "min-w-0 flex-1 bg-transparent text-dense text-text-primary outline-hidden placeholder:text-text-tertiary",
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      note && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { id: noteId, className: cn("text-xs", error ? "text-text-danger" : "text-text-tertiary"), children: note })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AISpark,
@@ -4034,11 +4414,13 @@ function PageHeader({ title, description, actions, className }) {
   DateRangeFilter,
   DateRangePicker,
   Delta,
+  EmptyState,
   FilterChipBar,
   FilterDropdownFooter,
   Freshness,
   InfoTip,
   LineChartPlaceholder,
+  Modal,
   MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
@@ -4053,6 +4435,7 @@ function PageHeader({ title, description, actions, className }) {
   SearchBar,
   SectionHeading,
   SectionRail,
+  SegmentedControl,
   SelectAllVisible,
   SelectFilter,
   SelectedSection,
@@ -4060,7 +4443,10 @@ function PageHeader({ title, description, actions, className }) {
   SortButton,
   StackedColumnPlaceholder,
   TablePagination,
+  Tabs,
   Tag,
+  TextField,
+  Toast,
   Toggle,
   Tooltip,
   WorkspaceAvatar,