@sproutsocial/seeds-react-narrative-kit 0.4.0 → 0.5.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css && cp src/narrative-ordered-list.css dist/narrative-ordered-list.css && cp src/narrative-data-callout.css dist/narrative-data-callout.css && cp src/ai-container.css dist/ai-container.css
+$ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css && cp src/narrative-ordered-list.css dist/narrative-ordered-list.css && cp src/narrative-data-callout.css dist/narrative-data-callout.css && cp src/ai-container.css dist/ai-container.css && cp src/narrative-social-media-card.css dist/narrative-social-media-card.css && cp src/narrative-attribution.css dist/narrative-attribution.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && c
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     18.81 KB
-CJS dist/index.js.map 33.28 KB
-CJS ⚡️ Build success in 19ms
-ESM dist/esm/index.js     15.63 KB
-ESM dist/esm/index.js.map 32.00 KB
-ESM ⚡️ Build success in 20ms
+CJS dist/index.js     22.09 KB
+CJS dist/index.js.map 38.83 KB
+CJS ⚡️ Build success in 23ms
+ESM dist/esm/index.js     18.61 KB
+ESM dist/esm/index.js.map 37.33 KB
+ESM ⚡️ Build success in 23ms
 DTS Build start
-DTS ⚡️ Build success in 1732ms
-DTS dist/index.d.ts  19.92 KB
-DTS dist/index.d.mts 19.92 KB
-Done in 2.47s.
+DTS ⚡️ Build success in 1650ms
+DTS dist/index.d.ts  23.03 KB
+DTS dist/index.d.mts 23.03 KB
+Done in 2.39s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-narrative-kit
 
+## 0.5.1
+
+### Patch Changes
+
+- 82bad75: Remove `@import "./narrative-attribution.css"` from `narrative-social-media-card.css`. The build script already inlines each CSS file from `src/` individually, so the relative import was redundant and caused a broken reference when bundled into racine's `components.css`.
+
+## 0.5.0
+
+### Minor Changes
+
+- 9a2dada: Add NarrativeSocialMediaCard and NarrativeAttribution components. Card displays social post with avatar, content, and engagement stats.
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -443,10 +443,110 @@ var AIContainer = React12.forwardRef(
 );
 AIContainer.displayName = "AIContainer";
 var AIContainer_default = AIContainer;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+import * as React14 from "react";
