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

package/dist/ui.js

@@ -70,6 +70,7 @@ __export(ui_exports, {
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BarChart: () => BarChart,
+  BrandSpinner: () => BrandSpinner,
   Button: () => Button,
   ButtonChrome: () => ButtonChrome,
   Calendar: () => Calendar,
@@ -274,18 +275,32 @@ function MarketingHeader(_a) {
     "actions",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("header", __spreadProps(__spreadValues({}, props), { className: cn("marketing-header", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "marketing-header__inner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__brand", children: brand }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "nav",
-      {
-        className: "marketing-header__navigation",
-        "aria-label": "Product navigation",
-        children: navigation
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__actions", children: actions })
-  ] }) }));
+  const [scrolled, setScrolled] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const onScroll = () => setScrolled(window.scrollY > 4);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "header",
+    __spreadProps(__spreadValues({}, props), {
+      "data-scrolled": scrolled ? "true" : "false",
+      className: cn("marketing-header", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "marketing-header__inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__brand", children: brand }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "nav",
+          {
+            className: "marketing-header__navigation",
+            "aria-label": "Product navigation",
+            children: navigation
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__actions", children: actions })
+      ] })
+    })
+  );
 }
 function MarketingLink(_a) {
   var _b = _a, {
@@ -1639,6 +1654,20 @@ function AuthDivider(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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) {
+  }
+}
+
 // src/components/ui/SettingsLayout.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function SettingsNav(_a) {
@@ -1656,6 +1685,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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: item.label }),
@@ -2621,24 +2651,41 @@ function Table({
   getRowStyle,
   getRowKey,
   className,
+  tableClassName,
+  variant = "default",
   caption,
   emptyState = "No data available."
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "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__ */ (0, import_jsx_runtime21.jsxs)("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-        caption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "sr-only", children: caption }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { className: col.className, children: col.header }, col.key)) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, className: "ph-table-empty", children: emptyState }) }) : data.map((row, i) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
-        }) })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "table",
+        {
+          className: cn(
+            variant === "report" ? "ph-table-report" : "ph-table",
+            zebra && "ph-table-zebra",
+            ribbon && "ph-table--ribbon",
+            tableClassName
+          ),
+          children: [
+            caption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "sr-only", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { scope: "col", className: col.className, children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: data.length === 0 ? emptyState === null ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, className: "ph-table-empty", children: emptyState }) }) : data.map((row, i) => {
+              var _a;
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
+            }) })
+          ]
+        }
+      )
     }
   );
 }
@@ -3737,7 +3784,16 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "tsx", filename, className }) {
   const [copied, setCopied] = (0, import_react22.useState)(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);
   };
@@ -4219,8 +4275,286 @@ function Spinner(_a) {
 }
 Spinner.displayName = "Spinner";
 
