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

package/dist/index.d.ts

@@ -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. */
@@ -155,6 +163,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 +206,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.
+     * 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).
      */
-    data?: number[];
-    /**
-     * Render the sparkline.
-     * @default true
-     */
-    chart?: boolean;
+    sparkline?: React.ReactNode;
     /**
      * Layout direction.
      * - `horizontal` — metric block beside the sparkline.
@@ -216,7 +238,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 +249,81 @@ 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>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -237,4 +336,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 { EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeSummary, PullQuote, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.js

@@ -33,9 +33,11 @@ __export(index_exports, {
   EyebrowToken: () => EyebrowToken_default,
   MetricHighlight: () => MetricHighlight_default,
   NarrativeContainer: () => NarrativeContainer_default,
+  NarrativeDivider: () => NarrativeDivider_default,
   NarrativeHeadline: () => NarrativeHeadline_default,
   NarrativeHeadlineHighlight: () => NarrativeHeadlineHighlight_default,
   NarrativeHeadlineRoll: () => NarrativeHeadlineRoll_default,
+  NarrativeSummary: () => NarrativeSummary_default,
   PullQuote: () => PullQuote_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -84,18 +86,24 @@ var NarrativeContainer_default = NarrativeContainer;
 // src/NarrativeHeadline/NarrativeHeadline.tsx
 var React2 = __toESM(require("react"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var NarrativeHeadline = React2.forwardRef(({ children, headingLevel = 2, className, ...props }, ref) => {
-  const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Heading,
-    {
-      ref,
-      className: cn("seeds-narrative-headline", className),
-      ...props,
-      children
-    }
-  );
-});
+var NarrativeHeadline = React2.forwardRef(
+  ({ children, headingLevel = 2, size = "default", className, ...props }, ref) => {
+    const Heading = `h${headingLevel}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Heading,
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-headline",
+          { "seeds-narrative-headline-small": size === "small" },
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
 NarrativeHeadline.displayName = "NarrativeHeadline";
 var NarrativeHeadline_default = NarrativeHeadline;
 
@@ -160,7 +168,14 @@ var NarrativeHeadlineRoll = React4.forwardRef(
         style: merged,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "seeds-narrative-headline-roll-sizer", "aria-hidden": "true", children: words[i] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "seeds-narrative-headline-roll-sizer",
+              "aria-hidden": "true",
+              children: words[i]
+            }
+          ),
           words.map((w, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "span",
             {
@@ -211,82 +226,36 @@ var PullQuote_default = PullQuote;
 var React6 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var EyebrowToken = React6.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      ref,
-      className: cn("seeds-eyebrow-token", className),
-      ...props,
-      children
-    }
-  )
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: cn("seeds-eyebrow-token", className), ...props, children })
 );
 EyebrowToken.displayName = "EyebrowToken";
 var EyebrowToken_default = EyebrowToken;
 
-// src/MetricHighlight/MetricHighlight.tsx
+// src/NarrativeDivider/NarrativeDivider.tsx
 var React7 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SPARK_VIEWBOX_WIDTH = 100;
-var SPARK_VIEWBOX_HEIGHT = 32;
-var SPARK_PADDING = 2;
-var DEFAULT_SPARK = [6, 10, 8, 13, 11, 16];
-var smoothPath = (points) => {
-  if (points.length < 2) {
-    const p = points[0];
-    return p ? `M ${p.x},${p.y}` : "";
-  }
-  let d = `M ${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p0 = points[i - 1] ?? p1;
-    const p3 = points[i + 2] ?? p2;
-    const cp1x = p1.x + (p2.x - p0.x) / 6;
-    const cp1y = p1.y + (p2.y - p0.y) / 6;
-    const cp2x = p2.x - (p3.x - p1.x) / 6;
-    const cp2y = p2.y - (p3.y - p1.y) / 6;
-    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(
-      2
-    )},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+var NarrativeDivider = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "hr",
+  {
+    ref,
+    className: cn("seeds-narrative-divider", className),
+    ...props
   }
-  return d;
-};
-var Sparkline = ({
-  data,
-  negative
-}) => {
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const usableHeight = SPARK_VIEWBOX_HEIGHT - SPARK_PADDING * 2;
-  const points = data.map((value, i) => ({
-    x: data.length === 1 ? SPARK_VIEWBOX_WIDTH / 2 : i / (data.length - 1) * SPARK_VIEWBOX_WIDTH,
-    // Invert y so larger values sit higher in the chart.
-    y: SPARK_PADDING + (1 - (value - min) / range) * usableHeight
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "svg",
-    {
-      className: cn("seeds-metric-highlight-spark", {
-        "seeds-metric-highlight-spark-negative": Boolean(negative)
-      }),
-      viewBox: `0 0 ${SPARK_VIEWBOX_WIDTH} ${SPARK_VIEWBOX_HEIGHT}`,
-      preserveAspectRatio: "none",
-      "aria-hidden": true,
-      focusable: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: smoothPath(points), fill: "none", strokeLinecap: "round" })
-    }
-  );
-};
-var TrendArrow = ({ direction }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+));
+NarrativeDivider.displayName = "NarrativeDivider";
+var NarrativeDivider_default = NarrativeDivider;
+
+// src/MetricHighlight/MetricHighlight.tsx
+var React8 = __toESM(require("react"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TrendArrow = ({ direction }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "svg",
   {
     className: "seeds-metric-highlight-trend-arrow",
     viewBox: "0 0 16 16",
     "aria-hidden": true,
     focusable: false,
-    children: direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    children: direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "path",
       {
         d: "M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
@@ -294,7 +263,7 @@ var TrendArrow = ({ direction }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "path",
       {
         d: "M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5",
@@ -305,7 +274,11 @@ var TrendArrow = ({ direction }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)
     )
   }
 );
-var TrendBadge = ({ direction = "up", value, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+var TrendBadge = ({
+  direction = "up",
+  value,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
   "span",
   {
     className: cn("seeds-metric-highlight-trend", {
@@ -313,28 +286,24 @@ var TrendBadge = ({ direction = "up", value, ...rest }) => /* @__PURE__ */ (0, i
     }),
     ...rest,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrendArrow, { direction }),
