@spectare-personalisation/react 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -44,11 +44,57 @@ interface PersonalisedSectionProps {
     align?: 'left' | 'center' | 'right';
     /**
      * Brand accent. Passed through to ComponentRenderer, which emits it into the scoped
-     * token set. Defaults to #60a5fa.
+     * token set. Defaults to #60a5fa (dark) or #2563eb (light).
      */
     accent?: string;
+    /** dark (default) or light, matching your page's ground. See ComponentRenderer. */
+    theme?: 'dark' | 'light';
 }
-declare function PersonalisedSection({ orgSlug, baseUrl, brand, pageHint, className, style, initialAssembly, initialIntent, initialVariantId, directSummary, zone, align, accent, }: PersonalisedSectionProps): react_jsx_runtime.JSX.Element | null;
+declare function PersonalisedSection({ orgSlug, baseUrl, brand, pageHint, className, style, initialAssembly, initialIntent, initialVariantId, directSummary, zone, align, accent, theme, }: PersonalisedSectionProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * The one place this package's design tokens are defined.
+ *
+ * Two things that are easy to get wrong here:
+ *
+ * 1. Tokens are declared on `.sp-root`, not `:root`. Declaring them at `:root` writes into
+ *    the host's document, allows only one theme per page, and means a customer overriding
+ *    `--sp-accent` competes with us at equal specificity so tag order decides the winner.
+ *    Scoping also lets two differently themed sections sit on one page.
+ *
+ * 2. `tokens.css` must stay byte-identical to `buildTokenCss({ scope: STYLESHEET_SCOPE })`,
+ *    which differs from the injected CSS in its selector and in nothing else.
+ *    tests/unit/react-tokens.test.ts enforces both halves, because a customer who imports the
+ *    stylesheet and a customer who renders the component must get the same page.
+ *
+ * components/ServerAssemblyRenderer.tsx in the Spectare app is a deliberate mirror of the
+ * values below. It is not the same file: that renderer uses rem, this one uses px.
+ */
+/** The package default. `spectare.js` and the WordPress plugin default to #2563eb, which is
+ *  a live inconsistency and a brand decision rather than a technical one, so it is left alone
+ *  here. Pass `accent` to override on either path. */
+declare const DEFAULT_ACCENT = "#60a5fa";
+type SpTheme = 'dark' | 'light';
+/** Class the tokens are scoped to. Applied by ComponentRenderer to its own wrapper. */
+declare const SP_ROOT = "sp-root";
+/**
+ * Returns the stylesheet a renderer injects.
+ *
+ * @param accent brand colour. Accepts anything CSS does; `--sp-accent-bg` and
+ *               `--sp-accent-border` are derived from it so a customer sets one value
+ *               rather than three. Defaults to DEFAULT_ACCENT.
+ * @param unit   length unit for layout rules. 'px' for this package, 'rem' for the app's
+ *               server renderer, which sizes in rem throughout.
+ * @param scope  selector the custom properties are declared on. Defaults to `.sp-root`, which is
+ *               what a renderer injecting this at runtime wants. `tokens.css` is generated with
+ *               STYLESHEET_SCOPE instead, so importing it works without a wrapper.
+ */
+declare function buildTokenCss({ accent, unit, scope, theme }?: {
+    accent?: string;
+    unit?: 'px' | 'rem';
+    scope?: string;
+    theme?: SpTheme;
+}): string;
 
 type Unit = 'px' | 'rem';
 type Align = 'left' | 'center' | 'right';
@@ -75,9 +121,10 @@ declare function HeroStatement({ headline, subheading, align, unit }: {
     align?: Align;
     unit?: Unit;
 }): react_jsx_runtime.JSX.Element;
-declare function AtomCard({ title, content, layout, stats, ctaText, ctaUrl, full, unit }: {
+declare function AtomCard({ title, content, summary, layout, stats, ctaText, ctaUrl, full, variant, unit }: {
     title?: string;
     content?: string;
+    summary?: string;
     layout?: string[];
     stats?: {
         value: string;
@@ -86,6 +133,7 @@ declare function AtomCard({ title, content, layout, stats, ctaText, ctaUrl, full
     ctaText?: string;
     ctaUrl?: string;
     full?: boolean;
+    variant?: string;
     unit?: Unit;
 }): react_jsx_runtime.JSX.Element;
 declare function StatGrid({ stats, caption, unit }: {
@@ -169,6 +217,13 @@ interface ComponentRendererProps {
      * from it, so one value covers all three. Defaults to #60a5fa.
      */
     accent?: string;
+    /**
+     * dark (default) is the package's original near-black card set. light renders white cards
+     * with a dark text ramp for light host pages; without it the components paint near-white
+     * text and near-black slabs onto a light ground. Both palettes hold the same contrast
+     * floors (see tests/unit/token-contrast.test.ts).
+     */
+    theme?: SpTheme;
     /**
      * px (default) sizes components absolutely, predictable inside arbitrary host pages.
      * rem tracks the reader's font-size preference; the root then also inherits the host's
@@ -189,48 +244,6 @@ interface ComponentRendererProps {
     /** Extra attributes for the root element (e.g. a data marker a host overlay targets). */
     rootProps?: Record<string, unknown>;
 }
-declare function ComponentRenderer({ assembly, brand, xray, zone, align, accent, unit, renderOverride, renderItem, rootProps }: ComponentRendererProps): react_jsx_runtime.JSX.Element;
-
-/**
- * The one place this package's design tokens are defined.
- *
- * Two things that are easy to get wrong here:
- *
- * 1. Tokens are declared on `.sp-root`, not `:root`. Declaring them at `:root` writes into
- *    the host's document, allows only one theme per page, and means a customer overriding
- *    `--sp-accent` competes with us at equal specificity so tag order decides the winner.
- *    Scoping also lets two differently themed sections sit on one page.
- *
- * 2. `tokens.css` must stay byte-identical to `buildTokenCss({ scope: STYLESHEET_SCOPE })`,
- *    which differs from the injected CSS in its selector and in nothing else.
- *    tests/unit/react-tokens.test.ts enforces both halves, because a customer who imports the
- *    stylesheet and a customer who renders the component must get the same page.
- *
- * components/ServerAssemblyRenderer.tsx in the Spectare app is a deliberate mirror of the
- * values below. It is not the same file: that renderer uses rem, this one uses px.
- */
-/** The package default. `spectare.js` and the WordPress plugin default to #2563eb, which is
- *  a live inconsistency and a brand decision rather than a technical one, so it is left alone
- *  here. Pass `accent` to override on either path. */
-declare const DEFAULT_ACCENT = "#60a5fa";
-/** Class the tokens are scoped to. Applied by ComponentRenderer to its own wrapper. */
-declare const SP_ROOT = "sp-root";
-/**
- * Returns the stylesheet a renderer injects.
- *
- * @param accent brand colour. Accepts anything CSS does; `--sp-accent-bg` and
- *               `--sp-accent-border` are derived from it so a customer sets one value
- *               rather than three. Defaults to DEFAULT_ACCENT.
- * @param unit   length unit for layout rules. 'px' for this package, 'rem' for the app's
- *               server renderer, which sizes in rem throughout.
- * @param scope  selector the custom properties are declared on. Defaults to `.sp-root`, which is
- *               what a renderer injecting this at runtime wants. `tokens.css` is generated with
- *               STYLESHEET_SCOPE instead, so importing it works without a wrapper.
- */
-declare function buildTokenCss({ accent, unit, scope }?: {
-    accent?: string;
-    unit?: 'px' | 'rem';
-    scope?: string;
-}): string;
+declare function ComponentRenderer({ assembly, brand, xray, zone, align, accent, theme, unit, renderOverride, renderItem, rootProps }: ComponentRendererProps): react_jsx_runtime.JSX.Element;
 
 export { AnnouncementBar, type AssemblyZone, AtomCard, CodeBlock, ComparisonTable, type ComponentAssembly, type ComponentName, ComponentRenderer, type ComponentRendererProps, CtaStrip, DEFAULT_ACCENT, FeatureList, HeroStatement, ImageCtaHero, PersonalisedSection, type PersonalisedSectionProps, SP_ROOT, StatGrid, TestimonialCard, buildTokenCss, filterAssemblyByZone };

package/dist/index.js

@@ -42,19 +42,47 @@ var COMPONENT_CATEGORIES = {
 
 // src/tokens.ts
 var DEFAULT_ACCENT = "#60a5fa";
+var DEFAULT_ACCENT_LIGHT = "#2563eb";
 var SP_ROOT = "sp-root";
 var STYLESHEET_SCOPE = `:where(:root),.${SP_ROOT}`;
-function palette(accent) {
-  return {
+function palette(accent, theme) {
+  const shared = {
     "--sp-accent": accent,
     "--sp-accent-bg": `color-mix(in srgb,${accent} 10%,transparent)`,
-    "--sp-accent-border": `color-mix(in srgb,${accent} 20%,transparent)`,
+    "--sp-accent-border": `color-mix(in srgb,${accent} 20%,transparent)`
+  };
+  if (theme === "light") {
+    return {
+      ...shared,
+      "--sp-bg": "#ffffff",
+      "--sp-surface": "#f4f4f5",
+      "--sp-border": "#e4e4e7",
+      "--sp-text": "#18181b",
+      "--sp-text-sub": "#3f3f46",
+      "--sp-text-strong": "#27272a",
+      "--sp-text-muted": "#6b6b74",
+      "--sp-text-dim": "#82828b",
+      "--sp-text-body": "#52525b",
+      "--sp-positive": "#047857",
+      "--sp-cta-bg": "#18181b",
+      "--sp-cta-text": "#ffffff",
+      "--sp-divider": "rgba(0,0,0,0.06)",
+      "--sp-code-bg": "rgba(0,0,0,0.05)",
+      "--sp-code-border": "rgba(0,0,0,0.08)",
+      "--sp-pre-bg": "rgba(0,0,0,0.04)"
+    };
+  }
+  return {
+    ...shared,
     "--sp-bg": "#18181b",
     "--sp-surface": "#09090b",
     "--sp-border": "#27272a",
     "--sp-text": "#f4f4f5",
-    "--sp-text-sub": "#d4d4d8",
-    "--sp-text-strong": "#e4e4e7",
+    // Body prose colour. Was #d4d4d8, judged too grey against near-black at reading
+    // sizes; one step brighter keeps the hierarchy below --sp-text while reading as
+    // text rather than chrome.
+    "--sp-text-sub": "#e4e4e7",
+    "--sp-text-strong": "#ececee",
     "--sp-text-muted": "#82828b",
     "--sp-text-dim": "#6b6b74",
     "--sp-text-body": "#a1a1aa",
@@ -83,8 +111,9 @@ function rules(unit) {
     "@media(max-width:640px){.sp-root .sp-pair{grid-template-columns:1fr}}"
   ].join("");
 }
-function buildTokenCss({ accent = DEFAULT_ACCENT, unit = "px", scope = `.${SP_ROOT}` } = {}) {
-  const decls = Object.entries(palette(accent)).map(([k, v]) => `${k}:${v}`).join(";");
+function buildTokenCss({ accent, unit = "px", scope = `.${SP_ROOT}`, theme = "dark" } = {}) {
+  const resolved = accent != null ? accent : theme === "light" ? DEFAULT_ACCENT_LIGHT : DEFAULT_ACCENT;
+  const decls = Object.entries(palette(resolved, theme)).map(([k, v]) => `${k}:${v}`).join(";");
   return `${scope}{${decls}}${rules(unit)}`;
 }
 
@@ -138,17 +167,28 @@ var clampStyle = {
   WebkitBoxOrient: "vertical",
   overflow: "hidden"
 };
-function AtomCard({ title, content, layout, stats = [], ctaText, ctaUrl, full, unit = "px" }) {
+function AtomCard({ title, content, summary, layout, stats = [], ctaText, ctaUrl, full, variant, unit = "px" }) {
   const u = scaler(unit);
+  if (variant === "card") {
+    const face = (summary == null ? void 0 : summary.trim()) || (content ? `${content.replace(/\s+/g, " ").split(/(?<=[.!?])\s/)[0]}` : "");
+    return /* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: u(12), padding: u(20) }, children: [
+      title && /* @__PURE__ */ jsx("h3", { style: { fontSize: u(18), fontWeight: 600, color: "var(--sp-text)", margin: 0, lineHeight: 1.35 }, children: title }),
+      face && /* @__PURE__ */ jsx("p", { style: { fontSize: u(16), color: "var(--sp-text-sub)", lineHeight: 1.6, margin: `${u(8)} 0 0` }, children: face }),
+      content && /* @__PURE__ */ jsxs("details", { style: { marginTop: u(10) }, children: [
+        /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer", fontSize: u(14), fontWeight: 600, color: "var(--sp-accent)", listStyle: "none" }, children: "Read more" }),
+        /* @__PURE__ */ jsx("div", { className: "sp-prose", style: { fontSize: u(16), color: "var(--sp-text-sub)", lineHeight: 1.6, marginTop: u(10) }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } })
+      ] })
+    ] });
+  }
   const order = layout && layout.length ? layout : ATOM_LAYOUT_DEFAULT;
   const element = (name) => {
-    if (name === "title") return title ? /* @__PURE__ */ jsx("h3", { style: { fontSize: u(16), fontWeight: 600, color: "var(--sp-text)", margin: `0 0 ${u(12)}` }, children: title }, "title") : null;
-    if (name === "content") return content ? /* @__PURE__ */ jsx("div", { className: "sp-prose", style: { fontSize: u(15), color: "var(--sp-text-sub)", lineHeight: 1.6, ...full ? {} : clampStyle }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }, "content") : null;
-    if (name === "stats") return stats.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: u(20), margin: `0 0 ${u(12)}`, paddingBottom: u(12), borderBottom: "1px solid var(--sp-border)" }, children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: u(2) }, children: [
+    if (name === "title") return title ? /* @__PURE__ */ jsx("h3", { style: { fontSize: u(18), fontWeight: 600, color: "var(--sp-text)", margin: `0 0 ${u(12)}` }, children: title }, "title") : null;
+    if (name === "content") return content ? /* @__PURE__ */ jsx("div", { className: "sp-prose", style: { fontSize: u(16), color: "var(--sp-text-sub)", lineHeight: 1.6, ...full ? {} : clampStyle }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }, "content") : null;
+    if (name === "stats") return stats.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: u(20), margin: `${u(18)} 0 ${u(12)}`, padding: `0 0 ${u(14)}`, borderBottom: "1px solid var(--sp-border)" }, children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: u(2) }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: u(22), fontWeight: 700, color: "var(--sp-text)", lineHeight: 1, fontVariantNumeric: "tabular-nums" }, children: s.value }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: u(11), color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }, children: s.label })
+      /* @__PURE__ */ jsx("span", { style: { fontSize: u(12), color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }, children: s.label })
     ] }, i)) }, "stats") : null;