+
+// src/NarrativeAttribution/NarrativeAttribution.tsx
+import * as React13 from "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var NarrativeAttribution = React13.forwardRef(
+  ({
+    avatarUrl,
+    avatarAlt = "Profile avatar",
+    userName,
+    socialIcon,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-attribution", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx13(
+            "img",
+            {
+              src: avatarUrl,
+              alt: avatarAlt,
+              className: "seeds-narrative-attribution-avatar"
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: "seeds-narrative-attribution-social-icon", children: socialIcon }),
+          /* @__PURE__ */ jsx13("span", { className: "seeds-narrative-attribution-user-name", children: userName })
+        ]
+      }
+    );
+  }
+);
+NarrativeAttribution.displayName = "NarrativeAttribution";
+var NarrativeAttribution_default = NarrativeAttribution;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var NarrativeSocialMediaCard = React14.forwardRef(
+  ({
+    avatar,
+    avatarAlt,
+    displayName,
+    socialIcon,
+    image,
+    text,
+    meta,
+    appearance,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-social-media-card",
+          appearance === "no-background" && "seeds-narrative-social-media-card--no-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx14(
+            NarrativeAttribution_default,
+            {
+              avatarUrl: avatar,
+              avatarAlt,
+              userName: displayName,
+              socialIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs8("div", { className: "seeds-narrative-social-media-card-content", children: [
+            image,
+            text
+          ] }),
+          /* @__PURE__ */ jsx14("div", { className: "seeds-narrative-social-media-card-footer", children: meta.map((item, index) => /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: "seeds-narrative-social-media-card-stat",
+              "aria-label": item.label,
+              children: [
+                item.icon,
+                /* @__PURE__ */ jsx14("span", { className: "seeds-narrative-social-media-card-stat-value", children: item.value })
+              ]
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
+var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
 export {
   AIContainer_default as AIContainer,
   EyebrowToken_default as EyebrowToken,
   MetricHighlight_default as MetricHighlight,
+  NarrativeAttribution_default as NarrativeAttribution,
   NarrativeContainer_default as NarrativeContainer,
   NarrativeDataCallout_default as NarrativeDataCallout,
   NarrativeDivider_default as NarrativeDivider,
@@ -454,6 +554,7 @@ export {
   NarrativeHeadlineHighlight_default as NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll_default as NarrativeHeadlineRoll,
   NarrativeOrderedList_default as NarrativeOrderedList,
+  NarrativeSocialMediaCard_default as NarrativeSocialMediaCard,
   NarrativeSummary_default as NarrativeSummary,
   PullQuote_default as PullQuote
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx","../../src/NarrativeOrderedList/NarrativeOrderedList.tsx","../../src/NarrativeDataCallout/NarrativeDataCallout.tsx","../../src/AIContainer/AIContainer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom\n * properties); consumers import the classes through\n * `@sproutsocial/racine/css/components`. Surface overrides are done with\n * standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeOrderedListProps } from \"./NarrativeOrderedListTypes\";\n\n/**\n * NarrativeOrderedList — a numbered list of action items. Each item pairs a\n * large ordinal (01, 02, …) with a title, an optional description, and an\n * optional call-to-action slot.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is driven by container queries, so it responds to the width the\n * component is actually given, not the viewport:\n * - `\"vertical\"` (default) → items stacked full-width, one per row.\n * - `\"horizontal\"` → items laid out as a row of equal columns once there is\n *   room, collapsing back to a stack when the container is narrow.\n *\n * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);\n * consumers import the classes through `@sproutsocial/racine/css/components`.\n * Overrides come via standard `className` / `style`.\n */\nconst NarrativeOrderedList = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeOrderedListProps\n>(({ items, orientation = \"vertical\", className, ...props }, ref) => {\n  return (\n    // The outer element establishes the query container. The ol inside switches\n    // direction based on this element's width — a container query can only style\n    // descendants of the container, never the container element itself.\n    <div\n      ref={ref}\n      className={cn(\"seeds-narrative-ordered-list\", className)}\n      {...props}\n    >\n      <ol\n        className={cn(\"seeds-narrative-ordered-list-track\", {\n          \"seeds-narrative-ordered-list-horizontal\":\n            orientation === \"horizontal\",\n        })}\n      >\n        {items.map((item, i) => (\n          <li key={i} className=\"seeds-narrative-ordered-list-item\">\n            {/* Decorative — the ol/li already convey order to assistive tech, so\n                hide the visible ordinal from it to avoid double-announcing. */}\n            <span\n              className=\"seeds-narrative-ordered-list-number\"\n              aria-hidden=\"true\"\n            >\n              {String(i + 1).padStart(2, \"0\")}\n            </span>\n            <div className=\"seeds-narrative-ordered-list-body\">\n              <p className=\"seeds-narrative-ordered-list-title\">{item.title}</p>\n              {item.description != null && (\n                <p className=\"seeds-narrative-ordered-list-description\">\n                  {item.description}\n                </p>\n              )}\n              {item.action != null && (\n                <div className=\"seeds-narrative-ordered-list-action\">\n                  {item.action}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n});\n\nNarrativeOrderedList.displayName = \"NarrativeOrderedList\";\n\nexport default NarrativeOrderedList;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDataCalloutProps } from \"./NarrativeDataCalloutTypes\";\n\n/**\n * NarrativeDataCallout — a horizontally oriented callout that pairs an injected\n * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).\n *\n * The kit ships no chart of its own; the `visual` slot accepts any node — the\n * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.\n * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's\n * `sparkline` slot).\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the\n * card look.\n *\n * Layout is a flex row driven by a container query, so it collapses to a stacked\n * column (visual on top, text below) based on the width the component is actually\n * given, not the viewport.\n *\n * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides come\n * via standard `className` / `style`.\n */\nconst NarrativeDataCallout = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeDataCalloutProps\n>(({ visual, children, visualLabel, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"seeds-narrative-data-callout\", className)}\n    {...props}\n  >\n    <div className=\"seeds-narrative-data-callout-row\">\n      <div\n        className=\"seeds-narrative-data-callout-visual\"\n        role={visualLabel != null ? \"img\" : undefined}\n        aria-label={visualLabel}\n      >\n        {visual}\n      </div>\n      <div className=\"seeds-narrative-data-callout-body\">{children}</div>\n    </div>\n  </div>\n));\n\nNarrativeDataCallout.displayName = \"NarrativeDataCallout\";\n\nexport default NarrativeDataCallout;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeAIContainerProps } from \"./AIContainerTypes\";\n\n/**\n * AIContainer — a rounded surface primitive with the AI gradient background.\n * Provides the outer shell (border-radius, shadow, overflow, gradient) without\n * any padding. Used by PullQuote and available as a standalone container.\n *\n * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.\n * - `vivid` — the full-saturation AI gradient with white text (always white).\n *\n * Styled via `ai-container.css` (Seeds CSS custom properties).\n */\nconst AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(\n  ({ children, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAIContainer.displayName = \"AIContainer\";\n\nexport default AIContainer;\n"],"mappings":";AAAA,YAAY,WAAW;;;ACChB,SAAS,MACX,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;;;ADHI;AALJ,IAAM,qBAA2B,iBAG/B,CAAC,EAAE,UAAU,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,EAAE,oCAAoC,OAAO;AAAA,QAC7C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAEjC,IAAO,6BAAQ;;;AElCf,YAAYA,YAAW;AA2BjB,gBAAAC,YAAA;AAXN,IAAM,oBAA0B;AAAA,EAI9B,CACE,EAAE,UAAU,eAAe,GAAG,OAAO,WAAW,WAAW,GAAG,MAAM,GACpE,QACG;AACH,UAAM,UAAU,IAAI,YAAY;AAEhC,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,kCAAkC,SAAS,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAEhC,IAAO,4BAAQ;;;AC5Cf,YAAYC,YAAW;AAkBnB,gBAAAC,YAAA;AALJ,IAAM,6BAAmC,kBAGvC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC5C,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAEzC,IAAO,qCAAQ;;;AC9Bf,YAAYC,YAAW;AA+DjB,SAaE,OAAAC,MAbF;AA7CN,IAAM,wBAA8B;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,GAAG,IAAI,IAAU,gBAAS,CAAC;AAElC,IAAM,iBAAU,MAAM;AACpB,UAAI,MAAM,UAAU,EAAG;AAGvB,YAAM,UACJ,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AACxD,UAAI,QAAS;AAEb,YAAM,IAAI;AAAA,QACR,MAAM,KAAK,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM;AAAA,QACxC;AAAA,MACF;AACA,aAAO,MAAM,cAAc,CAAC;AAAA,IAC9B,GAAG,CAAC,YAAY,MAAM,MAAM,CAAC;AAE7B,UAAM,SAA8B;AAAA,MAClC,GAAG;AAAA;AAAA,MAEH,CAAC,oCAA8C,GAAG,GAAG,YAAY;AAAA,IACnE;AAEA,UAAM,OAAO,MAAM,UAAU,IAAI,IAAI,MAAM,UAAU,MAAM,SAAS;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,sCAAsC,cAAc,OAAO;AAAA,UAC7D,EAAE,0CAA0C,SAAS;AAAA,UACrD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QAIJ;AAAA,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,gBAAM,CAAC;AAAA;AAAA,UACV;AAAA,UACC,MAAM,IAAI,CAAC,GAAG,QACb,gBAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,GAAG,sCAAsC;AAAA,gBAClD,6CAA6C,QAAQ;AAAA,gBACrD,2CACE,QAAQ,QAAQ,MAAM;AAAA,cAC1B,CAAC;AAAA,cACD,eAAa,QAAQ,IAAI,SAAY;AAAA,cAEpC;AAAA;AAAA,YARI;AAAA,UASP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;AAEpC,IAAO,gCAAQ;;;ACtGf,YAAYC,YAAW;AA6Bf,SACE,OAAAC,MADF,QAAAC,aAAA;AAdR,IAAM,YAAkB;AAAA,EACtB,CAAC,EAAE,OAAO,aAAa,aAAa,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3E,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,EAAE,4BAA4B,eAAe,QAAQ;AAAA,UACrD,EAAE,0BAA0B,eAAe,QAAQ;AAAA,UACnD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,0BAAAC,MAAC,SAAI,WAAU,wBACb;AAAA,0BAAAD,KAAC,gBAAW,WAAU,yBAAyB,iBAAM;AAAA,UACpD,eAAe,QACd,gBAAAA,KAAC,gBAAW,WAAU,gCACnB,uBACH;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;;;AC5Cf,YAAYE,YAAW;AAgBnB,gBAAAC,YAAA;AAFJ,IAAM,eAAqB;AAAA,EACzB,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAClC,gBAAAA,KAAC,UAAK,KAAU,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,OAClE,UACH;AAEJ;AAEA,aAAa,cAAc;AAE3B,IAAO,uBAAQ;;;ACxBf,YAAYC,YAAW;AAoBrB,gBAAAC,YAAA;AAJF,IAAM,mBAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA;AACN,CACD;AAED,iBAAiB,cAAc;AAE/B,IAAO,2BAAQ;;;AC7Bf,YAAYC,YAAW;AAgBjB,gBAAAC,MAsBJ,QAAAC,aAtBI;AARN,IAAM,aAAa,CAAC,EAAE,UAAU,MAC9B,gBAAAD;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,eAAW;AAAA,IACX,WAAW;AAAA,IAEV,wBAAc,OACb,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB,IAEA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB;AAAA;AAEJ;AAGF,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,gCAAgC;AAAA,MAC5C,qCAAqC,cAAc;AAAA,IACrD,CAAC;AAAA,IACA,GAAG;AAAA,IAEJ;AAAA,sBAAAD,KAAC,cAAW,WAAsB;AAAA,MACjC,SAAS,QACR,gBAAAA,KAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA;AAAA;AAEhE;AAeF,IAAM,kBAAwB;AAAA,EAI5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,mCAAmC,eAAe;AAAA,YAClD,gCAAgC,SAAS;AAAA,YACzC,+BAA+B,CAAC;AAAA,UAClC;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,0BAAAA,MAAC,SAAI,WAAU,iCACb;AAAA,4BAAAD,KAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,YACnD,gBAAAC,MAAC,SAAI,WAAU,oCACb;AAAA,8BAAAD,KAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,cAClD,SAAS,QAAQ,gBAAAA,KAAC,cAAY,GAAG,OAAO;AAAA,eAC3C;AAAA,aACF;AAAA,UACC,aAAa;AAAA;AAAA;AAAA,UAIZ,gBAAAA,KAAC,SAAI,WAAU,gCAAgC,qBAAU;AAAA;AAAA;AAAA,IAE7D;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;ACnHf,YAAYE,YAAW;AAyDb,SACsB,OAAAC,MADtB,QAAAC,aAAA;AAjCV,IAAM,mBAAyB;AAAA,EAI7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,aAAa,QAAQ,UAAU,SAAS;AAE7D,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA,QAEJ,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,gCAAgC;AAAA,cAC5C,sCAAsC,WAAW;AAAA,YACnD,CAAC;AAAA,YAED;AAAA,8BAAAA,MAAC,SAAI,WAAU,gCACZ;AAAA,2BAAW,QAAQ,gBAAAD,KAAC,wBAAc,mBAAQ;AAAA,gBAC3C,gBAAAA,KAAC,SAAI,WAAU,oCACb,0BAAAA,KAAC,6BAAkB,MAAK,SAAQ,cAC7B,oBACH,GACF;AAAA,gBACC,UAAU,QACT,gBAAAA,KAAC,SAAI,WAAU,kCAAkC,kBAAO;AAAA,iBAE5D;AAAA,cAEA,gBAAAC,MAAC,SAAI,WAAU,mCACZ;AAAA,2BAAW,QACV,gBAAAA,MAAC,aAAQ,WAAU,mCACjB;AAAA,kCAAAD,KAAC,OAAE,WAAU,iCAAiC,wBAAa;AAAA,kBAC3D,gBAAAA,KAAC,OAAE,WAAU,gCAAgC,mBAAQ;AAAA,mBACvD;AAAA,gBAED,gBACC,gBAAAC,MAAC,aAAQ,WAAU,mCACjB;AAAA,kCAAAD,KAAC,OAAE,WAAU,iCACV,0BACH;AAAA,kBACA,gBAAAA,KAAC,QAAG,WAAU,gCACX,oBAAU,IAAI,CAAC,OAAO,MACrB,gBAAAA,KAAC,QAAY,mBAAJ,CAAU,CACpB,GACH;AAAA,mBACF;AAAA,iBAEJ;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAE/B,IAAO,2BAAQ;;;ACjGf,YAAYE,aAAW;AA6CX,gBAAAC,OAMA,QAAAC,aANA;AAvBZ,IAAM,uBAA6B,mBAGjC,CAAC,EAAE,OAAO,cAAc,YAAY,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnE;AAAA;AAAA;AAAA;AAAA,IAIE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA,QAEJ,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,sCAAsC;AAAA,cAClD,2CACE,gBAAgB;AAAA,YACpB,CAAC;AAAA,YAEA,gBAAM,IAAI,CAAC,MAAM,MAChB,gBAAAC,MAAC,QAAW,WAAU,qCAGpB;AAAA,8BAAAD;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBAEX,iBAAO,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA;AAAA,cAChC;AAAA,cACA,gBAAAC,MAAC,SAAI,WAAU,qCACb;AAAA,gCAAAD,MAAC,OAAE,WAAU,sCAAsC,eAAK,OAAM;AAAA,gBAC7D,KAAK,eAAe,QACnB,gBAAAA,MAAC,OAAE,WAAU,4CACV,eAAK,aACR;AAAA,gBAED,KAAK,UAAU,QACd,gBAAAA,MAAC,SAAI,WAAU,uCACZ,eAAK,QACR;AAAA,iBAEJ;AAAA,iBArBO,CAsBT,CACD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAO,+BAAQ;;;ACzEf,YAAYE,aAAW;AAkCnB,SACE,OAAAC,OADF,QAAAC,aAAA;AATJ,IAAM,uBAA6B,mBAGjC,CAAC,EAAE,QAAQ,UAAU,aAAa,WAAW,GAAG,MAAM,GAAG,QACzD,gBAAAD;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACtD,GAAG;AAAA,IAEJ,0BAAAC,MAAC,SAAI,WAAU,oCACb;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM,eAAe,OAAO,QAAQ;AAAA,UACpC,cAAY;AAAA,UAEX;AAAA;AAAA,MACH;AAAA,MACA,gBAAAA,MAAC,SAAI,WAAU,qCAAqC,UAAS;AAAA,OAC/D;AAAA;AACF,CACD;AAED,qBAAqB,cAAc;AAEnC,IAAO,+BAAQ;;;ACjDf,YAAYE,aAAW;AAiBjB,gBAAAC,aAAA;AAHN,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,aAAa,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjE,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,4BAA4B,eAAe,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx"]}
+{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx","../../src/NarrativeOrderedList/NarrativeOrderedList.tsx","../../src/NarrativeDataCallout/NarrativeDataCallout.tsx","../../src/AIContainer/AIContainer.tsx","../../src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx","../../src/NarrativeAttribution/NarrativeAttribution.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom\n * properties); consumers import the classes through\n * `@sproutsocial/racine/css/components`. Surface overrides are done with\n * standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeOrderedListProps } from \"./NarrativeOrderedListTypes\";\n\n/**\n * NarrativeOrderedList — a numbered list of action items. Each item pairs a\n * large ordinal (01, 02, …) with a title, an optional description, and an\n * optional call-to-action slot.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is driven by container queries, so it responds to the width the\n * component is actually given, not the viewport:\n * - `\"vertical\"` (default) → items stacked full-width, one per row.\n * - `\"horizontal\"` → items laid out as a row of equal columns once there is\n *   room, collapsing back to a stack when the container is narrow.\n *\n * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);\n * consumers import the classes through `@sproutsocial/racine/css/components`.\n * Overrides come via standard `className` / `style`.\n */\nconst NarrativeOrderedList = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeOrderedListProps\n>(({ items, orientation = \"vertical\", className, ...props }, ref) => {\n  return (\n    // The outer element establishes the query container. The ol inside switches\n    // direction based on this element's width — a container query can only style\n    // descendants of the container, never the container element itself.\n    <div\n      ref={ref}\n      className={cn(\"seeds-narrative-ordered-list\", className)}\n      {...props}\n    >\n      <ol\n        className={cn(\"seeds-narrative-ordered-list-track\", {\n          \"seeds-narrative-ordered-list-horizontal\":\n            orientation === \"horizontal\",\n        })}\n      >\n        {items.map((item, i) => (\n          <li key={i} className=\"seeds-narrative-ordered-list-item\">\n            {/* Decorative — the ol/li already convey order to assistive tech, so\n                hide the visible ordinal from it to avoid double-announcing. */}\n            <span\n              className=\"seeds-narrative-ordered-list-number\"\n              aria-hidden=\"true\"\n            >\n              {String(i + 1).padStart(2, \"0\")}\n            </span>\n            <div className=\"seeds-narrative-ordered-list-body\">\n              <p className=\"seeds-narrative-ordered-list-title\">{item.title}</p>\n              {item.description != null && (\n                <p className=\"seeds-narrative-ordered-list-description\">\n                  {item.description}\n                </p>\n              )}\n              {item.action != null && (\n                <div className=\"seeds-narrative-ordered-list-action\">\n                  {item.action}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n});\n\nNarrativeOrderedList.displayName = \"NarrativeOrderedList\";\n\nexport default NarrativeOrderedList;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDataCalloutProps } from \"./NarrativeDataCalloutTypes\";\n\n/**\n * NarrativeDataCallout — a horizontally oriented callout that pairs an injected\n * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).\n *\n * The kit ships no chart of its own; the `visual` slot accepts any node — the\n * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.\n * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's\n * `sparkline` slot).\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the\n * card look.\n *\n * Layout is a flex row driven by a container query, so it collapses to a stacked\n * column (visual on top, text below) based on the width the component is actually\n * given, not the viewport.\n *\n * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides come\n * via standard `className` / `style`.\n */\nconst NarrativeDataCallout = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeDataCalloutProps\n>(({ visual, children, visualLabel, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"seeds-narrative-data-callout\", className)}\n    {...props}\n  >\n    <div className=\"seeds-narrative-data-callout-row\">\n      <div\n        className=\"seeds-narrative-data-callout-visual\"\n        role={visualLabel != null ? \"img\" : undefined}\n        aria-label={visualLabel}\n      >\n        {visual}\n      </div>\n      <div className=\"seeds-narrative-data-callout-body\">{children}</div>\n    </div>\n  </div>\n));\n\nNarrativeDataCallout.displayName = \"NarrativeDataCallout\";\n\nexport default NarrativeDataCallout;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeAIContainerProps } from \"./AIContainerTypes\";\n\n/**\n * AIContainer — a rounded surface primitive with the AI gradient background.\n * Provides the outer shell (border-radius, shadow, overflow, gradient) without\n * any padding. Used by PullQuote and available as a standalone container.\n *\n * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.\n * - `vivid` — the full-saturation AI gradient with white text (always white).\n *\n * Styled via `ai-container.css` (Seeds CSS custom properties).\n */\nconst AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(\n  ({ children, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAIContainer.displayName = \"AIContainer\";\n\nexport default AIContainer;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport NarrativeAttribution from \"../NarrativeAttribution/NarrativeAttribution\";\nimport type { TypeNarrativeSocialMediaCardProps } from \"./NarrativeSocialMediaCardTypes\";\n\n/**\n * NarrativeSocialMediaCard — a narrative primitive that displays a social media\n * post card with a header (avatar + handle), content area, and footer with\n * engagement metadata (replies, likes, reposts, etc.).\n *\n * Styled via narrative-social-media-card.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is vertically stacked with clean typography and icon-based metadata in\n * the footer. Default has a gray background; use appearance=\"no-background\" to\n * remove the background and blend seamlessly with the page.\n */\nconst NarrativeSocialMediaCard = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSocialMediaCardProps\n>(\n  (\n    {\n      avatar,\n      avatarAlt,\n      displayName,\n      socialIcon,\n      image,\n      text,\n      meta,\n      appearance,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-social-media-card\",\n          appearance === \"no-background\" &&\n            \"seeds-narrative-social-media-card--no-background\",\n          className\n        )}\n        {...props}\n      >\n        <NarrativeAttribution\n          avatarUrl={avatar}\n          avatarAlt={avatarAlt}\n          userName={displayName}\n          socialIcon={socialIcon}\n        />\n\n        <div className=\"seeds-narrative-social-media-card-content\">\n          {image}\n          {text}\n        </div>\n\n        <div className=\"seeds-narrative-social-media-card-footer\">\n          {meta.map((item, index) => (\n            <div\n              key={index}\n              className=\"seeds-narrative-social-media-card-stat\"\n              aria-label={item.label}\n            >\n              {item.icon}\n              <span className=\"seeds-narrative-social-media-card-stat-value\">\n                {item.value}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSocialMediaCard.displayName = \"NarrativeSocialMediaCard\";\n\nexport default NarrativeSocialMediaCard;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeAttributionProps } from \"./NarrativeAttributionTypes\";\n\n/**\n * NarrativeAttribution — a narrative primitive that displays attribution\n * information for social media content, including an avatar, social network\n * icon, and user name.\n *\n * Styled via narrative-attribution.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is horizontal with avatar, social icon, and user name arranged\n * side by side. Surface overrides are done with standard className / style.\n */\nconst NarrativeAttribution = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeAttributionProps\n>(\n  (\n    {\n      avatarUrl,\n      avatarAlt = \"Profile avatar\",\n      userName,\n      socialIcon,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-attribution\", className)}\n        {...props}\n      >\n        <img\n          src={avatarUrl}\n          alt={avatarAlt}\n          className=\"seeds-narrative-attribution-avatar\"\n        />\n        <div className=\"seeds-narrative-attribution-social-icon\">\n          {socialIcon}\n        </div>\n        <span className=\"seeds-narrative-attribution-user-name\">\n          {userName}\n        </span>\n      </div>\n    );\n  }\n);\n\nNarrativeAttribution.displayName = \"NarrativeAttribution\";\n\nexport default NarrativeAttribution;\n"],"mappings":"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","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","React","React","jsx","jsxs","jsx","jsxs"]}

