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

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/MetricHighlight/MetricHighlight.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>(({ children, headingLevel = 2, className, ...props }, ref) => {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <Heading\n      ref={ref}\n      className={cn(\"seeds-narrative-headline\", className)}\n      {...props}\n    >\n      {children}\n    </Heading>\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 className=\"seeds-narrative-headline-roll-sizer\" aria-hidden=\"true\">\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` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Surface overrides\n * are done with 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-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\n      ref={ref}\n      className={cn(\"seeds-eyebrow-token\", className)}\n      {...props}\n    >\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 {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Fixed viewBox the sparkline normalizes into; CSS stretches it to fit. */\nconst SPARK_VIEWBOX_WIDTH = 100;\nconst SPARK_VIEWBOX_HEIGHT = 32;\n/** Inset so the stroke at the min/max points isn't clipped by the viewBox edge. */\nconst SPARK_PADDING = 2;\n\n/**\n * Default sparkline series used when the consumer doesn't pass `data` — a gently\n * rising wave. It's reversed for a downward trend so the line slopes to match.\n */\nconst DEFAULT_SPARK = [6, 10, 8, 13, 11, 16];\n\n/**\n * Build a smooth SVG path through `points` using a Catmull-Rom spline converted\n * to cubic béziers. Each segment's control points are derived from its\n * neighbors, so the curve passes through every data point with soft, rounded\n * transitions (matching the design) rather than sharp polyline corners.\n */\nconst smoothPath = (points: { x: number; y: number }[]) => {\n  if (points.length < 2) {\n    const p = points[0];\n    return p ? `M ${p.x},${p.y}` : \"\";\n  }\n\n  let d = `M ${points[0]!.x.toFixed(2)},${points[0]!.y.toFixed(2)}`;\n  for (let i = 0; i < points.length - 1; i++) {\n    // The loop bound guarantees p1 and p2; p0/p3 clamp to the endpoints.\n    const p1 = points[i]!;\n    const p2 = points[i + 1]!;\n    const p0 = points[i - 1] ?? p1;\n    const p3 = points[i + 2] ?? p2;\n    // Catmull-Rom → bézier control points (tension 1/6).\n    const cp1x = p1.x + (p2.x - p0.x) / 6;\n    const cp1y = p1.y + (p2.y - p0.y) / 6;\n    const cp2x = p2.x - (p3.x - p1.x) / 6;\n    const cp2y = p2.y - (p3.y - p1.y) / 6;\n    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(\n      2\n    )},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;\n  }\n  return d;\n};\n\n/**\n * Sparkline — an inline SVG path normalized from `data` into a fixed viewBox and\n * smoothed into a soft curve. `preserveAspectRatio=\"none\"` plus a non-scaling\n * stroke (set in CSS) lets a single path stretch to any width/height while\n * keeping a crisp line.\n */\nconst Sparkline = ({\n  data,\n  negative,\n}: {\n  data: number[];\n  negative?: boolean;\n}) => {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const range = max - min || 1;\n  const usableHeight = SPARK_VIEWBOX_HEIGHT - SPARK_PADDING * 2;\n\n  const points = data.map((value, i) => ({\n    x:\n      data.length === 1\n        ? SPARK_VIEWBOX_WIDTH / 2\n        : (i / (data.length - 1)) * SPARK_VIEWBOX_WIDTH,\n    // Invert y so larger values sit higher in the chart.\n    y: SPARK_PADDING + (1 - (value - min) / range) * usableHeight,\n  }));\n\n  return (\n    <svg\n      className={cn(\"seeds-metric-highlight-spark\", {\n        \"seeds-metric-highlight-spark-negative\": Boolean(negative),\n      })}\n      viewBox={`0 0 ${SPARK_VIEWBOX_WIDTH} ${SPARK_VIEWBOX_HEIGHT}`}\n      preserveAspectRatio=\"none\"\n      aria-hidden\n      focusable={false}\n    >\n      <path d={smoothPath(points)} fill=\"none\" strokeLinecap=\"round\" />\n    </svg>\n  );\n};\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 = ({ direction = \"up\", value, ...rest }: 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 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<HTMLDivElement, TypeMetricHighlightProps>(\n  (\n    {\n      label,\n      value,\n      trend,\n      data,\n      chart = true,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const isDown = trend?.direction === \"down\";\n    // Fall back to a sensible default series, sloped to match the trend, so the\n    // chart renders without the consumer wiring up data. An explicit `data`\n    // (including an empty array to opt out) always wins.\n    const resolvedData =\n      data ?? (isDown ? [...DEFAULT_SPARK].reverse() : DEFAULT_SPARK);\n    const showChart = chart && resolvedData.length > 0;\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        {showChart && <Sparkline data={resolvedData} negative={isDown} />}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n"],"mappings":"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","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","jsxs"]}
+{"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":"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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"]}