-    if (name === "cta") return ctaText && ctaUrl ? /* @__PURE__ */ jsxs("a", { href: ctaUrl, style: { display: "inline-flex", alignItems: "center", gap: u(4), marginTop: u(12), fontSize: u(13), fontWeight: 600, color: "var(--sp-accent)", textDecoration: "none" }, children: [
+    if (name === "cta") return ctaText && ctaUrl ? /* @__PURE__ */ jsxs("a", { href: ctaUrl, style: { display: "inline-flex", alignItems: "center", gap: u(4), marginTop: u(12), fontSize: u(14), fontWeight: 600, color: "var(--sp-accent)", textDecoration: "none" }, children: [
       ctaText,
       " \u2192"
     ] }, "cta") : null;
@@ -161,10 +201,10 @@ function StatGrid({ stats = [], caption, unit = "px" }) {
   const cols = stats.length === 2 ? 2 : stats.length === 3 ? 3 : 4;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: u(12) }, children: stats.map(({ value, label }) => /* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: u(10), padding: `${u(16)} ${u(20)}`, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: u(88) }, children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: u(11), color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em", margin: `0 0 ${u(12)}`, lineHeight: 1.3 }, children: label }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: u(12), color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em", margin: `0 0 ${u(12)}`, lineHeight: 1.3 }, children: label }),
       /* @__PURE__ */ jsx("p", { style: { fontSize: u(20), fontWeight: 500, color: "var(--sp-text)", fontVariantNumeric: "tabular-nums", lineHeight: 1, margin: 0 }, children: value })
     ] }, label)) }),
