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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../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":["/* Narrative Kit — composable narrative primitives.\n * Each primitive adds a single line below. No default export — this is a kit. */\nexport {\n  NarrativeContainer,\n  type TypeNarrativeContainerProps,\n} from \"./NarrativeContainer\";\n\nexport {\n  NarrativeHeadline,\n  NarrativeHeadlineHighlight,\n  NarrativeHeadlineRoll,\n  type TypeNarrativeHeadlineProps,\n  type TypeNarrativeHeadlineLevel,\n  type TypeNarrativeHeadlineHighlightProps,\n  type TypeNarrativeHeadlineRollProps,\n} from \"./NarrativeHeadline\";\n\nexport { PullQuote, type TypePullQuoteProps } from \"./PullQuote\";\n\nexport { EyebrowToken, type TypeEyebrowTokenProps } from \"./EyebrowToken\";\n\nexport {\n  NarrativeDivider,\n  type TypeNarrativeDividerProps,\n} from \"./NarrativeDivider\";\n\nexport {\n  MetricHighlight,\n  type TypeMetricHighlightProps,\n  type TypeMetricHighlightTrend,\n} from \"./MetricHighlight\";\n\nexport {\n  NarrativeSummary,\n  type TypeNarrativeSummaryProps,\n  type TypeNarrativeSummaryLayout,\n} from \"./NarrativeSummary\";\n\nexport {\n  NarrativeOrderedList,\n  type TypeNarrativeOrderedListProps,\n  type TypeNarrativeOrderedListItem,\n  type TypeNarrativeOrderedListOrientation,\n} from \"./NarrativeOrderedList\";\n\nexport {\n  NarrativeDataCallout,\n  type TypeNarrativeDataCalloutProps,\n} from \"./NarrativeDataCallout\";\n\nexport { AIContainer, type TypeAIContainerProps } from \"./AIContainer\";\n\nexport type { TypeNarrativeTone } from \"./_internal/types\";\n","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":"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","names":["React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../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":["/* Narrative Kit — composable narrative primitives.\n * Each primitive adds a single line below. No default export — this is a kit. */\nexport {\n  NarrativeContainer,\n  type TypeNarrativeContainerProps,\n} from \"./NarrativeContainer\";\n\nexport {\n  NarrativeHeadline,\n  NarrativeHeadlineHighlight,\n  NarrativeHeadlineRoll,\n  type TypeNarrativeHeadlineProps,\n  type TypeNarrativeHeadlineLevel,\n  type TypeNarrativeHeadlineHighlightProps,\n  type TypeNarrativeHeadlineRollProps,\n} from \"./NarrativeHeadline\";\n\nexport { PullQuote, type TypePullQuoteProps } from \"./PullQuote\";\n\nexport { EyebrowToken, type TypeEyebrowTokenProps } from \"./EyebrowToken\";\n\nexport {\n  NarrativeDivider,\n  type TypeNarrativeDividerProps,\n} from \"./NarrativeDivider\";\n\nexport {\n  MetricHighlight,\n  type TypeMetricHighlightProps,\n  type TypeMetricHighlightTrend,\n} from \"./MetricHighlight\";\n\nexport {\n  NarrativeSummary,\n  type TypeNarrativeSummaryProps,\n  type TypeNarrativeSummaryLayout,\n} from \"./NarrativeSummary\";\n\nexport {\n  NarrativeOrderedList,\n  type TypeNarrativeOrderedListProps,\n  type TypeNarrativeOrderedListItem,\n  type TypeNarrativeOrderedListOrientation,\n} from \"./NarrativeOrderedList\";\n\nexport {\n  NarrativeDataCallout,\n  type TypeNarrativeDataCalloutProps,\n} from \"./NarrativeDataCallout\";\n\nexport { AIContainer, type TypeAIContainerProps } from \"./AIContainer\";\n\nexport {\n  NarrativeSocialMediaCard,\n  type TypeNarrativeSocialMediaCardProps,\n  type TypeNarrativeSocialMediaCardMeta,\n} from \"./NarrativeSocialMediaCard\";\n\nexport {\n  NarrativeAttribution,\n  type TypeNarrativeAttributionProps,\n} from \"./NarrativeAttribution\";\n\nexport type { TypeNarrativeTone } from \"./_internal/types\";\n","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","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/narrative-attribution.css

@@ -0,0 +1,56 @@
+/**
+ * Seeds NarrativeAttribution component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-attribution">
+ *     <img class="seeds-narrative-attribution-avatar" />
+ *     <div class="seeds-narrative-attribution-social-icon">...</div>
+ *     <span class="seeds-narrative-attribution-user-name">...</span>
+ *   </div>
+ */
+
+@layer components {
+
+/* Main container — horizontal layout with avatar, social icon, and user name. */
+.seeds-narrative-attribution {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */;
+  font-family: var(--font-family);
+}
+
+/* Circular avatar image — fixed size with rounded corners. */
+.seeds-narrative-attribution-avatar {
+  width: var(--space-450); /* 24px */
+  height: var(--space-450); /* 24px */
+  border-radius: var(--radius-circular); /* 50% */
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* Social network icon container — flexible sizing for partner logos. */
+.seeds-narrative-attribution-social-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* User name text — bold headline text with ellipsis overflow. */
+.seeds-narrative-attribution-user-name {
+  overflow: hidden;
+  color: var(--color-text-headline);
+  text-overflow: ellipsis;
+  font-family: var(--font-family);
+  font-size: var(--text-base-font-size, 14px);
+  font-style: normal;
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--text-base-line-height, 24px);
+}
+
+}

package/dist/narrative-social-media-card.css

@@ -0,0 +1,79 @@
+/**
+ * Seeds NarrativeSocialMediaCard component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-social-media-card">
+ *     <div class="seeds-narrative-social-media-card-header">...</div>
+ *     <div class="seeds-narrative-social-media-card-content">...</div>
+ *     <div class="seeds-narrative-social-media-card-footer">...</div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Main card container — gray background with rounded corners and padding.
+   Uses Seeds tokens for spacing, colors, and radius to match the design system. */
+.seeds-narrative-social-media-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 320px;
+  padding: var(--space-450); /* 24px */
+  border-radius: var(--radius-500); /* 6px */
+  background-color: var(--color-app-bg-base);
+  font-family: var(--font-family);
+  color: var(--color-text-body);
+}
+
+/* No background — transparent background for cards that blend seamlessly with the page. */
+.seeds-narrative-social-media-card--no-background {
+  background-color: transparent;
+}
+
+/* Main content area — standard body text styling. */
+.seeds-narrative-social-media-card-content {
+  flex: 1;
+  margin-top: var(--space-400); /* 16px */
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-text-body);
+}
+
+/* Footer section — horizontal layout for stats with equal spacing. */
+.seeds-narrative-social-media-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-400); /* 16px */
+  margin-top: var(--space-400); /* 16px */;
+}
+
+/* Hide footer when empty (no metadata items). */
+.seeds-narrative-social-media-card-footer:empty {
+  display: none;
+}
+
+/* Individual stat container — icon + value in horizontal layout. */
+.seeds-narrative-social-media-card-stat {
+  display: flex;
+  align-items: center;
+  gap: var(--space-200); /* 4px */
+}
+
+/* Stat value text — monospace font for numeric values. */
+.seeds-narrative-social-media-card-stat-value {
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-text-body);
+}
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-narrative-kit",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -22,10 +22,12 @@
     "./dist/narrative-divider.css": "./dist/narrative-divider.css",
     "./dist/narrative-ordered-list.css": "./dist/narrative-ordered-list.css",
     "./dist/narrative-data-callout.css": "./dist/narrative-data-callout.css",
