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

package/dist/index.d.mts

@@ -140,9 +140,10 @@ interface TypePullQuoteProps extends React.HTMLAttributes<HTMLElement> {
  * optional attribution row (author name, avatar, network).
  *
  * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.
- * Styled via `pull-quote.css` (Seeds CSS custom properties); consumers import
- * the classes through `@sproutsocial/racine/css/components`. Surface overrides
- * are done with standard `className` / `style`.
+ * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom
+ * properties); consumers import the classes through
+ * `@sproutsocial/racine/css/components`. Surface overrides are done with
+ * standard `className` / `style`.
  */
 declare const PullQuote: React.ForwardRefExoticComponent<TypePullQuoteProps & React.RefAttributes<HTMLElement>>;
 
@@ -324,6 +325,187 @@ interface TypeNarrativeSummaryProps extends React.HTMLAttributes<HTMLDivElement>
  */
 declare const NarrativeSummary: React.ForwardRefExoticComponent<TypeNarrativeSummaryProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Item arrangement.
+ * - `"vertical"`: items stacked full-width, one per row (the default).
+ * - `"horizontal"`: items laid out as a row of equal columns that collapses
+ *   back to a stack when the container is narrow (container query).
+ */
+type TypeNarrativeOrderedListOrientation = "vertical" | "horizontal";
+interface TypeNarrativeOrderedListItem {
+    /** Bold action title for the item. A plain string or any React node. */
+    title: React.ReactNode;
+    /**
+     * Descriptive text below the title. A plain string or any React node. The
+     * paragraph is omitted when this is empty.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional call-to-action rendered below the description, only when provided.
+     * Typically a Seeds `<Button>` in an AI appearance (e.g.
+     * `appearance="ai-secondary"`). Pass it without system props so it renders the
+     * Tailwind path — same as NarrativeSummary's `action` slot.
+     */
+    action?: React.ReactNode;
+}
+interface TypeNarrativeOrderedListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The ordered items. Numbered automatically (01, 02, …) in order. */
+    items: TypeNarrativeOrderedListItem[];
+    /**
+     * Item arrangement. `"horizontal"` lays items in a row of equal columns that
+     * collapses to a stack when the container is narrow; `"vertical"` is always
+     * stacked.
+     * @default "vertical"
+     */
+    orientation?: TypeNarrativeOrderedListOrientation;
+}
+
+/**
+ * NarrativeOrderedList — a numbered list of action items. Each item pairs a
+ * large ordinal (01, 02, …) with a title, an optional description, and an
+ * optional call-to-action slot.
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories / playground).
+ *
+ * Layout is driven by container queries, so it responds to the width the
+ * component is actually given, not the viewport:
+ * - `"vertical"` (default) → items stacked full-width, one per row.
+ * - `"horizontal"` → items laid out as a row of equal columns once there is
+ *   room, collapsing back to a stack when the container is narrow.
+ *
+ * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);
+ * consumers import the classes through `@sproutsocial/racine/css/components`.
+ * Overrides come via standard `className` / `style`.
+ */
+declare const NarrativeOrderedList: React.ForwardRefExoticComponent<TypeNarrativeOrderedListProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeDataCalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data-viz component rendered in the left slot (occupies ~1/3 of the width).
+     * The kit ships no chart of its own — drop in any data-viz node, e.g. a v2
+     * `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+     */
+    visual: React.ReactNode;
+    /** Body copy / description occupying the right two-thirds. */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the visual slot region. Omit when the injected visual
+     * already carries its own description/label.
+     */
+    visualLabel?: string;
+}
+
+/**
+ * NarrativeDataCallout — 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` from `@sproutsocial/seeds-react-data-viz`.
+ * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's
+ * `sparkline` slot).
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the
+ * card look.
+ *
+ * Layout is a flex row driven by a container query, so it collapses to a stacked
+ * column (visual on top, text below) based on the width the component is actually
+ * given, not the viewport.
+ *
+ * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides come
+ * via standard `className` / `style`.
+ */
+declare const NarrativeDataCallout: React.ForwardRefExoticComponent<TypeNarrativeDataCalloutProps & React.RefAttributes<HTMLDivElement>>;
+
+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";
+}
+
+/**
+ * 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).
+ */
+declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeSocialMediaCardMeta {
+    /** Icon for the metadata (e.g., reply, heart, repost). */
+    icon: React.ReactNode;
+    /** Number or formatted string value for the metadata. */
+    value: number | string;
+    /** Optional accessible label for the metadata. */
+    label?: string;
+}
+interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatar: string;
+    /** Alt text for the avatar image. */
+    avatarAlt: string;
+    /** Display name for the social media profile. */
+    displayName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+    /** Optional image to display above the text content. */
+    image?: React.ReactNode;
+    /** The text content of the social media post. */
+    text: React.ReactNode;
+    /** Array of metadata with icons and values (e.g., replies, likes, reposts). */
+    meta: TypeNarrativeSocialMediaCardMeta[];
+    /** Visual appearance of the card. Default has gray background, "no-background" removes the background. */
+    appearance?: "no-background";
+}
+
+/**
+ * NarrativeSocialMediaCard — a narrative primitive that displays a social media
+ * post card with a header (avatar + handle), content area, and footer with
+ * engagement metadata (replies, likes, reposts, etc.).
+ *
+ * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is vertically stacked with clean typography and icon-based metadata in
+ * the footer. Default has a gray background; use appearance="no-background" to
+ * remove the background and blend seamlessly with the page.
+ */
+declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatarUrl: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /** User name or display name for the social media profile. */
+    userName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+}
+
+/**
+ * NarrativeAttribution — a narrative primitive that displays attribution
+ * information for social media content, including an avatar, social network
+ * icon, and user name.
+ *
+ * Styled via narrative-attribution.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is horizontal with avatar, social icon, and user name arranged
+ * side by side. Surface overrides are done with standard className / style.
+ */
+declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -336,4 +518,4 @@ declare const NarrativeSummary: React.ForwardRefExoticComponent<TypeNarrativeSum
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeSummary, PullQuote, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.d.ts

