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

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ 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
+$ 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 && cp src/narrative-social-media-card.css dist/narrative-social-media-card.css && cp src/narrative-attribution.css dist/narrative-attribution.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && c
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     14.66 KB
-CJS dist/index.js.map 25.00 KB
-CJS ⚡️ Build success in 17ms
-ESM dist/esm/index.js     11.87 KB
-ESM dist/esm/index.js.map 24.02 KB
-ESM ⚡️ Build success in 17ms
+CJS dist/index.js     22.09 KB
+CJS dist/index.js.map 38.83 KB
+CJS ⚡️ Build success in 22ms
+ESM dist/esm/index.js     18.61 KB
+ESM dist/esm/index.js.map 37.33 KB
+ESM ⚡️ Build success in 23ms
 DTS Build start
-DTS ⚡️ Build success in 1483ms
-DTS dist/index.d.ts  14.44 KB
-DTS dist/index.d.mts 14.44 KB
-Done in 2.19s.
+DTS ⚡️ Build success in 1667ms
+DTS dist/index.d.ts  23.03 KB
+DTS dist/index.d.mts 23.03 KB
+Done in 2.42s.

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @sproutsocial/seeds-react-narrative-kit
 
+## 0.5.0
+
+### Minor Changes
+
+- 9a2dada: Add NarrativeSocialMediaCard and NarrativeAttribution components. Card displays social post with avatar, content, and engagement stats.
+
+## 0.4.0
+
+### Minor Changes
+
+- e5a385e: Add the `NarrativeDataCallout` primitive to `seeds-react-narrative-kit` — a
+  horizontally oriented callout that pairs an injected data-viz `visual` (left,
+  ~1/3 width) with a block of body copy (right, ~2/3). The kit ships no chart of
+  its own; the `visual` slot accepts any node (the stories drop in a v2
+  `DonutChart`), so narrative-kit takes no runtime dependency on data-viz —
+  mirroring `MetricHighlight`'s `sparkline` slot. An optional `visualLabel`
+  applies an `img` role with an accessible name to the visual. Layout is driven by
+  a container query, so it collapses to a stacked column (visual on top, text
+  below) based on the width the component is given rather than the viewport.
+  Exported through `@sproutsocial/racine`.
+- 979bf12: Add the `NarrativeOrderedList` primitive to `seeds-react-narrative-kit` — a
+  numbered list of action items pairing a large ordinal (01, 02, …) with a title,
+  an optional description, and an optional call-to-action slot. Supports
+  `vertical` (default, stacked) and `horizontal` (row of equal columns)
+  orientations via a container query, so the horizontal layout collapses back to a
+  stack when its container is narrow. Exported through `@sproutsocial/racine`.
+
+### Patch Changes
+
+- be93d78: add AiContainer
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/ai-container.css

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

package/dist/esm/index.js

@@ -163,6 +163,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
         ),
@@ -348,14 +350,211 @@ var NarrativeSummary = React9.forwardRef(
 );
 NarrativeSummary.displayName = "NarrativeSummary";
 var NarrativeSummary_default = NarrativeSummary;
