@mediaradar/design-components 0.1.0 → 0.4.0

package/dist/index.cjs

@@ -20,7 +20,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  InfoTip: () => InfoTip
+  AdvertiserNoResults: () => AdvertiserNoResults,
+  AdvertiserQuickFilter: () => AdvertiserQuickFilter,
+  AdvertiserSearchPrompt: () => AdvertiserSearchPrompt,
+  BarChartPlaceholder: () => BarChartPlaceholder,
+  Card: () => Card,
+  CheckBox: () => CheckBox,
+  DEFAULT_SEARCH_MATCH: () => DEFAULT_SEARCH_MATCH,
+  DataScopeFilter: () => DataScopeFilter,
+  DateRangeFilter: () => DateRangeFilter,
+  InfoTip: () => InfoTip,
+  LineChartPlaceholder: () => LineChartPlaceholder,
+  NO_RESULTS_BODY: () => NO_RESULTS_BODY,
+  NO_RESULTS_TITLE: () => NO_RESULTS_TITLE,
+  NoResultsEmptyState: () => NoResultsEmptyState,
+  PRIMARY_ACTION_CLASS: () => PRIMARY_ACTION_CLASS,
+  PieChartPlaceholder: () => PieChartPlaceholder,
+  PublisherBreakdownList: () => PublisherBreakdownList,
+  QUIET_ACTION_CLASS: () => QUIET_ACTION_CLASS,
+  SearchBar: () => SearchBar,
+  SectionRail: () => SectionRail,
+  SelectAllVisible: () => SelectAllVisible,
+  SelectFilter: () => SelectFilter,
+  SelectedSection: () => SelectedSection,
+  SelectionPicker: () => SelectionPicker,
+  StackedColumnPlaceholder: () => StackedColumnPlaceholder,
+  Tooltip: () => Tooltip,
+  WorkspaceSelectedCard: () => WorkspaceSelectedCard,
+  noResultsBody: () => noResultsBody
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -96,8 +123,2510 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
     )
   ] });
 }
