@liiift-studio/sanity-visitor-insights 0.76.0 → 0.77.0

package/dist/index.js

@@ -165,7 +165,7 @@ function useReport({ apiBaseUrl, report, range, custom, compare, enabled = true
     }
     void run();
     return () => controller.abort();
-  }, [client, apiBaseUrl, report, range, custom?.start, custom?.end, nonce, enabled]);
+  }, [client, apiBaseUrl, report, range, custom?.start, custom?.end, compare, nonce, enabled]);
   return { state, reload };
 }
 
@@ -370,6 +370,11 @@ function isReportName(value) {
 
 // src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var SPACE = { pair: 4, block: 8, group: 20, section: 40 };
+var stackPair = { display: "grid", gap: SPACE.pair };
+var stackBlock = { display: "grid", gap: SPACE.block };
+var stackGroup = { display: "grid", gap: SPACE.group };
+var panelStack = { display: "grid", gap: SPACE.section };
 var REASON_TEXT = {
   not_instrumented: "Not tracked on this site",
   before_cutover: "Not tracked during this period",
@@ -813,11 +818,11 @@ function gapLabel(delta, measurement, entry = 0) {
   return `${formatCount(-delta)} more \u2014 not a subset of the step above`;
 }
 var partialSlot = { height: 10 };
-var funnelSegmentKey = { display: "flex", gap: 14, flexWrap: "wrap", paddingTop: 4 };
+var funnelSegmentKey = { display: "flex", gap: SPACE.group, flexWrap: "wrap", paddingTop: SPACE.pair };
 var ladderRow = {
   display: "grid",
   gridTemplateColumns: "minmax(80px, 1.1fr) minmax(60px, 0.8fr) minmax(60px, 2fr) auto",
-  gap: 10,
+  gap: SPACE.block,
   alignItems: "center"
 };
 var ladderTrack = {
@@ -941,7 +946,7 @@ function Section({
   const [open, setOpen] = import_react2.default.useState(defaultOpen);
   const bodyId = import_react2.default.useId();
   const shown = !collapsible || open;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { style: sectionBox, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionHeader, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Heading, { size: tone === "primary" ? 1 : 0, style: tone === "primary" ? primaryTitle : secondaryTitle, children: title }),
@@ -959,8 +964,8 @@ function Section({
         }
       )
     ] }),
-    shown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: bodyId, children })
-  ] }) });
+    shown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: bodyId, style: sectionBody, children })
+  ] });
 }
 function SectionTitle({
   title,
@@ -1232,7 +1237,7 @@ function SortableTable({
       ),
       exportName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: tableControlButton, onClick: () => void copyCsv(), children: copied === "done" ? "Copied" : copied === "failed" ? "Could not copy" : "Copy as CSV" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { radius: 2, tone: "transparent", border: true, style: tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: tableBase, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { radius: 2, tone: "transparent", style: tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: tableBase, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { style: visuallyHidden, children: caption }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: shown.map((column) => {
         const isActive = sort?.key === column.key;
@@ -1290,15 +1295,20 @@ function csvCell(cell) {
 var tableControls = {
   display: "flex",
   alignItems: "center",
-  gap: 10,
+  gap: SPACE.block,
   flexWrap: "wrap"
 };
+var sectionBox = { display: "grid", gap: SPACE.group };
+var sectionBody = { display: "grid", gap: SPACE.group };
 var sectionHeader = {
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
   gap: 12,
-  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
+  // 0.35, not 0.22. This rule was the faintest line in the file and the only thing separating one
+  // section from the next — while every button drew at 0.30. A "Hide" control outranking the
+  // boundary between two regions of the panel is the hierarchy upside down.
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.35))",
   paddingBottom: 6
 };
 var primaryTitle = { margin: 0, lineHeight: 1.3 };
@@ -1312,7 +1322,7 @@ var secondaryTitle = {
 var sectionToggle = {
   appearance: "none",
   background: "transparent",
-  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
   borderRadius: 3,
   color: "inherit",
   font: "inherit",
@@ -1360,13 +1370,13 @@ var estimateDot = {
 var ratioRow = {
   display: "flex",
   alignItems: "baseline",
-  gap: 10,
+  gap: SPACE.block,
   flexWrap: "wrap"
 };
 var ratioToggle = {
   appearance: "none",
   background: "transparent",
-  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
   borderRadius: 3,
   color: "inherit",
   font: "inherit",
@@ -1380,7 +1390,7 @@ var filterInput = {
   fontSize: "0.85em",
   padding: "4px 8px",
   borderRadius: 3,
-  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
   background: "transparent",
   color: "inherit",
   minWidth: 160
@@ -1388,7 +1398,7 @@ var filterInput = {
 var tableControlButton = {
   appearance: "none",
   background: "transparent",
-  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
   borderRadius: 3,
   color: "inherit",
   font: "inherit",
@@ -1433,7 +1443,7 @@ var tableBase = { width: "100%", borderCollapse: "collapse", minWidth: 420 };
 var headCell = {
   padding: 0,
   textAlign: "left",
-  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
   whiteSpace: "nowrap"
 };
 var headCellNumeric = { ...headCell, textAlign: "right" };
@@ -2118,14 +2128,14 @@ function shortfallLabel(series) {
 var frameStyle = { width: "100%", overflow: "hidden", position: "relative" };
 var readoutRow = {
   display: "flex",
-  gap: 14,
+  gap: SPACE.block,
   flexWrap: "wrap",
   alignItems: "baseline",
   minHeight: 54
 };
 var legendRow = {
   display: "flex",
-  gap: 14,
+  gap: SPACE.block,
   flexWrap: "wrap",
   alignItems: "center"
 };
@@ -2186,7 +2196,7 @@ function acquisitionRowKey(row) {
 var figureRow = {
   display: "flex",
   alignItems: "baseline",
-  gap: 10,
+  gap: SPACE.block,
   flexWrap: "wrap"
 };
 var sourceLink = {
@@ -2201,7 +2211,7 @@ function isLinkableHost(source) {
 var cardGrid = {
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(min(14rem, 100%), 1fr))",
-  gap: 16
+  gap: SPACE.group
 };
 function gapOf(day) {
   if (day.vercelPageviews === null || day.ga4Pageviews === null) return null;
@@ -2212,10 +2222,10 @@ function coverageOf(day) {
   return day.ga4Pageviews / day.vercelPageviews;
 }
 function OverviewPanel({ data, previous, onBrush }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Verdict, { data, previous }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Revenue" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2231,7 +2241,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         ] }),
         revenueCoversEveryOrder(data) && rankLine(data.crossSource, (d) => d.revenue) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: rankLine(data.crossSource, (d) => d.revenue) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Orders" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.orders, OLDER_ROUTE), label: "Orders" }),
@@ -2239,7 +2249,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         ] }),
         rankLine(data.crossSource, (d) => d.orders) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: rankLine(data.crossSource, (d) => d.orders) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Traffic" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelPageviews, OLDER_ROUTE), label: "Pageviews" }),
@@ -2247,7 +2257,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         ] }),
         data.vercelPageviews && data.vercelPageviews.status !== "unavailable" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Pageviews, from Vercel\u2019s own counter." })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Mailing list, total" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.audience, OLDER_ROUTE), label: "Mailing list members" }),
@@ -2268,7 +2278,7 @@ function OverviewPanel({ data, previous, onBrush }) {
       ] }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Average order" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           RatioFigure,
@@ -2285,7 +2295,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         averageOrderValue(data).status === "partial" && averageOrderValue(data).note && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: averageOrderValue(data).note }),
         averageOrderValue(data).status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From your orders, so exact." })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Visitors per order" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           RatioFigure,
@@ -2302,7 +2312,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         data.vercelVisitors && data.vercelVisitors.status !== "unavailable" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s visitor count. A ceiling \u2014 some are bots or the same person twice." })
       ] }) })
     ] }),