@@ -140,9 +140,10 @@ interface TypePullQuoteProps extends React.HTMLAttributes<HTMLElement> {
  * optional attribution row (author name, avatar, network).
  *
  * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.
- * Styled via `pull-quote.css` (Seeds CSS custom properties); consumers import
- * the classes through `@sproutsocial/racine/css/components`. Surface overrides
- * are done with standard `className` / `style`.
+ * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom
+ * properties); consumers import the classes through
+ * `@sproutsocial/racine/css/components`. Surface overrides are done with
+ * standard `className` / `style`.
  */
 declare const PullQuote: React.ForwardRefExoticComponent<TypePullQuoteProps & React.RefAttributes<HTMLElement>>;
 
@@ -324,6 +325,187 @@ interface TypeNarrativeSummaryProps extends React.HTMLAttributes<HTMLDivElement>
  */
 declare const NarrativeSummary: React.ForwardRefExoticComponent<TypeNarrativeSummaryProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Item arrangement.
+ * - `"vertical"`: items stacked full-width, one per row (the default).
+ * - `"horizontal"`: items laid out as a row of equal columns that collapses
+ *   back to a stack when the container is narrow (container query).
+ */
+type TypeNarrativeOrderedListOrientation = "vertical" | "horizontal";
+interface TypeNarrativeOrderedListItem {
+    /** Bold action title for the item. A plain string or any React node. */
+    title: React.ReactNode;
+    /**
+     * Descriptive text below the title. A plain string or any React node. The
+     * paragraph is omitted when this is empty.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional call-to-action rendered below the description, only when provided.
+     * Typically a Seeds `<Button>` in an AI appearance (e.g.
+     * `appearance="ai-secondary"`). Pass it without system props so it renders the
+     * Tailwind path — same as NarrativeSummary's `action` slot.
+     */
+    action?: React.ReactNode;
+}
+interface TypeNarrativeOrderedListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The ordered items. Numbered automatically (01, 02, …) in order. */
+    items: TypeNarrativeOrderedListItem[];
+    /**
+     * Item arrangement. `"horizontal"` lays items in a row of equal columns that
+     * collapses to a stack when the container is narrow; `"vertical"` is always
+     * stacked.
+     * @default "vertical"
+     */
+    orientation?: TypeNarrativeOrderedListOrientation;
+}
+
+/**
+ * NarrativeOrderedList — a numbered list of action items. Each item pairs a
+ * large ordinal (01, 02, …) with a title, an optional description, and an
+ * optional call-to-action slot.
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories / playground).
+ *
+ * Layout is driven by container queries, so it responds to the width the
+ * component is actually given, not the viewport:
+ * - `"vertical"` (default) → items stacked full-width, one per row.
+ * - `"horizontal"` → items laid out as a row of equal columns once there is
+ *   room, collapsing back to a stack when the container is narrow.
+ *
+ * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);
+ * consumers import the classes through `@sproutsocial/racine/css/components`.
+ * Overrides come via standard `className` / `style`.
+ */
+declare const NarrativeOrderedList: React.ForwardRefExoticComponent<TypeNarrativeOrderedListProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeDataCalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data-viz component rendered in the left slot (occupies ~1/3 of the width).
+     * The kit ships no chart of its own — drop in any data-viz node, e.g. a v2
+     * `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+     */
+    visual: React.ReactNode;
+    /** Body copy / description occupying the right two-thirds. */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the visual slot region. Omit when the injected visual
+     * already carries its own description/label.
+     */
+    visualLabel?: string;
+}
+
+/**
+ * NarrativeDataCallout — 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` from `@sproutsocial/seeds-react-data-viz`.
+ * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's
+ * `sparkline` slot).
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the
+ * card look.
+ *
+ * Layout is a flex row driven by a container query, so it collapses to a stacked
+ * column (visual on top, text below) based on the width the component is actually
+ * given, not the viewport.
+ *
+ * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides come
+ * via standard `className` / `style`.
+ */
+declare const NarrativeDataCallout: React.ForwardRefExoticComponent<TypeNarrativeDataCalloutProps & React.RefAttributes<HTMLDivElement>>;
+
+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";
+}
+
+/**
+ * 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).
+ */
+declare const AIContainer: React.ForwardRefExoticComponent<TypeAIContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeSocialMediaCardMeta {
+    /** Icon for the metadata (e.g., reply, heart, repost). */
+    icon: React.ReactNode;
+    /** Number or formatted string value for the metadata. */
+    value: number | string;
+    /** Optional accessible label for the metadata. */
+    label?: string;
+}
+interface TypeNarrativeSocialMediaCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatar: string;
+    /** Alt text for the avatar image. */
+    avatarAlt: string;
+    /** Display name for the social media profile. */
+    displayName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+    /** Optional image to display above the text content. */
+    image?: React.ReactNode;
+    /** The text content of the social media post. */
+    text: React.ReactNode;
+    /** Array of metadata with icons and values (e.g., replies, likes, reposts). */
+    meta: TypeNarrativeSocialMediaCardMeta[];
+    /** Visual appearance of the card. Default has gray background, "no-background" removes the background. */
+    appearance?: "no-background";
+}
+
+/**
+ * NarrativeSocialMediaCard — a narrative primitive that displays a social media
+ * post card with a header (avatar + handle), content area, and footer with
+ * engagement metadata (replies, likes, reposts, etc.).
+ *
+ * Styled via narrative-social-media-card.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is vertically stacked with clean typography and icon-based metadata in
+ * the footer. Default has a gray background; use appearance="no-background" to
+ * remove the background and blend seamlessly with the page.
+ */
+declare const NarrativeSocialMediaCard: React.ForwardRefExoticComponent<TypeNarrativeSocialMediaCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TypeNarrativeAttributionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Avatar image URL for the social media profile. */
+    avatarUrl: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /** User name or display name for the social media profile. */
+    userName: string;
+    /** Social media network icon (e.g., Twitter, Instagram, LinkedIn). */
+    socialIcon: React.ReactNode;
+}
+
+/**
+ * NarrativeAttribution — a narrative primitive that displays attribution
+ * information for social media content, including an avatar, social network
+ * icon, and user name.
+ *
+ * Styled via narrative-attribution.css (Seeds CSS custom properties);
+ * consumers import the classes through @sproutsocial/racine/css/components.
+ * Layout is horizontal with avatar, social icon, and user name arranged
+ * side by side. Surface overrides are done with standard className / style.
+ */
+declare const NarrativeAttribution: React.ForwardRefExoticComponent<TypeNarrativeAttributionProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Shared types for narrative primitives.
  *
