@sproutsocial/seeds-react-narrative-kit 0.6.2 → 0.6.5

package/dist/narrative-social-media-card.css

@@ -14,69 +14,75 @@
  */
 
 @layer components {
-
-/* Main card container — gray background with rounded corners and padding.
+  /* Main card container — gray background with rounded corners and padding.
    Uses Seeds tokens for spacing, colors, and radius to match the design system.
    Fills the width it is given (e.g. a grid column) and stretches its content to
    match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
    and resizes together instead of being pinned to a fixed 320px. */
-.seeds-narrative-social-media-card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  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);
-}
+  .seeds-narrative-social-media-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    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;
-}
+  /* 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);
-}
+  /* 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 */;
-}
+  /* 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 */
-}
+  /* Hide footer when empty (no metadata items). */
+  .seeds-narrative-social-media-card-footer:empty {
+    display: none;
+  }
 
-/* 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);
-}
+  /* 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);
+  }
 }

package/dist/narrative-summary.css

@@ -16,111 +16,109 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The grid inside reacts to this element's
+  /* 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);
-}
+  .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
+  /* 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 */
-}
+  .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
+  /* 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;
-}
+  .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
+  /* 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;
-}
+  .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
+  /* 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-content {
+    display: contents;
+  }
 
-.seeds-narrative-summary-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-300); /* 8px */
-  min-width: 0;
-}
+  .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
+  /* 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-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-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 {
+    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;
-}
+  .seeds-narrative-summary-list li {
+    margin: 0;
+  }
 
-/* Expand to the multi-column layout once the component is wide enough. The
+  /* 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);
-  }
+  @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;
-  }
+    /* 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;
+    /* 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;
+    }
   }
 }
-
-}

package/dist/pull-quote.css

@@ -11,58 +11,56 @@
  */
 
 @layer components {
-
-.seeds-pull-quote {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin: 0; /* reset the browser default <figure> margin */
-  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
+  .seeds-pull-quote {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0; /* reset the browser default <figure> margin */
+    /* 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));
-}
+    padding: var(--space-600) calc(var(--space-600) + var(--space-300));
+  }
 
-/* The accented bar holding the quote and attribution. */
-.seeds-pull-quote-bar {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-450); /* 24px */
-  width: 100%;
-  padding-left: var(--space-450); /* 24px */
-  /* 4px is off the border-width scale (max token is 3px); the bar is a
+  /* The accented bar holding the quote and attribution. */
+  .seeds-pull-quote-bar {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-450); /* 24px */
+    width: 100%;
+    padding-left: var(--space-450); /* 24px */
+    /* 4px is off the border-width scale (max token is 3px); the bar is a
      decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
      subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
-  border-left: 4px solid #9747ff;
-}
+    border-left: 4px solid #9747ff;
+  }
 
-.seeds-pull-quote-vivid .seeds-pull-quote-bar {
-  border-left-color: #fff;
-}
+  .seeds-pull-quote-vivid .seeds-pull-quote-bar {
+    border-left-color: #fff;
+  }
 
-.seeds-pull-quote-text {
-  margin: 0; /* reset the browser default <blockquote> margin */
-  font-size: var(--font-size-600);
-  line-height: var(--line-height-600);
-  font-style: italic;
-  font-weight: var(--font-weight-normal);
-  color: inherit;
-  overflow-wrap: break-word;
-}
+  .seeds-pull-quote-text {
+    margin: 0; /* reset the browser default <blockquote> margin */
+    font-size: var(--font-size-600);
+    line-height: var(--line-height-600);
+    font-style: italic;
+    font-weight: var(--font-weight-normal);
+    color: inherit;
+    overflow-wrap: break-word;
+  }
 
-/* Attribution row — a flex container for author name, avatar, network, etc.
+  /* Attribution row — a flex container for author name, avatar, network, etc.
    Direct text inherits a bold, small treatment to match the display-name style;
    richer content (e.g. an Avatar) composes freely. */
-.seeds-pull-quote-attribution {
-  display: flex;
-  align-items: center;
-  gap: var(--space-300); /* 8px */
-  font-size: var(--font-size-200);
-  line-height: var(--line-height-200);
-  font-weight: var(--font-weight-bold);
-  color: inherit;
-}
-
+  .seeds-pull-quote-attribution {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-bold);
+    color: inherit;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-narrative-kit",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -38,13 +38,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.3.0"
+    "@sproutsocial/seeds-react-theme": "^4.4.0"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-button": "*",
     "@sproutsocial/seeds-react-data-viz": "*",
-    "@sproutsocial/seeds-react-grid": "^0.2.10",
+    "@sproutsocial/seeds-react-grid": "^0.2.15",
     "@sproutsocial/seeds-react-icon": "*",
     "@sproutsocial/seeds-react-partner-logo": "*",
     "@sproutsocial/seeds-react-text": "*",

package/src/ai-container.css

@@ -11,29 +11,27 @@
  */
 
 @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
+  .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);
-}
+    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
+  /* 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-ai-container-vivid {
+    background-color: transparent;
+    background-image: var(--color-gradient-ai);
+    color: #fff;
+  }
 }

package/src/eyebrow-token.css

@@ -10,28 +10,26 @@
  */
 
 @layer components {
-
-/* A solid gray pill matching the design: background and border are both the
+  /* A solid gray pill matching the design: background and border are both the
    #dee1e1 container-border-base token, which also tracks dark mode. The two
    pixel literals below have no exact theme token — the --space scale skips 6px
    (4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
    values are kept verbatim. All colors use tokens. */
-.seeds-eyebrow-token {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-100); /* 2px */
-  padding: var(--space-100) var(--space-300); /* 2px / 8px */
-  border: 1px solid var(--color-container-border-base); /* #dee1e1 */
-  border-radius: var(--radius-500); /* 6px */
-  background-color: var(--color-container-border-base); /* #dee1e1 */
-  font-family: var(--font-family);
-  font-size: 12px; /* text-sm */
-  line-height: 20px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-  white-space: nowrap;
-}
-
+  .seeds-eyebrow-token {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-100); /* 2px */
+    padding: var(--space-100) var(--space-300); /* 2px / 8px */
+    border: 1px solid var(--color-container-border-base); /* #dee1e1 */
+    border-radius: var(--radius-500); /* 6px */
+    background-color: var(--color-container-border-base); /* #dee1e1 */
+    font-family: var(--font-family);
+    font-size: 12px; /* text-sm */
+    line-height: 20px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+    white-space: nowrap;
+  }
 }