-    (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Everything, on one time axis" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Each row has its own scale, so the rows cannot be compared by height \u2014 only by shape." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2509,7 +2519,7 @@ function OverviewPanel({ data, previous, onBrush }) {
         }
       )
     ] }),
-    (data.campaigns?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    (data.campaigns?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Email campaigns" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Clicks are distinct subscribers. Opens are not shown: Apple Mail fetches images on the recipient\u2019s behalf, so an open is often the mail client rather than a person." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
@@ -2615,7 +2625,7 @@ function Verdict({ data, previous }) {
   const seeing = shortfall !== null && shortfall !== void 0 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic` : null;
   const broken = shortfall === null || shortfall === void 0 ? data.capture?.discrepancy ? "measurement disagrees between sources" : null : shortfall > 0.6 ? `${seeing} \u2014 treat its figures as broken` : shortfall > 0.35 ? `${seeing} \u2014 its figures are undercounts, not what happened` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
   if (parts.length === 0 && !broken) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, style: { borderLeftWidth: 3, borderLeftStyle: "solid" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: "No figures arrived for this window." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", style: { borderLeftWidth: 3, borderLeftStyle: "solid" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: "No figures arrived for this window." }) });
   }
   const noticeable = shortfall !== null && shortfall !== void 0 && shortfall > 0.2;
   const closing = broken || !noticeable ? "" : ` \xB7 ${seeing}`;
@@ -2628,7 +2638,7 @@ function Verdict({ data, previous }) {
       border: true,
       style: broken ? { borderLeftWidth: 3, borderLeftStyle: "solid" } : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
-        parts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 3, weight: broken ? "semibold" : "medium", children: [
+        parts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 4, weight: broken ? "semibold" : "medium", children: [
           parts.join(" \xB7 "),
           closing
         ] }),
@@ -2639,12 +2649,12 @@ function Verdict({ data, previous }) {
 }
 function DataHealthPanel({ data, diagnostics }) {
   const contained = isContainment(data.vercelPageviews, data.ga4Pageviews);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
       data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "semibold", children: data.shortfallRatio >= 0 ? `GA4 saw ${formatPercent(data.shortfallRatio, 1)} fewer pageviews than Vercel` : `GA4 saw ${formatPercent(-data.shortfallRatio, 1)} more pageviews than Vercel` }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: data.interpretation })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Pageviews, source against source" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Both counting pageviews. Google Analytics is blockable, so seeing fewer is normal." }),
       contained ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2683,7 +2693,7 @@ function DataHealthPanel({ data, diagnostics }) {
            return null and the section rendered NOTHING — not even the figure Vercel did
            report. That is the state where the reader most needs to see what survived, and
            it is the one the card below spends a comment explaining. */
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Pageviews Vercel counted" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelPageviews, OLDER_ROUTE), label: "Vercel pageviews", size: 3 })
@@ -2711,7 +2721,7 @@ function DataHealthPanel({ data, diagnostics }) {
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiagnosticsPanel, { data: diagnostics })
       }
     ),
-    ((data.capture?.estimates?.length ?? 0) > 0 || data.estimatedSessions?.status === "estimated") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    ((data.capture?.estimates?.length ?? 0) > 0 || data.estimatedSessions?.status === "estimated") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "How much GA4 is seeing" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         EstimateDotPlot,
@@ -2725,27 +2735,33 @@ function DataHealthPanel({ data, diagnostics }) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "medium", children: "The sources disagree, and that is informative" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: data.capture.discrepancy })
       ] }) }),
-      data.estimatedSessions && data.estimatedSessions.status === "estimated" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      data.estimatedSessions && data.estimatedSessions.status === "estimated" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Sessions, corrected for what GA4 misses" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.estimatedSessions, OLDER_ROUTE), label: "Estimated sessions" })
       ] }) })
     ] }),
-    Object.keys(data.orderStatuses ?? {}).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Order statuses in this range", tone: "secondary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "What the orders actually say, before any filtering. Use these values to set which statuses count as a sale." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ProportionChart,
-        {
-          bars: Object.entries(data.orderStatuses ?? {}).map(([status, count]) => ({
-            key: status,
-            label: status,
-            value: count
-          })),
-          format: (n) => formatCount(n),
-          totalLabel: "Orders in this range"
-        }
-      )
-    ] }),
+    Object.keys(data.orderStatuses ?? {}).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Section,
+      {
+        title: "Order statuses in this range",
+        tone: "secondary",
+        subtitle: "What the orders actually say, before any filtering. Use these values to set which statuses count as a sale.",
+        collapsible: true,
+        defaultOpen: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ProportionChart,
+          {
+            bars: Object.entries(data.orderStatuses ?? {}).map(([status, count]) => ({
+              key: status,
+              label: status,
+              value: count
+            })),
+            format: (n) => formatCount(n),
+            totalLabel: "Orders in this range"
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Section,
       {
@@ -2753,17 +2769,18 @@ function DataHealthPanel({ data, diagnostics }) {
         tone: "secondary",
         subtitle: "Different units to the figures above, and to each other.",
         collapsible: true,
+        defaultOpen: false,
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Vercel visitors" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelVisitors, OLDER_ROUTE), label: "Vercel visitors" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s own counter. Blocked far less often than Google Analytics, but not never \u2014 so read it as a floor on your real traffic." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "GA4 sessions" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.ga4Sessions, OLDER_ROUTE), label: "GA4 sessions" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Consent granted" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.consentRate, OLDER_ROUTE), label: "Consent granted, share of visitors GA4 saw", unit: "percent" })
           ] }) })
@@ -2776,16 +2793,16 @@ function AcquisitionPanel({ data, previous }) {
   const designShare = finiteOrNull(data.designIndustryShare);
   const unattributedShare = finiteOrNull(data.unattributedShare);
   const sessions = finiteOrNull(data.totalSessions);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Sessions" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: sessions === null ? "\u2014" : formatCount(sessions) }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Delta, { current: sessions, previous: finiteOrNull(previous?.totalSessions) })
         ] })
       ] }) }),
-      designShare !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      designShare !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "From design-industry referrers" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 4, children: [
@@ -2806,7 +2823,7 @@ function AcquisitionPanel({ data, previous }) {
           data.rowsTruncated && " GA4 held more sources than are listed here, so the real share is higher."
         ] })
       ] }) }),
-      unattributedShare !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+      unattributedShare !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "No source" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(unattributedShare, 1) }),
@@ -2823,7 +2840,7 @@ function AcquisitionPanel({ data, previous }) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Direct visits plus rows GA4 could not attribute." })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Traffic sources" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Sort or filter to find a source. Excluding a row hides it from this table." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3031,7 +3048,7 @@ function JourneyPanel({ data }) {
     }]
   );
   const tracked = data.measurement === "sequence";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: tracked ? "transparent" : "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "medium", children: tracked ? "Tracked path" : "Not a tracked path" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: tracked, children: data.approximationNote })
@@ -3076,7 +3093,7 @@ function JourneyPanel({ data }) {
         {
           title: "Other outcomes",
           subtitle: "Successful outcomes that are not a licence sale, counted over the same window as the funnel but not a step within it.",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.outcomes ?? []).map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.outcomes ?? []).map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: outcome.label }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: outcome.count, label: outcome.label, size: 4 }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: outcome.note })
@@ -3192,9 +3209,9 @@ function visitorsPerOrder(data) {
 }
 function TypefaceInterestPanel({ data }) {
   const benchmark = catalogueRate(data.rows ?? []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: data.interpretationNote }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: data.interpretationNote }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Engagement by typeface" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
         "Sort by any column. \u201CSells vs catalogue\u201D compares each family\u2019s sales-per-view against the catalogue as a whole \u2014 1.0\xD7 is average, and sorting up finds the families that are looked at and do not sell. It is a comparison between your families, not the share of visitors who buy: Google Analytics sees only a fraction of the views, which moves every family together and so cancels out here. With one or two sales a family will still swing a long way, so read it alongside the order counts beside it.",
@@ -3332,23 +3349,25 @@ function TypefaceInterestPanel({ data }) {
         }
       )
     ] }),
-    (data.licences?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    (data.licences?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "How licences sell" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "From your orders, so exact. Bars are orders; the money beside them is that order total split evenly across the licences on it, so it is a share rather than a price." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LicenceLadder, { rows: data.licences ?? [], currency: data.currency ?? null })
     ] }),
-    data.revenueIsApportioned && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "An order covering several families is split evenly between them, because the order documents carry no per-line value." }),
-    finiteOrNull(data.unattributedRevenue) !== null && data.unattributedRevenue > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
-      formatMoney(data.unattributedRevenue, data.currency ?? null),
-      " of this range\u2019s takings is not in the column above \u2014 those orders name no family in this catalogue."
-    ] }),
-    finiteOrNull(data.ordersMissingTotal) !== null && data.ordersMissingTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
-      formatCount(data.ordersMissingTotal),
-      " order",
-      data.ordersMissingTotal === 1 ? "" : "s",
-      " in this range carry no amount, so the revenue column does not cover ",
-      data.ordersMissingTotal === 1 ? "it" : "them",
-      "."
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
+      data.revenueIsApportioned && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "An order covering several families is split evenly between them, because the order documents carry no per-line value." }),
+      finiteOrNull(data.unattributedRevenue) !== null && data.unattributedRevenue > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+        formatMoney(data.unattributedRevenue, data.currency ?? null),
+        " of this range\u2019s takings is not in the column above \u2014 those orders name no family in this catalogue."
+      ] }),
+      finiteOrNull(data.ordersMissingTotal) !== null && data.ordersMissingTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+        formatCount(data.ordersMissingTotal),
+        " order",
+        data.ordersMissingTotal === 1 ? "" : "s",
+        " in this range carry no amount, so the revenue column does not cover ",
+        data.ordersMissingTotal === 1 ? "it" : "them",
+        "."
+      ] })
     ] })
   ] });
 }
@@ -3369,9 +3388,9 @@ function DiagnosticsPanel({ data }) {
   const failing = checks.filter((c) => c.status === "fail").length;
   const warning = checks.filter((c) => c.status === "warn").length;
   const summary = checks.length === 0 ? "No checks ran. Nothing here has been verified either way." : data.verdict === "pass" ? "Configuration and credentials check out. That covers the wiring, not whether the figures are worth trusting \u2014 the caveats on each panel still apply." : failing === 0 && warning === 0 ? `Nothing is failing. ${checks.length - failing - warning} check${checks.length - failing - warning === 1 ? "" : "s"} could not run in this range \u2014 usually because there was nothing to check, not because something is wrong.` : `${failing} failing, ${warning} worth a look. Panels depending on these will be wrong or incomplete until they are resolved.`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelStack, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: CHECK_TONE[data.verdict] ?? "default", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: summary }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Stack, { space: 3, children: checks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: stackBlock, children: checks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stackBlock, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "center", justify: "space-between", gap: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "semibold", children: item.label }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Badge, { tone: CHECK_TONE[item.status] ?? "default", fontSize: 0, children: CHECK_WORD[item.status] ?? item.status })