@@ -336,4 +518,4 @@ declare const NarrativeSummary: React.ForwardRefExoticComponent<TypeNarrativeSum
  */
 type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
 
-export { EyebrowToken, MetricHighlight, NarrativeContainer, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeSummary, PullQuote, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeContainerProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };
+export { AIContainer, EyebrowToken, MetricHighlight, NarrativeAttribution, NarrativeContainer, NarrativeDataCallout, NarrativeDivider, NarrativeHeadline, NarrativeHeadlineHighlight, NarrativeHeadlineRoll, NarrativeOrderedList, NarrativeSocialMediaCard, NarrativeSummary, PullQuote, type TypeAIContainerProps, type TypeEyebrowTokenProps, type TypeMetricHighlightProps, type TypeMetricHighlightTrend, type TypeNarrativeAttributionProps, type TypeNarrativeContainerProps, type TypeNarrativeDataCalloutProps, type TypeNarrativeDividerProps, type TypeNarrativeHeadlineHighlightProps, type TypeNarrativeHeadlineLevel, type TypeNarrativeHeadlineProps, type TypeNarrativeHeadlineRollProps, type TypeNarrativeOrderedListItem, type TypeNarrativeOrderedListOrientation, type TypeNarrativeOrderedListProps, type TypeNarrativeSocialMediaCardMeta, type TypeNarrativeSocialMediaCardProps, type TypeNarrativeSummaryLayout, type TypeNarrativeSummaryProps, type TypeNarrativeTone, type TypePullQuoteProps };

