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

package/.turbo/turbo-build.log

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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sproutsocial/seeds-react-narrative-kit
 
+## 0.6.1
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+
+## 0.6.0
+
+### Minor Changes
+
+- 0f4bfe2: Add `NarrativeSection` primitive (a titled wrapper that stacks a section title above a content slot) and make `NarrativeContainer` / `MetricHighlight` reflow correctly at narrow widths.
+
+  - `NarrativeContainer`: let the container and its layout descendants shrink below their content (`min-width: 0` via a zero-specificity `:where()` rule) so grid/flex tracks collapse to their fair share instead of forcing the column wider than the padded surface and clipping under `overflow: hidden`.
+  - `MetricHighlight`: wrap the fixed-width chart onto its own line (and the trend pill under the value at the tightest widths) when the horizontal card is too narrow to fit them side by side, instead of overflowing.
+
+### Patch Changes
+
+- Updated dependencies [85f9728]
+- Updated dependencies [fa7d859]
+  - @sproutsocial/seeds-react-theme@4.2.0
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -542,6 +542,27 @@ var NarrativeSocialMediaCard = React14.forwardRef(
 );
 NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
 var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
+
+// src/NarrativeSection/NarrativeSection.tsx
+import * as React15 from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var NarrativeSection = React15.forwardRef(({ sectionTitle, headingLevel = 2, children, className, ...props }, ref) => {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs9(
+    "section",
+    {
+      ref,
+      className: cn("seeds-narrative-section", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx15(Heading, { className: "seeds-narrative-section-title", children: sectionTitle }),
+        children != null && /* @__PURE__ */ jsx15("div", { className: "seeds-narrative-section-content", children })
+      ]
+    }
+  );
+});
+NarrativeSection.displayName = "NarrativeSection";
+var NarrativeSection_default = NarrativeSection;
 export {
   AIContainer_default as AIContainer,
   EyebrowToken_default as EyebrowToken,
@@ -554,6 +575,7 @@ export {
   NarrativeHeadlineHighlight_default as NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll_default as NarrativeHeadlineRoll,
   NarrativeOrderedList_default as NarrativeOrderedList,
+  NarrativeSection_default as NarrativeSection,
   NarrativeSocialMediaCard_default as NarrativeSocialMediaCard,
   NarrativeSummary_default as NarrativeSummary,
   PullQuote_default as PullQuote

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx","../../src/NarrativeOrderedList/NarrativeOrderedList.tsx","../../src/NarrativeDataCallout/NarrativeDataCallout.tsx","../../src/AIContainer/AIContainer.tsx","../../src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx","../../src/NarrativeAttribution/NarrativeAttribution.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom\n * properties); consumers import the classes through\n * `@sproutsocial/racine/css/components`. Surface overrides are done with\n * standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeOrderedListProps } from \"./NarrativeOrderedListTypes\";\n\n/**\n * NarrativeOrderedList — a numbered list of action items. Each item pairs a\n * large ordinal (01, 02, …) with a title, an optional description, and an\n * optional call-to-action slot.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is driven by container queries, so it responds to the width the\n * component is actually given, not the viewport:\n * - `\"vertical\"` (default) → items stacked full-width, one per row.\n * - `\"horizontal\"` → items laid out as a row of equal columns once there is\n *   room, collapsing back to a stack when the container is narrow.\n *\n * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);\n * consumers import the classes through `@sproutsocial/racine/css/components`.\n * Overrides come via standard `className` / `style`.\n */\nconst NarrativeOrderedList = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeOrderedListProps\n>(({ items, orientation = \"vertical\", className, ...props }, ref) => {\n  return (\n    // The outer element establishes the query container. The ol inside switches\n    // direction based on this element's width — a container query can only style\n    // descendants of the container, never the container element itself.\n    <div\n      ref={ref}\n      className={cn(\"seeds-narrative-ordered-list\", className)}\n      {...props}\n    >\n      <ol\n        className={cn(\"seeds-narrative-ordered-list-track\", {\n          \"seeds-narrative-ordered-list-horizontal\":\n            orientation === \"horizontal\",\n        })}\n      >\n        {items.map((item, i) => (\n          <li key={i} className=\"seeds-narrative-ordered-list-item\">\n            {/* Decorative — the ol/li already convey order to assistive tech, so\n                hide the visible ordinal from it to avoid double-announcing. */}\n            <span\n              className=\"seeds-narrative-ordered-list-number\"\n              aria-hidden=\"true\"\n            >\n              {String(i + 1).padStart(2, \"0\")}\n            </span>\n            <div className=\"seeds-narrative-ordered-list-body\">\n              <p className=\"seeds-narrative-ordered-list-title\">{item.title}</p>\n              {item.description != null && (\n                <p className=\"seeds-narrative-ordered-list-description\">\n                  {item.description}\n                </p>\n              )}\n              {item.action != null && (\n                <div className=\"seeds-narrative-ordered-list-action\">\n                  {item.action}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n});\n\nNarrativeOrderedList.displayName = \"NarrativeOrderedList\";\n\nexport default NarrativeOrderedList;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDataCalloutProps } from \"./NarrativeDataCalloutTypes\";\n\n/**\n * NarrativeDataCallout — a horizontally oriented callout that pairs an injected\n * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).\n *\n * The kit ships no chart of its own; the `visual` slot accepts any node — the\n * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.\n * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's\n * `sparkline` slot).\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the\n * card look.\n *\n * Layout is a flex row driven by a container query, so it collapses to a stacked\n * column (visual on top, text below) based on the width the component is actually\n * given, not the viewport.\n *\n * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides come\n * via standard `className` / `style`.\n */\nconst NarrativeDataCallout = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeDataCalloutProps\n>(({ visual, children, visualLabel, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"seeds-narrative-data-callout\", className)}\n    {...props}\n  >\n    <div className=\"seeds-narrative-data-callout-row\">\n      <div\n        className=\"seeds-narrative-data-callout-visual\"\n        role={visualLabel != null ? \"img\" : undefined}\n        aria-label={visualLabel}\n      >\n        {visual}\n      </div>\n      <div className=\"seeds-narrative-data-callout-body\">{children}</div>\n    </div>\n  </div>\n));\n\nNarrativeDataCallout.displayName = \"NarrativeDataCallout\";\n\nexport default NarrativeDataCallout;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeAIContainerProps } from \"./AIContainerTypes\";\n\n/**\n * AIContainer — a rounded surface primitive with the AI gradient background.\n * Provides the outer shell (border-radius, shadow, overflow, gradient) without\n * any padding. Used by PullQuote and available as a standalone container.\n *\n * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.\n * - `vivid` — the full-saturation AI gradient with white text (always white).\n *\n * Styled via `ai-container.css` (Seeds CSS custom properties).\n */\nconst AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(\n  ({ children, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAIContainer.displayName = \"AIContainer\";\n\nexport default AIContainer;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport NarrativeAttribution from \"../NarrativeAttribution/NarrativeAttribution\";\nimport type { TypeNarrativeSocialMediaCardProps } from \"./NarrativeSocialMediaCardTypes\";\n\n/**\n * NarrativeSocialMediaCard — a narrative primitive that displays a social media\n * post card with a header (avatar + handle), content area, and footer with\n * engagement metadata (replies, likes, reposts, etc.).\n *\n * Styled via narrative-social-media-card.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is vertically stacked with clean typography and icon-based metadata in\n * the footer. Default has a gray background; use appearance=\"no-background\" to\n * remove the background and blend seamlessly with the page.\n */\nconst NarrativeSocialMediaCard = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSocialMediaCardProps\n>(\n  (\n    {\n      avatar,\n      avatarAlt,\n      displayName,\n      socialIcon,\n      image,\n      text,\n      meta,\n      appearance,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-social-media-card\",\n          appearance === \"no-background\" &&\n            \"seeds-narrative-social-media-card--no-background\",\n          className\n        )}\n        {...props}\n      >\n        <NarrativeAttribution\n          avatarUrl={avatar}\n          avatarAlt={avatarAlt}\n          userName={displayName}\n          socialIcon={socialIcon}\n        />\n\n        <div className=\"seeds-narrative-social-media-card-content\">\n          {image}\n          {text}\n        </div>\n\n        <div className=\"seeds-narrative-social-media-card-footer\">\n          {meta.map((item, index) => (\n            <div\n              key={index}\n              className=\"seeds-narrative-social-media-card-stat\"\n              aria-label={item.label}\n            >\n              {item.icon}\n              <span className=\"seeds-narrative-social-media-card-stat-value\">\n                {item.value}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSocialMediaCard.displayName = \"NarrativeSocialMediaCard\";\n\nexport default NarrativeSocialMediaCard;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeAttributionProps } from \"./NarrativeAttributionTypes\";\n\n/**\n * NarrativeAttribution — a narrative primitive that displays attribution\n * information for social media content, including an avatar, social network\n * icon, and user name.\n *\n * Styled via narrative-attribution.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is horizontal with avatar, social icon, and user name arranged\n * side by side. Surface overrides are done with standard className / style.\n */\nconst NarrativeAttribution = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeAttributionProps\n>(\n  (\n    {\n      avatarUrl,\n      avatarAlt = \"Profile avatar\",\n      userName,\n      socialIcon,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-attribution\", className)}\n        {...props}\n      >\n        <img\n          src={avatarUrl}\n          alt={avatarAlt}\n          className=\"seeds-narrative-attribution-avatar\"\n        />\n        <div className=\"seeds-narrative-attribution-social-icon\">\n          {socialIcon}\n        </div>\n        <span className=\"seeds-narrative-attribution-user-name\">\n          {userName}\n        </span>\n      </div>\n    );\n  }\n);\n\nNarrativeAttribution.displayName = \"NarrativeAttribution\";\n\nexport default NarrativeAttribution;\n"],"mappings":"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","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","React","React","jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx","../../src/NarrativeOrderedList/NarrativeOrderedList.tsx","../../src/NarrativeDataCallout/NarrativeDataCallout.tsx","../../src/AIContainer/AIContainer.tsx","../../src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx","../../src/NarrativeAttribution/NarrativeAttribution.tsx","../../src/NarrativeSection/NarrativeSection.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom\n * properties); consumers import the classes through\n * `@sproutsocial/racine/css/components`. Surface overrides are done with\n * standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeOrderedListProps } from \"./NarrativeOrderedListTypes\";\n\n/**\n * NarrativeOrderedList — a numbered list of action items. Each item pairs a\n * large ordinal (01, 02, …) with a title, an optional description, and an\n * optional call-to-action slot.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is driven by container queries, so it responds to the width the\n * component is actually given, not the viewport:\n * - `\"vertical\"` (default) → items stacked full-width, one per row.\n * - `\"horizontal\"` → items laid out as a row of equal columns once there is\n *   room, collapsing back to a stack when the container is narrow.\n *\n * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);\n * consumers import the classes through `@sproutsocial/racine/css/components`.\n * Overrides come via standard `className` / `style`.\n */\nconst NarrativeOrderedList = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeOrderedListProps\n>(({ items, orientation = \"vertical\", className, ...props }, ref) => {\n  return (\n    // The outer element establishes the query container. The ol inside switches\n    // direction based on this element's width — a container query can only style\n    // descendants of the container, never the container element itself.\n    <div\n      ref={ref}\n      className={cn(\"seeds-narrative-ordered-list\", className)}\n      {...props}\n    >\n      <ol\n        className={cn(\"seeds-narrative-ordered-list-track\", {\n          \"seeds-narrative-ordered-list-horizontal\":\n            orientation === \"horizontal\",\n        })}\n      >\n        {items.map((item, i) => (\n          <li key={i} className=\"seeds-narrative-ordered-list-item\">\n            {/* Decorative — the ol/li already convey order to assistive tech, so\n                hide the visible ordinal from it to avoid double-announcing. */}\n            <span\n              className=\"seeds-narrative-ordered-list-number\"\n              aria-hidden=\"true\"\n            >\n              {String(i + 1).padStart(2, \"0\")}\n            </span>\n            <div className=\"seeds-narrative-ordered-list-body\">\n              <p className=\"seeds-narrative-ordered-list-title\">{item.title}</p>\n              {item.description != null && (\n                <p className=\"seeds-narrative-ordered-list-description\">\n                  {item.description}\n                </p>\n              )}\n              {item.action != null && (\n                <div className=\"seeds-narrative-ordered-list-action\">\n                  {item.action}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n});\n\nNarrativeOrderedList.displayName = \"NarrativeOrderedList\";\n\nexport default NarrativeOrderedList;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDataCalloutProps } from \"./NarrativeDataCalloutTypes\";\n\n/**\n * NarrativeDataCallout — a horizontally oriented callout that pairs an injected\n * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).\n *\n * The kit ships no chart of its own; the `visual` slot accepts any node — the\n * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.\n * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's\n * `sparkline` slot).\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the\n * card look.\n *\n * Layout is a flex row driven by a container query, so it collapses to a stacked\n * column (visual on top, text below) based on the width the component is actually\n * given, not the viewport.\n *\n * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides come\n * via standard `className` / `style`.\n */\nconst NarrativeDataCallout = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeDataCalloutProps\n>(({ visual, children, visualLabel, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"seeds-narrative-data-callout\", className)}\n    {...props}\n  >\n    <div className=\"seeds-narrative-data-callout-row\">\n      <div\n        className=\"seeds-narrative-data-callout-visual\"\n        role={visualLabel != null ? \"img\" : undefined}\n        aria-label={visualLabel}\n      >\n        {visual}\n      </div>\n      <div className=\"seeds-narrative-data-callout-body\">{children}</div>\n    </div>\n  </div>\n));\n\nNarrativeDataCallout.displayName = \"NarrativeDataCallout\";\n\nexport default NarrativeDataCallout;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeAIContainerProps } from \"./AIContainerTypes\";\n\n/**\n * AIContainer — a rounded surface primitive with the AI gradient background.\n * Provides the outer shell (border-radius, shadow, overflow, gradient) without\n * any padding. Used by PullQuote and available as a standalone container.\n *\n * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.\n * - `vivid` — the full-saturation AI gradient with white text (always white).\n *\n * Styled via `ai-container.css` (Seeds CSS custom properties).\n */\nconst AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(\n  ({ children, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAIContainer.displayName = \"AIContainer\";\n\nexport default AIContainer;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport NarrativeAttribution from \"../NarrativeAttribution/NarrativeAttribution\";\nimport type { TypeNarrativeSocialMediaCardProps } from \"./NarrativeSocialMediaCardTypes\";\n\n/**\n * NarrativeSocialMediaCard — a narrative primitive that displays a social media\n * post card with a header (avatar + handle), content area, and footer with\n * engagement metadata (replies, likes, reposts, etc.).\n *\n * Styled via narrative-social-media-card.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is vertically stacked with clean typography and icon-based metadata in\n * the footer. The card fills the width it is given (e.g. a grid column) and\n * resizes with it — like the horizontal NarrativeOrderedList — so a row of cards\n * grows and stretches together rather than being pinned to a fixed width.\n * Default has a gray background; use appearance=\"no-background\" to remove the\n * 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","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeSectionProps } from \"./NarrativeSectionTypes\";\n\n/**\n * NarrativeSection — a semantic <section> wrapper that groups related narrative\n * content under a labeled heading (e.g. a \"What's Happening\" block that holds a\n * summary and a pull quote within a brief).\n *\n * Renders a required sectionTitle as a bold heading (14px / 24px,\n * container-text-headline token) so the section carries an accessible name; the\n * heading level is configurable via headingLevel (defaults to <h2>). Content\n * passed as children stacks below the title.\n *\n * Carries no surface, shadow, or accent of its own — drop it into a\n * NarrativeContainer (see the stories / playground). Styled via\n * narrative-section.css (Seeds CSS custom properties); consumers import the\n * classes through @sproutsocial/racine/css/components. Overrides come via\n * standard className / style.\n */\nconst NarrativeSection = React.forwardRef<\n  HTMLElement,\n  TypeNarrativeSectionProps\n>(({ sectionTitle, headingLevel = 2, children, className, ...props }, ref) => {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <section\n      ref={ref}\n      className={cn(\"seeds-narrative-section\", className)}\n      {...props}\n    >\n      <Heading className=\"seeds-narrative-section-title\">\n        {sectionTitle}\n      </Heading>\n      {children != null && (\n        <div className=\"seeds-narrative-section-content\">{children}</div>\n      )}\n    </section>\n  );\n});\n\nNarrativeSection.displayName = \"NarrativeSection\";\n\nexport default NarrativeSection;\n"],"mappings":"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","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","React","React","jsx","jsxs","jsx","jsxs","React","jsx","jsxs"]}

