@salesmind-ai/design-system 0.3.4 → 0.3.5

package/dist/blog/index.js

@@ -1,1056 +1,10 @@
-import React, { createContext, forwardRef, useState, useEffect, useRef, useContext, useCallback } from 'react';
-import clsx from 'clsx';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useIntl } from 'react-intl';
-import { FileText, Clock, ArrowRight } from 'lucide-react';
-
-// src/components/AuthorBio/AuthorBio.tsx
-var AvatarContext = React.createContext({
-  hasImage: false,
-  imageError: false,
-  onImageError: () => {
-  }
-});
-var Avatar = React.forwardRef(
-  ({ size = "md", className, children, ...props }, ref) => {
-    const [imageError, setImageError] = React.useState(false);
-    const [hasImage, setHasImage] = React.useState(false);
-    React.useEffect(() => {
-      let found = false;
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child) && child.type === AvatarImage) {
-          found = true;
-        }
-      });
-      setHasImage(found);
-    }, [children]);
-    const onImageError = React.useCallback(() => {
-      setImageError(true);
-    }, []);
-    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        className: clsx("ds-avatar", `ds-avatar--${size}`, className),
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-Avatar.displayName = "Avatar";
-var AvatarImage = React.forwardRef(({ className, onError, ...props }, ref) => {
-  const { imageError, onImageError } = React.useContext(AvatarContext);
-  const handleError = (e) => {
-    onImageError();
-    onError?.(e);
-  };
-  if (imageError) return null;
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      ref,
-      className: clsx("ds-avatar__image", className),
-      onError: handleError,
-      ...props
-    }
-  );
-});
-AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
-  const { hasImage, imageError } = React.useContext(AvatarContext);
-  if (hasImage && !imageError) return null;
-  return /* @__PURE__ */ jsx("span", { ref, className: clsx("ds-avatar__fallback", className), ...props });
-});
-AvatarFallback.displayName = "AvatarFallback";
-var UtmContext = createContext(null);
-
-// src/web/utm/useUtmDefaults.ts
-function useUtmDefaults() {
-  return 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 = 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] = useState(href);
-    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__ */ jsx(
-        "a",
-        {
-          ref,
-          href: finalHref,
-          target: shouldOpenNewTab ? "_blank" : void 0,
-          rel,
-          onClick: handleClick,
-          ...props,
-          children
-        }
-      )
-    );
-  }
-);
-OutboundLink.displayName = "OutboundLink";
-var AuthorBio = 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__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx("ds-author-bio", `ds-author-bio--${variant}`, className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(Avatar, { size: variant === "compact" ? "sm" : variant === "longform" ? "lg" : "md", className: "ds-author-bio__avatar", children: [
-            avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
-            /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-author-bio__info", children: [
-            /* @__PURE__ */ jsx("span", { className: "ds-author-bio__name", children: name }),
-            role && /* @__PURE__ */ jsx("span", { className: "ds-author-bio__role", children: role }),
-            bio && variant !== "compact" && /* @__PURE__ */ jsx("p", { className: "ds-author-bio__bio", children: bio }),
-            links && links.length > 0 && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ds-author-bio__links", children: links.map((link, i) => /* @__PURE__ */ jsxs(
-              OutboundLink,
-              {
-                href: link.href,
-                context: "author-bio-link",
-                className: "ds-author-bio__link",
-                children: [
-                  link.icon && /* @__PURE__ */ jsx("span", { className: "ds-author-bio__link-icon", children: link.icon }),
-                  link.label
-                ]
-              },
-              i
-            )) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-AuthorBio.displayName = "AuthorBio";
-function useMessage() {
-  const intl = useIntl();
-  const formatMessage = useCallback(
-    (descriptor, values) => {
-      return intl.formatMessage(descriptor, values);
-    },
-    [intl]
-  );
-  return formatMessage;
-}
-var TableOfContents = 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] = useState("");
-    const activeId = controlledActiveId ?? observedActiveId;
-    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__ */ jsxs(
-      "nav",
-      {
-        ref,
-        className: clsx("ds-toc", `ds-toc--${position}`, className),
-        "aria-label": finalLabel,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "ds-toc__label", children: finalLabel }),
-          /* @__PURE__ */ jsx("ul", { className: "ds-toc__list", children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "ds-toc__item", style: { paddingLeft: `${(item.level - 2) * 12}px` }, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: clsx(
-                "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.forwardRef(
-  ({ targetRef, className, ...props }, ref) => {
-    const [progress, setProgress] = useState(0);
-    const frameRef = useRef(null);
-    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__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx("ds-reading-progress", className),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ds-reading-progress__bar",
-            style: { transform: `scaleX(${progress / 100})` }
-          }
-        )
-      }
-    );
-  }
-);
-ReadingProgress.displayName = "ReadingProgress";
-var LongFormLayout = React.forwardRef(
-  ({ children, sidebar, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx("ds-longform-layout", className), ...props, children: [
-      /* @__PURE__ */ jsx("article", { className: "ds-longform-layout__main", children }),
-      sidebar && /* @__PURE__ */ jsx("aside", { className: "ds-longform-layout__sidebar", children: sidebar })
-    ] });
-  }
-);
-LongFormLayout.displayName = "LongFormLayout";
-var InsightCallout = React.forwardRef(
-  ({ children, icon, title, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("aside", { ref, className: clsx("ds-insight-callout", className), ...props, children: [
-      icon && /* @__PURE__ */ jsx("div", { className: "ds-insight-callout__icon", children: icon }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-insight-callout__content", children: [
-        title && /* @__PURE__ */ jsx("h5", { className: "ds-insight-callout__title", children: title }),
-        children
-      ] })
-    ] });
-  }
-);
-InsightCallout.displayName = "InsightCallout";
-var DataHighlight = React.forwardRef(
-  ({ stat, label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("figure", { ref, className: clsx("ds-data-highlight", className), ...props, children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-data-highlight__stat-group", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-data-highlight__stat", children: stat }),
-        /* @__PURE__ */ jsx("span", { className: "ds-data-highlight__label", children: label })
-      ] }),
-      children && /* @__PURE__ */ jsx("figcaption", { className: "ds-data-highlight__caption", children })
-    ] });
-  }
-);
-DataHighlight.displayName = "DataHighlight";
-var AnalyticsContext = createContext(null);
-
-// src/web/analytics/use-analytics.tsx
-var NOOP_VALUE = {
-  track: () => {
-  }
-};
-function useAnalytics() {
-  return useContext(AnalyticsContext) ?? NOOP_VALUE;
-}
-var ArticleCard = 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__ */ jsxs(
-      OutboundLink,
-      {
-        ref,
-        href,
-        context: "article-card",
-        className: clsx(
-          "ds-article-card",
-          `ds-article-card--${variant}`,
-          !imageUrl && "ds-article-card--no-image",
-          className
-        ),
-        onClick: handleClick,
-        ...props,
-        children: [
-          imageUrl ? /* @__PURE__ */ jsxs("div", { className: "ds-article-card__image-wrapper", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: imageAlt,
-                className: "ds-article-card__image",
-                loading: "lazy"
-              }
-            ),
-            category && /* @__PURE__ */ jsx("span", { className: "ds-article-card__category-badge", children: category })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "ds-article-card__placeholder", children: [
-            /* @__PURE__ */ jsx(FileText, { className: "ds-article-card__placeholder-icon", "aria-hidden": "true" }),
-            category && /* @__PURE__ */ jsx("span", { className: "ds-article-card__category-badge", children: category })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-article-card__content", children: [
-            /* @__PURE__ */ jsx("h3", { className: "ds-article-card__title", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "ds-article-card__excerpt", children: excerpt }),
-            /* @__PURE__ */ jsxs("div", { className: "ds-article-card__meta", children: [
-              (date || author) && /* @__PURE__ */ jsxs("div", { className: "ds-article-card__meta-primary", children: [
-                author && /* @__PURE__ */ jsx("span", { className: "ds-article-card__author", children: author }),
-                author && date && /* @__PURE__ */ jsx("span", { className: "ds-article-card__dot", "aria-hidden": "true", children: "\u2022" }),
-                date && /* @__PURE__ */ jsx("time", { dateTime: date, className: "ds-article-card__date", children: date })
-              ] }),
-              readingTime && /* @__PURE__ */ jsxs("div", { className: "ds-article-card__meta-secondary", children: [
-                /* @__PURE__ */ jsx(Clock, { size: 14, "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  readingTime,
-                  " min read"
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "ds-article-card__footer", children: /* @__PURE__ */ jsxs("span", { className: "ds-article-card__read-more", children: [
-              "Read article",
-              /* @__PURE__ */ jsx(ArrowRight, { size: 16, className: "ds-article-card__arrow" })
-            ] }) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-ArticleCard.displayName = "ArticleCard";
-var ArticleLayout = forwardRef(
-  ({
-    children,
-    title,
-    author,
-    date,
-    heroImage,
-    sidebar,
-    className,
-    ...props
-  }, ref) => {
-    const { track } = useAnalytics();
-    React.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__ */ jsxs(
-      "article",
-      {
-        ref,
-        className: clsx("ds-article-layout", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("header", { className: "ds-article-layout__header", children: [
-            /* @__PURE__ */ jsx("h1", { className: "ds-article-layout__title", children: title }),
-            (author || date) && /* @__PURE__ */ jsxs("div", { className: "ds-article-layout__meta", children: [
-              author && /* @__PURE__ */ jsx("div", { className: "ds-article-layout__author", children: author }),
-              author && date && /* @__PURE__ */ jsx("span", { className: "ds-article-layout__dot", "aria-hidden": "true", children: "\u2022" }),
-              date && /* @__PURE__ */ jsx("time", { className: "ds-article-layout__date", children: date })
-            ] })
-          ] }),
-          heroImage && /* @__PURE__ */ jsx("div", { className: "ds-article-layout__hero", children: /* @__PURE__ */ jsx("img", { src: heroImage, alt: "", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsxs("div", { className: clsx(
-            "ds-article-layout__body",
-            sidebar && "ds-article-layout__body--with-sidebar"
-          ), children: [
-            /* @__PURE__ */ jsx("div", { className: "ds-article-layout__content ds-prose", children }),
-            sidebar && /* @__PURE__ */ jsx("aside", { className: "ds-article-layout__sidebar", children: /* @__PURE__ */ 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 = 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__ */ jsx(
-      Component,
-      {
-        ref,
-        className: clsx("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 = 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__ */ jsx(
-      Box,
-      {
-        ref,
-        className: clsx("ds-container", className),
-        style: {
-          maxWidth: resolvedMaxWidth,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Container.displayName = "Container";
-var SectionHeader = forwardRef(
-  ({ title, subtitle, eyebrow, align = "center", className, ...props }, ref) => {
-    if (!title && !subtitle && !eyebrow) return null;
-    return /* @__PURE__ */ jsxs(
-      "header",
-      {
-        ref,
-        className: clsx("ds-section-header", `ds-section-header--${align}`, className),
-        ...props,
-        children: [
-          eyebrow && /* @__PURE__ */ jsx("span", { className: "ds-section-header__eyebrow", children: eyebrow }),
-          title && /* @__PURE__ */ jsx("h2", { className: "ds-section-header__title", children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "ds-section-header__subtitle", children: subtitle })
-        ]
-      }
-    );
-  }
-);
-SectionHeader.displayName = "SectionHeader";
-var SectionShell = forwardRef(
-  ({
-    className,
-    children,
-    background = "default",
-    padding = "md",
-    containerSize,
-    containerFluid = false,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        ref,
-        className: clsx(
-          "ds-section",
-          `ds-section--bg-${background}`,
-          `ds-section--padding-${padding}`,
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          Container,
-          {
-            size: containerSize === "fluid" ? "full" : containerSize,
-            fluid: containerFluid || containerSize === "fluid",
-            children
-          }
-        )
-      }
-    );
-  }
-);
-SectionShell.displayName = "SectionShell";
-var RelatedContent = 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__ */ jsxs(
-      SectionShell,
-      {
-        ref,
-        className: clsx("ds-related-content", className),
-        background: "muted",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title }),
-          /* @__PURE__ */ jsx("div", { className: "ds-related-content__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ jsx(ArticleCard, { ...item }, i)) })
-        ]
-      }
-    );
-  }
-);
-RelatedContent.displayName = "RelatedContent";
-var VersionedUpgradeAlert = React.forwardRef(
-  ({ seriesName, viewedYear, latestYear, latestUrl, deltaSummary, className, ...props }, ref) => {
-    const [dismissed, setDismissed] = useState(false);
-    if (dismissed) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx("ds-versioned-alert", className),
-        role: "alert",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "ds-versioned-alert__content", children: [
-            /* @__PURE__ */ jsx("span", { className: "ds-versioned-alert__icon", children: "\u26A0\uFE0F" }),
-            /* @__PURE__ */ jsxs("div", { className: "ds-versioned-alert__text", children: [
-              /* @__PURE__ */ jsx("strong", { children: "Outdated Edition:" }),
-              " You are viewing the ",
-              viewedYear,
-              " edition of ",
-              seriesName,
-              ". The ",
-              /* @__PURE__ */ jsxs("strong", { children: [
-                latestYear,
-                " edition"
-              ] }),
-              " is now available.",
-              deltaSummary && /* @__PURE__ */ jsxs("span", { className: "ds-versioned-alert__delta", children: [
-                " ",
-                deltaSummary
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-versioned-alert__actions", children: [
-            /* @__PURE__ */ 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__ */ jsx(
-              "button",
-              {
-                className: "ds-versioned-alert__close",
-                onClick: () => setDismissed(true),
-                "aria-label": "Dismiss alert",
-                children: "\xD7"
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
-VersionedUpgradeAlert.displayName = "VersionedUpgradeAlert";
-var VersionedSeriesNavigator = React.forwardRef(
-  ({ seriesName, hubUrl, editions, className, ...props }, ref) => {
-    const sortedEditions = [...editions].sort((a, b) => a.year - b.year);
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx("ds-versioned-navigator", className), ...props, children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-versioned-navigator__header", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-versioned-navigator__label", children: "Series" }),
-        /* @__PURE__ */ jsxs(OutboundLink, { href: hubUrl, context: "versioned-navigator-hub", className: "ds-versioned-navigator__title", openInNewTab: false, children: [
-          seriesName,
-          " Hub"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ds-versioned-navigator__timeline", children: sortedEditions.map((edition, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        idx > 0 && /* @__PURE__ */ jsx("div", { className: "ds-versioned-navigator__connector" }),
-        /* @__PURE__ */ jsx(
-          OutboundLink,
-          {
-            href: edition.url,
-            context: "versioned-navigator-edition",
-            className: clsx(
-              "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 = forwardRef(
-  ({
-    variant = "browser",
-    children,
-    url,
-    showControls,
-    withGlow = false,
-    aspectRatio = "16/9",
-    className,
-    ...props
-  }, ref) => {
-    const hasControls = showControls ?? (variant === "browser" || variant === "app");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx(
-          "ds-browser-frame",
-          `ds-browser-frame--${variant}`,
-          withGlow && "ds-browser-frame--glow",
-          className
-        ),
-        ...props,
-        children: [
-          variant !== "minimal" && /* @__PURE__ */ jsxs("div", { className: "ds-browser-frame__chrome", children: [
-            hasControls && /* @__PURE__ */ jsxs("div", { className: "ds-browser-frame__controls", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--red" }),
-              /* @__PURE__ */ jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--yellow" }),
-              /* @__PURE__ */ jsx("span", { className: "ds-browser-frame__dot ds-browser-frame__dot--green" })
-            ] }),
-            variant === "browser" && url && /* @__PURE__ */ jsxs("div", { className: "ds-browser-frame__url-bar", children: [
-              /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "ds-browser-frame__lock", children: [
-                /* @__PURE__ */ jsx("path", { d: "M3 5V4a3 3 0 116 0v1", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
-                /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "ds-browser-frame__url-text", children: url })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "ds-browser-frame__content",
-              style: aspectRatio !== "auto" ? { aspectRatio } : void 0,
-              children
-            }
-          ),
-          variant === "mobile" && /* @__PURE__ */ jsx("div", { className: "ds-browser-frame__notch", "aria-hidden": "true" })
-        ]
-      }
-    );
-  }
-);
-BrowserFrame.displayName = "BrowserFrame";
-
-export { ArticleCard, ArticleLayout, AuthorBio, BrowserFrame, DataHighlight, InsightCallout, LongFormLayout, ReadingProgress, RelatedContent, TableOfContents, VersionedSeriesNavigator, VersionedUpgradeAlert };
+export { ArticleCard, ArticleLayout, AuthorBio, DataHighlight, InsightCallout, LongFormLayout, ReadingProgress, RelatedContent, TableOfContents, VersionedSeriesNavigator, VersionedUpgradeAlert } from '../chunk-2KQVZ5FB.js';
+import '../chunk-P5BOFE5A.js';
+export { BrowserFrame } from '../chunk-XWPDRMZG.js';
+import '../chunk-2GARWEJK.js';
+import '../chunk-Y3CPKNB7.js';
+import '../chunk-UFAJY2DM.js';
+import '../chunk-KJ2OXQF4.js';
+import '../chunk-HN4PHABT.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map