@sproutsocial/racine 31.5.0 → 31.7.0

package/dist/components.css

@@ -487,6 +487,51 @@
 }
 
 } /* end @layer components */
+/* --- seeds-react-collapsible --- */
+/**
+ * Seeds Collapsible component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Open/closed state is driven by Radix's data-state attribute on the panel.
+ *
+ * Usage:
+ *   <div class="seeds-collapsible-content" data-state="open">…</div>
+ */
+
+/* @keyframes are not subject to cascade layers; keep them outside @layer so
+   they stay resolvable by name from the layered animation rules below. */
+@keyframes collapsibleSlideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsibleSlideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer components {
+  .seeds-collapsible-content {
+    overflow: hidden;
+  }
+
+  .seeds-collapsible-content[data-state="open"] {
+    animation: collapsibleSlideDown 300ms ease-in-out;
+  }
+
+  .seeds-collapsible-content[data-state="closed"] {
+    animation: collapsibleSlideUp 300ms ease-in-out;
+  }
+}
+
 /* --- seeds-react-content-block --- */
 /**
  * Seeds ContentBlock component classes
@@ -846,6 +891,42 @@
   .seeds-drawer-popup[data-nested-drawer-open][data-nested-drawer-swiping] > * {
     opacity: 1;
   }
+
+  /* Header ------------------------------------------------------------------ */
+
+  /* Port of the styled-components Box header (DrawerShared.tsx): flex row with
+     the title and close button, fixed at the top of the popup. */
+  .seeds-drawer-header {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: var(--space-400);
+    padding-left: var(--space-450);
+    padding-right: var(--space-450);
+  }
+
+  /* Default title typography. `margin: 0` neutralises the user-agent <h2>
+     margin that the styled path's <Text> reset for us, avoiding a layout shift
+     between the Tailwind and styled headers. */
+  .seeds-drawer-header-title {
+    margin: 0;
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-headline);
+  }
+
+  /* Content ----------------------------------------------------------------- */
+
+  /* Port of the styled-components Content (styles.ts) plus the styled-system
+     props it was rendered with (height/padding/color). */
+  .seeds-drawer-content {
+    height: 100%;
+    padding: var(--space-450);
+    overflow-y: auto;
+    color: var(--color-text-body);
+  }
 }
 
 /* --- seeds-react-link --- */
@@ -917,19 +998,23 @@
  *
  * Usage:
  *   <div class="seeds-loader seeds-loader-delay">
+ *     <span class="seeds-loader-spinner" aria-hidden="true"></span>
  *     <span class="seeds-loader-visually-hidden">Loading</span>
  *   </div>
  *   <div class="seeds-loader seeds-loader-sm">...</div>            (small)
  *   <div class="seeds-loader">...</div>                            (no delay)
+ *
+ * The visual is a thin rotating arc (--color-neutral-0) over a faint arc ring
+ * (--color-neutral-600), both clipped to the bottom half by the spinner span.
  */
 
 @layer components {
   @keyframes seeds-loader-spin {
     from {
-      transform: translate(-50%, -50%) rotate(0deg);
+      transform: rotate(0deg);
     }
     to {
-      transform: translate(-50%, -50%) rotate(360deg);
+      transform: rotate(360deg);
     }
   }
 
@@ -945,70 +1030,84 @@
     }
   }
 
-  /* Base (large / 40px) */
+  /* Base (large / 40px) — slow outer rotation hosting the spinner */
   .seeds-loader {
     position: relative;
     margin: 0 auto;
     padding: 0;
-    overflow: hidden;
-    border-radius: 100%;
     width: 40px;
     height: 40px;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-600),
-      inset 0 0 0 6px var(--color-neutral-600);
+    animation: seeds-loader-spin 3s infinite linear;
   }
 
-  .seeds-loader::after {
+  /* Visual spinner — clipped to bottom half, faster eased rotation */
+  .seeds-loader-spinner {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset: 0;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+    clip: rect(20px, 40px, 40px, 0);
+    animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+  }
+
+  /* Bright arc */
+  .seeds-loader-spinner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
     width: 40px;
     height: 40px;
     box-sizing: border-box;
-    border-width: 4px;
-    background: transparent;
-    border-style: solid;
+    border: 4px solid transparent;
+    border-top-color: var(--color-neutral-0);
     border-radius: 100%;
-    content: "";
-    transition: opacity 250ms;
-    border-color: var(--color-neutral-0) var(--color-neutral-0)
-      var(--color-neutral-600) var(--color-neutral-600);
-    animation: seeds-loader-spin 2.25s infinite linear;
+    animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
   }
 