package/dist/index.d.mts

@@ -443,6 +443,69 @@ interface TypeAIContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps & React.RefAttributes<HTMLDivElement>>;
 
+interface TypeNarrativeSocialMediaCardMeta {
+    /** Icon for the metadata (e.g., reply, heart, repost). */
+    icon: React.ReactNode;
+    /** Number or formatted string value for the metadata. */
+    value: number | string;
+    /** Optional accessible label for the metadata. */
+    label?: string;
+}
+interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatar: string;
+    /** Alt text for the avatar image. */
+    avatarAlt: string;
+    /** Display name for the social media profile. */
+    displayName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+    /** Optional image to display above the text content. */
+    image?: React.ReactNode;
+    /** The text content of the social media post. */
+    text: React.ReactNode;
+    /** Array of metadata with icons and values (e.g., replies, likes, reposts). */
+    meta: TypeNarrativeSocialMediaCardMeta[];
+    /** Visual appearance of the card. Default has gray background, "no-background" removes the background. */
+    appearance?: "no-background";
+}
+
+/**
+ * NarrativeSocialMediaCard — a narrative primitive that displays a social media
+ * post card with a header (avatar + handle), content area, and footer with
+ * engagement metadata (replies, likes, reposts, etc.).
+ *
+ * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is vertically stacked with clean typography and icon-based metadata in
+ * the footer. Default has a gray background; use appearance="no-background" to
+ * remove the background and blend seamlessly with the page.
+ */
+declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatarUrl: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /** User name or display name for the social media profile. */
+    userName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+}
+
+/**
+ * NarrativeAttribution — a narrative primitive that displays attribution
+ * information for social media content, including an avatar, social network
+ * icon, and user name.
+ *
+ * Styled via narrative-attribution.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is horizontal with avatar, social icon, and user name arranged
+ * side by side. Surface overrides are done with standard className / style.
+ */
+declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -455,4 +518,4 @@ declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { AIContainer, EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.d.ts

@@ -443,6 +443,69 @@ interface TypeAIContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps & React.RefAttributes<HTMLDivElement>>;
 
+interface TypeNarrativeSocialMediaCardMeta {
+    /** Icon for the metadata (e.g., reply, heart, repost). */
+    icon: React.ReactNode;
+    /** Number or formatted string value for the metadata. */
+    value: number | string;
+    /** Optional accessible label for the metadata. */
+    label?: string;
+}
+interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatar: string;
+    /** Alt text for the avatar image. */
+    avatarAlt: string;
+    /** Display name for the social media profile. */
+    displayName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+    /** Optional image to display above the text content. */
+    image?: React.ReactNode;
+    /** The text content of the social media post. */
+    text: React.ReactNode;
+    /** Array of metadata with icons and values (e.g., replies, likes, reposts). */
+    meta: TypeNarrativeSocialMediaCardMeta[];
+    /** Visual appearance of the card. Default has gray background, "no-background" removes the background. */
+    appearance?: "no-background";
+}
+
+/**
+ * NarrativeSocialMediaCard — a narrative primitive that displays a social media
+ * post card with a header (avatar + handle), content area, and footer with
+ * engagement metadata (replies, likes, reposts, etc.).
+ *
+ * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is vertically stacked with clean typography and icon-based metadata in
+ * the footer. Default has a gray background; use appearance="no-background" to
+ * remove the background and blend seamlessly with the page.
+ */
+declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatarUrl: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /** User name or display name for the social media profile. */
+    userName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+}
+
+/**
+ * NarrativeAttribution — a narrative primitive that displays attribution
+ * information for social media content, including an avatar, social network
+ * icon, and user name.
+ *
+ * Styled via narrative-attribution.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is horizontal with avatar, social icon, and user name arranged
+ * side by side. Surface overrides are done with standard className / style.
+ */
+declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -455,4 +518,4 @@ declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { AIContainer, EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   AIContainer: () => AIContainer_default,
   EyebrowToken: () => EyebrowToken_default,
   MetricHighlight: () => MetricHighlight_default,
+  NarrativeAttribution: () => NarrativeAttribution_default,
   NarrativeContainer: () => NarrativeContainer_default,
   NarrativeDataCallout: () => NarrativeDataCallout_default,
   NarrativeDivider: () => NarrativeDivider_default,
@@ -40,6 +41,7 @@ __export(index_exports, {
   NarrativeHeadlineHighlight: () => NarrativeHeadlineHighlight_default,
   NarrativeHeadlineRoll: () => NarrativeHeadlineRoll_default,
   NarrativeOrderedList: () => NarrativeOrderedList_default,
+  NarrativeSocialMediaCard: () => NarrativeSocialMediaCard_default,
   NarrativeSummary: () => NarrativeSummary_default,
   PullQuote: () => PullQuote_default
 });
@@ -490,11 +492,111 @@ var AIContainer = React12.forwardRef(
 );
 AIContainer.displayName = "AIContainer";
 var AIContainer_default = AIContainer;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+var React14 = __toESM(require("react"));
+
+// src/NarrativeAttribution/NarrativeAttribution.tsx
+var React13 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var NarrativeAttribution = React13.forwardRef(
+  ({
+    avatarUrl,
+    avatarAlt = "Profile avatar",
+    userName,
+    socialIcon,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-attribution", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "img",
+            {
+              src: avatarUrl,
+              alt: avatarAlt,
+              className: "seeds-narrative-attribution-avatar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "seeds-narrative-attribution-social-icon", children: socialIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "seeds-narrative-attribution-user-name", children: userName })
+        ]
+      }
+    );
+  }
+);
+NarrativeAttribution.displayName = "NarrativeAttribution";
+var NarrativeAttribution_default = NarrativeAttribution;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NarrativeSocialMediaCard = React14.forwardRef(
+  ({
+    avatar,
+    avatarAlt,
+    displayName,
+    socialIcon,
+    image,
+    text,
+    meta,
+    appearance,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-social-media-card",
+          appearance === "no-background" && "seeds-narrative-social-media-card--no-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            NarrativeAttribution_default,
+            {
+              avatarUrl: avatar,
+              avatarAlt,
+              userName: displayName,
+              socialIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "seeds-narrative-social-media-card-content", children: [
+            image,
+            text
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "seeds-narrative-social-media-card-footer", children: meta.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              className: "seeds-narrative-social-media-card-stat",
+              "aria-label": item.label,
+              children: [
+                item.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "seeds-narrative-social-media-card-stat-value", children: item.value })
+              ]
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
+var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIContainer,
   EyebrowToken,
   MetricHighlight,
+  NarrativeAttribution,
   NarrativeContainer,
   NarrativeDataCallout,
   NarrativeDivider,
@@ -502,6 +604,7 @@ var AIContainer_default = AIContainer;
   NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll,
   NarrativeOrderedList,
+  NarrativeSocialMediaCard,
   NarrativeSummary,
   PullQuote
 });