package/dist/index.d.mts

@@ -23,6 +23,8 @@ declare const NarrativeContainer: React.ForwardRefExoticComponent<TypeNarrativeC
 
 /** Heading level the headline text renders as. */
 type TypeNarrativeHeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Visual size of the headline. Independent of the semantic heading level. */
+type TypeNarrativeHeadlineSize = "default" | "small";
 interface TypeNarrativeHeadlineProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * The headline text. Wrap part of it in `<NarrativeHeadlineHighlight>` for a
@@ -36,6 +38,12 @@ interface TypeNarrativeHeadlineProps extends React.HTMLAttributes<HTMLHeadingEle
      * @default 2
      */
     headingLevel?: TypeNarrativeHeadlineLevel;
+    /**
+     * Visual size. `"default"` is the display size (32px / 40px); `"small"` is the
+     * compact size (24px / 32px) used inside denser layouts like NarrativeSummary.
+     * @default "default"
+     */
+    size?: TypeNarrativeHeadlineSize;
 }
 interface TypeNarrativeHeadlineHighlightProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Text painted with the AI gradient. */
@@ -132,9 +140,10 @@ interface TypePullQuoteProps extends React.HTMLAttributes<HTMLElement> {
  * optional attribution row (author name, avatar, network).
  *
  * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.
- * Styled via `pull-quote.css` (Seeds CSS custom properties); consumers import
- * the classes through `@sproutsocial/racine/css/components`. Surface overrides
- * are done with standard `className` / `style`.
+ * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom
+ * properties); consumers import the classes through
+ * `@sproutsocial/racine/css/components`. Surface overrides are done with
+ * standard `className` / `style`.
  */
 declare const PullQuote: React.ForwardRefExoticComponent<TypePullQuoteProps & React.RefAttributes<HTMLElement>>;
 