-// src/components/ui/Dot.tsx
+// src/components/ui/BrandSpinner.tsx
+var import_react29 = require("react");
 var import_jsx_runtime42 = require("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-${(0, import_react29.useId)().replace(/:/g, "")}`;
+  const reducedMotion = (0, import_react29.useSyncExternalStore)(
+    subscribeMotion,
+    readReducedMotion,
+    () => true
+  );
+  const dimension = sizes[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "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__ */ (0, import_jsx_runtime42.jsx)(
+        "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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                opacity: "0.2"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "path",
+              {
+                d: "M12 2a10 10 0 0 1 10 10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) : variant === "timer" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeOpacity: "0.18",
+                strokeWidth: "2.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "24 70"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "20", cy: "5", r: "2.25", fill: "currentColor" })
+          ] }) : variant === "columns" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "rect",
+              {
+                x: "9",
+                y: "16",
+                width: "6",
+                height: "14",
+                rx: "2",
+                fill: "currentColor",
+                fillOpacity: "0.35",
+                className: "ph-brand-spinner__column"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "rect",
+              {
+                x: "17",
+                y: "11",
+                width: "6",
+                height: "19",
+                rx: "2",
+                fill: "currentColor",
+                className: "ph-brand-spinner__column",
+                style: { animationDelay: "0.14s" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              "linearGradient",
+              {
+                id: gradientId,
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "100%",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "0%", stopColor: "#1877f2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "100%", stopColor: "#ebbcba" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeOpacity: "0.25",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { className: "origin-[20px_20px] animate-spin motion-reduce:animate-none", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "22 72"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { className: "origin-[20px_20px] animate-[spin_1.6s_linear_infinite_reverse] motion-reduce:animate-none", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "9",
+                fill: "none",
+                stroke: "#ebbcba",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeDasharray: "12 45",
+                strokeOpacity: "0.9"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "2.5",
+                fill: "#1877f2",
+                className: "animate-pulse motion-reduce:animate-none"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "2.4s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeOpacity: "0.2",
+                  strokeWidth: "1.5",
+                  strokeDasharray: "3 5"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "360 20 20",
+                  to: "0 20 20",
+                  dur: "1.1s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "11",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeDasharray: "18 52"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "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
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var colorMap = {
   green: "bg-ph-success",
   yellow: "bg-ph-warning",
@@ -4230,7 +4564,7 @@ var colorMap = {
 };
 function Dot(_a) {
   var _b = _a, { color = "gray", size = "md", className } = _b, props = __objRest(_b, ["color", "size", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "span",
     __spreadValues({
       className: cn(
@@ -4246,9 +4580,9 @@ function Dot(_a) {
 Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
-var import_react29 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Chip = (0, import_react29.forwardRef)(function Chip2(_a, ref) {
+var import_react30 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Chip = (0, import_react30.forwardRef)(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
     onRemove,
@@ -4267,18 +4601,18 @@ var Chip = (0, import_react29.forwardRef)(function Chip2(_a, ref) {
   );
   if (onRemove) {
     const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: chipClassName, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: chipClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         __spreadProps(__spreadValues({
           ref,
           type: "button",
           className: "min-w-0 bg-transparent p-0 text-inherit"
         }, props), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ph-chip__text", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ph-chip__text", children })
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           type: "button",
@@ -4286,26 +4620,26 @@ var Chip = (0, import_react29.forwardRef)(function Chip2(_a, ref) {
           disabled: props.disabled,
           className: "ph-chip__remove",
           "aria-label": removeLabel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
       className: chipClassName
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ph-chip__text", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ph-chip__text", children })
     })
   );
 });
 Chip.displayName = "Chip";
 
 // src/lib/chart/use-ph-chart-tokens.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var DEFAULT_TOKENS = {
   series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
   muted: "hsl(220 9% 90%)",
@@ -4336,20 +4670,20 @@ function readTokens() {
   };
 }
 function useChartTokens() {
-  const [tokens, setTokens] = (0, import_react30.useState)(DEFAULT_TOKENS);
-  (0, import_react30.useEffect)(() => {
+  const [tokens, setTokens] = (0, import_react31.useState)(DEFAULT_TOKENS);
+  (0, import_react31.useEffect)(() => {
     setTokens(readTokens());
   }, []);
   return tokens;
 }
 
 // src/components/ui/Charts.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function percent(value, total) {
   return total > 0 ? Math.round(value / total * 100) : 0;
 }
 function EmptyChart() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
 }
 function sliceColour(slice, index, series) {
   var _a;
@@ -4359,7 +4693,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__ */ (0, import_jsx_runtime44.jsx)(EmptyChart, {});
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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);
@@ -4367,15 +4701,15 @@ function DonutChart({ slices, label, formatValue, className }) {
     const end = (before + slice.value) / total * 360;
     return `${colour} ${start}deg ${end}deg`;
   }).join(", ");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         role: "img",
         "aria-label": label,
         className: "relative h-36 w-36 shrink-0 rounded-full",
         style: { background: `conic-gradient(${stops})` },
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "span",
           {
             className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
@@ -4384,14 +4718,14 @@ function DonutChart({ slices, label, formatValue, className }) {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("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__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -4400,15 +4734,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__ */ (0, import_jsx_runtime44.jsx)(EmptyChart, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+  if (!visible.length) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
     const colour = sliceColour(item, index, series);
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
           className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
@@ -4430,15 +4764,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__ */ (0, import_jsx_runtime44.jsx)(EmptyChart, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "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__ */ (0, import_jsx_runtime44.jsx)(
+        children: visible.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "span",
           {
             className: "h-full",
@@ -4451,14 +4785,14 @@ function StackedBarChart({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
       const colour = sliceColour(slice, index, series);
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -4475,6 +4809,7 @@ function StackedBarChart({
   AvatarGroup,
   Badge,
   BarChart,
+  BrandSpinner,
   Button,
   ButtonChrome,
   Calendar,