@spectare-personalisation/react 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -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.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,13 +42,38 @@ 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",
@@ -83,8 +108,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,8 +164,23 @@ 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(16), fontWeight: 600, color: "var(--sp-text)", margin: 0, lineHeight: 1.35 }, children: title }),
+      face && /* @__PURE__ */ jsx("p", { style: { fontSize: u(15), 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(13), fontWeight: 600, color: "var(--sp-accent)", listStyle: "none" }, children: "Read more" }),
+        /* @__PURE__ */ jsx("div", { className: "sp-prose", style: { fontSize: u(15), color: "var(--sp-text-sub)", lineHeight: 1.6, marginTop: u(10) }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } })
+      ] }),
+      ctaText && ctaUrl && /* @__PURE__ */ jsxs("a", { href: ctaUrl, style: { display: "inline-flex", alignItems: "center", gap: u(4), marginTop: u(10), fontSize: u(13), fontWeight: 600, color: "var(--sp-accent)", textDecoration: "none" }, children: [
+        ctaText,
+        " \u2192"
+      ] })
+    ] });
+  }
   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;
@@ -257,7 +298,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 +364,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 +375,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 +468,8 @@ function PersonalisedSection({
   directSummary,
   zone,
   align,
-  accent
+  accent,
+  theme
 }) {
   const [assembly, setAssembly] = useState(initialAssembly != null ? initialAssembly : []);
   const [loading, setLoading] = useState(!initialAssembly);
@@ -678,7 +720,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 })
     ] })
   ] });
 }