-    "./dist/ai-container.css": "./dist/ai-container.css"
+    "./dist/ai-container.css": "./dist/ai-container.css",
+    "./dist/narrative-social-media-card.css": "./dist/narrative-social-media-card.css",
+    "./dist/narrative-attribution.css": "./dist/narrative-attribution.css"
   },
   "scripts": {
-    "build": "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",
+    "build": "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",
     "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
@@ -42,6 +44,8 @@
     "@sproutsocial/seeds-react-button": "*",
     "@sproutsocial/seeds-react-data-viz": "*",
     "@sproutsocial/seeds-react-grid": "^0.2.6",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-partner-logo": "*",
     "@sproutsocial/seeds-react-text": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/NarrativeAttribution/NarrativeAttribution.stories.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import NarrativeAttribution from "./NarrativeAttribution";
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import "../narrative-attribution.css";
+
+const meta = {
+  title: "Narrative Kit/NarrativeAttribution",
+  component: NarrativeAttribution,
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
+    userName: "Sprout Social",
+  },
+} satisfies Meta<typeof NarrativeAttribution>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Twitter/X attribution with partner logo. */
+export const Twitter: Story = {
+  args: {
+    socialIcon: <PartnerLogo partnerName="twitter" size="small" />,
+  },
+};
+
+/** Instagram attribution with partner logo. */
+export const Instagram: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka",
+    userName: "design.studio",
+    socialIcon: <PartnerLogo partnerName="instagram" size="small" />,
+  },
+};
+
+/** LinkedIn attribution with partner logo. */
+export const LinkedIn: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bailey",
+    userName: "Tech Company",
+    socialIcon: <PartnerLogo partnerName="linkedin" size="small" />,
+  },
+};
+
+/** Facebook attribution with partner logo. */
+export const Facebook: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Charlie",
+    userName: "Community Page",
+    socialIcon: <PartnerLogo partnerName="facebook" size="small" />,
+  },
+};
+
+/** YouTube attribution with partner logo. */
+export const YouTube: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Dakota",
+    userName: "Creator Channel",
+    socialIcon: <PartnerLogo partnerName="youtube" size="small" />,
+  },
+};
+
+/** TikTok attribution with partner logo. */
+export const TikTok: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ellis",
+    userName: "viral.content",
+    socialIcon: <PartnerLogo partnerName="tiktok" size="small" />,
+  },
+};
+
+/** Threads attribution with partner logo icon. */
+export const Threads: Story = {
+  args: {
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan",
+    userName: "threads.user",
+    socialIcon: <PartnerLogo partnerName="threads" size="small" />,
+  },
+};