package/dist/index.d.mts

@@ -478,8 +478,11 @@ interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HT
  * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
  * consumers import the classes through @sproutsocial/racine/css/components.
  * Layout is vertically stacked with clean typography and icon-based metadata in
- * the footer. Default has a gray background; use appearance="no-background" to
- * remove the background and blend seamlessly with the page.
+ * the footer. The card fills the width it is given (e.g. a grid column) and
+ * resizes with it — like the horizontal NarrativeOrderedList — so a row of cards
+ * grows and stretches together rather than being pinned to a fixed width.
+ * Default has a gray background; use appearance="no-background" to remove the
+ * background and blend seamlessly with the page.
  */
 declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -506,6 +509,38 @@ interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDi
  */
 declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
 
+/** Heading levels available for the section title. */
+type TypeNarrativeSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+interface TypeNarrativeSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Section title, rendered as a bold heading that names the section. */
+    sectionTitle: React.ReactNode;
+    /**
+     * Heading level for the title.
+     * @default 2
+     */
+    headingLevel?: TypeNarrativeSectionHeadingLevel;
+    /** Section content rendered below the title. */
+    children?: React.ReactNode;
+}
+
+/**
+ * NarrativeSection — a semantic <section> wrapper that groups related narrative
+ * content under a labeled heading (e.g. a "What's Happening" block that holds a
+ * summary and a pull quote within a brief).
+ *
+ * Renders a required sectionTitle as a bold heading (14px / 24px,
+ * container-text-headline token) so the section carries an accessible name; the
+ * heading level is configurable via headingLevel (defaults to <h2>). Content
+ * passed as children stacks below the title.
+ *
+ * Carries no surface, shadow, or accent of its own — drop it into a
+ * NarrativeContainer (see the stories / playground). Styled via
+ * narrative-section.css (Seeds CSS custom properties); consumers import the
+ * classes through @sproutsocial/racine/css/components. Overrides come via
+ * standard className / style.
+ */
+declare const NarrativeSection: React.ForwardRefExoticComponent<TypeNarrativeSectionProps & React.RefAttributes<HTMLElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -518,4 +553,4 @@ declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativ
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSection, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSectionHeadingLevel, type TypeNarrativeSectionProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.d.ts

