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

package/dist/narrative-data-callout.css

@@ -0,0 +1,103 @@
+/**
+ * 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;
+  }
+}
+
+}

package/dist/narrative-divider.css

@@ -0,0 +1,27 @@
+/**
+ * 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 */
+}
+
+}

package/dist/narrative-headline.css

@@ -27,6 +27,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 {

package/dist/narrative-ordered-list.css

@@ -0,0 +1,112 @@
+/**
+ * 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:
+ *   <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 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;
+  }
+}
+
+}

package/dist/narrative-summary.css

@@ -0,0 +1,126 @@
+/**
+ * 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;
+  }
+}
+
+}

package/dist/pull-quote.css

@@ -2,20 +2,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;
@@ -24,24 +21,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/seeds-react-narrative-kit",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -17,10 +17,15 @@
     "./dist/narrative-headline.css": "./dist/narrative-headline.css",
     "./dist/pull-quote.css": "./dist/pull-quote.css",
     "./dist/metric-highlight.css": "./dist/metric-highlight.css",
-    "./dist/eyebrow-token.css": "./dist/eyebrow-token.css"
+    "./dist/eyebrow-token.css": "./dist/eyebrow-token.css",
+    "./dist/narrative-summary.css": "./dist/narrative-summary.css",
+    "./dist/narrative-divider.css": "./dist/narrative-divider.css",
+    "./dist/narrative-ordered-list.css": "./dist/narrative-ordered-list.css",
+    "./dist/narrative-data-callout.css": "./dist/narrative-data-callout.css",
+    "./dist/ai-container.css": "./dist/ai-container.css"
   },
   "scripts": {
-    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css",
+    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css && cp src/narrative-ordered-list.css dist/narrative-ordered-list.css && cp src/narrative-data-callout.css dist/narrative-data-callout.css && cp src/ai-container.css dist/ai-container.css",
     "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
@@ -30,11 +35,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.1.0"
+    "@sproutsocial/seeds-react-theme": "^4.1.1"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
-    "@sproutsocial/seeds-react-grid": "^0.2.5",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-data-viz": "*",
+    "@sproutsocial/seeds-react-grid": "^0.2.6",
     "@sproutsocial/seeds-react-text": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/AIContainer/AIContainer.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import AIContainer from "./AIContainer";
+import "../ai-container.css";
+
+const meta = {
+  title: "Narrative Kit/AIContainer",
+  component: AIContainer,
+  args: {
+    className: "w-80",
+    style: { padding: "24px" },
+  },
+} satisfies Meta<typeof AIContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ShortContent = () => (
+  <p>
+    Engagement is up 24% this month, driven by a strong week on LinkedIn and a
+    viral reply thread.
+  </p>
+);
+
+const RichContent = () => (
+  <div className="grid gap-300">
+    <strong>AI-generated summary</strong>
+    <p>
+      Audience growth held steady while impressions climbed. Your top-performing
+      post reached 3x the usual engagement rate.
+    </p>
+  </div>
+);
+
+export const Subtle: Story = {
+  args: {
+    appearance: "subtle",
+    children: <ShortContent />,
+  },
+};
+
+export const Vivid: Story = {
+  args: {
+    appearance: "vivid",
+    children: <ShortContent />,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    appearance: "subtle",
+    children: <RichContent />,
+  },
+};

package/src/AIContainer/AIContainer.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeAIContainerProps } from "./AIContainerTypes";
+
+/**
+ * AIContainer — a rounded surface primitive with the AI gradient background.
+ * Provides the outer shell (border-radius, shadow, overflow, gradient) without
+ * any padding. Used by PullQuote and available as a standalone container.
+ *
+ * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.
+ * - `vivid` — the full-saturation AI gradient with white text (always white).
+ *
+ * Styled via `ai-container.css` (Seeds CSS custom properties).
+ */
+const AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(
+  ({ children, appearance = "subtle", className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AIContainer.displayName = "AIContainer";
+
+export default AIContainer;

package/src/AIContainer/AIContainerTypes.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+export interface TypeAIContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Content rendered inside the container. */
+  children?: React.ReactNode;
+  /**
+   * Visual treatment of the AI gradient surface.
+   * - `subtle` — a light 20% gradient tint over the base surface with dark text.
+   * - `vivid` — the full-saturation AI gradient with white text (always white).
+   * @default "subtle"
+   */
+  appearance?: "subtle" | "vivid";
+}

package/src/AIContainer/__tests__/AIContainer.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import AIContainer from "../AIContainer";
+
+describe("AIContainer", () => {
+  it("renders its children", () => {
+    render(<AIContainer>Summary text</AIContainer>);
+
+    expect(screen.getByText("Summary text")).toBeInTheDocument();
+  });
+
+  it("renders as a div", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(container.firstChild?.nodeName).toBe("DIV");
+  });
+
+  it("applies the base class", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(container.querySelector(".seeds-ai-container")).toBeInTheDocument();
+  });
+
+  it("does not apply the vivid modifier by default", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies the vivid modifier only for the vivid appearance", () => {
+    const { container, rerender } = render(<AIContainer>content</AIContainer>);
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).not.toBeInTheDocument();
+
+    rerender(<AIContainer appearance="vivid">content</AIContainer>);
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).toBeInTheDocument();
+  });
+
+  it("merges a consumer className with the base class", () => {
+    const { container } = render(
+      <AIContainer className="custom">content</AIContainer>
+    );
+
+    const root = container.querySelector(".seeds-ai-container");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("custom");
+  });
+
+  it("forwards its ref to the underlying div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<AIContainer ref={ref}>content</AIContainer>);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.tagName).toBe("DIV");
+  });
+});

package/src/AIContainer/index.ts

@@ -0,0 +1,2 @@
+export { default as AIContainer } from "./AIContainer";
+export type { TypeAIContainerProps } from "./AIContainerTypes";

package/src/EyebrowToken/EyebrowToken.tsx

@@ -14,11 +14,7 @@ import type { TypeEyebrowTokenProps } from "./EyebrowTokenTypes";
  */
 const EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(
   ({ children, className, ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn("seeds-eyebrow-token", className)}
-      {...props}
-    >
+    <span ref={ref} className={cn("seeds-eyebrow-token", className)} {...props}>
       {children}
     </span>
   )