-    caption && /* @__PURE__ */ jsx("p", { style: { fontSize: u(13), color: "var(--sp-text-muted)", margin: `${u(12)} 0 0` }, children: caption })
+    caption && /* @__PURE__ */ jsx("p", { style: { fontSize: u(14), color: "var(--sp-text-muted)", margin: `${u(12)} 0 0` }, children: caption })
   ] });
 }
 function CodeBlock({ code, lang = "typescript", caption, unit = "px" }) {
@@ -182,14 +222,14 @@ function ComparisonTable({ brand = "Us", competitor, rows = [], unit = "px" }) {
   const cell = { textAlign: "left", padding: `${u(12)} ${u(16)}` };
   return /* @__PURE__ */ jsx("div", { style: { border: "1px solid var(--sp-border)", borderRadius: u(12), overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", fontSize: u(14), borderCollapse: "collapse" }, children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid var(--sp-border)", background: "var(--sp-bg)" }, children: [
-      /* @__PURE__ */ jsx("th", { style: { ...cell, color: "var(--sp-text-muted)", fontWeight: 500, fontSize: u(12), width: "33%" } }),
-      /* @__PURE__ */ jsx("th", { scope: "col", style: { ...cell, fontWeight: 600, color: "var(--sp-accent)", fontSize: u(12) }, children: brand }),
-      /* @__PURE__ */ jsx("th", { scope: "col", style: { ...cell, color: "var(--sp-text-muted)", fontWeight: 500, fontSize: u(12) }, children: competitor })
+      /* @__PURE__ */ jsx("th", { style: { ...cell, color: "var(--sp-text-muted)", fontWeight: 500, fontSize: u(13), width: "33%" } }),
+      /* @__PURE__ */ jsx("th", { scope: "col", style: { ...cell, fontWeight: 600, color: "var(--sp-accent)", fontSize: u(13) }, children: brand }),
+      /* @__PURE__ */ jsx("th", { scope: "col", style: { ...cell, color: "var(--sp-text-muted)", fontWeight: 500, fontSize: u(13) }, children: competitor })
     ] }) }),
     /* @__PURE__ */ jsx("tbody", { children: rows.map(({ label, spectare, them }) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid var(--sp-border)" }, children: [
-      /* @__PURE__ */ jsx("th", { scope: "row", style: { ...cell, fontSize: u(13), color: "var(--sp-text-muted)", fontWeight: 500 }, children: label }),
-      /* @__PURE__ */ jsx("td", { style: { ...cell, fontSize: u(13), color: "var(--sp-positive)", fontWeight: 500 }, children: spectare }),
-      /* @__PURE__ */ jsx("td", { style: { ...cell, fontSize: u(13), color: "var(--sp-text-muted)" }, children: them })
+      /* @__PURE__ */ jsx("th", { scope: "row", style: { ...cell, fontSize: u(14), color: "var(--sp-text-muted)", fontWeight: 500 }, children: label }),
+      /* @__PURE__ */ jsx("td", { style: { ...cell, fontSize: u(14), color: "var(--sp-positive)", fontWeight: 500 }, children: spectare }),
+      /* @__PURE__ */ jsx("td", { style: { ...cell, fontSize: u(14), color: "var(--sp-text-muted)" }, children: them })
     ] }, label)) })
   ] }) }) });
 }