@@ -478,8 +478,11 @@ interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HT
  * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
  * consumers import the classes through @sproutsocial/racine/css/components.
  * Layout is vertically stacked with clean typography and icon-based metadata in
- * the footer. Default has a gray background; use appearance="no-background" to
- * remove the background and blend seamlessly with the page.
+ * the footer. The card fills the width it is given (e.g. a grid column) and
+ * resizes with it — like the horizontal NarrativeOrderedList — so a row of cards
+ * grows and stretches together rather than being pinned to a fixed width.
+ * Default has a gray background; use appearance="no-background" to remove the
+ * background and blend seamlessly with the page.
  */
 declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -506,6 +509,38 @@ interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDi
  */
 declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
 
+/** Heading levels available for the section title. */
+type TypeNarrativeSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+interface TypeNarrativeSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Section title, rendered as a bold heading that names the section. */
+    sectionTitle: React.ReactNode;
+    /**
+     * Heading level for the title.
+     * @default 2
+     */
+    headingLevel?: TypeNarrativeSectionHeadingLevel;
+    /** Section content rendered below the title. */
+    children?: React.ReactNode;
+}
+
+/**
+ * NarrativeSection — a semantic <section> wrapper that groups related narrative
+ * content under a labeled heading (e.g. a "What's Happening" block that holds a
+ * summary and a pull quote within a brief).
+ *
+ * Renders a required sectionTitle as a bold heading (14px / 24px,
+ * container-text-headline token) so the section carries an accessible name; the
+ * heading level is configurable via headingLevel (defaults to <h2>). Content
+ * passed as children stacks below the title.
+ *
+ * Carries no surface, shadow, or accent of its own — drop it into a
+ * NarrativeContainer (see the stories / playground). Styled via
+ * narrative-section.css (Seeds CSS custom properties); consumers import the
+ * classes through @sproutsocial/racine/css/components. Overrides come via
+ * standard className / style.
+ */
+declare const NarrativeSection: React.ForwardRefExoticComponent<TypeNarrativeSectionProps & React.RefAttributes<HTMLElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -518,4 +553,4 @@ declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativ
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSection, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSectionHeadingLevel, type TypeNarrativeSectionProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   NarrativeHeadlineHighlight: () => NarrativeHeadlineHighlight_default,
   NarrativeHeadlineRoll: () => NarrativeHeadlineRoll_default,
   NarrativeOrderedList: () => NarrativeOrderedList_default,
+  NarrativeSection: () => NarrativeSection_default,
   NarrativeSocialMediaCard: () => NarrativeSocialMediaCard_default,
   NarrativeSummary: () => NarrativeSummary_default,
   PullQuote: () => PullQuote_default
@@ -591,6 +592,27 @@ var NarrativeSocialMediaCard = React14.forwardRef(
 );
 NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
 var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
+
+// src/NarrativeSection/NarrativeSection.tsx
+var React15 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var NarrativeSection = React15.forwardRef(({ sectionTitle, headingLevel = 2, children, className, ...props }, ref) => {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "section",
+    {
+      ref,
+      className: cn("seeds-narrative-section", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { className: "seeds-narrative-section-title", children: sectionTitle }),
+        children != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "seeds-narrative-section-content", children })
+      ]
+    }
+  );
+});
+NarrativeSection.displayName = "NarrativeSection";
+var NarrativeSection_default = NarrativeSection;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIContainer,
@@ -604,6 +626,7 @@ var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
   NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll,
   NarrativeOrderedList,
+  NarrativeSection,
   NarrativeSocialMediaCard,
   NarrativeSummary,
   PullQuote