@salesmind-ai/design-system 0.3.1 → 0.3.3

package/dist/chunk-NT4LBP7D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,OAAO,UAAU;AAgCX;AAHC,IAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,cAAc,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW,KAAK,iBAAiB,SAAS;AAAA,QACzC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAQlB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAetB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AACnD,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,gBAAa;AAAA,MACb,iBAAc;AAAA,MACd,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,sBAAsB,MAAM,WAGvC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,KAAK,4BAA4B,SAAS;AAAA,MACpD,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAQ3B,IAAM,qBAAqB,MAAM,WAGtC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,2BAA2B,SAAS;AAAA,MACnD,GAAG;AAAA,MACL;AAAA;AAAA,EAED;AAEJ,CAAC;AAED,mBAAmB,cAAc","sourcesContent":["import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\nimport './Breadcrumb.css';\n\n/* ==========================================================================\n   Breadcrumb (nav)\n   ========================================================================== */\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  /** Override the default aria-label for the nav element. @default \"Breadcrumb\" */\n  'aria-label'?: string;\n}\n\n/**\n * Navigation breadcrumb trail. Wrap `BreadcrumbList`, `BreadcrumbItem`,\n * `BreadcrumbLink`, and `BreadcrumbPage` inside this root element.\n *\n * @example\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Current</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, 'aria-label': ariaLabel = 'Breadcrumb', ...props }, ref) => {\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={clsx('ds-breadcrumb', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\n/* ==========================================================================\n   BreadcrumbList (ol)\n   ========================================================================== */\n\nexport type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;\n\nexport const BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  BreadcrumbListProps\n>(({ className, ...props }, ref) => {\n  return (\n    <ol\n      ref={ref}\n      className={clsx('ds-breadcrumb__list', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbList.displayName = 'BreadcrumbList';\n\n/* ==========================================================================\n   BreadcrumbItem (li)\n   ========================================================================== */\n\nexport type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(({ className, ...props }, ref) => {\n  return (\n    <li\n      ref={ref}\n      className={clsx('ds-breadcrumb__item', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\n/* ==========================================================================\n   BreadcrumbLink (a)\n   ========================================================================== */\n\nexport interface BreadcrumbLinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true, renders its child as the root element via Radix Slot.\n   * Use this to compose with routing Link components.\n   */\n  asChild?: boolean;\n}\n\nexport const BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbLinkProps\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      ref={ref}\n      className={clsx('ds-breadcrumb__link', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\n/* ==========================================================================\n   BreadcrumbPage (span — current page)\n   ========================================================================== */\n\nexport type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  BreadcrumbPageProps\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-current=\"page\"\n      aria-disabled=\"true\"\n      className={clsx('ds-breadcrumb__page', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\n/* ==========================================================================\n   BreadcrumbSeparator (li — decorative)\n   ========================================================================== */\n\nexport type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const BreadcrumbSeparator = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbSeparatorProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <li\n      ref={ref}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={clsx('ds-breadcrumb__separator', className)}\n      {...props}\n    >\n      {children ?? '/'}\n    </li>\n  );\n});\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\n/* ==========================================================================\n   BreadcrumbEllipsis (span — truncation indicator)\n   ========================================================================== */\n\nexport type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const BreadcrumbEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  BreadcrumbEllipsisProps\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={clsx('ds-breadcrumb__ellipsis', className)}\n      {...props}\n    >\n      &hellip;\n    </span>\n  );\n});\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n"]}

package/dist/chunk-OLV7OD3X.cjs

@@ -0,0 +1,502 @@
+'use strict';
+
+var chunkECXBTUH6_cjs = require('./chunk-ECXBTUH6.cjs');
+var chunkVC5LMUVQ_cjs = require('./chunk-VC5LMUVQ.cjs');
+var chunkVM7WFMKI_cjs = require('./chunk-VM7WFMKI.cjs');
+var chunkIYPXJ6YC_cjs = require('./chunk-IYPXJ6YC.cjs');
+var chunkLJADZITX_cjs = require('./chunk-LJADZITX.cjs');
+var React9 = require('react');
+var clsx9 = require('clsx');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React9__default = /*#__PURE__*/_interopDefault(React9);
+var clsx9__default = /*#__PURE__*/_interopDefault(clsx9);
+
+var ArticleCard = React9.forwardRef(
+  ({
+    href,
+    title,
+    excerpt,
+    imageUrl,
+    imageAlt = "",
+    category,
+    date,
+    readingTime,
+    author,
+    variant = "vertical",
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const { track } = chunkVC5LMUVQ_cjs.useAnalytics();
+    const handleClick = (e) => {
+      track("article_click", { url: href, title, category });
+      if (onClick) onClick(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkLJADZITX_cjs.OutboundLink,
+      {
+        ref,
+        href,
+        context: "article-card",
+        className: clsx9__default.default(
+          "ds-article-card",
+          `ds-article-card--${variant}`,
+          !imageUrl && "ds-article-card--no-image",
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: [
+          imageUrl ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__image-wrapper", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: imageAlt,
+                className: "ds-article-card__image",
+                loading: "lazy"
+              }
+            ),
+            category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-article-card__category-badge", children: category })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__placeholder", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "ds-article-card__placeholder-icon", "aria-hidden": "true" }),
+            category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-article-card__category-badge", children: category })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__content", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-article-card__title", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-article-card__excerpt", children: excerpt }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__meta", children: [
+              (date || author) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__meta-primary", children: [
+                author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-article-card__author", children: author }),
+                author && date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-article-card__dot", "aria-hidden": "true", children: "\u2022" }),
+                date && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date, className: "ds-article-card__date", children: date })
+              ] }),
+              readingTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-card__meta-secondary", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  readingTime,
+                  " min read"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-card__footer", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-article-card__read-more", children: [
+              "Read article",
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 16, className: "ds-article-card__arrow" })
+            ] }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ArticleCard.displayName = "ArticleCard";
+var ArticleLayout = React9.forwardRef(
+  ({
+    children,
+    title,
+    author,
+    date,
+    heroImage,
+    sidebar,
+    className,
+    ...props
+  }, ref) => {
+    const { track } = chunkVC5LMUVQ_cjs.useAnalytics();
+    React9__default.default.useEffect(() => {
+      let maxScroll = 0;
+      const handleScroll = () => {
+        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        if (docHeight > 0) {
+          const scrollPercent = Math.round(window.scrollY / docHeight * 100);
+          if (scrollPercent > maxScroll) {
+            maxScroll = scrollPercent;
+            if (maxScroll === 25) track("article_scroll", { milestone: 25 });
+            if (maxScroll === 50) track("article_scroll", { milestone: 50 });
+            if (maxScroll === 75) track("article_scroll", { milestone: 75 });
+            if (maxScroll === 100) track("article_scroll", { milestone: 100 });
+          }
+        }
+      };
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [track]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "article",
+      {
+        ref,
+        className: clsx9__default.default("ds-article-layout", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-article-layout__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "ds-article-layout__title", children: title }),
+            (author || date) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-article-layout__meta", children: [
+              author && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-layout__author", children: author }),
+              author && date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-article-layout__dot", "aria-hidden": "true", children: "\u2022" }),
+              date && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "ds-article-layout__date", children: date })
+            ] })
+          ] }),
+          heroImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-layout__hero", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: heroImage, alt: "", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(
+            "ds-article-layout__body",
+            sidebar && "ds-article-layout__body--with-sidebar"
+          ), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-layout__content ds-prose", children }),
+            sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "ds-article-layout__sidebar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-layout__sidebar-inner", children: sidebar }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ArticleLayout.displayName = "ArticleLayout";
+var AuthorBio = React9.forwardRef(
+  ({
+    name,
+    role,
+    avatar,
+    bio,
+    links,
+    variant = "card",
+    className,
+    ...props
+  }, ref) => {
+    const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx9__default.default("ds-author-bio", `ds-author-bio--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkVM7WFMKI_cjs.Avatar, { size: variant === "compact" ? "sm" : variant === "longform" ? "lg" : "md", className: "ds-author-bio__avatar", children: [
+            avatar && /* @__PURE__ */ jsxRuntime.jsx(chunkVM7WFMKI_cjs.AvatarImage, { src: avatar, alt: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkVM7WFMKI_cjs.AvatarFallback, { children: initials })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-author-bio__info", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-author-bio__name", children: name }),
+            role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-author-bio__role", children: role }),
+            bio && variant !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-author-bio__bio", children: bio }),
+            links && links.length > 0 && variant !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-author-bio__links", children: links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              chunkLJADZITX_cjs.OutboundLink,
+              {
+                href: link.href,
+                context: "author-bio-link",
+                className: "ds-author-bio__link",
+                children: [
+                  link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-author-bio__link-icon", children: link.icon }),
+                  link.label
+                ]
+              },
+              i
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AuthorBio.displayName = "AuthorBio";
+var TableOfContents = React9.forwardRef(
+  ({
+    items,
+    activeId: controlledActiveId,
+    position = "sidebar",
+    label,
+    onItemClick,
+    className,
+    ...props
+  }, ref) => {
+    const t = chunkECXBTUH6_cjs.useMessage();
+    const defaultLabel = t({ id: "ds.toc.label", defaultMessage: "On this page" });
+    const finalLabel = label || defaultLabel;
+    const [observedActiveId, setObservedActiveId] = React9.useState("");
+    const activeId = controlledActiveId ?? observedActiveId;
+    React9.useEffect(() => {
+      if (controlledActiveId !== void 0) return;
+      if (items.length === 0) return;
+      const handleScroll = () => {
+        const headingElements = items.map((item) => ({
+          id: item.id,
+          el: document.getElementById(item.id)
+        })).filter((h) => !!h.el);
+        if (headingElements.length === 0) return;
+        const topOffset = 120;
+        const firstBelowIndex = headingElements.findIndex((h) => {
+          const rect = h.el.getBoundingClientRect();
+          return rect.top > topOffset;
+        });
+        let newActiveId = "";
+        if (firstBelowIndex === -1) {
+          newActiveId = headingElements[headingElements.length - 1].id;
+        } else if (firstBelowIndex === 0) {
+          newActiveId = "";
+        } else {
+          newActiveId = headingElements[firstBelowIndex - 1].id;
+        }
+        setObservedActiveId(newActiveId);
+      };
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      handleScroll();
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [items, controlledActiveId]);
+    const handleClick = (id) => {
+      const el = document.getElementById(id);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      if (onItemClick) onItemClick(id);
+    };
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        ref,
+        className: clsx9__default.default("ds-toc", `ds-toc--${position}`, className),
+        "aria-label": finalLabel,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-toc__label", children: finalLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ds-toc__list", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ds-toc__item", style: { paddingLeft: `${(item.level - 2) * 12}px` }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx9__default.default(
+                "ds-toc__link",
+                activeId === item.id && "ds-toc__link--active"
+              ),
+              onClick: () => handleClick(item.id),
+              children: item.title
+            }
+          ) }, item.id)) })
+        ]
+      }
+    );
+  }
+);
+TableOfContents.displayName = "TableOfContents";
+var RelatedContent = React9.forwardRef(
+  ({
+    eyebrow,
+    title = "Related Articles",
+    items,
+    maxVisible,
+    className,
+    ...props
+  }, ref) => {
+    const visibleItems = maxVisible ? items.slice(0, maxVisible) : items;
+    if (visibleItems.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkIYPXJ6YC_cjs.SectionShell,
+      {
+        ref,
+        className: clsx9__default.default("ds-related-content", className),
+        background: "muted",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkIYPXJ6YC_cjs.SectionHeader, { eyebrow, title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-related-content__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(ArticleCard, { ...item }, i)) })
+        ]
+      }
+    );
+  }
+);
+RelatedContent.displayName = "RelatedContent";
+var LongFormLayout = React9__default.default.forwardRef(
+  ({ children, sidebar, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx9__default.default("ds-longform-layout", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("article", { className: "ds-longform-layout__main", children }),
+      sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "ds-longform-layout__sidebar", children: sidebar })
+    ] });
+  }
+);
+LongFormLayout.displayName = "LongFormLayout";
+var InsightCallout = React9__default.default.forwardRef(
+  ({ children, icon, title, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { ref, className: clsx9__default.default("ds-insight-callout", className), ...props, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-insight-callout__icon", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-insight-callout__content", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "ds-insight-callout__title", children: title }),
+        children
+      ] })
+    ] });
+  }
+);
+InsightCallout.displayName = "InsightCallout";
+var DataHighlight = React9__default.default.forwardRef(
+  ({ stat, label, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: clsx9__default.default("ds-data-highlight", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-data-highlight__stat-group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-data-highlight__stat", children: stat }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-data-highlight__label", children: label })
+      ] }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "ds-data-highlight__caption", children })
+    ] });
+  }
+);
+DataHighlight.displayName = "DataHighlight";
+var ReadingProgress = React9__default.default.forwardRef(
+  ({ targetRef, className, ...props }, ref) => {
+    const [progress, setProgress] = React9.useState(0);
+    const frameRef = React9.useRef(null);
+    React9.useEffect(() => {
+      const handleScroll = () => {
+        if (frameRef.current) cancelAnimationFrame(frameRef.current);
+        frameRef.current = requestAnimationFrame(() => {
+          let percentage = 0;
+          if (targetRef && targetRef.current) {
+            const el = targetRef.current;
+            const rect = el.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            if (rect.top > viewportHeight) {
+              percentage = 0;
+            } else if (rect.bottom < 0) {
+              percentage = 100;
+            } else {
+              const scrollableDistance = rect.height - viewportHeight;
+              if (scrollableDistance <= 0) {
+                percentage = 100;
+              } else {
+                const scrolled = viewportHeight - rect.top;
+                percentage = Math.max(0, Math.min(100, scrolled / scrollableDistance * 100));
+              }
+            }
+          } else {
+            const scrollPosition = window.scrollY;
+            const scrollHeight = document.body.scrollHeight - window.innerHeight;
+            percentage = scrollHeight > 0 ? scrollPosition / scrollHeight * 100 : 0;
+            percentage = Math.max(0, Math.min(100, percentage));
+          }
+          setProgress(percentage);
+        });
+      };
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      window.addEventListener("resize", handleScroll, { passive: true });
+      handleScroll();
+      return () => {
+        if (frameRef.current) cancelAnimationFrame(frameRef.current);
+        window.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("resize", handleScroll);
+      };
+    }, [targetRef]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx9__default.default("ds-reading-progress", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "ds-reading-progress__bar",
+            style: { transform: `scaleX(${progress / 100})` }
+          }
+        )
+      }
+    );
+  }
+);
+ReadingProgress.displayName = "ReadingProgress";
+var VersionedUpgradeAlert = React9__default.default.forwardRef(
+  ({ seriesName, viewedYear, latestYear, latestUrl, deltaSummary, className, ...props }, ref) => {
+    const [dismissed, setDismissed] = React9.useState(false);
+    if (dismissed) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx9__default.default("ds-versioned-alert", className),
+        role: "alert",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-versioned-alert__content", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-versioned-alert__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-versioned-alert__text", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Outdated Edition:" }),
+              " You are viewing the ",
+              viewedYear,
+              " edition of ",
+              seriesName,
+              ". The ",
+              /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                latestYear,
+                " edition"
+              ] }),
+              " is now available.",
+              deltaSummary && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-versioned-alert__delta", children: [
+                " ",
+                deltaSummary
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-versioned-alert__actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(chunkLJADZITX_cjs.OutboundLink, { href: latestUrl, context: "versioned-alert-view-latest", className: "ds-versioned-alert__button ds-button ds-button--primary ds-button--sm", openInNewTab: false, children: [
+              "View ",
+              latestYear,
+              " Edition"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "ds-versioned-alert__close",
+                onClick: () => setDismissed(true),
+                "aria-label": "Dismiss alert",
+                children: "\xD7"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+VersionedUpgradeAlert.displayName = "VersionedUpgradeAlert";
+var VersionedSeriesNavigator = React9__default.default.forwardRef(
+  ({ seriesName, hubUrl, editions, className, ...props }, ref) => {
+    const sortedEditions = [...editions].sort((a, b) => a.year - b.year);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx9__default.default("ds-versioned-navigator", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-versioned-navigator__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-versioned-navigator__label", children: "Series" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkLJADZITX_cjs.OutboundLink, { href: hubUrl, context: "versioned-navigator-hub", className: "ds-versioned-navigator__title", openInNewTab: false, children: [
+          seriesName,
+          " Hub"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-versioned-navigator__timeline", children: sortedEditions.map((edition, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-versioned-navigator__connector" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkLJADZITX_cjs.OutboundLink,
+          {
+            href: edition.url,
+            context: "versioned-navigator-edition",
+            className: clsx9__default.default(
+              "ds-versioned-navigator__node",
+              edition.isCurrent && "ds-versioned-navigator__node--active"
+            ),
+            "aria-current": edition.isCurrent ? "page" : void 0,
+            openInNewTab: false,
+            children: edition.year
+          }
+        )
+      ] }, edition.year)) })
+    ] });
+  }
+);
+VersionedSeriesNavigator.displayName = "VersionedSeriesNavigator";
+
+exports.ArticleCard = ArticleCard;
+exports.ArticleLayout = ArticleLayout;
+exports.AuthorBio = AuthorBio;
+exports.DataHighlight = DataHighlight;
+exports.InsightCallout = InsightCallout;
+exports.LongFormLayout = LongFormLayout;
+exports.ReadingProgress = ReadingProgress;
+exports.RelatedContent = RelatedContent;
+exports.TableOfContents = TableOfContents;
+exports.VersionedSeriesNavigator = VersionedSeriesNavigator;
+exports.VersionedUpgradeAlert = VersionedUpgradeAlert;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-OLV7OD3X.cjs.map

package/dist/chunk-OLV7OD3X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ArticleCard/ArticleCard.tsx","../src/components/ArticleLayout/ArticleLayout.tsx","../src/components/AuthorBio/AuthorBio.tsx","../src/components/TableOfContents/TableOfContents.tsx","../src/components/RelatedContent/RelatedContent.tsx","../src/components/LongFormLayout/LongFormLayout.tsx","../src/components/LongFormComponents/LongFormComponents.tsx","../src/components/ReadingProgress/ReadingProgress.tsx","../src/components/VersionedContent/VersionedContent.tsx"],"names":["React","forwardRef","clsx","jsx","jsxs","useEffect","useState"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useAnalytics } from '../../web/analytics/use-analytics';\nimport { ArrowRight, Clock, FileText } from 'lucide-react';\nimport { OutboundLink } from '../OutboundLink/OutboundLink';\nimport './ArticleCard.css';\n\nexport interface ArticleCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {\n  /** Target URL */\n  href: string;\n  /** Article title */\n  title: string;\n  /** Short excerpt or description */\n  excerpt: string;\n  /** Image URL for the thumbnail */\n  imageUrl?: string;\n  /** Image alt text */\n  imageAlt?: string;\n  /** Category or tag label */\n  category?: string;\n  /** Publication date */\n  date?: string;\n  /** Reading time in minutes */\n  readingTime?: number;\n  /** Author name */\n  author?: string;\n  /** Variant for different grid layouts */\n  variant?: 'vertical' | 'horizontal' | 'featured';\n}\n\n/**\n * Standardized card for blog posts, resources, and case studies.\n * Acts as a block-level link.\n */\nexport const ArticleCard = forwardRef<HTMLAnchorElement, ArticleCardProps>(\n  (\n    {\n      href,\n      title,\n      excerpt,\n      imageUrl,\n      imageAlt = '',\n      category,\n      date,\n      readingTime,\n      author,\n      variant = 'vertical',\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { track } = useAnalytics();\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      track('article_click', { url: href, title, category });\n      if (onClick) onClick(e);\n    };\n\n    return (\n      <OutboundLink\n        ref={ref}\n        href={href}\n        context=\"article-card\"\n        className={clsx(\n          'ds-article-card',\n          `ds-article-card--${variant}`,\n          !imageUrl && 'ds-article-card--no-image',\n          className\n        )}\n        onClick={handleClick}\n        {...props}\n      >\n        {imageUrl ? (\n          <div className=\"ds-article-card__image-wrapper\">\n            <img \n              src={imageUrl} \n              alt={imageAlt} \n              className=\"ds-article-card__image\" \n              loading=\"lazy\" \n            />\n            {category && (\n              <span className=\"ds-article-card__category-badge\">{category}</span>\n            )}\n          </div>\n        ) : (\n          <div className=\"ds-article-card__placeholder\">\n            <FileText className=\"ds-article-card__placeholder-icon\" aria-hidden=\"true\" />\n            {category && (\n              <span className=\"ds-article-card__category-badge\">{category}</span>\n            )}\n          </div>\n        )}\n        \n        <div className=\"ds-article-card__content\">\n          \n          <h3 className=\"ds-article-card__title\">{title}</h3>\n          <p className=\"ds-article-card__excerpt\">{excerpt}</p>\n          \n          <div className=\"ds-article-card__meta\">\n            {(date || author) && (\n              <div className=\"ds-article-card__meta-primary\">\n                {author && <span className=\"ds-article-card__author\">{author}</span>}\n                {author && date && <span className=\"ds-article-card__dot\" aria-hidden=\"true\">•</span>}\n                {date && <time dateTime={date} className=\"ds-article-card__date\">{date}</time>}\n              </div>\n            )}\n            \n            {readingTime && (\n              <div className=\"ds-article-card__meta-secondary\">\n                <Clock size={14} aria-hidden=\"true\" />\n                <span>{readingTime} min read</span>\n              </div>\n            )}\n          </div>\n          \n          <div className=\"ds-article-card__footer\">\n            <span className=\"ds-article-card__read-more\">\n              Read article\n              <ArrowRight size={16} className=\"ds-article-card__arrow\" />\n            </span>\n          </div>\n        </div>\n      </OutboundLink>\n    );\n  }\n);\n\nArticleCard.displayName = 'ArticleCard';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useAnalytics } from '../../web/analytics/use-analytics';\nimport './ArticleLayout.css';\n\nexport interface ArticleLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The main content of the article */\n  children: React.ReactNode;\n  /** Article title */\n  title: string;\n  /** Author name */\n  author?: React.ReactNode;\n  /** Publish date */\n  date?: React.ReactNode;\n  /** Main hero image */\n  heroImage?: string;\n  /** Sidebar content (like TOC or related articles) */\n  sidebar?: React.ReactNode;\n}\n\n/**\n * Standardized layout for long-form content (blog posts, resources, case studies).\n * Handles responsive wrapping, prose width constraints, and sidebar positioning.\n */\nexport const ArticleLayout = forwardRef<HTMLDivElement, ArticleLayoutProps>(\n  (\n    {\n      children,\n      title,\n      author,\n      date,\n      heroImage,\n      sidebar,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // Add scroll tracking\n    const { track } = useAnalytics();\n    \n    React.useEffect(() => {\n      let maxScroll = 0;\n      \n      const handleScroll = () => {\n        const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n        if (docHeight > 0) {\n          const scrollPercent = Math.round((window.scrollY / docHeight) * 100);\n          \n          if (scrollPercent > maxScroll) {\n            maxScroll = scrollPercent;\n            \n            // Track milestones\n            if (maxScroll === 25) track('article_scroll', { milestone: 25 });\n            if (maxScroll === 50) track('article_scroll', { milestone: 50 });\n            if (maxScroll === 75) track('article_scroll', { milestone: 75 });\n            if (maxScroll === 100) track('article_scroll', { milestone: 100 });\n          }\n        }\n      };\n\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => window.removeEventListener('scroll', handleScroll);\n    }, [track]);\n\n    return (\n      <article\n        ref={ref}\n        className={clsx('ds-article-layout', className)}\n        {...props}\n      >\n        <header className=\"ds-article-layout__header\">\n          <h1 className=\"ds-article-layout__title\">{title}</h1>\n          \n          {(author || date) && (\n            <div className=\"ds-article-layout__meta\">\n              {author && <div className=\"ds-article-layout__author\">{author}</div>}\n              {author && date && <span className=\"ds-article-layout__dot\" aria-hidden=\"true\">•</span>}\n              {date && <time className=\"ds-article-layout__date\">{date}</time>}\n            </div>\n          )}\n        </header>\n\n        {heroImage && (\n          <div className=\"ds-article-layout__hero\">\n            <img src={heroImage} alt=\"\" aria-hidden=\"true\" />\n          </div>\n        )}\n\n        <div className={clsx(\n          'ds-article-layout__body',\n          sidebar && 'ds-article-layout__body--with-sidebar'\n        )}>\n          <div className=\"ds-article-layout__content ds-prose\">\n            {children}\n          </div>\n          \n          {sidebar && (\n            <aside className=\"ds-article-layout__sidebar\">\n              <div className=\"ds-article-layout__sidebar-inner\">\n                {sidebar}\n              </div>\n            </aside>\n          )}\n        </div>\n      </article>\n    );\n  }\n);\n\nArticleLayout.displayName = 'ArticleLayout';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar';\nimport { OutboundLink } from '../OutboundLink/OutboundLink';\nimport './AuthorBio.css';\n\n/* ============================================================================\n   AUTHOR BIO\n   ============================================================================\n   Author biography card for blog posts and articles.\n\n   Strategic objective: Authority (expert credibility signal)\n   ============================================================================ */\n\n/** Social/external link */\nexport interface AuthorLink {\n  /** Link label (e.g., \"Twitter\", \"LinkedIn\") */\n  label: string;\n  /** Link URL */\n  href: string;\n  /** Optional icon */\n  icon?: React.ReactNode;\n}\n\nexport interface AuthorBioProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Author name */\n  name: string;\n  /** Author role or title */\n  role?: string;\n  /** Avatar image URL */\n  avatar?: string;\n  /** Biography text */\n  bio?: string;\n  /** External links */\n  links?: AuthorLink[];\n  /** Layout variant */\n  variant?: 'inline' | 'card' | 'compact' | 'longform';\n}\n\n/**\n * Author biography card.\n *\n * @example\n * ```tsx\n * <AuthorBio\n *   name=\"Alex Chen\"\n *   role=\"Head of Growth at SalesMind AI\"\n *   avatar=\"/team/alex.jpg\"\n *   bio=\"Alex has 10+ years of experience in B2B growth...\"\n *   links={[{ label: 'LinkedIn', href: 'https://linkedin.com/in/alexchen' }]}\n *   variant=\"card\"\n * />\n * ```\n */\nexport const AuthorBio = forwardRef<HTMLDivElement, AuthorBioProps>(\n  (\n    {\n      name,\n      role,\n      avatar,\n      bio,\n      links,\n      variant = 'card',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const initials = name\n      .split(' ')\n      .map((n) => n[0])\n      .join('')\n      .slice(0, 2);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-author-bio', `ds-author-bio--${variant}`, className)}\n        {...props}\n      >\n        <Avatar size={variant === 'compact' ? 'sm' : variant === 'longform' ? 'lg' : 'md'} className=\"ds-author-bio__avatar\">\n          {avatar && <AvatarImage src={avatar} alt={name} />}\n          <AvatarFallback>{initials}</AvatarFallback>\n        </Avatar>\n\n        <div className=\"ds-author-bio__info\">\n          <span className=\"ds-author-bio__name\">{name}</span>\n          {role && <span className=\"ds-author-bio__role\">{role}</span>}\n          {bio && variant !== 'compact' && (\n            <p className=\"ds-author-bio__bio\">{bio}</p>\n          )}\n          {links && links.length > 0 && variant !== 'compact' && (\n            <div className=\"ds-author-bio__links\">\n              {links.map((link, i) => (\n                <OutboundLink\n                  key={i}\n                  href={link.href}\n                  context=\"author-bio-link\"\n                  className=\"ds-author-bio__link\"\n                >\n                  {link.icon && <span className=\"ds-author-bio__link-icon\">{link.icon}</span>}\n                  {link.label}\n                </OutboundLink>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nAuthorBio.displayName = 'AuthorBio';\n","import React, { forwardRef, useState, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { useMessage } from '../../i18n';\nimport './TableOfContents.css';\n\n/* ============================================================================\n   TABLE OF CONTENTS\n   ============================================================================\n   Sticky article TOC with active heading detection via IntersectionObserver.\n\n   Strategic objective: Distribution (increases article dwell time)\n   ============================================================================ */\n\n/** A TOC item mapping to a heading */\nexport interface TOCItem {\n  /** Heading element ID */\n  id: string;\n  /** Heading text */\n  title: string;\n  /** Heading level (2 = h2, 3 = h3, etc.) */\n  level: number;\n}\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  /** TOC items (typically extracted from article headings) */\n  items: TOCItem[];\n  /** Currently active heading ID (controlled) */\n  activeId?: string;\n  /** Position variant */\n  position?: 'sidebar' | 'inline' | 'floating';\n  /** Label text */\n  label?: string;\n  /** Callback when an item is clicked */\n  onItemClick?: (id: string) => void;\n}\n\n/**\n * Sticky table of contents with active heading tracking.\n *\n * @example\n * ```tsx\n * <TableOfContents\n *   items={[\n *     { id: 'intro', title: 'Introduction', level: 2 },\n *     { id: 'setup', title: 'Getting Started', level: 2 },\n *     { id: 'config', title: 'Configuration', level: 3 },\n *   ]}\n *   position=\"sidebar\"\n * />\n * ```\n */\nexport const TableOfContents = forwardRef<HTMLElement, TableOfContentsProps>(\n  (\n    {\n      items,\n      activeId: controlledActiveId,\n      position = 'sidebar',\n      label,\n      onItemClick,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useMessage();\n    const defaultLabel = t({ id: 'ds.toc.label', defaultMessage: 'On this page' });\n    const finalLabel = label || defaultLabel;\n\n    const [observedActiveId, setObservedActiveId] = useState<string>('');\n    const activeId = controlledActiveId ?? observedActiveId;\n\n    // Auto-detect active heading via Scroll Listener (more robust than IO for long sections)\n    useEffect(() => {\n      if (controlledActiveId !== undefined) return;\n      if (items.length === 0) return;\n\n      const handleScroll = () => {\n        const headingElements = items\n          .map((item) => ({\n            id: item.id,\n            el: document.getElementById(item.id),\n          }))\n          .filter((h): h is { id: string; el: HTMLElement } => !!h.el);\n\n        if (headingElements.length === 0) return;\n\n        // Offset for sticky header\n        const topOffset = 120; \n\n        // Find the first heading that is clearly below the top offset\n        const firstBelowIndex = headingElements.findIndex((h) => {\n          const rect = h.el.getBoundingClientRect();\n          return rect.top > topOffset;\n        });\n\n        let newActiveId = '';\n        if (firstBelowIndex === -1) {\n          // All headings are above the offset -> last one is active\n          newActiveId = headingElements[headingElements.length - 1].id;\n        } else if (firstBelowIndex === 0) {\n          // First heading is below offset -> none active (or first if we want to be generous)\n          newActiveId = ''; // Or headingElements[0].id\n        } else {\n          // The heading immediately before the one that is below is the active one\n          newActiveId = headingElements[firstBelowIndex - 1].id;\n        }\n\n        setObservedActiveId(newActiveId);\n      };\n\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      // Initial check\n      handleScroll();\n\n      return () => window.removeEventListener('scroll', handleScroll);\n    }, [items, controlledActiveId]);\n\n    const handleClick = (id: string) => {\n      const el = document.getElementById(id);\n      if (el) {\n        el.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n      if (onItemClick) onItemClick(id);\n    };\n\n    if (items.length === 0) return null;\n\n    return (\n      <nav\n        ref={ref}\n        className={clsx('ds-toc', `ds-toc--${position}`, className)}\n        aria-label={finalLabel}\n        {...props}\n      >\n        <span className=\"ds-toc__label\">{finalLabel}</span>\n        <ul className=\"ds-toc__list\">\n          {items.map((item) => (\n            <li key={item.id} className=\"ds-toc__item\" style={{ paddingLeft: `${(item.level - 2) * 12}px` }}>\n              <button\n                type=\"button\"\n                className={clsx(\n                  'ds-toc__link',\n                  activeId === item.id && 'ds-toc__link--active',\n                )}\n                onClick={() => handleClick(item.id)}\n              >\n                {item.title}\n              </button>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nTableOfContents.displayName = 'TableOfContents';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, type SectionShellProps } from '../SectionShell/SectionShell';\nimport { SectionHeader } from '../SectionShell/SectionShell';\nimport { ArticleCard, type ArticleCardProps } from '../ArticleCard/ArticleCard';\nimport './RelatedContent.css';\n\n/* ============================================================================\n   RELATED CONTENT\n   ============================================================================\n   Related articles/resources section. Drives internal linking and increases\n   session duration.\n\n   Strategic objective: Distribution (internal linking + session depth)\n   ============================================================================ */\n\nexport interface RelatedContentProps extends Omit<SectionShellProps, 'title'> {\n  /** Section eyebrow */\n  eyebrow?: React.ReactNode;\n  /** Section title */\n  title?: React.ReactNode;\n  /** Related article items (uses ArticleCard props) */\n  items: ArticleCardProps[];\n  /** Max items to display */\n  maxVisible?: number;\n}\n\n/**\n * Related articles section using ArticleCard grid.\n *\n * @example\n * ```tsx\n * <RelatedContent\n *   title=\"Related Articles\"\n *   items={[\n *     { title: 'AI Outreach Guide', href: '/blog/ai-outreach', ... },\n *     { title: 'Pipeline Automation', href: '/blog/pipeline', ... },\n *   ]}\n *   background=\"muted\"\n * />\n * ```\n */\nexport const RelatedContent = forwardRef<HTMLDivElement, RelatedContentProps>(\n  (\n    {\n      eyebrow,\n      title = 'Related Articles',\n      items,\n      maxVisible,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleItems = maxVisible ? items.slice(0, maxVisible) : items;\n\n    if (visibleItems.length === 0) return null;\n\n    return (\n      <SectionShell\n        ref={ref}\n        className={clsx('ds-related-content', className)}\n        background=\"muted\"\n        {...props}\n      >\n        <SectionHeader eyebrow={eyebrow} title={title} />\n\n        <div className=\"ds-related-content__grid\">\n          {visibleItems.map((item, i) => (\n            <ArticleCard key={i} {...item} />\n          ))}\n        </div>\n      </SectionShell>\n    );\n  },\n);\n\nRelatedContent.displayName = 'RelatedContent';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './LongFormLayout.css';\n\nexport interface LongFormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Pass the TOC element here to render as a sticky sidebar on desktop */\n  sidebar?: React.ReactNode;\n}\n\n/**\n * A layout primitive designed specifically for long-form content (e.g., blog posts, documentation).\n * Enforces maximum reading widths and manages the relationship between the main content and an optional sticky sidebar.\n */\nexport const LongFormLayout = React.forwardRef<HTMLDivElement, LongFormLayoutProps>(\n  ({ children, sidebar, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={clsx('ds-longform-layout', className)} {...props}>\n        <article className=\"ds-longform-layout__main\">{children}</article>\n        {sidebar && <aside className=\"ds-longform-layout__sidebar\">{sidebar}</aside>}\n      </div>\n    );\n  }\n);\n\nLongFormLayout.displayName = 'LongFormLayout';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './LongFormComponents.css';\n\nexport interface InsightCalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  title?: string;\n}\n\nexport const InsightCallout = React.forwardRef<HTMLDivElement, InsightCalloutProps>(\n  ({ children, icon, title, className, ...props }, ref) => {\n    return (\n      <aside ref={ref} className={clsx('ds-insight-callout', className)} {...props}>\n        {icon && <div className=\"ds-insight-callout__icon\">{icon}</div>}\n        <div className=\"ds-insight-callout__content\">\n          {title && <h5 className=\"ds-insight-callout__title\">{title}</h5>}\n          {children}\n        </div>\n      </aside>\n    );\n  }\n);\nInsightCallout.displayName = 'InsightCallout';\n\nexport interface DataHighlightProps extends React.HTMLAttributes<HTMLDivElement> {\n  stat: string;\n  label: string;\n  children?: React.ReactNode;\n}\n\nexport const DataHighlight = React.forwardRef<HTMLDivElement, DataHighlightProps>(\n  ({ stat, label, children, className, ...props }, ref) => {\n    return (\n      <figure ref={ref} className={clsx('ds-data-highlight', className)} {...props}>\n        <div className=\"ds-data-highlight__stat-group\">\n          <span className=\"ds-data-highlight__stat\">{stat}</span>\n          <span className=\"ds-data-highlight__label\">{label}</span>\n        </div>\n        {children && <figcaption className=\"ds-data-highlight__caption\">{children}</figcaption>}\n      </figure>\n    );\n  }\n);\nDataHighlight.displayName = 'DataHighlight';\n","import React, { useEffect, useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport './ReadingProgress.css';\n\nexport interface ReadingProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Reference to the container element whose scroll progress we're tracking */\n  targetRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport const ReadingProgress = React.forwardRef<HTMLDivElement, ReadingProgressProps>(\n  ({ targetRef, className, ...props }, ref) => {\n    const [progress, setProgress] = useState(0);\n    const frameRef = useRef<number | null>(null);\n\n    useEffect(() => {\n      const handleScroll = () => {\n        if (frameRef.current) cancelAnimationFrame(frameRef.current);\n\n        frameRef.current = requestAnimationFrame(() => {\n          let percentage = 0;\n\n          if (targetRef && targetRef.current) {\n            // Calculate progress relative to the specific container\n            const el = targetRef.current;\n            const rect = el.getBoundingClientRect();\n            const viewportHeight = window.innerHeight;\n            \n            // If top is below viewport, 0%. If bottom is above viewport, 100%.\n            if (rect.top > viewportHeight) {\n              percentage = 0;\n            } else if (rect.bottom < 0) {\n              percentage = 100;\n            } else {\n              const scrollableDistance = rect.height - viewportHeight;\n              if (scrollableDistance <= 0) {\n                percentage = 100; // Fits entirely on screen\n              } else {\n                const scrolled = viewportHeight - rect.top;\n                percentage = Math.max(0, Math.min(100, (scrolled / scrollableDistance) * 100));\n              }\n            }\n          } else {\n            // Fallback to full page scroll\n            const scrollPosition = window.scrollY;\n            const scrollHeight = document.body.scrollHeight - window.innerHeight;\n            percentage = scrollHeight > 0 ? (scrollPosition / scrollHeight) * 100 : 0;\n            percentage = Math.max(0, Math.min(100, percentage));\n          }\n\n          setProgress(percentage);\n        });\n      };\n\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      window.addEventListener('resize', handleScroll, { passive: true });\n      \n      // Initial calculation\n      handleScroll();\n\n      return () => {\n        if (frameRef.current) cancelAnimationFrame(frameRef.current);\n        window.removeEventListener('scroll', handleScroll);\n        window.removeEventListener('resize', handleScroll);\n      };\n    }, [targetRef]);\n\n    return (\n      <div \n        ref={ref} \n        className={clsx('ds-reading-progress', className)} \n        {...props}\n      >\n        <div \n          className=\"ds-reading-progress__bar\" \n          style={{ transform: `scaleX(${progress / 100})` }} \n        />\n      </div>\n    );\n  }\n);\nReadingProgress.displayName = 'ReadingProgress';\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { OutboundLink } from '../OutboundLink/OutboundLink';\nimport './VersionedContent.css';\n\n// ============================================================================\n// VersionedUpgradeAlert\n// =============================================================================\n\nexport interface VersionedUpgradeAlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  seriesName: string;\n  viewedYear: number;\n  latestYear: number;\n  latestUrl: string;\n  deltaSummary?: string;\n}\n\nexport const VersionedUpgradeAlert = React.forwardRef<HTMLDivElement, VersionedUpgradeAlertProps>(\n  ({ seriesName, viewedYear, latestYear, latestUrl, deltaSummary, className, ...props }, ref) => {\n    const [dismissed, setDismissed] = useState(false);\n\n    if (dismissed) return null;\n\n    return (\n      <div \n        ref={ref} \n        className={clsx('ds-versioned-alert', className)} \n        role=\"alert\"\n        {...props}\n      >\n        <div className=\"ds-versioned-alert__content\">\n          <span className=\"ds-versioned-alert__icon\">⚠️</span>\n          <div className=\"ds-versioned-alert__text\">\n            <strong>Outdated Edition:</strong> You are viewing the {viewedYear} edition of {seriesName}. \n            The <strong>{latestYear} edition</strong> is now available.\n            {deltaSummary && <span className=\"ds-versioned-alert__delta\"> {deltaSummary}</span>}\n          </div>\n        </div>\n        <div className=\"ds-versioned-alert__actions\">\n          <OutboundLink href={latestUrl} context=\"versioned-alert-view-latest\" className=\"ds-versioned-alert__button ds-button ds-button--primary ds-button--sm\" openInNewTab={false}>\n            View {latestYear} Edition\n          </OutboundLink>\n          <button \n            className=\"ds-versioned-alert__close\" \n            onClick={() => setDismissed(true)}\n            aria-label=\"Dismiss alert\"\n          >\n            ×\n          </button>\n        </div>\n      </div>\n    );\n  }\n);\nVersionedUpgradeAlert.displayName = 'VersionedUpgradeAlert';\n\n// ============================================================================\n// VersionedSeriesNavigator\n// =============================================================================\n\nexport interface SeriesEdition {\n  year: number;\n  url: string;\n  isCurrent: boolean;\n}\n\nexport interface VersionedSeriesNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  seriesName: string;\n  hubUrl: string;\n  editions: SeriesEdition[];\n}\n\nexport const VersionedSeriesNavigator = React.forwardRef<HTMLDivElement, VersionedSeriesNavigatorProps>(\n  ({ seriesName, hubUrl, editions, className, ...props }, ref) => {\n    const sortedEditions = [...editions].sort((a, b) => a.year - b.year);\n    \n    return (\n      <div ref={ref} className={clsx('ds-versioned-navigator', className)} {...props}>\n        <div className=\"ds-versioned-navigator__header\">\n          <span className=\"ds-versioned-navigator__label\">Series</span>\n          <OutboundLink href={hubUrl} context=\"versioned-navigator-hub\" className=\"ds-versioned-navigator__title\" openInNewTab={false}>{seriesName} Hub</OutboundLink>\n        </div>\n        \n        <div className=\"ds-versioned-navigator__timeline\">\n          {sortedEditions.map((edition, idx) => (\n            <React.Fragment key={edition.year}>\n              {idx > 0 && <div className=\"ds-versioned-navigator__connector\" />}\n              <OutboundLink\n                href={edition.url}\n                context=\"versioned-navigator-edition\"\n                className={clsx(\n                  'ds-versioned-navigator__node',\n                  edition.isCurrent && 'ds-versioned-navigator__node--active'\n                )}\n                aria-current={edition.isCurrent ? 'page' : undefined}\n                openInNewTab={false}\n              >\n                {edition.year}\n              </OutboundLink>\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\nVersionedSeriesNavigator.displayName = 'VersionedSeriesNavigator';\n"]}