-      value != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "seeds-metric-highlight-trend-value", children: value })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TrendArrow, { direction }),
+      value != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "seeds-metric-highlight-trend-value", children: value })
     ]
   }
 );
-var MetricHighlight = React7.forwardRef(
+var MetricHighlight = React8.forwardRef(
   ({
     label,
     value,
     trend,
-    data,
-    chart = true,
+    sparkline,
     appearance = "horizontal",
     size = "default",
     container = true,
     className,
     ...props
   }, ref) => {
-    const isDown = trend?.direction === "down";
-    const resolvedData = data ?? (isDown ? [...DEFAULT_SPARK].reverse() : DEFAULT_SPARK);
-    const showChart = chart && resolvedData.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         ref,
@@ -349,14 +318,17 @@ var MetricHighlight = React7.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "seeds-metric-highlight-metric", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "seeds-metric-highlight-label", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "seeds-metric-highlight-value-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "seeds-metric-highlight-value", children: value }),
-              trend != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrendBadge, { ...trend })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "seeds-metric-highlight-metric", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "seeds-metric-highlight-label", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "seeds-metric-highlight-value-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "seeds-metric-highlight-value", children: value }),
+              trend != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TrendBadge, { ...trend })
             ] })
           ] }),
-          showChart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sparkline, { data: resolvedData, negative: isDown })
+          sparkline != null && // Layout-only slot (bounded dimensions per horizontal/vertical/small)
+          // for a consumer-supplied chart. It controls its own look; the slot
+          // only sizes and centers it.
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "seeds-metric-highlight-chart", children: sparkline })
         ]
       }
     );
@@ -364,14 +336,72 @@ var MetricHighlight = React7.forwardRef(
 );
 MetricHighlight.displayName = "MetricHighlight";
 var MetricHighlight_default = MetricHighlight;