@@ -199,7 +239,7 @@ function FeatureList({ items = [], unit = "px" }) {
     /* @__PURE__ */ jsx("span", { style: { color: "var(--sp-accent)", flexShrink: 0, fontSize: u(15), marginTop: u(2) }, children: "\u2713" }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { style: { fontSize: u(15), fontWeight: 500, color: "var(--sp-text)", lineHeight: 1.4, margin: 0 }, children: text }),
-      sub && /* @__PURE__ */ jsx("p", { style: { fontSize: u(13), color: "var(--sp-text-muted)", lineHeight: 1.5, margin: `${u(4)} 0 0` }, children: sub })
+      sub && /* @__PURE__ */ jsx("p", { style: { fontSize: u(14), color: "var(--sp-text-muted)", lineHeight: 1.5, margin: `${u(4)} 0 0` }, children: sub })
     ] })
   ] }, text)) }) });
 }
@@ -213,7 +253,7 @@ function TestimonialCard({ quote, name, role, company, unit = "px" }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--sp-border)", paddingTop: u(16) }, children: [
       /* @__PURE__ */ jsx("p", { style: { fontSize: u(14), fontWeight: 600, color: "var(--sp-text)", margin: 0 }, children: name }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: u(13), color: "var(--sp-text-muted)", margin: `${u(2)} 0 0` }, children: [
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: u(14), color: "var(--sp-text-muted)", margin: `${u(2)} 0 0` }, children: [
         role,
         company ? `, ${company}` : ""
       ] })