-  .no-cssanimations .seeds-loader::after {
-    background-size: 40px;
+  /* Faint arc ring (static) — clipped to bottom half alongside the bright arc */
+  .seeds-loader-spinner::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    border: 4px solid var(--color-neutral-600);
+    border-radius: 100%;
   }
 
-  /* Delay variant — adds the delay fade-in to the container and the spinner */
-  .seeds-loader-delay {
-    animation: seeds-loader-delay-anim 2s 1;
+  /* When animations are disabled, the faint arc still renders so the loader
+     is never invisible. */
+  .no-cssanimations .seeds-loader-spinner::after {
+    border-color: var(--color-neutral-600);
   }
 
-  .seeds-loader-delay::after {
+  /* Delay variant — fades the whole spinner in alongside the outer rotation */
+  .seeds-loader-delay {
     animation:
-      seeds-loader-spin 2.25s infinite linear,
+      seeds-loader-spin 3s infinite linear,
       seeds-loader-delay-anim 2s 1;
   }
 
-  /* Small (20px) */
-  .seeds-loader-sm {
+  /* Small (20px) — scale size, border width, and the clip rect together */
+  .seeds-loader-sm,
+  .seeds-loader-sm .seeds-loader-spinner,
+  .seeds-loader-sm .seeds-loader-spinner::before,
+  .seeds-loader-sm .seeds-loader-spinner::after {
     width: 20px;
     height: 20px;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-600),
-      inset 0 0 0 4px var(--color-neutral-600);
   }
 
-  .seeds-loader-sm::after {
-    width: 20px;
-    height: 20px;
-    border-width: 2px;
+  .seeds-loader-sm .seeds-loader-spinner {
+    clip: rect(10px, 20px, 20px, 0);
   }
 
-  .no-cssanimations .seeds-loader-sm::after {
-    background-size: 20px;
+  .seeds-loader-sm .seeds-loader-spinner::before,
+  .seeds-loader-sm .seeds-loader-spinner::after {
+    border-width: 2px;
   }
 
   /* Visually-hidden accessibility text */
@@ -1078,6 +1177,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.
@@ -1287,6 +1427,64 @@
 
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeAttribution component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-attribution">
+ *     <img class="seeds-narrative-attribution-avatar" />
+ *     <div class="seeds-narrative-attribution-social-icon">...</div>
+ *     <span class="seeds-narrative-attribution-user-name">...</span>
+ *   </div>
+ */
+
+@layer components {
+
+/* Main container — horizontal layout with avatar, social icon, and user name. */
+.seeds-narrative-attribution {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */;
+  font-family: var(--font-family);
+}
+
+/* Circular avatar image — fixed size with rounded corners. */
+.seeds-narrative-attribution-avatar {
+  width: var(--space-450); /* 24px */
+  height: var(--space-450); /* 24px */
+  border-radius: var(--radius-circular); /* 50% */
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* Social network icon container — flexible sizing for partner logos. */
+.seeds-narrative-attribution-social-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* User name text — bold headline text with ellipsis overflow. */
+.seeds-narrative-attribution-user-name {
+  overflow: hidden;
+  color: var(--color-text-headline);
+  text-overflow: ellipsis;
+  font-family: var(--font-family);
+  font-size: var(--text-base-font-size, 14px);
+  font-style: normal;
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--text-base-line-height, 24px);
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeContainer component classes.
@@ -1345,6 +1543,111 @@
 
 }
 
+/* --- 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.
@@ -1510,69 +1813,267 @@
 
 /* --- seeds-react-narrative-kit --- */
 /**
- * Seeds NarrativeSummary 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. 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.
+ * CSS variable definitions and dark mode support.
  *
  * Usage:
- *   <div class="seeds-narrative-summary">
- *     <div class="seeds-narrative-summary-grid">…</div>
+ *   <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 {
 
-/* Establishes the query container. The grid inside reacts to this element's
-   inline size. */
-.seeds-narrative-summary {
+/* 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);
 }
 
-/* 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 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;
 }
 
-/* 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 {
+/* An item row: the ordinal beside the body, on its own rounded surface. */
+.seeds-narrative-ordered-list-item {
   display: flex;
-  flex-direction: column;
+  gap: var(--space-450); /* 24px */
   align-items: flex-start;
-  gap: var(--space-300); /* 8px */
+  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 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;
+/* 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);
 }
 
-.seeds-narrative-summary-section {
+/* 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 NarrativeSocialMediaCard component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-social-media-card">
+ *     <div class="seeds-narrative-social-media-card-header">...</div>
+ *     <div class="seeds-narrative-social-media-card-content">...</div>
+ *     <div class="seeds-narrative-social-media-card-footer">...</div>
+ *   </div>
+ */
+
+/* Import dependent component styles */
+@import "./narrative-attribution.css";
+
+@layer components {
+
+/* Main card container — gray background with rounded corners and padding.
+   Uses Seeds tokens for spacing, colors, and radius to match the design system. */
+.seeds-narrative-social-media-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 320px;
+  padding: var(--space-450); /* 24px */
+  border-radius: var(--radius-500); /* 6px */
+  background-color: var(--color-app-bg-base);
+  font-family: var(--font-family);
+  color: var(--color-text-body);
+}
+
+/* No background — transparent background for cards that blend seamlessly with the page. */
+.seeds-narrative-social-media-card--no-background {
+  background-color: transparent;
+}
+
+/* Main content area — standard body text styling. */
+.seeds-narrative-social-media-card-content {
+  flex: 1;
+  margin-top: var(--space-400); /* 16px */
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-text-body);
+}
+
+/* Footer section — horizontal layout for stats with equal spacing. */
+.seeds-narrative-social-media-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-400); /* 16px */
+  margin-top: var(--space-400); /* 16px */;
+}
+
+/* Hide footer when empty (no metadata items). */
+.seeds-narrative-social-media-card-footer:empty {
+  display: none;
+}
+
+/* Individual stat container — icon + value in horizontal layout. */
+.seeds-narrative-social-media-card-stat {
+  display: flex;
+  align-items: center;
+  gap: var(--space-200); /* 4px */
+}
+
+/* Stat value text — monospace font for numeric values. */
+.seeds-narrative-social-media-card-stat-value {
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-text-body);
+}
+
+}
+
+/* --- 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 */
@@ -1641,20 +2142,17 @@
  * Seeds PullQuote 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.
+ * 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">…</figure>            // subtle (default)
- *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ *   <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 {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -1663,24 +2161,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. */
@@ -1727,6 +2207,197 @@
 
 }
 
+/* --- seeds-react-progress --- */
+/**
+ * Seeds Progress 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="Progress seeds-progress"><div class="seeds-progress-indicator" /></div>
+ */
+
+@layer components {
+  .seeds-progress {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-container-border-base);
+  }
+
+  .seeds-progress-indicator {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-icon-base);
+    transition: transform 150ms ease;
+  }
+}
+
+/* --- seeds-react-select --- */
+/**
+ * Seeds Select 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-select seeds-select-default">
+ *     <select class="seeds-select-input">…</select>
+ *     <span class="seeds-select-arrow seeds-select-arrow-default">…</span>
+ *   </div>
+ */
+
+@layer components {
+  .seeds-select {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .seeds-select .seeds-select-input {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid var(--color-form-border-base);
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+  }
+
+  /* kill the dropdown arrow on IE 11 */
+  .seeds-select .seeds-select-input::-ms-expand {
+    display: none;
+  }
+
+  .seeds-select .seeds-select-input:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-select
+    .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* size: default */
+  .seeds-select-default .seeds-select-input {
+    padding: var(--space-300) var(--space-500) var(--space-300) var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  /* size: large */
+  .seeds-select-large .seeds-select-input {
+    padding: var(--space-350) var(--space-600) var(--space-350) var(--space-400);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  /* size: small */
+  .seeds-select-small .seeds-select-input {
+    padding: var(--space-200) var(--space-500) var(--space-200) var(--space-200);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  .seeds-select-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-icon-base);
+    pointer-events: none;
+  }
+
+  .seeds-select-arrow-default,
+  .seeds-select-arrow-small {
+    right: var(--space-300);
+  }
+
+  .seeds-select-arrow-large {
+    right: var(--space-350);
+  }
+
+  /* disabled */
+  .seeds-select-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-select-disabled .seeds-select-input {
+    cursor: not-allowed;
+  }
+
+  /* invalid */
+  .seeds-select-invalid .seeds-select-input {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-select-invalid .seeds-select-arrow {
+    color: var(--color-icon-error);
+  }
+}
+
+/* --- seeds-react-spot-illustration --- */
+/**
+ * Seeds SpotIllustration 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:
+ *   <svg class="seeds-spot-illustration seeds-spot-illustration-red">…</svg>
+ */
+
+@layer components {
+  .seeds-spot-illustration {
+    fill: var(--color-illustration-fill);
+    color: var(--color-illustration-stroke);
+  }
+
+  .seeds-spot-illustration-red {
+    fill: var(--color-red-400);
+  }
+
+  .seeds-spot-illustration-green {
+    fill: var(--color-green-400);
+  }
+
+  .seeds-spot-illustration-yellow {
+    fill: var(--color-yellow-400);
+  }
+
+  .seeds-spot-illustration-magenta {
+    fill: var(--color-magenta-400);
+  }
+
+  .seeds-spot-illustration-purple {
+    fill: var(--color-purple-400);
+  }
+
+  .seeds-spot-illustration-aqua {
+    fill: var(--color-aqua-400);
+  }
+}
+
 /* --- seeds-react-text --- */
 /**
  * Seeds Text component classes
@@ -1762,4 +2433,214 @@
     word-break: break-word;
     hyphens: auto;
   }
+
+  .seeds-text-headline {
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  .seeds-text-subheadline {
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  .seeds-text-small-subheadline {
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-text-byline {
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-text-small-byline {
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-100);
+    line-height: var(--line-height-100);
+  }
+
+  .seeds-text-body {
+    color: var(--color-text-body);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  .seeds-text-small-body {
+    color: var(--color-text-body);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+}
+/* --- seeds-react-token --- */
+/**
+ * Seeds Token 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:
+ *   <button class="seeds-token seeds-token-closeable">Token</button>
+ */
+
+@layer components {
+  .seeds-token {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: 13px;
+    font-weight: var(--font-weight-normal);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    color: var(--color-text-body);
+    background: var(--color-container-bg-base);
+    padding: var(--space-200) var(--space-300);
+    transition: all var(--duration-fast) var(--ease-ease_inout);
+  }
+
+  .seeds-token:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-token::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* closeable / clickable */
+  .seeds-token-closeable {
+    cursor: pointer;
+  }
+
+  .seeds-token-closeable:hover,
+  .seeds-token-closeable:active {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), black 20%);
+  }
+
+  /* palette="blue" */
+  .seeds-token-blue {
+    background: var(--color-container-bg-decorative-blue);
+    border: 1px solid var(--color-container-border-decorative-blue);
+  }
+
+  .seeds-token-blue:hover,
+  .seeds-token-blue:active {
+    cursor: pointer;
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), black 20%);
+  }
+
+  /* disabled */
+  .seeds-token-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-token-disabled:hover,
+  .seeds-token-disabled:active {
+    box-shadow: none;
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  /* valid={false} */
+  .seeds-token-invalid {
+    color: var(--color-text-error);
+    background: var(--color-container-bg-error);
+    border: 1px solid var(--color-container-border-error);
+  }
+
+  .seeds-token-invalid:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), black 20%);
+  }
+
+  /* hasWarning */
+  .seeds-token-warning {
+    background: var(--color-container-bg-warning);
+    border: 1px solid var(--color-container-border-warning);
+  }
+
+  .seeds-token-warning:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), black 20%);
+  }
+
+  /* isGenerated (AI) */
+  .seeds-token-generated {
+    background: var(--color-container-bg-ai_generated);
+    border: 1px solid var(--color-container-border-ai_generated);
+    color: var(--color-text-ai_generated);
+  }
+
+  .seeds-token-generated:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), black 20%);
+  }
+
+  /* Dark mode: useInteractiveColor lightens (white) instead of darkening (black). */
+  [data-theme="dark"] .seeds-token-closeable:hover,
+  [data-theme="dark"] .seeds-token-closeable:active,
+  .dark .seeds-token-closeable:hover,
+  .dark .seeds-token-closeable:active,
+  .lights-out .seeds-token-closeable:hover,
+  .lights-out .seeds-token-closeable:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-blue:hover,
+  [data-theme="dark"] .seeds-token-blue:active,
+  .dark .seeds-token-blue:hover,
+  .dark .seeds-token-blue:active,
+  .lights-out .seeds-token-blue:hover,
+  .lights-out .seeds-token-blue:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-invalid:hover,
+  .dark .seeds-token-invalid:hover,
+  .lights-out .seeds-token-invalid:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-warning:hover,
+  .dark .seeds-token-warning:hover,
+  .lights-out .seeds-token-warning:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-generated:hover,
+  .dark .seeds-token-generated:hover,
+  .lights-out .seeds-token-generated:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
+  }
 }