@sproutsocial/racine 31.4.0 → 31.6.0

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Change Log
 
+## 31.6.0
+
+### Minor Changes
+
+- e5a385e: Add the `NarrativeDataCallout` primitive to `seeds-react-narrative-kit` — a
+  horizontally oriented callout that pairs an injected data-viz `visual` (left,
+  ~1/3 width) with a block of body copy (right, ~2/3). The kit ships no chart of
+  its own; the `visual` slot accepts any node (the stories drop in a v2
+  `DonutChart`), so narrative-kit takes no runtime dependency on data-viz —
+  mirroring `MetricHighlight`'s `sparkline` slot. An optional `visualLabel`
+  applies an `img` role with an accessible name to the visual. Layout is driven by
+  a container query, so it collapses to a stacked column (visual on top, text
+  below) based on the width the component is given rather than the viewport.
+  Exported through `@sproutsocial/racine`.
+- 979bf12: Add the `NarrativeOrderedList` primitive to `seeds-react-narrative-kit` — a
+  numbered list of action items pairing a large ordinal (01, 02, …) with a title,
+  an optional description, and an optional call-to-action slot. Supports
+  `vertical` (default, stacked) and `horizontal` (row of equal columns)
+  orientations via a container query, so the horizontal layout collapses back to a
+  stack when its container is narrow. Exported through `@sproutsocial/racine`.
+- 2573639: Add a `headerless` prop to `PeekIn.Panel`. When set, the panel renders flush
+  without the built-in header or close button, letting the content own its own
+  chrome, padding, and scrolling — useful for embedded UIs such as an agent
+  surface. Applies to both the desktop side panel and the mobile bottom sheet.
+
+### Patch Changes
+
+- Updated dependencies [be93d78]
+- Updated dependencies [e5a385e]
+- Updated dependencies [979bf12]
+- Updated dependencies [2573639]
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-narrative-kit@0.4.0
+  - @sproutsocial/seeds-react-peek-in@0.3.0
+  - @sproutsocial/seeds-react-theme@4.1.1
+  - @sproutsocial/seeds-react-accordion@0.4.48
+  - @sproutsocial/seeds-react-avatar@1.1.17
+  - @sproutsocial/seeds-react-banner@1.1.23
+  - @sproutsocial/seeds-react-box@1.1.22
+  - @sproutsocial/seeds-react-breadcrumb@1.1.7
+  - @sproutsocial/seeds-react-card@1.1.43
+  - @sproutsocial/seeds-react-chart-legend@1.0.41
+  - @sproutsocial/seeds-react-container@0.3.16
+  - @sproutsocial/seeds-react-content-block@0.5.15
+  - @sproutsocial/seeds-react-data-table@2.6.23
+  - @sproutsocial/seeds-react-datepicker@1.0.40
+  - @sproutsocial/seeds-react-drawer@2.2.8
+  - @sproutsocial/seeds-react-duration@1.0.24
+  - @sproutsocial/seeds-react-empty-state@1.0.23
+  - @sproutsocial/seeds-react-fieldset@1.0.23
+  - @sproutsocial/seeds-react-form-field@1.1.17
+  - @sproutsocial/seeds-react-grid@0.2.6
+  - @sproutsocial/seeds-react-hooks@3.2.3
+  - @sproutsocial/seeds-react-icon@2.4.1
+  - @sproutsocial/seeds-react-image@1.0.22
+  - @sproutsocial/seeds-react-indicator@1.0.41
+  - @sproutsocial/seeds-react-keyboard-key@1.0.23
+  - @sproutsocial/seeds-react-label@1.0.23
+  - @sproutsocial/seeds-react-link@1.1.13
+  - @sproutsocial/seeds-react-list@0.3.26
+  - @sproutsocial/seeds-react-loader@1.0.23
+  - @sproutsocial/seeds-react-loader-button@1.0.46
+  - @sproutsocial/seeds-react-message@1.0.49
+  - @sproutsocial/seeds-react-mixins@4.3.8
+  - @sproutsocial/seeds-react-modal@2.5.23
+  - @sproutsocial/seeds-react-numeral@1.0.48
+  - @sproutsocial/seeds-react-pagination@0.1.21
+  - @sproutsocial/seeds-react-panel@1.0.1
+  - @sproutsocial/seeds-react-partner-logo@1.7.14
+  - @sproutsocial/seeds-react-progress@0.2.8
+  - @sproutsocial/seeds-react-rating@1.0.41
+  - @sproutsocial/seeds-react-segmented-control@1.1.22
+  - @sproutsocial/seeds-react-select@1.1.41
+  - @sproutsocial/seeds-react-skeleton@1.1.21
+  - @sproutsocial/seeds-react-stack@1.0.21
+  - @sproutsocial/seeds-react-table@1.0.42
+  - @sproutsocial/seeds-react-tabs@1.4.12
+  - @sproutsocial/seeds-react-textarea@1.0.22
+  - @sproutsocial/seeds-react-theme-provider@1.1.21
+  - @sproutsocial/seeds-react-toast@1.0.42
+  - @sproutsocial/seeds-react-token@1.5.7
+  - @sproutsocial/seeds-react-token-input@1.4.49
+  - @sproutsocial/seeds-react-tooltip@1.1.28
+  - @sproutsocial/seeds-react-visually-hidden@1.0.23
+  - @sproutsocial/seeds-react-badge@2.0.35
+  - @sproutsocial/seeds-react-checkbox@1.3.42
+  - @sproutsocial/seeds-react-content-header@0.2.20
+  - @sproutsocial/seeds-react-input@1.5.27
+  - @sproutsocial/seeds-react-popout@2.5.10
+  - @sproutsocial/seeds-react-button@2.2.2
+  - @sproutsocial/seeds-react-switch@1.2.40
+  - @sproutsocial/seeds-react-radio@1.3.23
+
+## 31.5.0
+
+### Minor Changes
+
+- 1aca1d1: `MetricHighlight` now takes a `sparkline` render slot instead of owning the
+  chart itself. Pass any node (e.g. a `<SparklineChart />` from
+  `@sproutsocial/seeds-react-data-viz/sparkline`) to render it beside/below the
+  metric; omit it to render the metric on its own. This replaces the previous
+  `data` and `chart` props.
+- 0b37765: Add the `NarrativeDivider` primitive to `seeds-react-narrative-kit` — a full-width,
+  1px horizontal rule for separating sections within a narrative brief, using the
+  `container.border` token (dark-mode aware). Exported through `@sproutsocial/racine`.
+- 0b37765: Add the `NarrativeSummary` primitive to `seeds-react-narrative-kit` — a composed
+  block pairing a lead column (eyebrow + headline + optional action) with a Summary
+  section and a Key themes list, laid out as a container-query-driven grid with
+  `three-column` and `two-column` (1/3 | 2/3) arrangements. Also adds a `size` prop
+  (`"default" | "small"`) to `NarrativeHeadline`. Exported through
+  `@sproutsocial/racine`.
+
+### Patch Changes
+
+- Updated dependencies [1aca1d1]
+- Updated dependencies [0b37765]
+- Updated dependencies [0b37765]
+  - @sproutsocial/seeds-react-narrative-kit@0.3.0
+
 ## 31.4.0
 
 ### Minor Changes