+
+// src/NarrativeOrderedList/NarrativeOrderedList.tsx
+import * as React10 from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "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__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-ordered-list", className),
+        ...props,
+        children: /* @__PURE__ */ jsx10(
+          "ol",
+          {
+            className: cn("seeds-narrative-ordered-list-track", {
+              "seeds-narrative-ordered-list-horizontal": orientation === "horizontal"
+            }),
+            children: items.map((item, i) => /* @__PURE__ */ jsxs5("li", { className: "seeds-narrative-ordered-list-item", children: [
+              /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  className: "seeds-narrative-ordered-list-number",
+                  "aria-hidden": "true",
+                  children: String(i + 1).padStart(2, "0")
+                }
+              ),
+              /* @__PURE__ */ jsxs5("div", { className: "seeds-narrative-ordered-list-body", children: [
+                /* @__PURE__ */ jsx10("p", { className: "seeds-narrative-ordered-list-title", children: item.title }),
+                item.description != null && /* @__PURE__ */ jsx10("p", { className: "seeds-narrative-ordered-list-description", children: item.description }),
+                item.action != null && /* @__PURE__ */ jsx10("div", { className: "seeds-narrative-ordered-list-action", children: item.action })
+              ] })
+            ] }, i))
+          }
+        )
+      }
+    )
+  );
+});
+NarrativeOrderedList.displayName = "NarrativeOrderedList";
+var NarrativeOrderedList_default = NarrativeOrderedList;
+
+// src/NarrativeDataCallout/NarrativeDataCallout.tsx
+import * as React11 from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var NarrativeDataCallout = React11.forwardRef(({ visual, children, visualLabel, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  "div",
+  {
+    ref,
+    className: cn("seeds-narrative-data-callout", className),
+    ...props,
+    children: /* @__PURE__ */ jsxs6("div", { className: "seeds-narrative-data-callout-row", children: [
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: "seeds-narrative-data-callout-visual",
+          role: visualLabel != null ? "img" : void 0,
+          "aria-label": visualLabel,
+          children: visual
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "seeds-narrative-data-callout-body", children })
+    ] })
+  }
+));
+NarrativeDataCallout.displayName = "NarrativeDataCallout";
+var NarrativeDataCallout_default = NarrativeDataCallout;
+
+// src/AIContainer/AIContainer.tsx
+import * as React12 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AIContainer = React12.forwardRef(
+  ({ children, appearance = "subtle", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "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
+import * as React14 from "react";
+
+// src/NarrativeAttribution/NarrativeAttribution.tsx
+import * as React13 from "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var NarrativeAttribution = React13.forwardRef(
+  ({
+    avatarUrl,
+    avatarAlt = "Profile avatar",
+    userName,
+    socialIcon,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-attribution", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx13(
+            "img",
+            {
+              src: avatarUrl,
+              alt: avatarAlt,
+              className: "seeds-narrative-attribution-avatar"
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: "seeds-narrative-attribution-social-icon", children: socialIcon }),
+          /* @__PURE__ */ jsx13("span", { className: "seeds-narrative-attribution-user-name", children: userName })
+        ]
+      }
+    );
+  }
+);
+NarrativeAttribution.displayName = "NarrativeAttribution";
+var NarrativeAttribution_default = NarrativeAttribution;
+
+// src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var NarrativeSocialMediaCard = React14.forwardRef(
+  ({
+    avatar,
+    avatarAlt,
+    displayName,
+    socialIcon,
+    image,
+    text,
+    meta,
+    appearance,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-social-media-card",
+          appearance === "no-background" && "seeds-narrative-social-media-card--no-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx14(
+            NarrativeAttribution_default,
+            {
+              avatarUrl: avatar,
+              avatarAlt,
+              userName: displayName,
+              socialIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs8("div", { className: "seeds-narrative-social-media-card-content", children: [
+            image,
+            text
+          ] }),
+          /* @__PURE__ */ jsx14("div", { className: "seeds-narrative-social-media-card-footer", children: meta.map((item, index) => /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: "seeds-narrative-social-media-card-stat",
+              "aria-label": item.label,
+              children: [
+                item.icon,
+                /* @__PURE__ */ jsx14("span", { className: "seeds-narrative-social-media-card-stat-value", children: item.value })
+              ]
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+NarrativeSocialMediaCard.displayName = "NarrativeSocialMediaCard";
+var NarrativeSocialMediaCard_default = NarrativeSocialMediaCard;
 export {
+  AIContainer_default as AIContainer,
   EyebrowToken_default as EyebrowToken,
   MetricHighlight_default as MetricHighlight,
+  NarrativeAttribution_default as NarrativeAttribution,
   NarrativeContainer_default as NarrativeContainer,
+  NarrativeDataCallout_default as NarrativeDataCallout,
   NarrativeDivider_default as NarrativeDivider,
   NarrativeHeadline_default as NarrativeHeadline,
   NarrativeHeadlineHighlight_default as NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll_default as NarrativeHeadlineRoll,
+  NarrativeOrderedList_default as NarrativeOrderedList,
+  NarrativeSocialMediaCard_default as NarrativeSocialMediaCard,
   NarrativeSummary_default as NarrativeSummary,
   PullQuote_default as PullQuote
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Surface overrides\n * are done with standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n"],"mappings":"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","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs"]}
+{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx","../../src/_internal/cn.ts","../../src/NarrativeHeadline/NarrativeHeadline.tsx","../../src/NarrativeHeadline/NarrativeHeadlineHighlight.tsx","../../src/NarrativeHeadline/NarrativeHeadlineRoll.tsx","../../src/PullQuote/PullQuote.tsx","../../src/EyebrowToken/EyebrowToken.tsx","../../src/NarrativeDivider/NarrativeDivider.tsx","../../src/MetricHighlight/MetricHighlight.tsx","../../src/NarrativeSummary/NarrativeSummary.tsx","../../src/NarrativeOrderedList/NarrativeOrderedList.tsx","../../src/NarrativeDataCallout/NarrativeDataCallout.tsx","../../src/AIContainer/AIContainer.tsx","../../src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx","../../src/NarrativeAttribution/NarrativeAttribution.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n","/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nexport function cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadline — the titling primitive for a narrative block. A single\n * heading element, nothing more: supporting copy and tags/tokens belong to\n * sibling primitives that compose alongside it, not baked into the title.\n *\n * Wrap part of the headline in `<NarrativeHeadlineHighlight>` for a static\n * gradient accent, or `<NarrativeHeadlineRoll>` for the rolling \"roll\" variant.\n *\n * Styled via `narrative-headline.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * are done with standard `className` / `style`.\n */\nconst NarrativeHeadline = React.forwardRef<\n  HTMLHeadingElement,\n  TypeNarrativeHeadlineProps\n>(\n  (\n    { children, headingLevel = 2, size = \"default\", className, ...props },\n    ref\n  ) => {\n    const Heading = `h${headingLevel}` as const;\n\n    return (\n      <Heading\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline\",\n          { \"seeds-narrative-headline-small\": size === \"small\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Heading>\n    );\n  }\n);\n\nNarrativeHeadline.displayName = \"NarrativeHeadline\";\n\nexport default NarrativeHeadline;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineHighlightProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineHighlight — paints a span of headline text with the AI\n * brand gradient (the \"highlighted word\" treatment). Drop it inline inside a\n * `<NarrativeHeadline>`:\n *\n *     <NarrativeHeadline>\n *       Headline with a <NarrativeHeadlineHighlight>highlighted</NarrativeHeadlineHighlight> word\n *     </NarrativeHeadline>\n */\nconst NarrativeHeadlineHighlight = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineHighlightProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"seeds-narrative-headline-highlight\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nNarrativeHeadlineHighlight.displayName = \"NarrativeHeadlineHighlight\";\n\nexport default NarrativeHeadlineHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeHeadlineRollProps } from \"./NarrativeHeadlineTypes\";\n\n/**\n * NarrativeHeadlineRoll — the \"roll\" variant: a vertical word roll for the\n * highlighted slot of a headline. The active word slides into view while the\n * previous one rolls out (no typing). Inspired by the performative-ui WordRoll.\n *\n *     <NarrativeHeadline>\n *       Built for{\" \"}\n *       <NarrativeHeadlineRoll words={[\"marketers\", \"agencies\", \"teams\"]} />\n *     </NarrativeHeadline>\n *\n * The container width follows the active word so it sits naturally inline.\n * Gradient-painted by default; honors `prefers-reduced-motion` by holding the\n * first word static.\n */\nconst NarrativeHeadlineRoll = React.forwardRef<\n  HTMLSpanElement,\n  TypeNarrativeHeadlineRollProps\n>(\n  (\n    {\n      words,\n      intervalMs = 2200,\n      transitionMs = 500,\n      direction = \"up\",\n      gradient = true,\n      className,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const [i, setI] = React.useState(0);\n\n    React.useEffect(() => {\n      if (words.length <= 1) return;\n\n      // Respect reduced-motion: hold the first word, skip the cycle entirely.\n      const reduced =\n        typeof window !== \"undefined\" &&\n        typeof window.matchMedia === \"function\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (reduced) return;\n\n      const t = setInterval(\n        () => setI((j) => (j + 1) % words.length),\n        intervalMs\n      );\n      return () => clearInterval(t);\n    }, [intervalMs, words.length]);\n\n    const merged: React.CSSProperties = {\n      ...style,\n      // Consumed by the transition timing in narrative-headline.css.\n      [\"--seeds-narrative-headline-roll-ms\" as string]: `${transitionMs}ms`,\n    };\n\n    const prev = words.length ? (i - 1 + words.length) % words.length : 0;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-headline-roll\",\n          { \"seeds-narrative-headline-roll-down\": direction === \"down\" },\n          { \"seeds-narrative-headline-roll-gradient\": gradient },\n          className\n        )}\n        style={merged}\n        {...rest}\n      >\n        {/* Sizer keeps the container width matched to the active word — without\n            it the absolutely-positioned words would collapse the box. */}\n        <span\n          className=\"seeds-narrative-headline-roll-sizer\"\n          aria-hidden=\"true\"\n        >\n          {words[i]}\n        </span>\n        {words.map((w, idx) => (\n          <span\n            key={idx}\n            className={cn(\"seeds-narrative-headline-roll-word\", {\n              \"seeds-narrative-headline-roll-word-active\": idx === i,\n              \"seeds-narrative-headline-roll-word-past\":\n                idx === prev && i !== prev,\n            })}\n            aria-hidden={idx === i ? undefined : \"true\"}\n          >\n            {w}\n          </span>\n        ))}\n      </span>\n    );\n  }\n);\n\nNarrativeHeadlineRoll.displayName = \"NarrativeHeadlineRoll\";\n\nexport default NarrativeHeadlineRoll;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypePullQuoteProps } from \"./PullQuoteTypes\";\n\n/**\n * PullQuote — a narrative primitive that spotlights a quotation on an AI\n * gradient surface. The quote sits behind an accented vertical bar with an\n * optional attribution row (author name, avatar, network).\n *\n * Rendered as semantic `<figure>` / `<blockquote>` / `<figcaption>` markup.\n * Styled via `pull-quote.css` and `ai-container.css` (Seeds CSS custom\n * properties); consumers import the classes through\n * `@sproutsocial/racine/css/components`. Surface overrides are done with\n * standard `className` / `style`.\n */\nconst PullQuote = React.forwardRef<HTMLElement, TypePullQuoteProps>(\n  ({ quote, attribution, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <figure\n        ref={ref}\n        className={cn(\n          \"seeds-pull-quote\",\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          { \"seeds-pull-quote-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-pull-quote-bar\">\n          <blockquote className=\"seeds-pull-quote-text\">{quote}</blockquote>\n          {attribution != null && (\n            <figcaption className=\"seeds-pull-quote-attribution\">\n              {attribution}\n            </figcaption>\n          )}\n        </div>\n      </figure>\n    );\n  }\n);\n\nPullQuote.displayName = \"PullQuote\";\n\nexport default PullQuote;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeEyebrowTokenProps } from \"./EyebrowTokenTypes\";\n\n/**\n * EyebrowToken — a small gray pill that sits above a headline to carry a short\n * bit of context: a date (e.g. \"May 31, 2026\"), category, or kicker.\n *\n * A faithful match of the Figma \"Token / Non Clickable / Default\" design — a\n * solid `#dee1e1` fill with a matching border, 6px radius, and small body text.\n * Styled via `eyebrow-token.css` (Seeds CSS custom properties); consumers import\n * the classes through `@sproutsocial/racine/css/components`. Overrides come via\n * standard `className` / `style`.\n */\nconst EyebrowToken = React.forwardRef<HTMLSpanElement, TypeEyebrowTokenProps>(\n  ({ children, className, ...props }, ref) => (\n    <span ref={ref} className={cn(\"seeds-eyebrow-token\", className)} {...props}>\n      {children}\n    </span>\n  )\n);\n\nEyebrowToken.displayName = \"EyebrowToken\";\n\nexport default EyebrowToken;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDividerProps } from \"./NarrativeDividerTypes\";\n\n/**\n * NarrativeDivider — a full-width, 1px horizontal rule that separates sections\n * within a narrative brief (e.g. a row of metrics from the headline/summary\n * block below it).\n *\n * Renders a semantic <hr> stripped of its user-agent margins and borders, then\n * draws a single 1px line with the container-border-base token (#dee1e1, which\n * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom\n * properties); consumers import the classes through\n * @sproutsocial/racine/css/components. Overrides come via standard className /\n * style.\n */\nconst NarrativeDivider = React.forwardRef<\n  HTMLHRElement,\n  TypeNarrativeDividerProps\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    className={cn(\"seeds-narrative-divider\", className)}\n    {...props}\n  />\n));\n\nNarrativeDivider.displayName = \"NarrativeDivider\";\n\nexport default NarrativeDivider;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type {\n  TypeMetricHighlightProps,\n  TypeMetricHighlightTrend,\n} from \"./MetricHighlightTypes\";\n\n/** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */\nconst TrendArrow = ({ direction }: { direction: \"up\" | \"down\" }) => (\n  <svg\n    className=\"seeds-metric-highlight-trend-arrow\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n    focusable={false}\n  >\n    {direction === \"up\" ? (\n      <path\n        d=\"M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ) : (\n      <path\n        d=\"M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5\"\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    )}\n  </svg>\n);\n\nconst TrendBadge = ({\n  direction = \"up\",\n  value,\n  ...rest\n}: TypeMetricHighlightTrend) => (\n  <span\n    className={cn(\"seeds-metric-highlight-trend\", {\n      \"seeds-metric-highlight-trend-down\": direction === \"down\",\n    })}\n    {...rest}\n  >\n    <TrendArrow direction={direction} />\n    {value != null && (\n      <span className=\"seeds-metric-highlight-trend-value\">{value}</span>\n    )}\n  </span>\n);\n\n/**\n * MetricHighlight — a narrative primitive that spotlights a single metric: a\n * label, a large monospace value, an optional trend badge (a directional arrow\n * plus an optional number such as \"240%\"), and an optional chart supplied via\n * the `sparkline` slot (e.g. a `<SparklineChart />` from\n * `@sproutsocial/seeds-react-data-viz/sparkline`).\n *\n * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Layout flexes\n * across `appearance` (horizontal/vertical) and `size` (default/small); surface\n * overrides are done with standard `className` / `style`.\n */\nconst MetricHighlight = React.forwardRef<\n  HTMLDivElement,\n  TypeMetricHighlightProps\n>(\n  (\n    {\n      label,\n      value,\n      trend,\n      sparkline,\n      appearance = \"horizontal\",\n      size = \"default\",\n      container = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-metric-highlight\",\n          {\n            \"seeds-metric-highlight-vertical\": appearance === \"vertical\",\n            \"seeds-metric-highlight-small\": size === \"small\",\n            \"seeds-metric-highlight-bare\": !container,\n          },\n          className\n        )}\n        {...props}\n      >\n        <div className=\"seeds-metric-highlight-metric\">\n          <p className=\"seeds-metric-highlight-label\">{label}</p>\n          <div className=\"seeds-metric-highlight-value-row\">\n            <p className=\"seeds-metric-highlight-value\">{value}</p>\n            {trend != null && <TrendBadge {...trend} />}\n          </div>\n        </div>\n        {sparkline != null && (\n          // Layout-only slot (bounded dimensions per horizontal/vertical/small)\n          // for a consumer-supplied chart. It controls its own look; the slot\n          // only sizes and centers it.\n          <div className=\"seeds-metric-highlight-chart\">{sparkline}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nMetricHighlight.displayName = \"MetricHighlight\";\n\nexport default MetricHighlight;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport EyebrowToken from \"../EyebrowToken/EyebrowToken\";\nimport NarrativeHeadline from \"../NarrativeHeadline/NarrativeHeadline\";\nimport type { TypeNarrativeSummaryProps } from \"./NarrativeSummaryTypes\";\n\n/**\n * NarrativeSummary — a composed narrative block that pairs a lead column\n * (eyebrow + headline + optional action) with a Summary section and a Key\n * themes list.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is CSS Grid driven by container queries, so the columns collapse based\n * on the width the component is actually given, not the viewport:\n * - `\"three-column\"` → lead | Summary | Key themes.\n * - `\"two-column\"` → a 1/3 | 2/3 split with Summary and Key themes stacked in\n *   the wider column.\n *\n * Styled via `narrative-summary.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides\n * come via standard `className` / `style`.\n */\nconst NarrativeSummary = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSummaryProps\n>(\n  (\n    {\n      eyebrow,\n      headline,\n      headingLevel = 2,\n      action,\n      summary,\n      summaryLabel = \"Summary\",\n      keyThemes,\n      keyThemesLabel = \"Key themes\",\n      layout = \"three-column\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-summary\", className)}\n        {...props}\n      >\n        <div\n          className={cn(\"seeds-narrative-summary-grid\", {\n            \"seeds-narrative-summary-two-column\": layout === \"two-column\",\n          })}\n        >\n          <div className=\"seeds-narrative-summary-lead\">\n            {eyebrow != null && <EyebrowToken>{eyebrow}</EyebrowToken>}\n            <div className=\"seeds-narrative-summary-headline\">\n              <NarrativeHeadline size=\"small\" headingLevel={headingLevel}>\n                {headline}\n              </NarrativeHeadline>\n            </div>\n            {action != null && (\n              <div className=\"seeds-narrative-summary-action\">{action}</div>\n            )}\n          </div>\n\n          <div className=\"seeds-narrative-summary-content\">\n            {summary != null && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">{summaryLabel}</p>\n                <p className=\"seeds-narrative-summary-text\">{summary}</p>\n              </section>\n            )}\n            {hasKeyThemes && (\n              <section className=\"seeds-narrative-summary-section\">\n                <p className=\"seeds-narrative-summary-label\">\n                  {keyThemesLabel}\n                </p>\n                <ul className=\"seeds-narrative-summary-list\">\n                  {keyThemes.map((theme, i) => (\n                    <li key={i}>{theme}</li>\n                  ))}\n                </ul>\n              </section>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSummary.displayName = \"NarrativeSummary\";\n\nexport default NarrativeSummary;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeOrderedListProps } from \"./NarrativeOrderedListTypes\";\n\n/**\n * NarrativeOrderedList — a numbered list of action items. Each item pairs a\n * large ordinal (01, 02, …) with a title, an optional description, and an\n * optional call-to-action slot.\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories / playground).\n *\n * Layout is driven by container queries, so it responds to the width the\n * component is actually given, not the viewport:\n * - `\"vertical\"` (default) → items stacked full-width, one per row.\n * - `\"horizontal\"` → items laid out as a row of equal columns once there is\n *   room, collapsing back to a stack when the container is narrow.\n *\n * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);\n * consumers import the classes through `@sproutsocial/racine/css/components`.\n * Overrides come via standard `className` / `style`.\n */\nconst NarrativeOrderedList = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeOrderedListProps\n>(({ items, orientation = \"vertical\", className, ...props }, ref) => {\n  return (\n    // The outer element establishes the query container. The ol inside switches\n    // direction based on this element's width — a container query can only style\n    // descendants of the container, never the container element itself.\n    <div\n      ref={ref}\n      className={cn(\"seeds-narrative-ordered-list\", className)}\n      {...props}\n    >\n      <ol\n        className={cn(\"seeds-narrative-ordered-list-track\", {\n          \"seeds-narrative-ordered-list-horizontal\":\n            orientation === \"horizontal\",\n        })}\n      >\n        {items.map((item, i) => (\n          <li key={i} className=\"seeds-narrative-ordered-list-item\">\n            {/* Decorative — the ol/li already convey order to assistive tech, so\n                hide the visible ordinal from it to avoid double-announcing. */}\n            <span\n              className=\"seeds-narrative-ordered-list-number\"\n              aria-hidden=\"true\"\n            >\n              {String(i + 1).padStart(2, \"0\")}\n            </span>\n            <div className=\"seeds-narrative-ordered-list-body\">\n              <p className=\"seeds-narrative-ordered-list-title\">{item.title}</p>\n              {item.description != null && (\n                <p className=\"seeds-narrative-ordered-list-description\">\n                  {item.description}\n                </p>\n              )}\n              {item.action != null && (\n                <div className=\"seeds-narrative-ordered-list-action\">\n                  {item.action}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n});\n\nNarrativeOrderedList.displayName = \"NarrativeOrderedList\";\n\nexport default NarrativeOrderedList;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeDataCalloutProps } from \"./NarrativeDataCalloutTypes\";\n\n/**\n * NarrativeDataCallout — a horizontally oriented callout that pairs an injected\n * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).\n *\n * The kit ships no chart of its own; the `visual` slot accepts any node — the\n * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.\n * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's\n * `sparkline` slot).\n *\n * Renders inner content only — it carries no surface, shadow, or accent of its\n * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the\n * card look.\n *\n * Layout is a flex row driven by a container query, so it collapses to a stacked\n * column (visual on top, text below) based on the width the component is actually\n * given, not the viewport.\n *\n * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers\n * import the classes through `@sproutsocial/racine/css/components`. Overrides come\n * via standard `className` / `style`.\n */\nconst NarrativeDataCallout = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeDataCalloutProps\n>(({ visual, children, visualLabel, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"seeds-narrative-data-callout\", className)}\n    {...props}\n  >\n    <div className=\"seeds-narrative-data-callout-row\">\n      <div\n        className=\"seeds-narrative-data-callout-visual\"\n        role={visualLabel != null ? \"img\" : undefined}\n        aria-label={visualLabel}\n      >\n        {visual}\n      </div>\n      <div className=\"seeds-narrative-data-callout-body\">{children}</div>\n    </div>\n  </div>\n));\n\nNarrativeDataCallout.displayName = \"NarrativeDataCallout\";\n\nexport default NarrativeDataCallout;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeAIContainerProps } from \"./AIContainerTypes\";\n\n/**\n * AIContainer — a rounded surface primitive with the AI gradient background.\n * Provides the outer shell (border-radius, shadow, overflow, gradient) without\n * any padding. Used by PullQuote and available as a standalone container.\n *\n * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.\n * - `vivid` — the full-saturation AI gradient with white text (always white).\n *\n * Styled via `ai-container.css` (Seeds CSS custom properties).\n */\nconst AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(\n  ({ children, appearance = \"subtle\", className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-ai-container\",\n          { \"seeds-ai-container-vivid\": appearance === \"vivid\" },\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAIContainer.displayName = \"AIContainer\";\n\nexport default AIContainer;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport NarrativeAttribution from \"../NarrativeAttribution/NarrativeAttribution\";\nimport type { TypeNarrativeSocialMediaCardProps } from \"./NarrativeSocialMediaCardTypes\";\n\n/**\n * NarrativeSocialMediaCard — a narrative primitive that displays a social media\n * post card with a header (avatar + handle), content area, and footer with\n * engagement metadata (replies, likes, reposts, etc.).\n *\n * Styled via narrative-social-media-card.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is vertically stacked with clean typography and icon-based metadata in\n * the footer. Default has a gray background; use appearance=\"no-background\" to\n * remove the background and blend seamlessly with the page.\n */\nconst NarrativeSocialMediaCard = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeSocialMediaCardProps\n>(\n  (\n    {\n      avatar,\n      avatarAlt,\n      displayName,\n      socialIcon,\n      image,\n      text,\n      meta,\n      appearance,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"seeds-narrative-social-media-card\",\n          appearance === \"no-background\" &&\n            \"seeds-narrative-social-media-card--no-background\",\n          className\n        )}\n        {...props}\n      >\n        <NarrativeAttribution\n          avatarUrl={avatar}\n          avatarAlt={avatarAlt}\n          userName={displayName}\n          socialIcon={socialIcon}\n        />\n\n        <div className=\"seeds-narrative-social-media-card-content\">\n          {image}\n          {text}\n        </div>\n\n        <div className=\"seeds-narrative-social-media-card-footer\">\n          {meta.map((item, index) => (\n            <div\n              key={index}\n              className=\"seeds-narrative-social-media-card-stat\"\n              aria-label={item.label}\n            >\n              {item.icon}\n              <span className=\"seeds-narrative-social-media-card-stat-value\">\n                {item.value}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nNarrativeSocialMediaCard.displayName = \"NarrativeSocialMediaCard\";\n\nexport default NarrativeSocialMediaCard;\n","import * as React from \"react\";\nimport { cn } from \"../_internal/cn\";\nimport type { TypeNarrativeAttributionProps } from \"./NarrativeAttributionTypes\";\n\n/**\n * NarrativeAttribution — a narrative primitive that displays attribution\n * information for social media content, including an avatar, social network\n * icon, and user name.\n *\n * Styled via narrative-attribution.css (Seeds CSS custom properties);\n * consumers import the classes through @sproutsocial/racine/css/components.\n * Layout is horizontal with avatar, social icon, and user name arranged\n * side by side. Surface overrides are done with standard className / style.\n */\nconst NarrativeAttribution = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeAttributionProps\n>(\n  (\n    {\n      avatarUrl,\n      avatarAlt = \"Profile avatar\",\n      userName,\n      socialIcon,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-narrative-attribution\", className)}\n        {...props}\n      >\n        <img\n          src={avatarUrl}\n          alt={avatarAlt}\n          className=\"seeds-narrative-attribution-avatar\"\n        />\n        <div className=\"seeds-narrative-attribution-social-icon\">\n          {socialIcon}\n        </div>\n        <span className=\"seeds-narrative-attribution-user-name\">\n          {userName}\n        </span>\n      </div>\n    );\n  }\n);\n\nNarrativeAttribution.displayName = \"NarrativeAttribution\";\n\nexport default NarrativeAttribution;\n"],"mappings":";AAAA,YAAY,WAAW;;;ACChB,SAAS,MACX,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;;;ADHI;AALJ,IAAM,qBAA2B,iBAG/B,CAAC,EAAE,UAAU,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,EAAE,oCAAoC,OAAO;AAAA,QAC7C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAEjC,IAAO,6BAAQ;;;AElCf,YAAYA,YAAW;AA2BjB,gBAAAC,YAAA;AAXN,IAAM,oBAA0B;AAAA,EAI9B,CACE,EAAE,UAAU,eAAe,GAAG,OAAO,WAAW,WAAW,GAAG,MAAM,GACpE,QACG;AACH,UAAM,UAAU,IAAI,YAAY;AAEhC,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,kCAAkC,SAAS,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAEhC,IAAO,4BAAQ;;;AC5Cf,YAAYC,YAAW;AAkBnB,gBAAAC,YAAA;AALJ,IAAM,6BAAmC,kBAGvC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC5C,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAEzC,IAAO,qCAAQ;;;AC9Bf,YAAYC,YAAW;AA+DjB,SAaE,OAAAC,MAbF;AA7CN,IAAM,wBAA8B;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,GAAG,IAAI,IAAU,gBAAS,CAAC;AAElC,IAAM,iBAAU,MAAM;AACpB,UAAI,MAAM,UAAU,EAAG;AAGvB,YAAM,UACJ,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AACxD,UAAI,QAAS;AAEb,YAAM,IAAI;AAAA,QACR,MAAM,KAAK,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM;AAAA,QACxC;AAAA,MACF;AACA,aAAO,MAAM,cAAc,CAAC;AAAA,IAC9B,GAAG,CAAC,YAAY,MAAM,MAAM,CAAC;AAE7B,UAAM,SAA8B;AAAA,MAClC,GAAG;AAAA;AAAA,MAEH,CAAC,oCAA8C,GAAG,GAAG,YAAY;AAAA,IACnE;AAEA,UAAM,OAAO,MAAM,UAAU,IAAI,IAAI,MAAM,UAAU,MAAM,SAAS;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,sCAAsC,cAAc,OAAO;AAAA,UAC7D,EAAE,0CAA0C,SAAS;AAAA,UACrD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QAIJ;AAAA,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,gBAAM,CAAC;AAAA;AAAA,UACV;AAAA,UACC,MAAM,IAAI,CAAC,GAAG,QACb,gBAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,GAAG,sCAAsC;AAAA,gBAClD,6CAA6C,QAAQ;AAAA,gBACrD,2CACE,QAAQ,QAAQ,MAAM;AAAA,cAC1B,CAAC;AAAA,cACD,eAAa,QAAQ,IAAI,SAAY;AAAA,cAEpC;AAAA;AAAA,YARI;AAAA,UASP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;AAEpC,IAAO,gCAAQ;;;ACtGf,YAAYC,YAAW;AA6Bf,SACE,OAAAC,MADF,QAAAC,aAAA;AAdR,IAAM,YAAkB;AAAA,EACtB,CAAC,EAAE,OAAO,aAAa,aAAa,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3E,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,EAAE,4BAA4B,eAAe,QAAQ;AAAA,UACrD,EAAE,0BAA0B,eAAe,QAAQ;AAAA,UACnD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,0BAAAC,MAAC,SAAI,WAAU,wBACb;AAAA,0BAAAD,KAAC,gBAAW,WAAU,yBAAyB,iBAAM;AAAA,UACpD,eAAe,QACd,gBAAAA,KAAC,gBAAW,WAAU,gCACnB,uBACH;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;;;AC5Cf,YAAYE,YAAW;AAgBnB,gBAAAC,YAAA;AAFJ,IAAM,eAAqB;AAAA,EACzB,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAClC,gBAAAA,KAAC,UAAK,KAAU,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,OAClE,UACH;AAEJ;AAEA,aAAa,cAAc;AAE3B,IAAO,uBAAQ;;;ACxBf,YAAYC,YAAW;AAoBrB,gBAAAC,YAAA;AAJF,IAAM,mBAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA;AACN,CACD;AAED,iBAAiB,cAAc;AAE/B,IAAO,2BAAQ;;;AC7Bf,YAAYC,YAAW;AAgBjB,gBAAAC,MAsBJ,QAAAC,aAtBI;AARN,IAAM,aAAa,CAAC,EAAE,UAAU,MAC9B,gBAAAD;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,eAAW;AAAA,IACX,WAAW;AAAA,IAEV,wBAAc,OACb,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB,IAEA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB;AAAA;AAEJ;AAGF,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,gCAAgC;AAAA,MAC5C,qCAAqC,cAAc;AAAA,IACrD,CAAC;AAAA,IACA,GAAG;AAAA,IAEJ;AAAA,sBAAAD,KAAC,cAAW,WAAsB;AAAA,MACjC,SAAS,QACR,gBAAAA,KAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA;AAAA;AAEhE;AAeF,IAAM,kBAAwB;AAAA,EAI5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,mCAAmC,eAAe;AAAA,YAClD,gCAAgC,SAAS;AAAA,YACzC,+BAA+B,CAAC;AAAA,UAClC;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,0BAAAA,MAAC,SAAI,WAAU,iCACb;AAAA,4BAAAD,KAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,YACnD,gBAAAC,MAAC,SAAI,WAAU,oCACb;AAAA,8BAAAD,KAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,cAClD,SAAS,QAAQ,gBAAAA,KAAC,cAAY,GAAG,OAAO;AAAA,eAC3C;AAAA,aACF;AAAA,UACC,aAAa;AAAA;AAAA;AAAA,UAIZ,gBAAAA,KAAC,SAAI,WAAU,gCAAgC,qBAAU;AAAA;AAAA;AAAA,IAE7D;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;ACnHf,YAAYE,YAAW;AAyDb,SACsB,OAAAC,MADtB,QAAAC,aAAA;AAjCV,IAAM,mBAAyB;AAAA,EAI7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,aAAa,QAAQ,UAAU,SAAS;AAE7D,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA,QAEJ,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,gCAAgC;AAAA,cAC5C,sCAAsC,WAAW;AAAA,YACnD,CAAC;AAAA,YAED;AAAA,8BAAAA,MAAC,SAAI,WAAU,gCACZ;AAAA,2BAAW,QAAQ,gBAAAD,KAAC,wBAAc,mBAAQ;AAAA,gBAC3C,gBAAAA,KAAC,SAAI,WAAU,oCACb,0BAAAA,KAAC,6BAAkB,MAAK,SAAQ,cAC7B,oBACH,GACF;AAAA,gBACC,UAAU,QACT,gBAAAA,KAAC,SAAI,WAAU,kCAAkC,kBAAO;AAAA,iBAE5D;AAAA,cAEA,gBAAAC,MAAC,SAAI,WAAU,mCACZ;AAAA,2BAAW,QACV,gBAAAA,MAAC,aAAQ,WAAU,mCACjB;AAAA,kCAAAD,KAAC,OAAE,WAAU,iCAAiC,wBAAa;AAAA,kBAC3D,gBAAAA,KAAC,OAAE,WAAU,gCAAgC,mBAAQ;AAAA,mBACvD;AAAA,gBAED,gBACC,gBAAAC,MAAC,aAAQ,WAAU,mCACjB;AAAA,kCAAAD,KAAC,OAAE,WAAU,iCACV,0BACH;AAAA,kBACA,gBAAAA,KAAC,QAAG,WAAU,gCACX,oBAAU,IAAI,CAAC,OAAO,MACrB,gBAAAA,KAAC,QAAY,mBAAJ,CAAU,CACpB,GACH;AAAA,mBACF;AAAA,iBAEJ;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAE/B,IAAO,2BAAQ;;;ACjGf,YAAYE,aAAW;AA6CX,gBAAAC,OAMA,QAAAC,aANA;AAvBZ,IAAM,uBAA6B,mBAGjC,CAAC,EAAE,OAAO,cAAc,YAAY,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnE;AAAA;AAAA;AAAA;AAAA,IAIE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA,QAEJ,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,sCAAsC;AAAA,cAClD,2CACE,gBAAgB;AAAA,YACpB,CAAC;AAAA,YAEA,gBAAM,IAAI,CAAC,MAAM,MAChB,gBAAAC,MAAC,QAAW,WAAU,qCAGpB;AAAA,8BAAAD;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBAEX,iBAAO,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA;AAAA,cAChC;AAAA,cACA,gBAAAC,MAAC,SAAI,WAAU,qCACb;AAAA,gCAAAD,MAAC,OAAE,WAAU,sCAAsC,eAAK,OAAM;AAAA,gBAC7D,KAAK,eAAe,QACnB,gBAAAA,MAAC,OAAE,WAAU,4CACV,eAAK,aACR;AAAA,gBAED,KAAK,UAAU,QACd,gBAAAA,MAAC,SAAI,WAAU,uCACZ,eAAK,QACR;AAAA,iBAEJ;AAAA,iBArBO,CAsBT,CACD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAO,+BAAQ;;;ACzEf,YAAYE,aAAW;AAkCnB,SACE,OAAAC,OADF,QAAAC,aAAA;AATJ,IAAM,uBAA6B,mBAGjC,CAAC,EAAE,QAAQ,UAAU,aAAa,WAAW,GAAG,MAAM,GAAG,QACzD,gBAAAD;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACtD,GAAG;AAAA,IAEJ,0BAAAC,MAAC,SAAI,WAAU,oCACb;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM,eAAe,OAAO,QAAQ;AAAA,UACpC,cAAY;AAAA,UAEX;AAAA;AAAA,MACH;AAAA,MACA,gBAAAA,MAAC,SAAI,WAAU,qCAAqC,UAAS;AAAA,OAC/D;AAAA;AACF,CACD;AAED,qBAAqB,cAAc;AAEnC,IAAO,+BAAQ;;;ACjDf,YAAYE,aAAW;AAiBjB,gBAAAC,aAAA;AAHN,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,aAAa,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjE,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,4BAA4B,eAAe,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;;;AClCf,YAAYC,aAAW;;;ACAvB,YAAYC,aAAW;AA8BjB,SAKE,OAAAC,OALF,QAAAC,aAAA;AAhBN,IAAM,uBAA6B;AAAA,EAIjC,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,QACrD,GAAG;AAAA,QAEJ;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,gBAAAA,MAAC,SAAI,WAAU,2CACZ,sBACH;AAAA,UACA,gBAAAA,MAAC,UAAK,WAAU,yCACb,oBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,qBAAqB,cAAc;AAEnC,IAAO,+BAAQ;;;ADPP,gBAAAE,OAOA,QAAAC,aAPA;AA9BR,IAAM,2BAAiC;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,eAAe,mBACb;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX;AAAA,cACA,UAAU;AAAA,cACV;AAAA;AAAA,UACF;AAAA,UAEA,gBAAAC,MAAC,SAAI,WAAU,6CACZ;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UAEA,gBAAAD,MAAC,SAAI,WAAU,4CACZ,eAAK,IAAI,CAAC,MAAM,UACf,gBAAAC;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,cAAY,KAAK;AAAA,cAEhB;AAAA,qBAAK;AAAA,gBACN,gBAAAD,MAAC,UAAK,WAAU,gDACb,eAAK,OACR;AAAA;AAAA;AAAA,YAPK;AAAA,UAQP,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,yBAAyB,cAAc;AAEvC,IAAO,mCAAQ;","names":["React","jsx","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","React","jsx","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","React","jsx","React","React","jsx","jsxs","jsx","jsxs"]}