@@ -155,6 +164,23 @@ interface TypeEyebrowTokenProps extends React.HTMLAttributes<HTMLSpanElement> {
  */
 declare const EyebrowToken: React.ForwardRefExoticComponent<TypeEyebrowTokenProps & React.RefAttributes<HTMLSpanElement>>;
 
+/** NarrativeDivider takes no extra props — just standard <hr> attributes. */
+type TypeNarrativeDividerProps = React.HTMLAttributes<HTMLHRElement>;
+
+/**
+ * NarrativeDivider — a full-width, 1px horizontal rule that separates sections
+ * within a narrative brief (e.g. a row of metrics from the headline/summary
+ * block below it).
+ *
+ * Renders a semantic <hr> stripped of its user-agent margins and borders, then
+ * draws a single 1px line with the container-border-base token (#dee1e1, which
+ * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom
+ * properties); consumers import the classes through
+ * @sproutsocial/racine/css/components. Overrides come via standard className /
+ * style.
+ */
+declare const NarrativeDivider: React.ForwardRefExoticComponent<TypeNarrativeDividerProps & React.RefAttributes<HTMLHRElement>>;
+
 interface TypeMetricHighlightTrend {
     /**
      * Direction of movement. Selects the arrow glyph and the sentiment color of
@@ -181,16 +207,13 @@ interface TypeMetricHighlightProps extends React.HTMLAttributes<HTMLDivElement>
     /** Optional trend badge — a directional arrow plus an optional value. */
     trend?: TypeMetricHighlightTrend;
     /**
-     * Sparkline data points. When omitted, a sensible default series is used
-     * (sloped to match `trend`). Pass an explicit array to override, or an empty
-     * array to opt out of the chart.
-     */
-    data?: number[];
-    /**
-     * Render the sparkline.
-     * @default true
+     * Chart slot. When provided, this node renders in the chart area beside/below
+     * the metric — e.g. a `<SparklineChart />` from
+     * `@sproutsocial/seeds-react-data-viz/sparkline`. Omit it to render the metric
+     * on its own. The injected node controls its own look; the slot only sizes and
+     * centers it (pass `className="h-full w-full"` to fill).
      */
-    chart?: boolean;
+    sparkline?: React.ReactNode;
     /**
      * Layout direction.
      * - `horizontal` — metric block beside the sparkline.
@@ -216,7 +239,9 @@ interface TypeMetricHighlightProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * MetricHighlight — a narrative primitive that spotlights a single metric: a
  * label, a large monospace value, an optional trend badge (a directional arrow
- * plus an optional number such as "240%"), and an optional sparkline.
+ * plus an optional number such as "240%"), and an optional chart supplied via
+ * the `sparkline` slot (e.g. a `<SparklineChart />` from
+ * `@sproutsocial/seeds-react-data-viz/sparkline`).
  *
  * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers
  * import the classes through `@sproutsocial/racine/css/components`. Layout flexes
@@ -225,6 +250,199 @@ interface TypeMetricHighlightProps extends React.HTMLAttributes<HTMLDivElement>
  */
 declare const MetricHighlight: React.ForwardRefExoticComponent<TypeMetricHighlightProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Column arrangement.
+ * - `"three-column"`: lead | Summary | Key themes, three side-by-side columns.
+ * - `"two-column"`: a 1/3 | 2/3 split — lead on the left, with Summary and Key
+ *   themes stacked together in the wider right column.
+ */
+type TypeNarrativeSummaryLayout = "three-column" | "two-column";
+interface TypeNarrativeSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Kicker shown in an `EyebrowToken` above the headline (e.g. a date). Omit to
+     * hide the eyebrow entirely.
+     */
+    eyebrow?: React.ReactNode;
+    /** Headline text — rendered via `NarrativeHeadline` at `size="small"`. */
+    headline: React.ReactNode;
+    /**
+     * Heading element the headline renders as, for document outline /
+     * accessibility.
+     * @default 2
+     */
+    headingLevel?: TypeNarrativeHeadlineLevel;
+    /**
+     * Optional action, typically a `<Button>`. Rendered below the headline only
+     * when provided. Pass a Button without system props so it renders the Tailwind
+     * path (e.g. `<Button appearance="primary">Action</Button>`).
+     *
+     * Note: in the MVP this will most often be left unset (null) — the AC is
+     * poorly defined at this time and needs more definition before the data model
+     * will properly support it.
+     */
+    action?: React.ReactNode;
+    /** Summary body content. The section is omitted when this is empty. */
+    summary?: React.ReactNode;
+    /**
+     * Label above the summary.
+     * @default "Summary"
+     */
+    summaryLabel?: React.ReactNode;
+    /**
+     * Key themes, rendered as a bulleted list. The section is omitted when this
+     * is empty.
+     */
+    keyThemes?: string[];
+    /**
+     * Label above the key themes.
+     * @default "Key themes"
+     */
+    keyThemesLabel?: React.ReactNode;
+    /**
+     * Column arrangement. `"two-column"` is a 1/3 | 2/3 split.
+     * @default "three-column"
+     */
+    layout?: TypeNarrativeSummaryLayout;
+}
+
+/**
+ * NarrativeSummary — a composed narrative block that pairs a lead column
+ * (eyebrow + headline + optional action) with a Summary section and a Key
+ * themes list.
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories / playground).
+ *
+ * Layout is CSS Grid driven by container queries, so the columns collapse based
+ * on the width the component is actually given, not the viewport:
+ * - `"three-column"` → lead | Summary | Key themes.
+ * - `"two-column"` → a 1/3 | 2/3 split with Summary and Key themes stacked in
+ *   the wider column.
+ *
+ * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides
+ * come via standard `className` / `style`.
+ */
+declare const NarrativeSummary: React.ForwardRefExoticComponent<TypeNarrativeSummaryProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Item arrangement.
+ * - `"vertical"`: items stacked full-width, one per row (the default).
+ * - `"horizontal"`: items laid out as a row of equal columns that collapses
+ *   back to a stack when the container is narrow (container query).
+ */
+type TypeNarrativeOrderedListOrientation = "vertical" | "horizontal";
+interface TypeNarrativeOrderedListItem {
+    /** Bold action title for the item. A plain string or any React node. */
+    title: React.ReactNode;
+    /**
+     * Descriptive text below the title. A plain string or any React node. The
+     * paragraph is omitted when this is empty.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional call-to-action rendered below the description, only when provided.
+     * Typically a Seeds `<Button>` in an AI appearance (e.g.
+     * `appearance="ai-secondary"`). Pass it without system props so it renders the
+     * Tailwind path — same as NarrativeSummary's `action` slot.
+     */
+    action?: React.ReactNode;
+}
+interface TypeNarrativeOrderedListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The ordered items. Numbered automatically (01, 02, …) in order. */
+    items: TypeNarrativeOrderedListItem[];
+    /**
+     * Item arrangement. `"horizontal"` lays items in a row of equal columns that
+     * collapses to a stack when the container is narrow; `"vertical"` is always
+     * stacked.
+     * @default "vertical"
+     */
+    orientation?: TypeNarrativeOrderedListOrientation;
+}
+
+/**
+ * NarrativeOrderedList — a numbered list of action items. Each item pairs a
+ * large ordinal (01, 02, …) with a title, an optional description, and an
+ * optional call-to-action slot.
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories / playground).
+ *
+ * Layout is driven by container queries, so it responds to the width the
+ * component is actually given, not the viewport:
+ * - `"vertical"` (default) → items stacked full-width, one per row.
+ * - `"horizontal"` → items laid out as a row of equal columns once there is
+ *   room, collapsing back to a stack when the container is narrow.
+ *
+ * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);
+ * consumers import the classes through `@sproutsocial/racine/css/components`.
+ * Overrides come via standard `className` / `style`.
+ */
+declare const NarrativeOrderedList: React.ForwardRefExoticComponent<TypeNarrativeOrderedListProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeDataCalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data-viz component rendered in the left slot (occupies ~1/3 of the width).
+     * The kit ships no chart of its own — drop in any data-viz node, e.g. a v2
+     * `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+     */
+    visual: React.ReactNode;
+    /** Body copy / description occupying the right two-thirds. */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the visual slot region. Omit when the injected visual
+     * already carries its own description/label.
+     */
+    visualLabel?: string;
+}
+
+/**
+ * NarrativeDataCallout — a horizontally oriented callout that pairs an injected
+ * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).
+ *
+ * The kit ships no chart of its own; the `visual` slot accepts any node — the
+ * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+ * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's
+ * `sparkline` slot).
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the
+ * card look.
+ *
+ * Layout is a flex row driven by a container query, so it collapses to a stacked
+ * column (visual on top, text below) based on the width the component is actually
+ * given, not the viewport.
+ *
+ * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides come
+ * via standard `className` / `style`.
+ */
+declare const NarrativeDataCallout: React.ForwardRefExoticComponent<TypeNarrativeDataCalloutProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeAIContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content rendered inside the container. */
+    children?: React.ReactNode;
+    /**
+     * Visual treatment of the AI gradient surface.
+     * - `subtle` — a light 20% gradient tint over the base surface with dark text.
+     * - `vivid` — the full-saturation AI gradient with white text (always white).
+     * @default "subtle"
+     */
+    appearance?: "subtle" | "vivid";
+}
+
+/**
+ * AIContainer — a rounded surface primitive with the AI gradient background.
+ * Provides the outer shell (border-radius, shadow, overflow, gradient) without
+ * any padding. Used by PullQuote and available as a standalone container.
+ *
+ * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.
+ * - `vivid` — the full-saturation AI gradient with white text (always white).
+ *
+ * Styled via `ai-container.css` (Seeds CSS custom properties).
+ */
+declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -237,4 +455,4 @@ declare const MetricHighlight: React.ForwardRefExoticComponent<TypeMetricHighlig
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, PullQuote, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeTone, type TypePullQuoteProps };
+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 };