+
+// src/NarrativeSummary/NarrativeSummary.tsx
+var React9 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var NarrativeSummary = React9.forwardRef(
+  ({
+    eyebrow,
+    headline,
+    headingLevel = 2,
+    action,
+    summary,
+    summaryLabel = "Summary",
+    keyThemes,
+    keyThemesLabel = "Key themes",
+    layout = "three-column",
+    className,
+    ...props
+  }, ref) => {
+    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-summary", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: cn("seeds-narrative-summary-grid", {
+              "seeds-narrative-summary-two-column": layout === "two-column"
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "seeds-narrative-summary-lead", children: [
+                eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EyebrowToken_default, { children: eyebrow }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "seeds-narrative-summary-headline", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NarrativeHeadline_default, { size: "small", headingLevel, children: headline }) }),
+                action != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "seeds-narrative-summary-action", children: action })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "seeds-narrative-summary-content", children: [
+                summary != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "seeds-narrative-summary-section", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "seeds-narrative-summary-label", children: summaryLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "seeds-narrative-summary-text", children: summary })
+                ] }),
+                hasKeyThemes && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "seeds-narrative-summary-section", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "seeds-narrative-summary-label", children: keyThemesLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "seeds-narrative-summary-list", children: keyThemes.map((theme, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: theme }, i)) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+NarrativeSummary.displayName = "NarrativeSummary";
+var NarrativeSummary_default = NarrativeSummary;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EyebrowToken,
   MetricHighlight,
   NarrativeContainer,
+  NarrativeDivider,
   NarrativeHeadline,
   NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll,
+  NarrativeSummary,
   PullQuote
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/NarrativeContainer/NarrativeContainer.tsx","../src/_internal/cn.ts","../src/NarrativeHeadline/NarrativeHeadline.tsx","../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../src/PullQuote/PullQuote.tsx","../src/EyebrowToken/EyebrowToken.tsx","../src/MetricHighlight/MetricHighlight.tsx"],"sourcesContent":["/* Narrative Kit — composable narrative primitives.\n * Each primitive adds a single line below. No default export — this is a kit. */\nexport {\n  NarrativeContainer,\n  type TypeNarrativeContainerProps,\n} from \"./NarrativeContainer\";\n\nexport {\n  NarrativeHeadline,\n  NarrativeHeadlineHighlight,\n  NarrativeHeadlineRoll,\n  type TypeNarrativeHeadlineProps,\n  type TypeNarrativeHeadlineLevel,\n  type TypeNarrativeHeadlineHighlightProps,\n  type TypeNarrativeHeadlineRollProps,\n} from \"./NarrativeHeadline\";\n\nexport { PullQuote, type TypePullQuoteProps } from \"./PullQuote\";\n\nexport { EyebrowToken, type TypeEyebrowTokenProps } from \"./EyebrowToken\";\n\nexport {\n  MetricHighlight,\n  type TypeMetricHighlightProps,\n  type TypeMetricHighlightTrend,\n} from \"./MetricHighlight\";\n\nexport type { TypeNarrativeTone } from \"./_internal/types\";\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(({ 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","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/NarrativeContainer/NarrativeContainer.tsx","../src/_internal/cn.ts","../src/NarrativeHeadline/NarrativeHeadline.tsx","../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../src/PullQuote/PullQuote.tsx","../src/EyebrowToken/EyebrowToken.tsx","../src/NarrativeDivider/NarrativeDivider.tsx","../src/MetricHighlight/MetricHighlight.tsx","../src/NarrativeSummary/NarrativeSummary.tsx"],"sourcesContent":["/* Narrative Kit — composable narrative primitives.\n * Each primitive adds a single line below. No default export — this is a kit. */\nexport {\n  NarrativeContainer,\n  type TypeNarrativeContainerProps,\n} from \"./NarrativeContainer\";\n\nexport {\n  NarrativeHeadline,\n  NarrativeHeadlineHighlight,\n  NarrativeHeadlineRoll,\n  type TypeNarrativeHeadlineProps,\n  type TypeNarrativeHeadlineLevel,\n  type TypeNarrativeHeadlineHighlightProps,\n  type TypeNarrativeHeadlineRollProps,\n} from \"./NarrativeHeadline\";\n\nexport { PullQuote, type TypePullQuoteProps } from \"./PullQuote\";\n\nexport { EyebrowToken, type TypeEyebrowTokenProps } from \"./EyebrowToken\";\n\nexport {\n  NarrativeDivider,\n  type TypeNarrativeDividerProps,\n} from \"./NarrativeDivider\";\n\nexport {\n  MetricHighlight,\n  type TypeMetricHighlightProps,\n  type TypeMetricHighlightTrend,\n} from \"./MetricHighlight\";\n\nexport {\n  NarrativeSummary,\n  type TypeNarrativeSummaryProps,\n  type TypeNarrativeSummaryLayout,\n} from \"./NarrativeSummary\";\n\nexport type { TypeNarrativeTone } from \"./_internal/types\";\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` (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 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"],"mappings":"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","names":["React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime"]}