@xenide-io/the-old-ui-theme 0.10.0 → 0.11.0

package/dist/{chunk-LHE4ROON.mjs → chunk-RIPGN6FG.mjs}

@@ -134,18 +134,32 @@ function MarketingHeader(_a) {
     "actions",
     "className"
   ]);
-  return /* @__PURE__ */ jsx3("header", __spreadProps(__spreadValues({}, props), { className: cn("marketing-header", className), children: /* @__PURE__ */ jsxs3("div", { className: "marketing-header__inner", children: [
-    /* @__PURE__ */ jsx3("div", { className: "marketing-header__brand", children: brand }),
-    /* @__PURE__ */ jsx3(
-      "nav",
-      {
-        className: "marketing-header__navigation",
-        "aria-label": "Product navigation",
-        children: navigation
-      }
-    ),
-    /* @__PURE__ */ jsx3("div", { className: "marketing-header__actions", children: actions })
-  ] }) }));
+  const [scrolled, setScrolled] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 4);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    "header",
+    __spreadProps(__spreadValues({}, props), {
+      "data-scrolled": scrolled ? "true" : "false",
+      className: cn("marketing-header", className),
+      children: /* @__PURE__ */ jsxs3("div", { className: "marketing-header__inner", children: [
+        /* @__PURE__ */ jsx3("div", { className: "marketing-header__brand", children: brand }),
+        /* @__PURE__ */ jsx3(
+          "nav",
+          {
+            className: "marketing-header__navigation",
+            "aria-label": "Product navigation",
+            children: navigation
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "marketing-header__actions", children: actions })
+      ] })
+    })
+  );
 }
 function MarketingLink(_a) {
   var _b = _a, {
@@ -1514,6 +1528,34 @@ function AuthDivider(_a) {
   return /* @__PURE__ */ jsx13("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ jsx13("span", { children }) }));
 }
 
+// src/lib/suite-analytics.ts
+var SUITE_ANALYTICS_EVENT = "shellstack:analytics";
+function trackSuiteEvent(event, properties) {
+  if (typeof window === "undefined" || !event) return;
+  try {
+    window.dispatchEvent(
+      new CustomEvent(SUITE_ANALYTICS_EVENT, {
+        detail: { event, properties }
+      })
+    );
+  } catch (e) {
+  }
+}
+function subscribeSuiteAnalytics(handler) {
+  if (typeof window === "undefined") return () => {
+  };
+  const listener = (raw) => {
+    const detail = raw.detail;
+    if (!(detail == null ? void 0 : detail.event)) return;
+    try {
+      handler(detail.event, detail.properties);
+    } catch (e) {
+    }
+  };
+  window.addEventListener(SUITE_ANALYTICS_EVENT, listener);
+  return () => window.removeEventListener(SUITE_ANALYTICS_EVENT, listener);
+}
+
 // src/components/ui/SettingsLayout.tsx
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function SettingsNav(_a) {
@@ -1531,6 +1573,7 @@ function SettingsNav(_a) {
           item.active && "ph-settings-nav__item--active"
         ),
         "aria-current": item.active ? "page" : void 0,
+        onClick: () => trackSuiteEvent("Tab Viewed", { tab: item.id }),
         children: [
           item.icon ? /* @__PURE__ */ jsx14("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
           /* @__PURE__ */ jsx14("span", { children: item.label }),
@@ -2496,24 +2539,41 @@ function Table({
   getRowStyle,
   getRowKey,
   className,
+  tableClassName,
+  variant = "default",
   caption,
   emptyState = "No data available."
 }) {
   return /* @__PURE__ */ jsx21(
     "div",
     {
-      className: cn("ph-table-wrap", compact && "ph-table-compact", className),
+      className: cn(
+        variant === "report" ? "ph-table-report-wrap" : "ph-table-wrap",
+        compact && "ph-table-compact",
+        className
+      ),
       role: "region",
       "aria-label": caption != null ? caption : "Data table",
       tabIndex: 0,
-      children: /* @__PURE__ */ jsxs18("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-        caption && /* @__PURE__ */ jsx21("caption", { className: "sr-only", children: caption }),
-        /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21("tr", { children: columns.map((col) => /* @__PURE__ */ jsx21("th", { className: col.className, children: col.header }, col.key)) }) }),
-        /* @__PURE__ */ jsx21("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "ph-table-empty", children: emptyState }) }) : data.map((row, i) => {
-          var _a;
-          return /* @__PURE__ */ jsx21("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx21("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
-        }) })
-      ] })
+      children: /* @__PURE__ */ jsxs18(
+        "table",
+        {
+          className: cn(
+            variant === "report" ? "ph-table-report" : "ph-table",
+            zebra && "ph-table-zebra",
+            ribbon && "ph-table--ribbon",
+            tableClassName
+          ),
+          children: [
+            caption && /* @__PURE__ */ jsx21("caption", { className: "sr-only", children: caption }),
+            /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21("tr", { children: columns.map((col) => /* @__PURE__ */ jsx21("th", { scope: "col", className: col.className, children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ jsx21("tbody", { children: data.length === 0 ? emptyState === null ? null : /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "ph-table-empty", children: emptyState }) }) : data.map((row, i) => {
+              var _a;
+              return /* @__PURE__ */ jsx21("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx21("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
+            }) })
+          ]
+        }
+      )
     }
   );
 }
@@ -3625,7 +3685,16 @@ import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function CodeBlock({ code, language = "tsx", filename, className }) {
   const [copied, setCopied] = useState8(false);
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch (e) {
+      return;
+    }
+    trackSuiteEvent("Link Copied", {
+      kind: "code",
+      copy_kind: "code_block",
+      label: filename != null ? filename : language
+    });
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
@@ -4107,8 +4176,286 @@ function Spinner(_a) {
 }
 Spinner.displayName = "Spinner";
 
+// src/components/ui/BrandSpinner.tsx
+import { useId as useId12, useSyncExternalStore } from "react";
+import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+var sizes = { sm: 20, md: 40, lg: 56 };
+var reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeMotion(onChange) {
+  var _a;
+  const media = (_a = window.matchMedia) == null ? void 0 : _a.call(window, reducedMotionQuery);
+  media == null ? void 0 : media.addEventListener("change", onChange);
+  return () => media == null ? void 0 : media.removeEventListener("change", onChange);
+}
+function readReducedMotion() {
+  var _a, _b;
+  return (_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, reducedMotionQuery).matches) != null ? _b : false;
+}
+function BrandSpinner(_a) {
+  var _b = _a, {
+    variant = "ring",
+    size = "md",
+    label = "Loading",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "label",
+    "className"
+  ]);
+  const gradientId = `ph-spinner-${useId12().replace(/:/g, "")}`;
+  const reducedMotion = useSyncExternalStore(
+    subscribeMotion,
+    readReducedMotion,
+    () => true
+  );
+  const dimension = sizes[size];
+  return /* @__PURE__ */ jsx42(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      "data-test": "app-spinner",
+      className: cn(
+        "inline-flex shrink-0",
+        variant !== "orbit" && "text-ph-brand",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx42(
+        "svg",
+        {
+          width: dimension,
+          height: dimension,
+          viewBox: variant === "ring" ? "0 0 24 24" : "0 0 40 40",
+          "aria-hidden": true,
+          className: variant === "timer" || variant === "ring" ? "animate-spin motion-reduce:animate-none" : void 0,
+          children: variant === "ring" ? /* @__PURE__ */ jsxs37(Fragment7, { children: [
+            /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                opacity: "0.2"
+              }
+            ),
+            /* @__PURE__ */ jsx42(
+              "path",
+              {
+                d: "M12 2a10 10 0 0 1 10 10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) : variant === "timer" ? /* @__PURE__ */ jsxs37(Fragment7, { children: [
+            /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeOpacity: "0.18",
+                strokeWidth: "2.5"
+              }
+            ),
+            /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "24 70"
+              }
+            ),
+            /* @__PURE__ */ jsx42("circle", { cx: "20", cy: "5", r: "2.25", fill: "currentColor" })
+          ] }) : variant === "columns" ? /* @__PURE__ */ jsxs37(Fragment7, { children: [
+            /* @__PURE__ */ jsx42(
+              "rect",
+              {
+                x: "9",
+                y: "16",
+                width: "6",
+                height: "14",
+                rx: "2",
+                fill: "currentColor",
+                fillOpacity: "0.35",
+                className: "ph-brand-spinner__column"
+              }
+            ),
+            /* @__PURE__ */ jsx42(
+              "rect",
+              {
+                x: "17",
+                y: "11",
+                width: "6",
+                height: "19",
+                rx: "2",
+                fill: "currentColor",
+                className: "ph-brand-spinner__column",
+                style: { animationDelay: "0.14s" }
+              }
+            ),
+            /* @__PURE__ */ jsx42(
+              "rect",
+              {
+                x: "25",
+                y: "14",
+                width: "6",
+                height: "16",
+                rx: "2",
+                fill: "currentColor",
+                fillOpacity: "0.55",
+                className: "ph-brand-spinner__column",
+                style: { animationDelay: "0.28s" }
+              }
+            )
+          ] }) : variant === "orbit" ? /* @__PURE__ */ jsxs37(Fragment7, { children: [
+            /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsxs37(
+              "linearGradient",
+              {
+                id: gradientId,
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "100%",
+                children: [
+                  /* @__PURE__ */ jsx42("stop", { offset: "0%", stopColor: "#1877f2" }),
+                  /* @__PURE__ */ jsx42("stop", { offset: "100%", stopColor: "#ebbcba" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeOpacity: "0.25",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ jsx42("g", { className: "origin-[20px_20px] animate-spin motion-reduce:animate-none", children: /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "22 72"
+              }
+            ) }),
+            /* @__PURE__ */ jsx42("g", { className: "origin-[20px_20px] animate-[spin_1.6s_linear_infinite_reverse] motion-reduce:animate-none", children: /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "9",
+                fill: "none",
+                stroke: "#ebbcba",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeDasharray: "12 45",
+                strokeOpacity: "0.9"
+              }
+            ) }),
+            /* @__PURE__ */ jsx42(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "2.5",
+                fill: "#1877f2",
+                className: "animate-pulse motion-reduce:animate-none"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs37(Fragment7, { children: [
+            /* @__PURE__ */ jsxs37("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ jsx42(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "2.4s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx42(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeOpacity: "0.2",
+                  strokeWidth: "1.5",
+                  strokeDasharray: "3 5"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs37("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ jsx42(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "360 20 20",
+                  to: "0 20 20",
+                  dur: "1.1s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx42(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "11",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeDasharray: "18 52"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx42(
+              "path",
+              {
+                d: "M16 14h8v12a1 1 0 0 1-1.4.9L20 25.5l-2.6 1.4A1 1 0 0 1 16 26V14z",
+                fill: "currentColor",
+                fillOpacity: "0.85",
+                className: "animate-pulse motion-reduce:animate-none"
+              }
+            )
+          ] })
+        }
+      )
+    })
+  );
+}
+
 // src/components/ui/Dot.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var colorMap = {
   green: "bg-ph-success",
   yellow: "bg-ph-warning",
@@ -4118,7 +4465,7 @@ var colorMap = {
 };
 function Dot(_a) {
   var _b = _a, { color = "gray", size = "md", className } = _b, props = __objRest(_b, ["color", "size", "className"]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "span",
     __spreadValues({
       className: cn(
@@ -4135,7 +4482,7 @@ Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var Chip = forwardRef11(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
@@ -4155,18 +4502,18 @@ var Chip = forwardRef11(function Chip2(_a, ref) {
   );
   if (onRemove) {
     const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
-    return /* @__PURE__ */ jsxs37("span", { className: chipClassName, children: [
-      /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsxs38("span", { className: chipClassName, children: [
+      /* @__PURE__ */ jsx44(
         "button",
         __spreadProps(__spreadValues({
           ref,
           type: "button",
           className: "min-w-0 bg-transparent p-0 text-inherit"
         }, props), {
-          children: /* @__PURE__ */ jsx43("span", { className: "ph-chip__text", children })
+          children: /* @__PURE__ */ jsx44("span", { className: "ph-chip__text", children })
         })
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         "button",
         {
           type: "button",
@@ -4174,19 +4521,19 @@ var Chip = forwardRef11(function Chip2(_a, ref) {
           disabled: props.disabled,
           className: "ph-chip__remove",
           "aria-label": removeLabel,
-          children: /* @__PURE__ */ jsx43("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx43("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          children: /* @__PURE__ */ jsx44("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx44("path", { d: "M2 2l6 6M8 2l-6 6" }) })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
       className: chipClassName
     }, props), {
-      children: /* @__PURE__ */ jsx43("span", { className: "ph-chip__text", children })
+      children: /* @__PURE__ */ jsx44("span", { className: "ph-chip__text", children })
     })
   );
 });
@@ -4232,12 +4579,12 @@ function useChartTokens() {
 }
 
 // src/components/ui/Charts.tsx
-import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function percent(value, total) {
   return total > 0 ? Math.round(value / total * 100) : 0;
 }
 function EmptyChart() {
-  return /* @__PURE__ */ jsx44("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+  return /* @__PURE__ */ jsx45("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
 }
 function sliceColour(slice, index, series) {
   var _a;
@@ -4247,7 +4594,7 @@ function DonutChart({ slices, label, formatValue, className }) {
   const { series } = useChartTokens();
   const visible = slices.filter((slice) => slice.value > 0);
   const total = visible.reduce((sum, slice) => sum + slice.value, 0);
-  if (total <= 0) return /* @__PURE__ */ jsx44(EmptyChart, {});
+  if (total <= 0) return /* @__PURE__ */ jsx45(EmptyChart, {});
   const stops = visible.map((slice, index) => {
     const colour = sliceColour(slice, index, series);
     const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
@@ -4255,15 +4602,15 @@ function DonutChart({ slices, label, formatValue, className }) {
     const end = (before + slice.value) / total * 360;
     return `${colour} ${start}deg ${end}deg`;
   }).join(", ");
-  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ jsx45(
       "div",
       {
         role: "img",
         "aria-label": label,
         className: "relative h-36 w-36 shrink-0 rounded-full",
         style: { background: `conic-gradient(${stops})` },
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx45(
           "span",
           {
             className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
@@ -4272,14 +4619,14 @@ function DonutChart({ slices, label, formatValue, className }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx44("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ jsx45("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
       const colour = sliceColour(slice, index, series);
-      return /* @__PURE__ */ jsxs38("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ jsxs38("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ jsx44("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ jsx44("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ jsxs39("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs39("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx45("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx45("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ jsx44("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ jsx45("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -4288,15 +4635,15 @@ function BarChart({ items, formatValue, className }) {
   const { series } = useChartTokens();
   const visible = items.filter((item) => item.value > 0);
   const max = Math.max(...visible.map((item) => item.value), 1);
-  if (!visible.length) return /* @__PURE__ */ jsx44(EmptyChart, {});
-  return /* @__PURE__ */ jsx44("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+  if (!visible.length) return /* @__PURE__ */ jsx45(EmptyChart, {});
+  return /* @__PURE__ */ jsx45("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
     const colour = sliceColour(item, index, series);
-    return /* @__PURE__ */ jsxs38("li", { children: [
-      /* @__PURE__ */ jsxs38("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ jsx44("span", { className: "truncate text-ph-subtle", children: item.label }),
-        /* @__PURE__ */ jsx44("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+    return /* @__PURE__ */ jsxs39("li", { children: [
+      /* @__PURE__ */ jsxs39("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx45("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ jsx45("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
       ] }),
-      /* @__PURE__ */ jsx44("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ jsx45(
         "div",
         {
           className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
@@ -4318,15 +4665,15 @@ function StackedBarChart({
   const { series } = useChartTokens();
   const visible = slices.filter((slice) => slice.value > 0);
   const total = visible.reduce((sum, slice) => sum + slice.value, 0);
-  if (total <= 0) return /* @__PURE__ */ jsx44(EmptyChart, {});
-  return /* @__PURE__ */ jsxs38("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsx44(
+  if (total <= 0) return /* @__PURE__ */ jsx45(EmptyChart, {});
+  return /* @__PURE__ */ jsxs39("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx45(
       "div",
       {
         role: "img",
         "aria-label": label,
         className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
-        children: visible.map((slice, index) => /* @__PURE__ */ jsx44(
+        children: visible.map((slice, index) => /* @__PURE__ */ jsx45(
           "span",
           {
             className: "h-full",
@@ -4339,14 +4686,14 @@ function StackedBarChart({
         ))
       }
     ),
-    /* @__PURE__ */ jsx44("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ jsx45("ul", { className: "space-y-2", children: visible.map((slice, index) => {
       const colour = sliceColour(slice, index, series);
-      return /* @__PURE__ */ jsxs38("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ jsxs38("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ jsx44("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ jsx44("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ jsxs39("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs39("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx45("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx45("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ jsx44("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ jsx45("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -4456,6 +4803,9 @@ export {
   AuthLayout,
   AuthCard,
   AuthDivider,
+  SUITE_ANALYTICS_EVENT,
+  trackSuiteEvent,
+  subscribeSuiteAnalytics,
   SettingsNav,
   SettingsLayout,
   DropdownMenu,
@@ -4523,6 +4873,7 @@ export {
   Progress,
   Link,
   Spinner,
+  BrandSpinner,
   Dot,
   Chip,
   useChartTokens,