@salesmind-ai/design-system 0.2.1 → 0.3.0

package/dist/blog/index.cjs

@@ -0,0 +1,1074 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var reactIntl = require('react-intl');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/AuthorBio/AuthorBio.tsx
+var AvatarContext = React__default.default.createContext({
+  hasImage: false,
+  imageError: false,
+  onImageError: () => {
+  }
+});
+var Avatar = React__default.default.forwardRef(
+  ({ size = "md", className, children, ...props }, ref) => {
+    const [imageError, setImageError] = React__default.default.useState(false);
+    const [hasImage, setHasImage] = React__default.default.useState(false);
+    React__default.default.useEffect(() => {
+      let found = false;
+      React__default.default.Children.forEach(children, (child) => {
+        if (React__default.default.isValidElement(child) && child.type === AvatarImage) {
+          found = true;
+        }
+      });
+      setHasImage(found);
+    }, [children]);
+    const onImageError = React__default.default.useCallback(() => {
+      setImageError(true);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: clsx__default.default("ds-avatar", `ds-avatar--${size}`, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React__default.default.forwardRef(({ className, onError, ...props }, ref) => {
+  const { imageError, onImageError } = React__default.default.useContext(AvatarContext);
+  const handleError = (e) => {
+    onImageError();
+    onError?.(e);
+  };
+  if (imageError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      className: clsx__default.default("ds-avatar__image", className),
+      onError: handleError,
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  const { hasImage, imageError } = React__default.default.useContext(AvatarContext);
+  if (hasImage && !imageError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx__default.default("ds-avatar__fallback", className), ...props });
+});
+AvatarFallback.displayName = "AvatarFallback";
+var UtmContext = React.createContext(null);
+
+// src/web/utm/useUtmDefaults.ts
+function useUtmDefaults() {
+  return React.useContext(UtmContext);
+}
+
+// src/web/utm/builders.ts
+var PLACEHOLDER_ORIGIN = "https://__placeholder__.internal";
+function buildUtmUrl(baseUrl, params) {
+  const isRelative = baseUrl.startsWith("/");
+  let url;
+  try {
+    url = isRelative ? new URL(baseUrl, PLACEHOLDER_ORIGIN) : new URL(baseUrl);
+  } catch {
+    return baseUrl;
+  }
+  const existingParams = [];
+  url.searchParams.forEach((value, key) => {
+    existingParams.push([key, value]);
+  });
+  for (const [key] of existingParams) {
+    url.searchParams.delete(key);
+  }
+  for (const [key, value] of existingParams) {
+    if (!key.startsWith("utm_")) {
+      url.searchParams.set(key, value);
+    }
+  }
+  url.searchParams.set("utm_source", params.source);
+  url.searchParams.set("utm_medium", params.medium);
+  url.searchParams.set("utm_campaign", params.campaign);
+  if (params.term !== void 0) {
+    url.searchParams.set("utm_term", params.term);
+  }
+  if (params.content !== void 0) {
+    url.searchParams.set("utm_content", params.content);
+  }
+  if (isRelative) {
+    return url.href.replace(PLACEHOLDER_ORIGIN, "");
+  }
+  return url.href;
+}
+
+// src/web/utm/classifiers.ts
+var INTERNAL_PATTERNS = [
+  /^\/(?!\/)/,
+  // Relative paths
+  /^https?:\/\/(www\.)?sales-mind\.ai/i,
+  // Marketing site
+  /^https?:\/\/app\.sales-mind\.ai/i,
+  // Web app
+  /^https?:\/\/apps\.sales-mind\.ai/i,
+  // Web app (legacy)
+  /^https?:\/\/meet\.sales-mind\.ai/i,
+  // Booking
+  /^https?:\/\/docs\.sales-mind\.ai/i
+  // Docs
+];
+var SYSTEM_PATTERNS = [
+  /^https?:\/\/.*\/api\//i,
+  // API endpoints
+  /^https?:\/\/.*\/webhook/i,
+  // Webhooks
+  /^https?:\/\/.*\/oauth/i,
+  // OAuth callbacks
+  /^https?:\/\/.*\/callback/i,
+  // Callbacks
+  /^https?:\/\/.*\.supabase\.(co|com)/i,
+  // Supabase
+  /^https?:\/\/.*\.firebaseapp\.com/i,
+  // Firebase
+  /^https?:\/\/.*\.cloudfunctions\.net/i
+  // Cloud Functions
+];
+var ASSET_PATTERNS = [
+  /\.(css|js|mjs|map|woff2?|ttf|eot|svg|png|jpe?g|gif|webp|avif|ico|pdf)(\?.*)?$/i
+];
+var CONVERSION_PATTERNS = [
+  /^https?:\/\/(www\.)?calendly\.com/i,
+  /^https?:\/\/(checkout\.)?stripe\.com/i,
+  /^https?:\/\/buy\.stripe\.com/i,
+  /^https?:\/\/chromewebstore\.google\.com/i,
+  /^https?:\/\/meet\.sales-mind\.ai/i
+];
+var PROTOCOL_EXEMPT = [
+  /^mailto:/i,
+  /^tel:/i,
+  /^#/,
+  /^javascript:/i
+];
+function classifyUrl(url) {
+  if (PROTOCOL_EXEMPT.some((p) => p.test(url))) return "protocol";
+  if (ASSET_PATTERNS.some((p) => p.test(url))) return "asset";
+  if (SYSTEM_PATTERNS.some((p) => p.test(url))) return "system";
+  if (CONVERSION_PATTERNS.some((p) => p.test(url))) return "conversion";
+  if (INTERNAL_PATTERNS.some((p) => p.test(url))) return "internal";
+  return "external";
+}
+
+// src/components/OutboundLink/outbound-link-utils.ts
+var LEGACY_UTM_SOURCE = "salesmind";
+var EXEMPT_PATTERNS = [
+  /^https?:\/\/(www\.)?(stripe\.com|checkout\.stripe\.com|paypal\.com)/i,
+  /^https?:\/\/(www\.)?github\.com\/login\/oauth/i
+];
+var isExemptUrl = (urlStr) => {
+  if (urlStr.startsWith("mailto:") || urlStr.startsWith("tel:")) return true;
+  const classification = classifyUrl(urlStr);
+  if (classification === "system" || classification === "protocol" || classification === "asset") {
+    return true;
+  }
+  return EXEMPT_PATTERNS.some((pattern) => pattern.test(urlStr));
+};
+var appendGovernedUTMs = (href, params, preserveExisting = true) => {
+  try {
+    const url = new URL(href);
+    if (preserveExisting) {
+      const hasAll = url.searchParams.has("utm_source") && url.searchParams.has("utm_medium") && url.searchParams.has("utm_campaign");
+      if (hasAll) return href;
+    }
+    return buildUtmUrl(href, params);
+  } catch {
+    return href;
+  }
+};
+var appendUTMs = (href, context, pageSlug, options) => {
+  try {
+    const url = new URL(href);
+    const { mediumOverride = "outbound_link", campaignOverride, preserveExisting = true } = options;
+    const utms = {
+      utm_source: LEGACY_UTM_SOURCE,
+      utm_medium: mediumOverride,
+      utm_campaign: campaignOverride || pageSlug,
+      utm_content: context
+    };
+    Object.entries(utms).forEach(([key, value]) => {
+      if (value) {
+        if (preserveExisting && url.searchParams.has(key)) {
+          return;
+        }
+        url.searchParams.set(key, value);
+      }
+    });
+    return url.toString();
+  } catch {
+    return href;
+  }
+};
+var OutboundLink = React.forwardRef(
+  ({
+    href,
+    context,
+    campaignOverride,
+    mediumOverride = "outbound_link",
+    preserveExistingUTM = true,
+    openInNewTab = true,
+    disableTracking = false,
+    utmParams,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const contextParams = useUtmDefaults();
+    const resolvedUtmParams = utmParams ?? contextParams;
+    let hostname = "";
+    try {
+      const url = new URL(href);
+      hostname = url.hostname;
+    } catch {
+    }
+    const [finalHref, setFinalHref] = React.useState(href);
+    React.useEffect(() => {
+      let isExternal = false;
+      let currentMedium = mediumOverride;
+      try {
+        const url = new URL(href);
+        const currentHost = window.location.hostname;
+        isExternal = url.hostname !== currentHost;
+        if (isExternal && currentHost.includes("sales-mind.ai") && url.hostname.includes("sales-mind.ai")) {
+          if (currentMedium === "outbound_link") {
+            currentMedium = "cross_subdomain";
+          }
+        }
+      } catch {
+        isExternal = false;
+      }
+      const isExempt = isExemptUrl(href) || disableTracking;
+      if (isExternal && !isExempt) {
+        if (resolvedUtmParams) {
+          setFinalHref(appendGovernedUTMs(href, resolvedUtmParams, preserveExistingUTM));
+        } else {
+          const pageSlug = window.location.pathname.replace(/^\/|\/$/g, "") || "home";
+          setFinalHref(appendUTMs(href, context, pageSlug, {
+            mediumOverride: currentMedium,
+            campaignOverride,
+            preserveExisting: preserveExistingUTM
+          }));
+        }
+      } else {
+        setFinalHref(href);
+      }
+    }, [href, context, mediumOverride, campaignOverride, preserveExistingUTM, disableTracking, resolvedUtmParams]);
+    const handleClick = (e) => {
+      if (typeof window === "undefined" || disableTracking) {
+        onClick?.(e);
+        return;
+      }
+      let clickExternal = false;
+      let clickCrossSubdomain = false;
+      let clickMedium = mediumOverride;
+      try {
+        const url = new URL(href);
+        const currentHost = window.location.hostname;
+        clickExternal = url.hostname !== currentHost;
+        if (clickExternal && currentHost.includes("sales-mind.ai") && url.hostname.includes("sales-mind.ai")) {
+          clickCrossSubdomain = true;
+          if (clickMedium === "outbound_link") {
+            clickMedium = "cross_subdomain";
+          }
+        }
+      } catch {
+      }
+      if (clickExternal) {
+        const detail = {
+          destination_domain: hostname,
+          destination_url: finalHref,
+          utm_medium_type: clickMedium,
+          page_slug: window.location.pathname,
+          component_location: context,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          is_cross_subdomain: clickCrossSubdomain
+        };
+        const event = new CustomEvent("outbound_click", { detail });
+        window.dispatchEvent(event);
+      }
+      onClick?.(e);
+    };
+    const relParts = [];
+    let shouldOpenNewTab = openInNewTab;
+    try {
+      const url = new URL(href);
+      if (typeof window !== "undefined") {
+        const currentHost = window.location.hostname;
+        if (url.hostname !== currentHost && currentHost.includes("sales-mind.ai") && url.hostname.includes("sales-mind.ai")) {
+          shouldOpenNewTab = false;
+        }
+      }
+    } catch {
+    }
+    if (shouldOpenNewTab) relParts.push("noopener", "noreferrer");
+    if (mediumOverride === "citation") relParts.push("nofollow");
+    const rel = relParts.length > 0 ? relParts.join(" ") : void 0;
+    return (
+      // eslint-disable-next-line no-restricted-syntax
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          href: finalHref,
+          target: shouldOpenNewTab ? "_blank" : void 0,
+          rel,
+          onClick: handleClick,
+          ...props,
+          children
+        }
+      )
+    );
+  }
+);
+OutboundLink.displayName = "OutboundLink";
+var AuthorBio = React.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: clsx__default.default("ds-author-bio", `ds-author-bio--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: variant === "compact" ? "sm" : variant === "longform" ? "lg" : "md", className: "ds-author-bio__avatar", children: [
+            avatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar, alt: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(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(
+              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";
+function useMessage() {
+  const intl = reactIntl.useIntl();
+  const formatMessage = React.useCallback(
+    (descriptor, values) => {
+      return intl.formatMessage(descriptor, values);
+    },
+    [intl]
+  );
+  return formatMessage;
+}
+var TableOfContents = React.forwardRef(
+  ({
+    items,
+    activeId: controlledActiveId,
+    position = "sidebar",
+    label,
+    onItemClick,
+    className,
+    ...props
+  }, ref) => {
+    const t = useMessage();
+    const defaultLabel = t({ id: "ds.toc.label", defaultMessage: "On this page" });
+    const finalLabel = label || defaultLabel;
+    const [observedActiveId, setObservedActiveId] = React.useState("");
+    const activeId = controlledActiveId ?? observedActiveId;
+    React.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: clsx__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: clsx__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 ReadingProgress = React__default.default.forwardRef(
+  ({ targetRef, className, ...props }, ref) => {
+    const [progress, setProgress] = React.useState(0);
+    const frameRef = React.useRef(null);
+    React.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: clsx__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 LongFormLayout = React__default.default.forwardRef(
+  ({ children, sidebar, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx__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 = React__default.default.forwardRef(
+  ({ children, icon, title, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { ref, className: clsx__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 = React__default.default.forwardRef(
+  ({ stat, label, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: clsx__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 AnalyticsContext = React.createContext(null);
+
+// src/web/analytics/use-analytics.tsx
+var NOOP_VALUE = {
+  track: () => {
+  }
+};
+function useAnalytics() {
+  return React.useContext(AnalyticsContext) ?? NOOP_VALUE;
+}
+var ArticleCard = React.forwardRef(
+  ({
+    href,
+    title,
+    excerpt,
+    imageUrl,
+    imageAlt = "",
+    category,
+    date,
+    readingTime,
+    author,
+    variant = "vertical",
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const { track } = useAnalytics();
+    const handleClick = (e) => {
+      track("article_click", { url: href, title, category });
+      if (onClick) onClick(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      OutboundLink,
+      {
+        ref,
+        href,
+        context: "article-card",
+        className: clsx__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 = React.forwardRef(
+  ({
+    children,
+    title,
+    author,
+    date,
+    heroImage,
+    sidebar,
+    className,
+    ...props
+  }, ref) => {
+    const { track } = useAnalytics();
+    React__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: clsx__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: clsx__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";
+
+// src/tokens/spacing.ts
+var SPACING = {
+  1: "var(--space-1)",
+  2: "var(--space-2)",
+  3: "var(--space-3)",
+  4: "var(--space-4)",
+  5: "var(--space-5)",
+  6: "var(--space-6)",
+  8: "var(--space-8)",
+  10: "var(--space-10)",
+  12: "var(--space-12)",
+  16: "var(--space-16)",
+  20: "var(--space-20)"
+};
+
+// src/components/LayoutPrimitives/utils.ts
+var SPACING_ALIASES = {
+  xs: "var(--space-2)",
+  sm: "var(--space-3)",
+  md: "var(--space-4)",
+  lg: "var(--space-6)",
+  xl: "var(--space-8)",
+  "2xl": "var(--space-12)"
+};
+function resolveSpacing(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number" && SPACING[value]) {
+    return SPACING[value];
+  }
+  if (typeof value === "string" && value in SPACING_ALIASES) {
+    return SPACING_ALIASES[value];
+  }
+  return String(value);
+}
+function extractSpacingStyles(props) {
+  const styles = {};
+  if (props.m !== void 0) styles.margin = resolveSpacing(props.m);
+  if (props.mt !== void 0) styles.marginTop = resolveSpacing(props.mt);
+  if (props.mb !== void 0) styles.marginBottom = resolveSpacing(props.mb);
+  if (props.ml !== void 0) styles.marginLeft = resolveSpacing(props.ml);
+  if (props.mr !== void 0) styles.marginRight = resolveSpacing(props.mr);
+  if (props.mx !== void 0) {
+    styles.marginLeft = resolveSpacing(props.mx);
+    styles.marginRight = resolveSpacing(props.mx);
+  }
+  if (props.my !== void 0) {
+    styles.marginTop = resolveSpacing(props.my);
+    styles.marginBottom = resolveSpacing(props.my);
+  }
+  if (props.p !== void 0) styles.padding = resolveSpacing(props.p);
+  if (props.pt !== void 0) styles.paddingTop = resolveSpacing(props.pt);
+  if (props.pb !== void 0) styles.paddingBottom = resolveSpacing(props.pb);
+  if (props.pl !== void 0) styles.paddingLeft = resolveSpacing(props.pl);
+  if (props.pr !== void 0) styles.paddingRight = resolveSpacing(props.pr);
+  if (props.px !== void 0) {
+    styles.paddingLeft = resolveSpacing(props.px);
+    styles.paddingRight = resolveSpacing(props.px);
+  }
+  if (props.py !== void 0) {
+    styles.paddingTop = resolveSpacing(props.py);
+    styles.paddingBottom = resolveSpacing(props.py);
+  }
+  if (props.gap !== void 0) styles.gap = resolveSpacing(props.gap);
+  return styles;
+}
+var Box = React.forwardRef(
+  ({ as: Component = "div", className, style, children, ...props }, ref) => {
+    const spacingStyles = extractSpacingStyles(props);
+    const { m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, gap, ...domProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: clsx__default.default("ds-box", className),
+        style: { ...spacingStyles, ...style },
+        ...domProps,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var CONTAINER_SIZE_MAP = {
+  sm: "768px",
+  // 48rem — max-w-3xl
+  md: "1024px",
+  // 64rem — max-w-5xl
+  lg: "1152px",
+  // 72rem — max-w-6xl
+  xl: "1280px",
+  // 80rem — max-w-7xl
+  full: "100%"
+};
+var Container = React.forwardRef(
+  ({ size, fluid, maxWidth, className, style, ...props }, ref) => {
+    let resolvedMaxWidth;
+    if (fluid) {
+      resolvedMaxWidth = "100%";
+    } else if (size) {
+      resolvedMaxWidth = CONTAINER_SIZE_MAP[size];
+    } else {
+      resolvedMaxWidth = maxWidth || "var(--container-default-max, 1200px)";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        ref,
+        className: clsx__default.default("ds-container", className),
+        style: {
+          maxWidth: resolvedMaxWidth,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var SectionHeader = React.forwardRef(
+  ({ title, subtitle, eyebrow, align = "center", className, ...props }, ref) => {
+    if (!title && !subtitle && !eyebrow) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "header",
+      {
+        ref,
+        className: clsx__default.default("ds-section-header", `ds-section-header--${align}`, className),
+        ...props,
+        children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-section-header__eyebrow", children: eyebrow }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-section-header__title", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-section-header__subtitle", children: subtitle })
+        ]
+      }
+    );
+  }
+);
+SectionHeader.displayName = "SectionHeader";
+var SectionShell = React.forwardRef(
+  ({
+    className,
+    children,
+    background = "default",
+    padding = "md",
+    containerSize,
+    containerFluid = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        ref,
+        className: clsx__default.default(
+          "ds-section",
+          `ds-section--bg-${background}`,
+          `ds-section--padding-${padding}`,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Container,
+          {
+            size: containerSize === "fluid" ? "full" : containerSize,
+            fluid: containerFluid || containerSize === "fluid",
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SectionShell.displayName = "SectionShell";
+var RelatedContent = React.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(
+      SectionShell,
+      {
+        ref,
+        className: clsx__default.default("ds-related-content", className),
+        background: "muted",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(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 VersionedUpgradeAlert = React__default.default.forwardRef(
+  ({ seriesName, viewedYear, latestYear, latestUrl, deltaSummary, className, ...props }, ref) => {
+    const [dismissed, setDismissed] = React.useState(false);
+    if (dismissed) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx__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(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 = React__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: clsx__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(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(React__default.default.Fragment, { children: [
+        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-versioned-navigator__connector" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OutboundLink,
+          {
+            href: edition.url,
+            context: "versioned-navigator-edition",
+            className: clsx__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";
+var BrowserFrame = React.forwardRef(
+  ({
+    variant = "browser",
+    children,
+    url,
+    showControls,
+    withGlow = false,
+    aspectRatio = "16/9",
+    className,
+    ...props
+  }, ref) => {
+    const hasControls = showControls ?? (variant === "browser" || variant === "app");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx__default.default(
+          "ds-browser-frame",
+          `ds-browser-frame--${variant}`,
+          withGlow && "ds-browser-frame--glow",
+          className
+        ),
+        ...props,
+        children: [
+          variant !== "minimal" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-browser-frame__chrome", children: [
+            hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-browser-frame__controls", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--red" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--yellow" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--green" })
+            ] }),
+            variant === "browser" && url && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-browser-frame__url-bar", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "ds-browser-frame__lock", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 5V4a3 3 0 116 0v1", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-browser-frame__url-text", children: url })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "ds-browser-frame__content",
+              style: aspectRatio !== "auto" ? { aspectRatio } : void 0,
+              children
+            }
+          ),
+          variant === "mobile" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-browser-frame__notch", "aria-hidden": "true" })
+        ]
+      }
+    );
+  }
+);
+BrowserFrame.displayName = "BrowserFrame";
+
+exports.ArticleCard = ArticleCard;
+exports.ArticleLayout = ArticleLayout;
+exports.AuthorBio = AuthorBio;
+exports.BrowserFrame = BrowserFrame;
+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=index.cjs.map