package/src/NarrativeAttribution/NarrativeAttribution.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeNarrativeAttributionProps } from "./NarrativeAttributionTypes";
+
+/**
+ * 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.
+ */
+const NarrativeAttribution = React.forwardRef<
+  HTMLDivElement,
+  TypeNarrativeAttributionProps
+>(
+  (
+    {
+      avatarUrl,
+      avatarAlt = "Profile avatar",
+      userName,
+      socialIcon,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("seeds-narrative-attribution", className)}
+        {...props}
+      >
+        <img
+          src={avatarUrl}
+          alt={avatarAlt}
+          className="seeds-narrative-attribution-avatar"
+        />
+        <div className="seeds-narrative-attribution-social-icon">
+          {socialIcon}
+        </div>
+        <span className="seeds-narrative-attribution-user-name">
+          {userName}
+        </span>
+      </div>
+    );
+  }
+);
+
+NarrativeAttribution.displayName = "NarrativeAttribution";
+
+export default NarrativeAttribution;

package/src/NarrativeAttribution/NarrativeAttributionTypes.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export 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;
+}

package/src/NarrativeAttribution/index.ts

@@ -0,0 +1,2 @@
+export { default as NarrativeAttribution } from "./NarrativeAttribution";
+export type { TypeNarrativeAttributionProps } from "./NarrativeAttributionTypes";

package/src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import NarrativeSocialMediaCard from "./NarrativeSocialMediaCard";
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import "../narrative-social-media-card.css";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+const metaArray = [
+  { icon: <Icon name="reply-outline" />, value: 12, label: "Replies" },
+  { icon: <Icon name="heart-outline" />, value: 128, label: "Likes" },
+  { icon: <Icon name="repost-outline" />, value: 42, label: "Reposts" },
+];
+
+const meta = {
+  title: "Narrative Kit/NarrativeSocialMediaCard",
+  component: NarrativeSocialMediaCard,
+  args: {
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
+    avatarAlt: "Profile avatar",
+    displayName: "Sprout Social",
+    socialIcon: <PartnerLogo partnerName="twitter" size="small" />,
+    meta: metaArray,
+    text: "Just launched our new product! Check it out and let us know what you think.",
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: "24px",
+          backgroundColor: "white",
+          minHeight: "400px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NarrativeSocialMediaCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A typical social media card with gray background. */
+export const Default: Story = {};
+
+/** A card with longer content to show text wrapping. */
+export const LongContent: Story = {
+  args: {
+    text: "We're thrilled to announce our biggest update yet! After months of hard work from the team, we're rolling out features that will transform how you connect with your audience. Stay tuned for more details coming soon.",
+  },
+};
+
+/** A card with a horizontal landscape image in the content area. */
+export const WithHorizontalImage: Story = {
+  args: {
+    displayName: "Travel Blogger",
+    meta: metaArray,
+    image: (
+      <img
+        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
+        alt="Mountain sunset landscape"
+        style={{
+          width: "100%",
+          height: "auto",
+          borderRadius: "8px",
+          display: "block",
+          marginBottom: "12px",
+        }}
+      />
+    ),
+    text: "Just had an amazing sunset hike in the mountains! Nature never disappoints.",
+  },
+};
+
+/** A card with a tall vertical image in the content area. */
+export const WithVerticalImage: Story = {
+  args: {
+    displayName: "Fashion Magazine",
+    meta: metaArray,
+    image: (
+      <img
+        src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=400&h=600&fit=crop"
+        alt="Fashion portrait"
+        style={{
+          width: "100%",
+          height: "auto",
+          borderRadius: "8px",
+          display: "block",
+          marginBottom: "12px",
+        }}
+      />
+    ),
+    text: "New collection dropping this Friday. Stay tuned for the full reveal!",
+  },
+};
+
+/** A card with no metadata. */
+export const WithoutMetaData: Story = {
+  args: {
+    displayName: "Brand New Account",
+    meta: [],
+    text: "First post! Looking forward to connecting with everyone here.",
+  },
+};
+
+/** A card with no background that blends with the page. */
+export const NoBackground: Story = {
+  args: {
+    appearance: "no-background",
+  },
+};