package/dist/components.css

@@ -1078,6 +1078,47 @@
   }
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds AIContainer component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-ai-container">…</div>            // subtle (default)
+ *   <div class="seeds-ai-container seeds-ai-container-vivid">…</div>
+ */
+
+@layer components {
+
+.seeds-ai-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  font-family: var(--font-family);
+  /* Subtle (default): the 20% AI gradient tint composited over the base
+     surface. --color-gradient-ai-subtle is already translucent, so layering it
+     over the opaque base color produces the soft wash. */
+  background-color: var(--color-container-bg-base);
+  background-image: var(--color-gradient-ai-subtle);
+  color: var(--color-text-headline);
+}
+
+/* Vivid: the full-saturation AI gradient with white content. White has no
+   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
+   raw brand hex used in --color-gradient-ai). */
+.seeds-ai-container-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds EyebrowToken component classes.
@@ -1251,47 +1292,37 @@
   stroke-width: 1.5;
 }
 
-/* Sparkline — a single normalized polyline stretched to fit. The non-scaling
-   stroke keeps a crisp 2px line at any aspect ratio. */
-.seeds-metric-highlight-spark {
-  display: block;
+/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+   stroke/background styling, so the injected chart controls its own look. Heights
+   are explicit (never percentage/stretch) so a Highcharts chart always measures a
+   concrete container instead of falling back to its 400px default. */
+.seeds-metric-highlight-chart {
+  box-sizing: border-box;
   flex: 0 0 auto;
-  /* Matches the design's Data Viz / Categorical 01 line color (#0b968f). */
-  stroke: var(--color-teal-700);
-}
-
-/* Downward trend: the red analog at the same scale step (#db3e3e). */
-.seeds-metric-highlight-spark-negative {
-  stroke: var(--color-red-700);
-}
-
-.seeds-metric-highlight-spark path {
-  stroke: inherit;
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
+  align-self: center;
+  /* Center the injected chart as a flex item — an inline/inline-block child
+     (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
+     descender space below it, reading as vertically off-center in the slot. */
+  display: flex;
+  align-items: center;
 }
 
-/* Horizontal: a compact fixed-width chart beside the metric, matched to the
-   metric block's height. */
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 104px;
-  align-self: stretch;
-  min-height: 40px;
+  height: 48px;
 }
 
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 88px;
   height: 40px;