package/dist/index.js

@@ -30,13 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AIContainer: () => AIContainer_default,
   EyebrowToken: () => EyebrowToken_default,
   MetricHighlight: () => MetricHighlight_default,
+  NarrativeAttribution: () => NarrativeAttribution_default,
   NarrativeContainer: () => NarrativeContainer_default,
+  NarrativeDataCallout: () => NarrativeDataCallout_default,
   NarrativeDivider: () => NarrativeDivider_default,
   NarrativeHeadline: () => NarrativeHeadline_default,
   NarrativeHeadlineHighlight: () => NarrativeHeadlineHighlight_default,
   NarrativeHeadlineRoll: () => NarrativeHeadlineRoll_default,
+  NarrativeOrderedList: () => NarrativeOrderedList_default,
+  NarrativeSocialMediaCard: () => NarrativeSocialMediaCard_default,
   NarrativeSummary: () => NarrativeSummary_default,
   PullQuote: () => PullQuote_default
 });
@@ -207,6 +212,8 @@ var PullQuote = React5.forwardRef(
         ref,
         className: cn(
           "seeds-pull-quote",
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
           { "seeds-pull-quote-vivid": appearance === "vivid" },
           className
         ),
@@ -392,15 +399,212 @@ var NarrativeSummary = React9.forwardRef(
 );
 NarrativeSummary.displayName = "NarrativeSummary";
 var NarrativeSummary_default = NarrativeSummary;
+
+// src/NarrativeOrderedList/NarrativeOrderedList.tsx
+var React10 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var NarrativeOrderedList = React10.forwardRef(({ items, orientation = "vertical", className, ...props }, ref) => {
+  return (
+    // The outer element establishes the query container. The ol inside switches
+    // direction based on this element's width — a container query can only style
+    // descendants of the container, never the container element itself.
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-ordered-list", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "ol",
+          {
+            className: cn("seeds-narrative-ordered-list-track", {
+              "seeds-narrative-ordered-list-horizontal": orientation === "horizontal"
+            }),
+            children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "seeds-narrative-ordered-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "span",
+                {
+                  className: "seeds-narrative-ordered-list-number",
+                  "aria-hidden": "true",
+                  children: String(i + 1).padStart(2, "0")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "seeds-narrative-ordered-list-body", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "seeds-narrative-ordered-list-title", children: item.title }),
+                item.description != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "seeds-narrative-ordered-list-description", children: item.description }),
+                item.action != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "seeds-narrative-ordered-list-action", children: item.action })
+              ] })
+            ] }, i))
+          }
+        )
+      }
+    )
+  );
+});
+NarrativeOrderedList.displayName = "NarrativeOrderedList";
+var NarrativeOrderedList_default = NarrativeOrderedList;
+
+// src/NarrativeDataCallout/NarrativeDataCallout.tsx
+var React11 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var NarrativeDataCallout = React11.forwardRef(({ visual, children, visualLabel, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("seeds-narrative-data-callout", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "seeds-narrative-data-callout-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          className: "seeds-narrative-data-callout-visual",
+          role: visualLabel != null ? "img" : void 0,
+          "aria-label": visualLabel,
+          children: visual
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "seeds-narrative-data-callout-body", children })
+    ] })
+  }
+));
+NarrativeDataCallout.displayName = "NarrativeDataCallout";
+var NarrativeDataCallout_default = NarrativeDataCallout;
+
+// src/AIContainer/AIContainer.tsx
+var React12 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AIContainer = React12.forwardRef(
+  ({ children, appearance = "subtle", className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AIContainer.displayName = "AIContainer";
+var AIContainer_default = AIContainer;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+var React14 = __toESM(require("react"));
+
+// src/NarrativeAttribution/NarrativeAttribution.tsx
+var React13 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var NarrativeAttribution = React13.forwardRef(
+  ({
+    avatarUrl,
+    avatarAlt = "Profile avatar",
+    userName,
+    socialIcon,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-attribution", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "img",
+            {
+              src: avatarUrl,
+              alt: avatarAlt,
+              className: "seeds-narrative-attribution-avatar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "seeds-narrative-attribution-social-icon", children: socialIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "seeds-narrative-attribution-user-name", children: userName })
+        ]
+      }
+    );
+  }
+);
+NarrativeAttribution.displayName = "NarrativeAttribution";
+var NarrativeAttribution_default = NarrativeAttribution;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NarrativeSocialMediaCard = React14.forwardRef(
+  ({
+    avatar,
+    avatarAlt,
+    displayName,
+    socialIcon,
+    image,
+    text,
+    meta,
+    appearance,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-social-media-card",
+          appearance === "no-background" && "seeds-narrative-social-media-card--no-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            NarrativeAttribution_default,
+            {
+              avatarUrl: avatar,
+              avatarAlt,
+              userName: displayName,
+              socialIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "seeds-narrative-social-media-card-content", children: [
+            image,
+            text
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "seeds-narrative-social-media-card-footer", children: meta.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              className: "seeds-narrative-social-media-card-stat",
+              "aria-label": item.label,
+              children: [
+                item.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "seeds-narrative-social-media-card-stat-value", children: item.value })
+              ]
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
+var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AIContainer,
   EyebrowToken,
   MetricHighlight,
+  NarrativeAttribution,
   NarrativeContainer,
+  NarrativeDataCallout,
   NarrativeDivider,
   NarrativeHeadline,
   NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll,
+  NarrativeOrderedList,
+  NarrativeSocialMediaCard,
   NarrativeSummary,
   PullQuote
 });