@@ -257,7 +297,7 @@ function renderSingle(item, brand, align, unit = "px") {
       return /* @__PURE__ */ jsx(HeroStatement, { headline: s.headline, subheading: s.subheading, align, unit });
     // A full-width card has nothing beside it, so there is nothing for a clamp to protect.
     case "AtomCard":
-      return /* @__PURE__ */ jsx(AtomCard, { title: s.title, content: s.content, layout: s.layout, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl, full: s.full || resolvedSize(item) === "full", unit });
+      return /* @__PURE__ */ jsx(AtomCard, { title: s.title, content: s.content, summary: s.summary, layout: s.layout, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl, full: s.full || resolvedSize(item) === "full", variant: s.variant, unit });
     case "StatGrid":
       return /* @__PURE__ */ jsx(StatGrid, { stats: s.stats, caption: s.caption, unit });
     case "CodeBlock":
@@ -323,7 +363,7 @@ function XrayBadge({ name, size }) {
     /* @__PURE__ */ jsx("span", { style: { fontSize: PX(10), fontFamily: "monospace", color: "#71717a", lineHeight: 1 }, children: size })
   ] });
 }
-function ComponentRenderer({ assembly, brand, xray = false, zone, align, accent, unit = "px", renderOverride, renderItem, rootProps }) {
+function ComponentRenderer({ assembly, brand, xray = false, zone, align, accent, theme, unit = "px", renderOverride, renderItem, rootProps }) {
   const u = scaler(unit);
   const filtered = zone ? filterAssemblyByZone(assembly, zone) : assembly;
   const layout = buildLayout(filtered);
@@ -334,7 +374,7 @@ function ComponentRenderer({ assembly, brand, xray = false, zone, align, accent,
     return renderItem ? renderItem(item, node) : node;
   };
   return /* @__PURE__ */ jsxs("div", { className: extraClass ? `${SP_ROOT} ${extraClass}` : SP_ROOT, ...restRoot, style: { ...extraStyle, display: "flex", flexDirection: "column", gap: u(20), ...unit === "px" ? { fontSize: "16px" } : {} }, children: [
-    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: buildTokenCss({ accent, unit }) } }),
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: buildTokenCss({ accent, unit, theme }) } }),
     layout.map((group, i) => {
       if (group.type === "pair") {
         return /* @__PURE__ */ jsxs("div", { className: "sp-pair", children: [
@@ -427,7 +467,8 @@ function PersonalisedSection({
   directSummary,
   zone,
   align,
-  accent
+  accent,
+  theme
 }) {
   const [assembly, setAssembly] = useState(initialAssembly != null ? initialAssembly : []);
   const [loading, setLoading] = useState(!initialAssembly);
@@ -678,7 +719,7 @@ function PersonalisedSection({
           debugIntent.stage
         ] })
       ] }),
-      loading && assembly.length === 0 ? /* @__PURE__ */ jsx2(Shimmer, {}) : /* @__PURE__ */ jsx2(ComponentRenderer, { assembly: zone ? filterAssemblyByZone(assembly, zone) : assembly, brand: brand != null ? brand : orgName, align, accent })
+      loading && assembly.length === 0 ? /* @__PURE__ */ jsx2(Shimmer, {}) : /* @__PURE__ */ jsx2(ComponentRenderer, { assembly: zone ? filterAssemblyByZone(assembly, zone) : assembly, brand: brand != null ? brand : orgName, align, accent, theme })
     ] })
   ] });
 }