-  align-self: center;
 }
 
-/* Vertical: a full-width chart stacked beneath the metric. */
-.seeds-metric-highlight-vertical .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
   width: 100%;
   height: 96px;
 }
 
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
   height: 56px;
 }
 
@@ -1355,6 +1386,140 @@
 
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeDataCallout component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * The layout is a flex row driven by a container query on the root, so the
+ * visual/text columns stack based on the width the component is given, not the
+ * viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-data-callout">
+ *     <div class="seeds-narrative-data-callout-row">
+ *       <div class="seeds-narrative-data-callout-visual">…chart…</div>
+ *       <div class="seeds-narrative-data-callout-body">…copy…</div>
+ *     </div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The row inside reacts to this element's
+   inline size. A container query only styles DESCENDANTS of the query container,
+   so the flex row lives on the inner element, not this one. */
+.seeds-narrative-data-callout {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below turns it
+   into the horizontal 1/3 + 2/3 row once there is room. */
+.seeds-narrative-data-callout-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-450); /* 24px */
+}
+
+/* Visual slot — layout only, no stroke/background so the injected chart controls
+   its own look and its own size. No fixed height: charts like the data-viz
+   DonutChart carry their own intrinsic height (and a legend), so the slot sizes
+   to the chart rather than clipping it. Stacked full-width until the container
+   query expands the row. */
+.seeds-narrative-data-callout-visual {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Stretch the injected visual to the slot's full width. A fluid-width chart like
+   the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
+   so Highcharts fills that shrunk width and the ring gets width-capped below its
+   fixed 270px height — leaving an empty vertical band. Filling the width lets the
+   ring become height-capped and fill its box top-to-bottom, like the standalone
+   chart story. */
+.seeds-narrative-data-callout-visual > * {
+  width: 100%;
+}
+
+/* Body copy — fills the remaining space. */
+.seeds-narrative-data-callout-body {
+  box-sizing: border-box;
+  min-width: 0;
+  font-size: var(--font-size-300); /* 16px */
+  line-height: var(--line-height-400); /* ~28px */
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+  overflow-wrap: break-word;
+}
+
+/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
+   The threshold is on the component's own width (container query), so a narrow
+   callout on a wide screen still stacks. 480px keeps the donut + copy readable
+   side by side. */
+@container (min-width: 480px) {
+  .seeds-narrative-data-callout-row {
+    flex-direction: row;
+  }
+
+  .seeds-narrative-data-callout-visual {
+    /* Nominally one-third, but never narrower than the injected chart's fixed
+       height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
+       fixed-height chart like the donut gets width-capped and leaves an empty
+       vertical band above/below the ring; the min-width keeps the visual square
+       enough that the ring fills its box top-to-bottom, matching the standalone
+       chart story. */
+    flex: 0 0 33.333%;
+    min-width: 270px;
+    width: auto;
+  }
+
+  .seeds-narrative-data-callout-body {
+    flex: 1 1 0;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeDivider component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <hr class="seeds-narrative-divider" />
+ */
+
+@layer components {
+
+/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+   and a beveled border, so reset those and draw the line with a single
+   border-top using the container-border-base token (#dee1e1), which also
+   tracks dark mode. */
+.seeds-narrative-divider {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeHeadline component classes.
@@ -1385,6 +1550,13 @@
   color: var(--color-text-headline);
 }
 
+/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+   spacing, and color are inherited from the base class. */
+.seeds-narrative-headline-small {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
 /* Static gradient accent for a span of headline text ("highlighted word").
    Paints the AI brand gradient onto the glyphs via background-clip. */
 .seeds-narrative-headline-highlight {
@@ -1484,23 +1656,262 @@
 
 /* --- seeds-react-narrative-kit --- */
 /**
- * Seeds PullQuote component classes.
+ * Seeds NarrativeOrderedList component classes.
  * Use these instead of writing out individual Tailwind utility classes.
  *
  * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
  * CSS variable definitions and dark mode support.
  *
  * Usage:
- *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
- *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ *   <div class="seeds-narrative-ordered-list">
+ *     <ol class="seeds-narrative-ordered-list-track">
+ *       <li class="seeds-narrative-ordered-list-item">…</li>
+ *     </ol>
+ *   </div>
  */
 
 @layer components {
 
-.seeds-pull-quote {
-  position: relative;
-  overflow: hidden;
+/* Establishes the query container. The track inside reacts to this element's
+   inline size — a container query can only style descendants of the container,
+   never the container element itself. */
+.seeds-narrative-ordered-list {
+  container-type: inline-size;
   box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* The list itself, and the default (stacked) layout. The horizontal modifier
+   only expands to a row once the container query below has room, so horizontal
+   collapses back to this stack when narrow. */
+.seeds-narrative-ordered-list-track {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-400); /* 16px */
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* An item row: the ordinal beside the body, on its own rounded surface. */
+.seeds-narrative-ordered-list-item {
+  display: flex;
+  gap: var(--space-450); /* 24px */
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--space-400) var(--space-450); /* 16px 24px */
+  border-radius: var(--radius-800); /* 12px */
+  background-color: var(--color-app-bg-base);
+}
+
+/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
+   monospace stack — mirrors the value treatment in metric-highlight.css. */
+.seeds-narrative-ordered-list-number {
+  margin: 0;
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
+  font-size: var(--font-size-700); /* 32px */
+  line-height: var(--line-height-700); /* 40px */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+/* Title + description + optional action, stacked. */
+.seeds-narrative-ordered-list-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-200); /* 4px */
+  min-width: 0;
+}
+
+/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
+   skips from 24px to 32px), so the design value is kept verbatim. Same
+   rationale as narrative-summary.css. */
+.seeds-narrative-ordered-list-title {
+  margin: 0;
+  font-size: var(--font-size-300); /* 16px */
+  line-height: 28px; /* off-scale, see comment above */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-body);
+}
+
+/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
+   same rationale as the title above. */
+.seeds-narrative-ordered-list-description {
+  margin: 0;
+  font-size: 14px; /* off-scale, see title above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-ordered-list-action {
+  padding-top: var(--space-350); /* 12px */
+}
+
+/* Expand the horizontal variant to a row of equal columns once the component is
+   wide enough. The threshold is on the component's own width (container query),
+   so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
+   breakpoint, matching narrative-summary.css. */
+@container (min-width: 640px) {
+  .seeds-narrative-ordered-list-horizontal {
+    flex-direction: row;
+  }
+
+  .seeds-narrative-ordered-list-horizontal > .seeds-narrative-ordered-list-item {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeSummary component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support. Also relies on
+ * narrative-headline.css (headline) and eyebrow-token.css (eyebrow).
+ *
+ * The layout is a CSS grid driven by a container query on the root, so the
+ * columns collapse based on the width the component is given, not the viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-summary">
+ *     <div class="seeds-narrative-summary-grid">…</div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The grid inside reacts to this element's
+   inline size. */
+.seeds-narrative-summary {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below expands
+   it once there is room. */
+.seeds-narrative-summary-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-450); /* 24px */
+}
+
+/* The lead column: eyebrow, headline, optional action. align-items:flex-start
+   keeps the eyebrow pill and the action sized to their content — without it the
+   column's default stretch would blow the eyebrow out to full width. The
+   headline still fills and wraps because its text is wider than the track. */
+.seeds-narrative-summary-lead {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* The headline area grows so the action anchors toward the bottom of the lead
+   column when the neighboring columns are taller. align-self:stretch fills the
+   track width (the lead column pins other items to flex-start) so the headline
+   wraps at the column edge regardless of its length. */
+.seeds-narrative-summary-headline {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+/* In three-column mode the content wrapper is transparent to the grid, so its
+   two sections become grid items in their own columns. In two-column mode the
+   container query below turns it into a real, stacking grid item. */
+.seeds-narrative-summary-content {
+  display: contents;
+}
+
+.seeds-narrative-summary-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* Section label. 14px / 24px has no exact type token (the scale skips from
+   13px to 16px), so the design value is kept verbatim — same rationale as
+   eyebrow-token.css. All other values use tokens. */
+.seeds-narrative-summary-label {
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+.seeds-narrative-summary-text {
+  margin: 0;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list {
+  margin: 0;
+  padding-inline-start: 21px;
+  list-style: disc;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list li {
+  margin: 0;
+}
+
+/* Expand to the multi-column layout once the component is wide enough. The
+   threshold is on the component's own width (container query), so a narrow card
+   on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
+@container (min-width: 640px) {
+  .seeds-narrative-summary-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* 1/3 lead + 2/3 content. */
+  .seeds-narrative-summary-two-column {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  /* The content wrapper becomes a real grid item that stacks its two sections. */
+  .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-450); /* 24px */
+    min-width: 0;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds PullQuote component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css and
+ * ai-container.css imported for CSS variable definitions and surface styles.
+ *
+ * Usage:
+ *   <figure class="seeds-pull-quote seeds-ai-container">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-ai-container seeds-ai-container-vivid seeds-pull-quote-vivid">…</figure>
+ */
+
+@layer components {
+
+.seeds-pull-quote {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -1509,24 +1920,6 @@
   /* 40px block / 48px inline — 48px is off the space scale, so derive it from
      two tokens (40 + 8) rather than hardcoding an off-scale value. */
   padding: var(--space-600) calc(var(--space-600) + var(--space-300));
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  font-family: var(--font-family);
-  /* Subtle (default): the 20% AI gradient tint composited over the base
-     surface. --color-gradient-ai-subtle is already translucent, so layering it
-     over the opaque base color produces the soft wash. */
-  background-color: var(--color-container-bg-base);
-  background-image: var(--color-gradient-ai-subtle);
-  color: var(--color-text-headline);
-}
-
-/* Vivid: the full-saturation AI gradient with white content. White has no
-   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
-   raw brand hex used in --color-gradient-ai). */
-.seeds-pull-quote-vivid {
-  background-color: transparent;
-  background-image: var(--color-gradient-ai);
-  color: #fff;
 }
 
 /* The accented bar holding the quote and attribution. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.4.0",
+  "version": "31.6.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,74 +73,74 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.47",
-    "@sproutsocial/seeds-react-avatar": "^1.1.16",
-    "@sproutsocial/seeds-react-badge": "^2.0.34",
-    "@sproutsocial/seeds-react-banner": "^1.1.22",
-    "@sproutsocial/seeds-react-box": "^1.1.21",
-    "@sproutsocial/seeds-react-breadcrumb": "^1.1.6",
-    "@sproutsocial/seeds-react-button": "^2.2.1",
-    "@sproutsocial/seeds-react-card": "^1.1.42",
+    "@sproutsocial/seeds-react-accordion": "^0.4.48",
+    "@sproutsocial/seeds-react-avatar": "^1.1.17",
+    "@sproutsocial/seeds-react-badge": "^2.0.35",
+    "@sproutsocial/seeds-react-banner": "^1.1.23",
+    "@sproutsocial/seeds-react-box": "^1.1.22",
+    "@sproutsocial/seeds-react-breadcrumb": "^1.1.7",
+    "@sproutsocial/seeds-react-button": "^2.2.2",
+    "@sproutsocial/seeds-react-card": "^1.1.43",
     "@sproutsocial/seeds-react-character-counter": "^1.0.4",
-    "@sproutsocial/seeds-react-chart-legend": "^1.0.40",
+    "@sproutsocial/seeds-react-chart-legend": "^1.0.41",
     "@sproutsocial/seeds-react-chat-bubble": "^0.2.2",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.41",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.42",
     "@sproutsocial/seeds-react-collapsible": "^2.0.0",
-    "@sproutsocial/seeds-react-container": "^0.3.15",
-    "@sproutsocial/seeds-react-content-block": "^0.5.14",
-    "@sproutsocial/seeds-react-content-header": "^0.2.19",
-    "@sproutsocial/seeds-react-data-table": "^2.6.22",
-    "@sproutsocial/seeds-react-datepicker": "^1.0.39",
-    "@sproutsocial/seeds-react-drawer": "^2.2.7",
-    "@sproutsocial/seeds-react-duration": "^1.0.23",
-    "@sproutsocial/seeds-react-empty-state": "^1.0.22",
-    "@sproutsocial/seeds-react-fieldset": "^1.0.22",
-    "@sproutsocial/seeds-react-form-field": "^1.1.16",
-    "@sproutsocial/seeds-react-grid": "^0.2.5",
-    "@sproutsocial/seeds-react-hooks": "^3.2.2",
-    "@sproutsocial/seeds-react-icon": "^2.4.0",
-    "@sproutsocial/seeds-react-image": "^1.0.21",
-    "@sproutsocial/seeds-react-indicator": "^1.0.40",
-    "@sproutsocial/seeds-react-input": "^1.5.26",
-    "@sproutsocial/seeds-react-keyboard-key": "^1.0.22",
-    "@sproutsocial/seeds-react-label": "^1.0.22",
-    "@sproutsocial/seeds-react-link": "^1.1.12",
-    "@sproutsocial/seeds-react-list": "^0.3.25",
-    "@sproutsocial/seeds-react-loader": "^1.0.22",
-    "@sproutsocial/seeds-react-loader-button": "^1.0.45",
-    "@sproutsocial/seeds-react-message": "^1.0.48",
-    "@sproutsocial/seeds-react-mixins": "^4.3.7",
-    "@sproutsocial/seeds-react-modal": "^2.5.22",
-    "@sproutsocial/seeds-react-narrative-kit": "^0.2.0",
-    "@sproutsocial/seeds-react-numeral": "^1.0.47",
-    "@sproutsocial/seeds-react-pagination": "^0.1.20",
-    "@sproutsocial/seeds-react-panel": "^1.0.0",
-    "@sproutsocial/seeds-react-peek-in": "^0.2.9",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.13",
-    "@sproutsocial/seeds-react-popout": "^2.5.9",
+    "@sproutsocial/seeds-react-container": "^0.3.16",
+    "@sproutsocial/seeds-react-content-block": "^0.5.15",
+    "@sproutsocial/seeds-react-content-header": "^0.2.20",
+    "@sproutsocial/seeds-react-data-table": "^2.6.23",
+    "@sproutsocial/seeds-react-datepicker": "^1.0.40",
+    "@sproutsocial/seeds-react-drawer": "^2.2.8",
+    "@sproutsocial/seeds-react-duration": "^1.0.24",
+    "@sproutsocial/seeds-react-empty-state": "^1.0.23",
+    "@sproutsocial/seeds-react-fieldset": "^1.0.23",
+    "@sproutsocial/seeds-react-form-field": "^1.1.17",
+    "@sproutsocial/seeds-react-grid": "^0.2.6",
+    "@sproutsocial/seeds-react-hooks": "^3.2.3",
+    "@sproutsocial/seeds-react-icon": "^2.4.1",
+    "@sproutsocial/seeds-react-image": "^1.0.22",
+    "@sproutsocial/seeds-react-indicator": "^1.0.41",
+    "@sproutsocial/seeds-react-input": "^1.5.27",
+    "@sproutsocial/seeds-react-keyboard-key": "^1.0.23",
+    "@sproutsocial/seeds-react-label": "^1.0.23",
+    "@sproutsocial/seeds-react-link": "^1.1.13",
+    "@sproutsocial/seeds-react-list": "^0.3.26",
+    "@sproutsocial/seeds-react-loader": "^1.0.23",
+    "@sproutsocial/seeds-react-loader-button": "^1.0.46",
+    "@sproutsocial/seeds-react-message": "^1.0.49",
+    "@sproutsocial/seeds-react-mixins": "^4.3.8",
+    "@sproutsocial/seeds-react-modal": "^2.5.23",
+    "@sproutsocial/seeds-react-narrative-kit": "^0.4.0",
+    "@sproutsocial/seeds-react-numeral": "^1.0.48",
+    "@sproutsocial/seeds-react-pagination": "^0.1.21",
+    "@sproutsocial/seeds-react-panel": "^1.0.1",
+    "@sproutsocial/seeds-react-peek-in": "^0.3.0",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.14",
+    "@sproutsocial/seeds-react-popout": "^2.5.10",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
-    "@sproutsocial/seeds-react-progress": "^0.2.7",
-    "@sproutsocial/seeds-react-radio": "^1.3.22",
-    "@sproutsocial/seeds-react-rating": "^1.0.40",
-    "@sproutsocial/seeds-react-segmented-control": "^1.1.21",
+    "@sproutsocial/seeds-react-progress": "^0.2.8",
+    "@sproutsocial/seeds-react-radio": "^1.3.23",
+    "@sproutsocial/seeds-react-rating": "^1.0.41",
+    "@sproutsocial/seeds-react-segmented-control": "^1.1.22",
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.3",
-    "@sproutsocial/seeds-react-select": "^1.1.40",
-    "@sproutsocial/seeds-react-skeleton": "^1.1.20",
-    "@sproutsocial/seeds-react-stack": "^1.0.20",
-    "@sproutsocial/seeds-react-switch": "^1.2.39",
+    "@sproutsocial/seeds-react-select": "^1.1.41",
+    "@sproutsocial/seeds-react-skeleton": "^1.1.21",
+    "@sproutsocial/seeds-react-stack": "^1.0.21",
+    "@sproutsocial/seeds-react-switch": "^1.2.40",
     "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-table": "^1.0.41",
-    "@sproutsocial/seeds-react-tabs": "^1.4.11",
+    "@sproutsocial/seeds-react-table": "^1.0.42",
+    "@sproutsocial/seeds-react-tabs": "^1.4.12",
     "@sproutsocial/seeds-react-text": "^1.4.3",
-    "@sproutsocial/seeds-react-textarea": "^1.0.21",
-    "@sproutsocial/seeds-react-toast": "^1.0.41",
-    "@sproutsocial/seeds-react-token": "^1.5.6",
-    "@sproutsocial/seeds-react-token-input": "^1.4.48",
-    "@sproutsocial/seeds-react-tooltip": "^1.1.27",
-    "@sproutsocial/seeds-react-theme": "^4.1.0",
-    "@sproutsocial/seeds-react-theme-provider": "^1.1.20",
+    "@sproutsocial/seeds-react-textarea": "^1.0.22",
+    "@sproutsocial/seeds-react-toast": "^1.0.42",
+    "@sproutsocial/seeds-react-token": "^1.5.7",
+    "@sproutsocial/seeds-react-token-input": "^1.4.49",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.28",
+    "@sproutsocial/seeds-react-theme": "^4.1.1",
+    "@sproutsocial/seeds-react-theme-provider": "^1.1.21",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.22",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.23",
     "scroll-into-view-if-needed": "^2.2.20",
     "lodash.uniqueid": "^4.0.1",
     "styled-system": "^5.1.5",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.16.0",
+    "@sproutsocial/seeds-react-menu": "^1.16.1",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",