+
+// src/AdvertiserQuickFilter.tsx
+var import_react2 = require("react");
+var import_lucide_react3 = require("lucide-react");
+
+// src/AdvertiserSearchPrompt.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AdvertiserSearchPrompt({ label = "an advertiser name" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Search, { size: 16, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: [
+      "Start typing ",
+      label,
+      " to filter."
+    ] })
+  ] });
+}
+
+// src/AdvertiserQuickFilter.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var SELECT_ALL_THRESHOLD = 5;
+function slug(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function AdvertiserQuickFilter({
+  caption = "Advertiser",
+  options,
+  selected,
+  onChange,
+  align = "left",
+  icon,
+  showFooter = false,
+  clearValue = [],
+  parked = [],
+  searchPlaceholder = "Search for an advertiser",
+  promptLabel = "an advertiser name",
+  noResultsHint = "Try checking your spelling or searching for a broader brand name.",
+  clearLabel = "Clear advertisers",
+  testIdPrefix
+}) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [q, setQ] = (0, import_react2.useState)("");
+  const [draft, setDraft] = (0, import_react2.useState)(selected);
+  const [selectedOpen, setSelectedOpen] = (0, import_react2.useState)(true);
+  const ref = (0, import_react2.useRef)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const clearSearch = () => {
+    setQ("");
+    setSelectedOpen(false);
+  };
+  const close = (0, import_react2.useCallback)(() => {
+    setOpen(false);
+    setQ("");
+    if (showFooter) return;
+    if (draft.length !== selected.length || draft.some((id) => !selected.includes(id))) {
+      onChange(draft);
+    }
+  }, [draft, selected, onChange, showFooter]);
+  const openTray = () => {
+    setDraft(selected);
+    setSelectedOpen(true);
+    setOpen(true);
+  };
+  const apply = () => {
+    onChange(draft);
+    setOpen(false);
+    setQ("");
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!open) return;
+    inputRef.current?.focus();
+    const onKey = (e) => e.key === "Escape" && close();
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open, close]);
+  const toggle = (id) => setDraft((cur) => cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
+  const ql = q.trim().toLowerCase();
+  const selectedOptions = (0, import_react2.useMemo)(
+    () => draft.map((id) => options.find((o) => o.id === id)).filter(Boolean),
+    [draft, options]
+  );
+  const results = (0, import_react2.useMemo)(
+    () => ql ? options.filter((o) => !draft.includes(o.id) && o.label.toLowerCase().includes(ql)) : [],
+    [ql, options, draft]
+  );
+  const visibleIds = results.map((o) => o.id);
+  const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((id) => draft.includes(id));
+  const toggleAllVisible = () => setDraft(
+    (cur) => allVisibleSelected ? cur.filter((id) => !visibleIds.includes(id)) : [.../* @__PURE__ */ new Set([...cur, ...visibleIds])]
+  );
+  const shown = open && !showFooter ? draft : selected;
+  const counted = parked.length ? shown.filter((id) => !parked.includes(id)) : shown;
+  const value = counted.length === 0 ? "All" : counted.length === 1 ? options.find((o) => o.id === counted[0])?.label ?? "1 selected" : `${counted.length} selected`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => open ? close() : openTray(),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_lucide_react3.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: cx(
+          "absolute top-[calc(100%+8px)] z-30 flex w-72 flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        role: "dialog",
+        "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-default 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)(import_lucide_react3.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: q,
+                onChange: (e) => setQ(e.target.value),
+                onMouseDown: () => setSelectedOpen(false),
+                placeholder: searchPlaceholder,
+                "aria-label": searchPlaceholder,
+                "data-testid": testIdPrefix && `${testIdPrefix}-search`,
+                className: "h-full min-w-0 flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
+              }
+            ),
+            q && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: clearSearch,
+                "aria-label": "Clear search",
+                className: "shrink-0 text-text-tertiary transition-colors hover:text-text-primary",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.X, { size: 13 })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "max-h-[300px] overflow-y-auto p-1", children: [
+            selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mb-1 border-b border-border-default pb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": testIdPrefix && `${testIdPrefix}-selected-toggle`,
+                  onClick: () => setSelectedOpen((v) => !v),
+                  "aria-expanded": selectedOpen,
+                  className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_lucide_react3.ChevronDown,
+                      {
+                        size: 13,
+                        "aria-hidden": "true",
+                        className: cx("transition-transform", !selectedOpen && "-rotate-90")
+                      }
+                    ),
+                    "Selected (",
+                    selectedOptions.length,
+                    ")"
+                  ]
+                }
+              ),
+              selectedOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-0.5", children: selectedOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                OptionRow,
+                {
+                  label: o.label,
+                  checked: true,
+                  onToggle: () => toggle(o.id),
+                  testId: testIdPrefix && `${testIdPrefix}-option-${slug(o.id)}`
+                },
+                o.id
+              )) })
+            ] }),
+            !ql ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AdvertiserSearchPrompt, { label: promptLabel }) : results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-[13px] font-medium text-text-primary", children: [
+                "No results found for \u201C",
+                q.trim(),
+                "\u201D"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: noResultsHint })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              results.length > SELECT_ALL_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": testIdPrefix && `${testIdPrefix}-select-all-visible`,
+                  onClick: toggleAllVisible,
+                  className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.ListChecks, { size: 14, "aria-hidden": "true" }),
+                    allVisibleSelected ? `Deselect ${results.length} visible` : `Select all ${results.length} visible`
+                  ]
+                }
+              ),
+              results.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                OptionRow,
+                {
+                  label: o.label,
+                  checked: false,
+                  onToggle: () => toggle(o.id),
+                  testId: testIdPrefix && `${testIdPrefix}-option-${slug(o.id)}`
+                },
+                o.id
+              ))
+            ] })
+          ] }),
+          showFooter ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between border-t border-border-default px-3 py-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": testIdPrefix && `${testIdPrefix}-clear-all`,
+                onClick: () => setDraft(clearValue),
+                disabled: draft.length === 0,
+                className: "text-[13px] font-medium text-text-secondary transition-colors hover:text-text-primary disabled:opacity-40",
+                children: "Clear all"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": testIdPrefix && `${testIdPrefix}-apply`,
+                onClick: apply,
+                className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-brand-onprimary transition hover:brightness-110",
+                children: "Apply"
+              }
+            )
+          ] }) : draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between border-t border-border-default p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-[11px] text-text-tertiary", children: [
+              draft.length,
+              " selected"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setDraft([]),
+                className: "text-[12px] font-medium text-text-link hover:underline",
+                children: clearLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function OptionRow({
+  label,
+  checked,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      onClick: onToggle,
+      className: "flex cursor-pointer items-center gap-2.5 rounded-control px-2 py-2 transition-colors hover:bg-subtle",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            "aria-checked": checked,
+            "aria-label": label,
+            "data-testid": testId,
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            className: cx(
+              "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+              "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+              checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-surface hover:border-brand-primaryAction"
+            ),
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Check, { size: 13, strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: label })
+      ]
+    }
+  );
+}
+
+// src/CheckBox.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId }) {
+  const on = checked || indeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "aria-label": ariaLabel,
+      disabled,
+      "data-testid": testId,
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange();
+      },
+      className: [
+        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+        "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
+        disabled && "cursor-not-allowed opacity-50"
+      ].filter(Boolean).join(" "),
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null
+    }
+  );
+}
+
+// src/DateRangeFilter.tsx
+var import_react3 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_SHORTCUTS = [
+  "Year to date",
+  "Rolling 3 months",
+  "Rolling 6 months",
+  "Rolling 12 months",
+  "Previous quarter",
+  "Current quarter to date",
+  "Previous month",
+  "Current month",
+  "Custom"
+];
+var CREATIVE_INTEL_SHORTCUTS = [
+  "Today",
+  "Yesterday",
+  "Last 7 days",
+  "Last 14 days",
+  "Last month",
+  "Rolling 3 months",
+  "Rolling 6 months",
+  "Rolling 12 months",
+  "Year to date",
+  "Previous year",
+  "All available history",
+  "Custom"
+];
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var addDays = (d, n) => {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+};
+var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var fmt = (d) => `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
+var fmtFull = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+var fullRangeLabel = (s, e) => `${fmtFull(s)} - ${fmtFull(e)}`;
+var presetLabel = (sc) => sc === "Custom" ? "Custom range" : sc;
+function presetRange(key, today) {
+  const t = startOfDay(today);
+  const qMonth = Math.floor(t.getMonth() / 3) * 3;
+  switch (key) {
+    case "Year to date":
+      return [new Date(t.getFullYear(), 0, 1), t];
+    case "Rolling 3 months":
+      return [addMonths(t, -3), t];
+    case "Rolling 6 months":
+      return [addMonths(t, -6), t];
+    case "Rolling 12 months":
+      return [addMonths(t, -12), t];
+    case "Previous quarter": {
+      const s = new Date(t.getFullYear(), qMonth - 3, 1);
+      const e = new Date(t.getFullYear(), qMonth, 0);
+      return [s, e];
+    }
+    case "Current quarter to date":
+      return [new Date(t.getFullYear(), qMonth, 1), t];
+    case "Previous month": {
+      const s = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+      const e = new Date(t.getFullYear(), t.getMonth(), 0);
+      return [s, e];
+    }
+    case "Current month":
+      return [new Date(t.getFullYear(), t.getMonth(), 1), t];
+    case "Today":
+      return [t, t];
+    case "Yesterday": {
+      const y = addDays(t, -1);
+      return [y, y];
+    }
+    case "Last 7 days":
+      return [addDays(t, -6), t];
+    case "Last 14 days":
+      return [addDays(t, -13), t];
+    case "Last month": {
+      const s = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+      const e = new Date(t.getFullYear(), t.getMonth(), 0);
+      return [s, e];
+    }
+    case "Previous year":
+      return [new Date(t.getFullYear() - 1, 0, 1), new Date(t.getFullYear() - 1, 11, 31)];
+    case "All available history":
+      return [new Date(2e3, 0, 1), t];
+    default:
+      return null;
+  }
+}
+function monthGrid(year, month) {
+  const first = new Date(year, month, 1);
+  const dow = (first.getDay() + 6) % 7;
+  const gridStart = addDays(first, -dow);
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+function matchShortcut(shortcuts, label) {
+  if (!label) return "Rolling 12 months";
+  const hit = shortcuts.find((s) => s.toLowerCase() === label.toLowerCase());
+  return hit || "Custom";
+}
+function slug2(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function DateRangeFilter({
+  caption = "Date Range",
+  defaultValue,
+  value: controlledValue,
+  range: controlledRange,
+  align = "left",
+  onChange,
+  onRangeChange,
+  showDates = false,
+  shortDates = false,
+  icon,
+  presetSet = "default",
+  testIdPrefix
+}) {
+  const controlled = controlledValue !== void 0 && controlledRange !== void 0;
+  const SHORTCUTS = presetSet === "creativeIntel" ? CREATIVE_INTEL_SHORTCUTS : DEFAULT_SHORTCUTS;
+  const today = (0, import_react3.useMemo)(() => /* @__PURE__ */ new Date(), []);
+  const initShortcut = matchShortcut(SHORTCUTS, controlled ? controlledValue : defaultValue);
+  const initRange = controlled ? controlledRange : presetRange(initShortcut === "Custom" ? "Rolling 12 months" : initShortcut, today);
+  const dateLine = (s, e) => shortDates ? `${fmt(s)} \u2013 ${fmt(e)}` : fullRangeLabel(s, e);
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react3.useState)(
+    showDates ? presetLabel(initShortcut) : defaultValue || "Last 7 days"
+  );
+  const [uncontrolledDatesLine, setUncontrolledDatesLine] = (0, import_react3.useState)(dateLine(initRange[0], initRange[1]));
+  const committed = (0, import_react3.useRef)({ shortcut: initShortcut, start: initRange[0], end: initRange[1] });
+  const displayValue = controlled ? showDates ? presetLabel(initShortcut) : controlledValue : uncontrolledValue;
+  const displayDatesLine = controlled ? dateLine(initRange[0], initRange[1]) : uncontrolledDatesLine;
+  const [shortcut, setShortcut] = (0, import_react3.useState)(initShortcut);
+  const [start, setStart] = (0, import_react3.useState)(initRange[0]);
+  const [end, setEnd] = (0, import_react3.useState)(initRange[1]);
+  const [leftMonth, setLeftMonth] = (0, import_react3.useState)(new Date(initRange[0].getFullYear(), initRange[0].getMonth(), 1));
+  const ref = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (controlled) return;
+    onRangeChange?.(committed.current.start, committed.current.end);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const committedShortcut = controlled ? initShortcut : committed.current.shortcut;
+    const committedStart = controlled ? initRange[0] : committed.current.start;
+    const committedEnd = controlled ? initRange[1] : committed.current.end;
+    setShortcut(committedShortcut);
+    setStart(committedStart);
+    setEnd(committedEnd);
+    setLeftMonth(new Date(committedStart.getFullYear(), committedStart.getMonth(), 1));
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  const choosePreset = (key) => {
+    setShortcut(key);
+    if (key === "Custom") return;
+    const r = presetRange(key, today);
+    if (r) {
+      setStart(r[0]);
+      setEnd(r[1]);
+      setLeftMonth(new Date(r[0].getFullYear(), r[0].getMonth(), 1));
+    }
+  };
+  const pickDay = (d) => {
+    setShortcut("Custom");
+    if (!start || start && end) {
+      setStart(d);
+      setEnd(null);
+    } else if (d < start) {
+      setEnd(start);
+      setStart(d);
+    } else setEnd(d);
+  };
+  const apply = () => {
+    const s = start || initRange[0];
+    const e = end || s;
+    const v = showDates ? presetLabel(shortcut) : shortcut === "Custom" ? `${fmt(s)} \u2014 ${fmt(e)}` : shortcut;
+    if (!controlled) {
+      committed.current = { shortcut, start: s, end: e };
+      setUncontrolledValue(v);
+      setUncontrolledDatesLine(dateLine(s, e));
+    }
+    onChange?.(v);
+    onRangeChange?.(s, e);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.ChevronDown, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
+        className: `absolute top-[calc(100%+8px)] z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${align === "right" ? "right-0" : "left-0"}`,
+        role: "dialog",
+        "aria-label": "Select date range",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-testid": testIdPrefix && `${testIdPrefix}-option-${slug2(s)}`,
+              onClick: () => choosePreset(s),
+              className: `rounded-control px-3 py-2 text-left text-[13px] font-medium transition-colors ${shortcut === s ? "bg-subtle text-text-primary" : "text-text-secondary hover:bg-subtle hover:text-text-primary"}`,
+              children: s
+            },
+            s
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-end gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "my-4 border-t border-border-default" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
+              const m = addMonths(leftMonth, offset);
+              const grid = monthGrid(m.getFullYear(), m.getMonth());
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-[252px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+                  offset === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "h-7 w-7" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[15px] font-semibold text-text-primary", children: [
+                    MONTHS[m.getMonth()],
+                    " ",
+                    m.getFullYear()
+                  ] }),
+                  offset === 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.ChevronRight, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "h-7 w-7" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-7", children: [
+                  WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
+                  grid.map((d, i) => {
+                    const inMonth = d.getMonth() === m.getMonth();
+                    const hasRange = !!(start && end);
+                    const isStart = !!start && sameDay(d, start);
+                    const isEnd = end ? sameDay(d, end) : isStart && !end;
+                    const inRange = hasRange && d >= startOfDay(start) && d <= startOfDay(end);
+                    const single = isStart && isEnd;
+                    const endpoint = isStart || !!end && isEnd;
+                    let band = "";
+                    if (inRange && !single) {
+                      if (isStart) band = "left-1/2 right-0";
+                      else if (end && isEnd) band = "left-0 right-1/2";
+                      else band = "left-0 right-0";
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
+                      band && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "span",
+                        {
+                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
+                          children: d.getDate()
+                        }
+                      )
+                    ] }, i);
+                  })
+                ] })
+              ] }, offset);
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Field({ label, value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
+  ] });
+}
+function NavBtn({ children, onClick, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick, className: "flex h-7 w-7 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary", ...rest, children });
+}
+
+// src/SearchBar.tsx
+var import_react4 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
+var MODE_LABEL = {
+  anyWord: "Any Word",
+  exactMatch: "Exact Match",
+  contextual: "Contextual",
+  adCode: "Ad Code"
+};
+function cx2(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SearchBar({
+  placeholder = "Search\u2026",
+  value,
+  onChange,
+  variant = "default",
+  matchValue,
+  onMatchChange,
+  className,
+  testIdPrefix
+}) {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  const showMatch = variant === "filterable" && matchValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cx2(
+        "flex h-11 min-w-[200px] flex-1 items-stretch rounded-control border border-border-strong bg-input",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Search, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "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"
+            }
+          )
+        ] }),
+        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):
+        // there is no bare `--color-border` in that file, only the
+        // -default/-interactive/-focus/-focusSoft/-strong suffixed variants,
+        // so `border-border` silently generates no utility at all there. It
+        // only "worked" in each source app because each one separately
+        // defines its own local `border-border` alias outside the shared
+        // token package (insights-studio-prototype's own src/index.css;
+        // mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
+        // an alias this shared component can't rely on existing.
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              type: "button",
+              "data-testid": testIdPrefix && `${testIdPrefix}-mode-trigger`,
+              onClick: () => setOpen((o) => !o),
+              "aria-expanded": open,
+              "aria-haspopup": "dialog",
+              className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
+              children: [
+                matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_lucide_react6.ChevronDown,
+                  {
+                    size: 14,
+                    "aria-hidden": "true",
+                    className: cx2("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              role: "dialog",
+              "aria-label": "Search match type",
+              "data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
+              className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ModeRow,
+                  {
+                    title: "Any Word Text Search",
+                    selected: matchValue.mode === "anyWord",
+                    onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
+                    description: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
+                    infoText: "The Or/And choice applies only when Any Word is the active search mode.",
+                    extra: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        RadioOption,
+                        {
+                          label: "Or",
+                          checked: matchValue.wordJoin === "Or",
+                          onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: "Or" }),
+                          testId: testIdPrefix && `${testIdPrefix}-word-join-or`
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        RadioOption,
+                        {
+                          label: "And",
+                          checked: matchValue.wordJoin === "And",
+                          onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: "And" }),
+                          testId: testIdPrefix && `${testIdPrefix}-word-join-and`
+                        }
+                      )
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ModeRow,
+                  {
+                    title: "Exact Match Text Search",
+                    selected: matchValue.mode === "exactMatch",
+                    onSelect: () => onMatchChange?.({ mode: "exactMatch", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-exactMatch`,
+                    description: "Find creatives that mention your exact keyword phrase.",
+                    infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ModeRow,
+                  {
+                    title: "Contextual Search",
+                    badge: "Beta",
+                    selected: matchValue.mode === "contextual",
+                    onSelect: () => onMatchChange?.({ mode: "contextual", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-contextual`,
+                    description: "Find creatives that may contain OR have similar meaning as your keyword(s).",
+                    infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ModeRow,
+                  {
+                    title: "Ad Code Search",
+                    selected: matchValue.mode === "adCode",
+                    onSelect: () => onMatchChange?.({ mode: "adCode", wordJoin: matchValue.wordJoin }),
+                    testId: testIdPrefix && `${testIdPrefix}-mode-adCode`,
+                    description: "Find creatives based on a list of one or more ad codes that you provide.",
+                    infoText: "Separate multiple ad codes with a comma or a new line."
+                  }
+                )
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
+}
+function ModeRow({
+  title,
+  badge,
+  extra,
+  description,
+  infoText,
+  selected,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      role: "radio",
+      tabIndex: 0,
+      "aria-checked": selected,
+      "data-testid": testId,
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      className: "flex cursor-pointer flex-col items-stretch gap-1 rounded-control p-1.5 text-left transition-colors hover:bg-subtle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RowInfoTip, { text: infoText })
+            ] }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
+            extra
+          ] }),
+          selected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
+      ]
+    }
+  );
+}
+function RadioOption({
+  label,
+  checked,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-testid": testId,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect();
+      },
+      role: "radio",
+      "aria-checked": checked,
+      className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            className: cx2(
+              "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+              checked ? "border-brand-primaryAction" : "border-border-interactive"
+            ),
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function RowInfoTip({ text }) {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((o) => !o);
+        },
+        "aria-label": "More information",
+        "aria-expanded": open,
+        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.AlertCircle, { size: 13, "aria-hidden": "true" })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        role: "tooltip",
+        className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[220px] rounded-control border border-border-default bg-surface px-2.5 py-1.5 text-[11.5px] font-normal leading-snug text-text-secondary shadow-overlay",
+        children: text
+      }
+    )
+  ] });
+}
+
+// src/SectionRail.tsx
+var import_react5 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SectionRail({
+  title,
+  titleSerif,
+  subtitle,
+  viewAllLabel,
+  viewAllHref,
+  children
+}) {
+  const scrollRef = (0, import_react5.useRef)(null);
+  const scroll = (direction) => {
+    scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "h2",
+          {
+            className: titleSerif ? "font-serif text-2xl font-normal tracking-tight text-text-primary sm:text-[28px]" : "text-xl font-medium tracking-tight text-text-primary sm:text-2xl",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+        viewAllLabel && viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "a",
+          {
+            href: viewAllHref,
+            className: "text-sm font-medium text-text-link transition-colors hover:underline focus-visible:rounded-sm focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+            children: [
+              viewAllLabel,
+              " \u2192"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => scroll(-1),
+            "aria-label": "Previous",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react7.ChevronLeft, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => scroll(1),
+            "aria-label": "Next",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react7.ChevronRight, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: scrollRef,
+        className: "flex gap-4 overflow-x-auto scroll-smooth pb-2 snap-x snap-mandatory scrollbar-none [&::-webkit-scrollbar]:hidden -mx-4 px-4 sm:mx-0 sm:px-0 *:w-[268px] *:shrink-0 *:snap-start lg:grid lg:grid-cols-[repeat(4,minmax(0,320px))] lg:gap-5 lg:overflow-visible lg:justify-start lg:*:w-auto lg:*:shrink lg:*:snap-none",
+        children
+      }
+    )
+  ] });
+}
+
+// src/DataScopeFilter.tsx
+var import_react6 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FINAL_ONLY_TEXT = "Trims time periods to data that has finalized across the selected media formats. Some formats (e.g. Network TV and Cinema) finalize later, so the most recent periods may still change. Turn on for stable, report-ready numbers.";
+function cx3(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function DataScopeFilter({ value, onChange, align = "right" }) {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const ref = (0, import_react6.useRef)(null);
+  const display = value ? "Final only" : "All";
+  (0, import_react6.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const choose = (v) => {
+    onChange(v);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: display })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_lucide_react8.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx3("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Data",
+        className: cx3(
+          "absolute top-[calc(100%+8px)] z-30 min-w-[220px] overflow-hidden rounded-card border border-border-default bg-surface p-1 shadow-overlay",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
+        ]
+      }
+    )
+  ] });
+}
+function Option({
+  label,
+  selected,
+  onClick,
+  hint
+}) {
+  const option = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      onClick,
+      className: cx3(
+        "flex items-center gap-2 rounded-control px-2.5 py-2 text-left text-[13px] transition-colors hover:bg-subtle",
+        hint ? "flex-1" : "w-full",
+        selected ? "font-semibold text-text-primary" : "text-text-secondary"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react8.Check, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
+        label
+      ]
+    }
+  );
+  if (!hint) return option;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center pr-2.5", children: [
+    option,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
+  ] });
+}
+
+// src/SelectFilter.tsx
+var import_react7 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function cx4(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function slug3(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function SelectFilter({
+  caption,
+  value,
+  options,
+  onChange,
+  align = "left",
+  fullWidth = false,
+  className,
+  testIdPrefix
+}) {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [pos, setPos] = (0, import_react7.useState)(null);
+  const ref = (0, import_react7.useRef)(null);
+  const popoverRef = (0, import_react7.useRef)(null);
+  const close = (0, import_react7.useCallback)(() => setOpen(false), []);
+  const reposition = (0, import_react7.useCallback)(() => {
+    if (!ref.current) return;
+    const r = ref.current.getBoundingClientRect();
+    setPos({ top: r.bottom + 8, left: align === "right" ? r.right - r.width : r.left, width: r.width });
+  }, [align]);
+  (0, import_react7.useLayoutEffect)(() => {
+    if (!open) return;
+    reposition();
+  }, [open, reposition]);
+  (0, import_react7.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && close();
+    const onClick = (e) => {
+      const t = e.target;
+      if (ref.current?.contains(t) || popoverRef.current?.contains(t)) return;
+      close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [open, close, reposition]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-trigger`,
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: cx4(
+          "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
+          fullWidth && "w-full justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_lucide_react9.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx4("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && pos && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          ref: popoverRef,
+          "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
+          style: { position: "fixed", top: pos.top, left: pos.left, width: fullWidth ? pos.width : void 0 },
+          className: cx4(
+            "z-[65] flex flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay",
+            !fullWidth && "w-56"
+          ),
+          role: "listbox",
+          "aria-label": caption,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
+            const selected = o === value;
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                "data-testid": testIdPrefix && `${testIdPrefix}-option-${slug3(o)}`,
+                onClick: () => {
+                  onChange(o);
+                  close();
+                },
+                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_runtime9.jsx)("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react9.Check, { size: 15, strokeWidth: 3 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "span",
+                    {
+                      className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
+                      children: o
+                    }
+                  )
+                ]
+              },
+              o
+            );
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/Card.tsx
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "article",
+    {
+      ref,
+      className: [
+        "flex h-full flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-raised",
+        // Interactive hover: deeper drop shadow only -- no elevation/transform.
+        !staticCard && "group transition-shadow hover:shadow-overlay",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children: title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-1 flex-col p-card-padding", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
+          ] }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "shrink-0 text-text-tertiary", children: action })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 flex flex-1 flex-col", children })
+      ] }) : children
+    }
+  );
+});
+
+// src/NoResultsEmptyState.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var NO_RESULTS_TITLE = "No results match your filters";
+var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
+function noResultsBody(workspaceName) {
+  return workspaceName ? `Nothing in the \u201C${workspaceName}\u201D workspace matches. ${NO_RESULTS_BODY}` : NO_RESULTS_BODY;
+}
+var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+var QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
+function NoResultsEmptyState({
+  title = NO_RESULTS_TITLE,
+  body,
+  workspaceName,
+  hasFilters,
+  onClearFilters,
+  onEditFilters,
+  actions,
+  testIdPrefix
+}) {
+  const bodyText = body ?? noResultsBody(workspaceName);
+  const showClear = hasFilters !== false && Boolean(onClearFilters);
+  const showEdit = Boolean(onEditFilters);
+  const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react10.FilterX, { size: 20, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "text-base font-semibold text-text-primary", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
+      showClear && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClearFilters,
+          "data-testid": testIdPrefix && `${testIdPrefix}-clear`,
+          className: PRIMARY_ACTION_CLASS,
+          children: "Clear all filters"
+        }
+      ),
+      showEdit && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onEditFilters,
+          "data-testid": testIdPrefix && `${testIdPrefix}-edit`,
+          className: QUIET_ACTION_CLASS,
+          children: "Edit filters"
+        }
+      ),
+      actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: action.onClick,
+          className: action.primary ? PRIMARY_ACTION_CLASS : QUIET_ACTION_CLASS,
+          children: action.label
+        },
+        `${i}-${action.label}`
+      ))
+    ] })
+  ] });
+}
+
+// src/WorkspaceSelectedCard.tsx
+var import_react9 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function cx5(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function WorkspaceSelectedCard({ groups, testIdPrefix }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col divide-y divide-border", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
+}
+function SummaryGroupItem({
+  group,
+  nested = false,
+  testIdPrefix
+}) {
+  const ownCount = group.items.length;
+  const subCount = (group.subGroups ?? []).reduce((n, sg) => n + sg.items.length, 0);
+  const expandCount = ownCount + subCount;
+  const [open, setOpen] = (0, import_react9.useState)(expandCount > 0);
+  const wasEmpty = (0, import_react9.useRef)(expandCount === 0);
+  (0, import_react9.useEffect)(() => {
+    if (wasEmpty.current && expandCount > 0) setOpen(true);
+    else if (expandCount === 0) setOpen(false);
+    wasEmpty.current = expandCount === 0;
+  }, [expandCount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        "data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
+        className: "flex w-full min-w-0 items-center gap-2 text-left",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_lucide_react11.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+      ownCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: "flex items-center justify-between gap-2 rounded-control border border-border bg-canvas px-2 py-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
+                item.meta && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${item.name}`,
+                  onClick: () => group.onRemove(item.id),
+                  className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react11.X, { size: 12, "aria-hidden": "true" })
+                }
+              )
+            ]
+          },
+          item.id
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: group.onRemoveAll,
+            "data-testid": testIdPrefix && `${testIdPrefix}-remove-all-${group.id}`,
+            className: "mt-0.5 self-start text-[11px] font-medium text-text-link hover:underline",
+            children: "Remove all"
+          }
+        )
+      ] }),
+      group.subGroups?.map((sg) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
+    ] }) })
+  ] });
+}
+
+// src/chart-placeholder-shared.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var GRID_ROWS = [0, 25, 50, 75, 100];
+var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
+var Y_AXIS_W = 48;
+var X_AXIS_H = 22;
+var LEGEND_WIDTHS = [58, 44, 66, 50, 38, 62, 46, 54];
+function AxisFrame({
+  height,
+  xTicks,
+  children
+}) {
+  const gutter = xTicks > 0 ? X_AXIS_H : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative h-full w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
+      GRID_ROWS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          className: "absolute inset-x-0 border-t border-dashed",
+          style: { top: `${pct}%`, borderColor: "var(--color-border-default)" }
+        },
+        pct
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0", children })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
+        style: { top: `${pct}%`, width: Y_TICK_WIDTHS[i] }
+      },
+      pct
+    )) }),
+    xTicks > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: "absolute bottom-0 right-0 flex items-center",
+        style: { left: Y_AXIS_W, height: X_AXIS_H },
+        children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
+      }
+    )
+  ] }) });
+}
+function BlankLegend({ rows, reverse = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "ul",
+    {
+      className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
+      role: "presentation",
+      "aria-hidden": "true",
+      children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              className: "h-2 rounded-xs bg-subtle",
+              style: { width: LEGEND_WIDTHS[i % LEGEND_WIDTHS.length] }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
+      ] }, i))
+    }
+  );
+}
+
+// src/BarChartPlaceholder.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
+function BarChartPlaceholder({ height = 220 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
+}
+
+// src/LineChartPlaceholder.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LINE_SERIES = [
+  [58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
+  [74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
+  [40, 44, 37, 41, 34, 38, 31, 34, 27, 26],
+  [86, 82, 84, 77, 79, 71, 73, 66, 68, 61]
+];
+var LINE_FORECAST_FROM = 7;
+function LineChartPlaceholder({ height = 280 }) {
+  const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "polyline",
+        {
+          points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
+          fill: "none",
+          stroke: "var(--color-border-strong)",
+          strokeWidth: "2",
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "polyline",
+        {
+          points: toPath(pts, LINE_FORECAST_FROM, pts.length),
+          fill: "none",
+          stroke: "var(--color-border-strong)",
+          strokeWidth: "2",
+          strokeDasharray: "5 4",
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ] }, s)) }),
+    LINE_SERIES.map(
+      (pts, s) => pts.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
+          style: {
+            left: `${i / (pts.length - 1) * 100}%`,
+            top: `${y}%`,
+            backgroundColor: "var(--color-border-strong)"
+          }
+        },
+        `${s}-${i}`
+      ))
+    )
+  ] });
+}
+
+// src/PieChartPlaceholder.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
+function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
+  const r = 45;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--color-subtle)" }),
+      PIE_SEAMS.map((deg) => {
+        const rad = (deg - 90) * Math.PI / 180;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "line",
+          {
+            x1: "50",
+            y1: "50",
+            x2: 50 + r * Math.cos(rad),
+            y2: 50 + r * Math.sin(rad),
+            stroke: "var(--color-border-default)",
+            strokeWidth: "1"
+          },
+          deg
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlankLegend, { rows: legendRows })
+  ] });
+}
+
+// src/StackedColumnPlaceholder.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
+function columnBands(count) {
+  const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
+  const total = weights.reduce((a, b) => a + b, 0);
+  return weights.map((w) => w / total * 100);
+}
+function StackedColumnPlaceholder({
+  height = 220,
+  width = 96,
+  legendRows = 4,
+  axis = false
+}) {
+  const column = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      style: {
+        height: `${pct}%`,
+        /* border-strong, not border-default: on a subtle fill the softer
+           seam disappears and the stack reads as one undivided block. */
+        borderTop: i === 0 ? void 0 : "1px solid var(--color-border-strong)"
+      }
+    },
+    i
+  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
+    axis ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: "55%" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-stretch py-1", children: column }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlankLegend, { rows: legendRows, reverse: !axis })
+  ] });
+}
+
+// src/Tooltip.tsx
+var import_react10 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function cx6(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Tooltip({
+  label,
+  children,
+  anchorRef,
+  className,
+  whenTruncated = false,
+  interactive = false,
+  placement = "top",
+  align = "center",
+  delay = 0,
+  variant = "surface",
+  testIdPrefix
+}) {
+  const [anchor, setAnchor] = (0, import_react10.useState)(null);
+  const [boxWidth, setBoxWidth] = (0, import_react10.useState)(null);
+  const ref = (0, import_react10.useRef)(null);
+  const boxRef = (0, import_react10.useRef)(null);
+  const hideTimer = (0, import_react10.useRef)(null);
+  const showTimer = (0, import_react10.useRef)(null);
+  const id = (0, import_react10.useId)();
+  const clearHideTimer = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  };
+  const clearShowTimer = () => {
+    if (showTimer.current) {
+      clearTimeout(showTimer.current);
+      showTimer.current = null;
+    }
+  };
+  (0, import_react10.useEffect)(
+    () => () => {
+      clearHideTimer();
+      clearShowTimer();
+    },
+    []
+  );
+  const reveal = () => {
+    const el = anchorRef ? anchorRef.current : ref.current;
+    if (!el) return;
+    if (whenTruncated && el.scrollWidth <= el.clientWidth) return;
+    const r = el.getBoundingClientRect();
+    setBoxWidth(null);
+    setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
+    if (anchorRef) el.setAttribute("aria-describedby", id);
+  };
+  const show = () => {
+    clearHideTimer();
+    if (delay > 0) {
+      showTimer.current = setTimeout(reveal, delay);
+    } else {
+      reveal();
+    }
+  };
+  const hideNow = () => {
+    clearShowTimer();
+    clearHideTimer();
+    setAnchor(null);
+    setBoxWidth(null);
+    if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
+  };
+  const hide = () => {
+    clearShowTimer();
+    if (!interactive) {
+      hideNow();
+      return;
+    }
+    clearHideTimer();
+    hideTimer.current = setTimeout(hideNow, 120);
+  };
+  (0, import_react10.useEffect)(() => {
+    if (!anchorRef) return;
+    const el = anchorRef.current;
+    if (!el) return;
+    el.addEventListener("mouseenter", show);
+    el.addEventListener("mouseleave", hide);
+    el.addEventListener("focus", show);
+    el.addEventListener("blur", hide);
+    return () => {
+      el.removeEventListener("mouseenter", show);
+      el.removeEventListener("mouseleave", hide);
+      el.removeEventListener("focus", show);
+      el.removeEventListener("blur", hide);
+    };
+  }, [anchorRef, placement, delay]);
+  (0, import_react10.useLayoutEffect)(() => {
+    if (!anchor) return;
+    const el = boxRef.current;
+    if (!el) return;
+    setBoxWidth(el.getBoundingClientRect().width);
+  }, [anchor, label]);
+  const margin = 8;
+  let style = { top: 0, left: 0 };
+  let translate = "";
+  if (anchor) {
+    if (placement === "right") {
+      style = { top: anchor.top + anchor.height / 2, left: anchor.right + 8 };
+      translate = "-translate-y-1/2";
+    } else if (placement === "bottom-end") {
+      style = { top: anchor.bottom + 8, right: window.innerWidth - anchor.right };
+    } else {
+      const w = boxWidth ?? anchor.width;
+      const desired = align === "start" ? anchor.left : anchor.left + anchor.width / 2 - w / 2;
+      const left = Math.min(Math.max(desired, margin), Math.max(margin, window.innerWidth - w - margin));
+      style = { left, top: placement === "bottom" ? anchor.bottom : anchor.top };
+      translate = placement === "bottom" ? "translate-y-2" : "-translate-y-[calc(100%+8px)]";
+    }
+  }
+  const floating = anchor != null && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "span",
+      {
+        ref: boxRef,
+        role: "tooltip",
+        id,
+        "data-testid": testIdPrefix && `${testIdPrefix}-tooltip`,
+        style: { top: style.top, left: style.left, right: style.right, visibility: boxWidth == null ? "hidden" : "visible" },
+        onMouseEnter: interactive ? clearHideTimer : void 0,
+        onMouseLeave: interactive ? hide : void 0,
+        className: cx6(
+          "fixed z-[90] w-max max-w-xs whitespace-normal break-words px-2.5 py-1.5 text-xs leading-snug",
+          interactive ? "pointer-events-auto" : "pointer-events-none",
+          variant === "inverted" ? "rounded-control bg-text-primary text-surface" : "rounded-control border border-border-default bg-surface text-text-primary shadow-overlay",
+          translate
+        ),
+        children: label
+      }
+    ),
+    document.body
+  ) : null;
+  if (anchorRef) return floating;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "span",
+    {
+      ref,
+      className,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      "aria-describedby": anchor ? id : void 0,
+      children: [
+        children,
+        floating
+      ]
+    }
+  );
+}
+
+// src/AdvertiserNoResults.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function AdvertiserNoResults({
+  query,
+  hint = "Try checking your spelling or searching for a broader brand name."
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[13px] font-medium text-text-primary", children: [
+      "No results found for \u201C",
+      query,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
+  ] });
+}
+
+// src/SelectAllVisible.tsx
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-testid": testIdPrefix && `${testIdPrefix}-select-all-visible`,
+      onClick: onToggle,
+      className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.ListChecks, { size: 14, "aria-hidden": "true" }),
+        allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
+      ]
+    }
+  );
+}
+
+// src/SelectedSection.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function cx7(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testIdPrefix && `${testIdPrefix}-selected-toggle`,
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ChevronDown, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
+          "Selected (",
+          count,
+          ")"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col gap-0.5", children })
+  ] });
+}
+
+// src/SelectionPicker.tsx
+var import_react11 = require("react");
+var import_react_dom4 = require("react-dom");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function cx8(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function slug4(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function SelectionPicker({
+  catalog = [],
+  selected,
+  onChange,
+  columns,
+  filters,
+  searchPlaceholder = "Search\u2026",
+  getChildren,
+  helper,
+  showInfoColumn = true,
+  defaultFilters,
+  requireQuery = false,
+  showResultsWithoutSearch = false,
+  accountLists,
+  selectedListIds,
+  onToggleList,
+  lockedIds,
+  results,
+  onQueryChange,
+  loading = false,
+  error = false,
+  errorMessage = "Couldn't load options. Please try again.",
+  hasMore = false,
+  loadingMore = false,
+  onLoadMore,
+  toolbarExtra,
+  testIdPrefix
+}) {
+  const hasAccountLists = !!accountLists;
+  const [source, setSource] = (0, import_react11.useState)("search");
+  const [query, setQuery] = (0, import_react11.useState)("");
+  const [activeFilters, setActiveFilters] = (0, import_react11.useState)(() => {
+    const init = {};
+    if (defaultFilters) for (const [label, opts] of Object.entries(defaultFilters)) init[label] = new Set(opts);
+    return init;
+  });
+  const [expanded, setExpanded] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
+  const selectedIds = (0, import_react11.useMemo)(() => new Set(selected.map((s) => s.id)), [selected]);
+  const toggleFilter = (label, opt) => {
+    setActiveFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[label] ?? []);
+      set.has(opt) ? set.delete(opt) : set.add(opt);
+      next[label] = set;
+      return next;
+    });
+  };
+  const activeFilterCount = filters.reduce((n, f) => n + (activeFilters[f.label]?.size ?? 0), 0);
+  const hasSearched = showResultsWithoutSearch || query.trim().length > 0 || !requireQuery && activeFilterCount > 0;
+  const filteredCatalog = (0, import_react11.useMemo)(() => {
+    if (!hasSearched || results !== void 0) return [];
+    const q = query.trim().toLowerCase();
+    return catalog.filter((row) => {
+      if (q && !row.name.toLowerCase().includes(q)) return false;
+      for (const f of filters) {
+        const active = activeFilters[f.label];
+        if (active && active.size > 0) {
+          const v = f.value(row);
+          if (!v || !active.has(v)) return false;
+        }
+      }
+      return true;
+    });
+  }, [hasSearched, results, catalog, query, filters, activeFilters]);
+  const rows = results !== void 0 ? results : filteredCatalog;
+  const addRows = (add) => {
+    const toAdd = add.filter((r) => !selectedIds.has(r.id));
+    if (toAdd.length) onChange([...selected, ...toAdd]);
+  };
+  const toggleRow = (row) => {
+    if (selectedIds.has(row.id)) {
+      onChange(selected.filter((s) => s.id !== row.id));
+    } else {
+      addRows([row]);
+    }
+  };
+  const toggleable = lockedIds ? rows.filter((r) => !lockedIds.has(r.id)) : rows;
+  const allSelected = toggleable.length > 0 && toggleable.every((r) => selectedIds.has(r.id));
+  const someSelected = toggleable.some((r) => selectedIds.has(r.id));
+  const toggleAll = () => {
+    if (allSelected) {
+      const rowIds = new Set(toggleable.map((r) => r.id));
+      onChange(selected.filter((s) => !rowIds.has(s.id)));
+    } else {
+      addRows(toggleable);
+    }
+  };
+  const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    helper && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[13px] text-text-secondary", children: helper }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
+    ] }),
+    hasAccountLists && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
+      { id: "search", label: "Search", icon: import_lucide_react14.Search },
+      { id: "lists", label: "Account lists", icon: import_lucide_react14.List }
+    ].map((t) => {
+      const on = source === t.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSource(t.id),
+          "data-testid": testIdPrefix && `${testIdPrefix}-source-${t.id}`,
+          className: cx8(
+            "inline-flex items-center gap-1.5 rounded-[6px] px-3 py-1.5 text-[13px] font-medium transition-colors",
+            on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(t.icon, { size: 14, "aria-hidden": "true" }),
+            t.label
+          ]
+        },
+        t.id
+      );
+    }) }),
+    source === "search" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              value: query,
+              onChange: (e) => {
+                const next = e.target.value;
+                setQuery(next);
+                onQueryChange?.(next);
+              },
+              placeholder: searchPlaceholder,
+              "aria-label": searchPlaceholder,
+              "data-testid": testIdPrefix && `${testIdPrefix}-search`,
+              className: "h-full flex-1 bg-transparent text-sm outline-hidden placeholder:text-text-tertiary"
+            }
+          )
+        ] }),
+        filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          FilterDropdown,
+          {
+            filter: f,
+            active: activeFilters[f.label] ?? /* @__PURE__ */ new Set(),
+            onToggle: (opt) => toggleFilter(f.label, opt),
+            testIdPrefix
+          },
+          f.label
+        )),
+        toolbarExtra
+      ] }),
+      !hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Search, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: cx8(
+              "grid items-center gap-2 border-b border-border-default bg-canvas px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.06em] text-text-secondary",
+              rowGridCols
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                CheckBox,
+                {
+                  checked: allSelected,
+                  indeterminate: !allSelected && someSelected,
+                  disabled: toggleable.length === 0,
+                  onChange: toggleAll,
+                  ariaLabel: "Select all",
+                  testId: testIdPrefix && `${testIdPrefix}-select-all`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: c.className, children: c.header }, c.key)) }),
+              showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-right", children: "Info" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: "No matches. Try a different search or filter." }) : rows.map((row) => {
+          const isSel = selectedIds.has(row.id);
+          const isLocked = lockedIds?.has(row.id) ?? false;
+          const kids = getChildren?.(row);
+          const isOpen = expanded.has(row.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "div",
+              {
+                onClick: isLocked ? void 0 : () => toggleRow(row),
+                "aria-disabled": isLocked || void 0,
+                className: cx8(
+                  "grid items-center gap-2 px-3 py-2.5",
+                  rowGridCols,
+                  isLocked ? "cursor-default opacity-50" : "cursor-pointer hover:bg-subtle",
+                  !isLocked && isSel && "opacity-60"
+                ),
+                children: [
+                  isLocked ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    CheckBox,
+                    {
+                      checked: isSel,
+                      onChange: () => toggleRow(row),
+                      ariaLabel: row.name,
+                      testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
+                  showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Show details",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setExpanded((p) => {
+                          const n = new Set(p);
+                          n.has(row.id) ? n.delete(row.id) : n.add(row.id);
+                          return n;
+                        });
+                      },
+                      className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ChevronRight, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "span",
+                    {
+                      className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
+                      title: "No additional details",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Info, { size: 14 })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            isOpen && kids && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
+              const kidSel = selectedIds.has(kid.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: kidSel,
+                        onClick: () => addRows([kid]),
+                        className: cx8(
+                          "inline-flex items-center gap-1 rounded-control px-2 py-1 text-[12px] font-medium",
+                          kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
+                        ),
+                        children: [
+                          kidSel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Check, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Plus, { size: 13 }),
+                          kidSel ? "Added" : "Add"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                kid.id
+              );
+            }) })
+          ] }, row.id);
+        }) }),
+        !loading && !error && hasMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onLoadMore,
+            disabled: loadingMore,
+            "data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
+            className: "flex w-full items-center justify-center gap-2 border-t border-border-default px-2 py-1.5 text-[13px] text-brand-primaryAction transition-colors hover:bg-subtle disabled:opacity-50",
+            children: [
+              loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
+              loadingMore ? "Loading\u2026" : "Load more"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    source === "lists" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[13px] text-text-secondary", children: "Select an account list to add all of its accounts at once. Your workspace stays in sync as the list is updated." }),
+      accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
+          const on = (selectedListIds ?? []).includes(list.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleList?.(list.id),
+              "aria-pressed": on,
+              "data-testid": testIdPrefix && `${testIdPrefix}-list-${list.id}`,
+              className: cx8(
+                "flex items-center gap-3 rounded-control border px-3.5 py-3 text-left transition-colors",
+                on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "span",
+                  {
+                    className: cx8(
+                      "flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                      on ? "text-brand-primaryAction" : "text-text-secondary"
+                    ),
+                    children: on ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Plus, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "block truncate text-[12px] text-text-secondary", children: [
+                    list.count,
+                    " accounts \xB7 ",
+                    list.entityTypes.join(", "),
+                    " \xB7 Updated ",
+                    formatListDate(list.updatedAt)
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
+              ]
+            },
+            list.id
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "p",
+          {
+            className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
+            "data-testid": testIdPrefix && `${testIdPrefix}-list-count`,
+            children: [
+              accountLists.length,
+              " ",
+              accountLists.length === 1 ? "list" : "lists"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var EDGE_FADE = 44;
+function ScrollFade({ className, children }) {
+  const elRef = (0, import_react11.useRef)(null);
+  const [edges, setEdges] = (0, import_react11.useState)({ top: false, bottom: false });
+  const sync = (0, import_react11.useCallback)(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const top = el.scrollTop > 2;
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2;
+    setEdges((prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom });
+  }, []);
+  const attach = (0, import_react11.useCallback)(
+    (el) => {
+      elRef.current = el;
+      if (!el) return;
+      sync();
+      const ro = new ResizeObserver(sync);
+      ro.observe(el);
+      return () => {
+        ro.disconnect();
+        elRef.current = null;
+      };
+    },
+    [sync]
+  );
+  const mask = edges.top || edges.bottom ? `linear-gradient(to bottom, transparent 0, #000 ${edges.top ? EDGE_FADE : 0}px, #000 calc(100% - ${edges.bottom ? EDGE_FADE : 0}px), transparent 100%)` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
+}
+function formatListDate(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  } catch {
+    return iso;
+  }
+}
+function FilterDropdown({
+  filter,
+  active,
+  onToggle,
+  testIdPrefix
+}) {
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [q, setQ] = (0, import_react11.useState)("");
+  const btnRef = (0, import_react11.useRef)(null);
+  const menuRef = (0, import_react11.useRef)(null);
+  const [pos, setPos] = (0, import_react11.useState)(null);
+  const searchable = filter.options.length > 8;
+  const shownOptions = searchable && q.trim() ? filter.options.filter((o) => o.toLowerCase().includes(q.trim().toLowerCase())) : filter.options;
+  (0, import_react11.useLayoutEffect)(() => {
+    if (!open || !btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    setPos({ top: r.bottom + 6, left: r.left });
+  }, [open]);
+  (0, import_react11.useEffect)(() => {
+    if (!open) {
+      setQ("");
+      return;
+    }
+    const onDown = (e) => {
+      const t = e.target;
+      if (!btnRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onScroll = () => setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open]);
+  const count = active.size;
+  const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
+  const filterSlug = slug4(filter.label);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-haspopup": "menu",
+        "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-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        children: [
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && pos && (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        {
+          ref: menuRef,
+          role: "menu",
+          "aria-label": filter.label,
+          style: { top: pos.top, left: pos.left },
+          className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
+          children: [
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "input",
+                {
+                  autoFocus: true,
+                  value: q,
+                  onChange: (e) => setQ(e.target.value),
+                  placeholder: `Search ${filter.label.toLowerCase()}\u2026`,
+                  className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
+              const on = active.has(opt);
+              return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                "label",
+                {
+                  className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      CheckBox,
+                      {
+                        checked: on,
+                        onChange: () => onToggle(opt),
+                        ariaLabel: opt,
+                        testId: testIdPrefix && `${testIdPrefix}-filter-${filterSlug}-${slug4(opt)}`
+                      }
+                    ),
+                    opt
+                  ]
+                },
+                opt
+              );
+            }) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function gridForColumns(columns) {
+  if (columns.length <= 1) return "grid-cols-1";
+  if (columns.length === 2) return "grid-cols-[1.6fr_1fr]";
+  if (columns.length === 3) return "grid-cols-[1.6fr_1fr_1fr]";
+  return "grid-cols-[1.6fr_1fr_1fr_1fr]";
+}
+
+// src/PublisherBreakdownList.tsx
+var import_react12 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function cx9(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var fmtM = (v) => v >= 100 ? `$${Math.round(v)}M` : `$${v.toFixed(1)}M`;
+function priorYearAmt(spendN, yoy) {
+  if (yoy === "NEW" || yoy <= -100) return null;
+  return fmtM(spendN / (1 + yoy / 100));
+}
+function initials(name) {
+  const words = name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean);
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+  return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
+}
+function Monogram({ name, size = 28 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex shrink-0 items-center justify-center rounded-[6px] bg-subtle font-bold leading-none text-text-secondary",
+      style: { width: size, height: size, fontSize: Math.round(size * 0.36) },
+      children: initials(name)
+    }
+  );
+}
+function BreakdownTag({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary", children });
+}
+function DelayedTip({ label, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "span",
+      {
+        role: "tooltip",
+        className: "pointer-events-none invisible absolute bottom-[calc(100%+6px)] left-1/2 z-40 w-[160px] -translate-x-1/2 rounded-control border border-border-default bg-surface px-2 py-1.5 text-center text-[11px] font-medium leading-snug text-text-secondary opacity-0 shadow-overlay transition-[opacity,visibility] delay-1000 duration-150 group-hover/dt:visible group-hover/dt:opacity-100 group-focus/dt:visible group-focus/dt:opacity-100",
+        children: label
+      }
+    )
+  ] });
+}
+var COL_CURRENT = 76;
+var COL_PREVIOUS = 76;
+var COL_YOY = 44;
+function MetricListHeader({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
+    ] })
+  ] });
+}
+function MetricCells({ spendN, yoy }) {
+  const prior = priorYearAmt(spendN, yoy);
+  const up = yoy !== "NEW" && yoy >= 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+      up ? "+" : "\u2212",
+      Math.abs(yoy),
+      "%"
+    ] }) })
+  ] });
+}
+function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true, viewAllHref, renderLogo }) {
+  const [showAll, setShowAll] = (0, import_react12.useState)(false);
+  const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
+  const rowPad = padded ? "px-5" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MetricListHeader, { className: rowPad }),
+      visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx9("flex items-center justify-between gap-3 border-t border-border-default/60 py-2.5 first:border-t-0", rowPad), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          renderLogo ? renderLogo(p) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Monogram, { name: p.brand, size: 28 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
+              p.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BreakdownTag, { children: t }, t))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MetricCells, { spendN: p.spendN, yoy: p.yoy })
+      ] }, p.brand))
+    ] }),
+    rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
+        "Showing ",
+        visible.length,
+        " of ",
+        rows.length
+      ] }),
+      !showAll ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
+        "See all (",
+        rows.length - defaultVisibleCount,
+        " more)"
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
+    ] }))
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  InfoTip
+  AdvertiserNoResults,
+  AdvertiserQuickFilter,
+  AdvertiserSearchPrompt,
+  BarChartPlaceholder,
+  Card,
+  CheckBox,
+  DEFAULT_SEARCH_MATCH,
+  DataScopeFilter,
+  DateRangeFilter,
+  InfoTip,
+  LineChartPlaceholder,
+  NO_RESULTS_BODY,
+  NO_RESULTS_TITLE,
+  NoResultsEmptyState,
+  PRIMARY_ACTION_CLASS,
+  PieChartPlaceholder,
+  PublisherBreakdownList,
+  QUIET_ACTION_CLASS,
+  SearchBar,
+  SectionRail,
+  SelectAllVisible,
+  SelectFilter,
+  SelectedSection,
+  SelectionPicker,
+  StackedColumnPlaceholder,
+  Tooltip,
+  WorkspaceSelectedCard,
+  noResultsBody
 });
 //# sourceMappingURL=index.cjs.map