@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/chunk-AMNY5TS3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SectionShell/SectionShell.tsx"],"names":[],"mappings":";AAAA,SAAgB,kBAAkC;AAClD,OAAO,UAAU;AAoBX,SAWc,KAXd;AALC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,OAAO,UAAU,SAAS,QAAQ,UAAU,OAAO,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC9F,QAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAS,QAAO;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,KAAK;AAAA,UAC3B,SAAS,aAAa;AAAA,UACtB,SAAS,WAAW;AAAA,UACpB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,qBAAW,oBAAC,UAAK,WAAU,8BAA8B,mBAAQ;AAAA,UACjE,SAAS,oBAAC,QAAG,WAAU,4BAA4B,iBAAM;AAAA,UACzD,YAAY,oBAAC,OAAE,WAAU,+BAA+B,oBAAS;AAAA;AAAA;AAAA,IACpE;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAcrB,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,uBAA+C;AAAA,MACnD,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AACA,UAAM,WAAW,iBACb,SACA,gBACG,qBAAqB,aAAa,KAAK,uCACxC;AAEN,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,UAAU;AAAA,UAC5B,uBAAuB,OAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,SAAI,OAAO,EAAC,UAAU,cAAc,QAAQ,eAAe,kBAAkB,OAAO,OAAM,GACxF,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport './SectionShell.css';\n\n/* ============================================================================\n   Section Header Component\n   ============================================================================ */\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n  size?: 'compact' | 'default' | 'large';\n}\n\nexport const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(\n  ({ title, subtitle, eyebrow, align = 'center', size = 'default', className, ...props }, ref) => {\n    if (!title && !subtitle && !eyebrow) return null;\n\n    return (\n      <header\n        ref={ref}\n        className={clsx(\n          'ds-section-header',\n          `ds-section-header--${align}`,\n          size === 'compact' && 'ds-section-header--compact',\n          size === 'large' && 'ds-section-header--large',\n          className,\n        )}\n        {...props}\n      >\n        {eyebrow && <span className=\"ds-section-header__eyebrow\">{eyebrow}</span>}\n        {title && <h2 className=\"ds-section-header__title\">{title}</h2>}\n        {subtitle && <p className=\"ds-section-header__subtitle\">{subtitle}</p>}\n      </header>\n    );\n  },\n);\nSectionHeader.displayName = 'SectionHeader';\n\n/* ============================================================================\n   Section Shell Component\n   ============================================================================ */\n\nexport interface SectionShellProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  background?: 'default' | 'muted' | 'brand' | 'transparent' | 'dark';\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  containerSize?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid'; // Maps to Container max-width\n  containerFluid?: boolean;\n}\n\nexport const SectionShell = forwardRef<HTMLDivElement, SectionShellProps>(\n  (\n    {\n      className,\n      children,\n      background = 'default',\n      padding = 'md',\n      containerSize,\n      containerFluid = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const containerMaxWidthMap: Record<string, string> = {\n      sm: 'var(--container-max-width-sm, 640px)',\n      md: 'var(--container-max-width-md, 768px)',\n      lg: 'var(--container-max-width-lg, 1024px)',\n      xl: 'var(--container-max-width-xl, 1280px)',\n      fluid: 'none',\n    };\n    const maxWidth = containerFluid\n      ? 'none'\n      : containerSize\n        ? (containerMaxWidthMap[containerSize] ?? 'var(--container-max-width, 1200px)')\n        : 'var(--container-max-width, 1200px)';\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          'ds-section',\n          `ds-section--bg-${background}`,\n          `ds-section--padding-${padding}`,\n          className,\n        )}\n        {...props}\n      >\n        <div style={{maxWidth, marginInline: 'auto', paddingInline: 'var(--space-4)', width: '100%'}}>\n          {children}\n        </div>\n      </section>\n    );\n  },\n);\nSectionShell.displayName = 'SectionShell';\n"]}

package/dist/{chunk-YJ6C3EKW.js → chunk-CLXLQCNQ.js}

@@ -1,10 +1,10 @@
-import { useMessage } from './chunk-P5BOFE5A.js';
-import { useAnalytics } from './chunk-2GARWEJK.js';
 import { Avatar, AvatarImage, AvatarFallback } from './chunk-Y3CPKNB7.js';
-import { SectionShell, SectionHeader } from './chunk-VFJZQQZU.js';
+import { useMessage } from './chunk-SFXTB7JL.js';
+import { useAnalytics } from './chunk-2GARWEJK.js';
+import { SectionShell, SectionHeader } from './chunk-AMNY5TS3.js';
 import { OutboundLink } from './chunk-KJ2OXQF4.js';
-import React9, { forwardRef, useState, useEffect, useRef } from 'react';
-import clsx9 from 'clsx';
+import React6, { forwardRef, useState, useEffect, useRef } from 'react';
+import clsx4 from 'clsx';
 import { FileText, Clock, ArrowRight } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -35,7 +35,7 @@ var ArticleCard = forwardRef(
         ref,
         href,
         context: "article-card",
-        className: clsx9(
+        className: clsx4(
           "ds-article-card",
           `ds-article-card--${variant}`,
           !imageUrl && "ds-article-card--no-image",
@@ -87,65 +87,59 @@ var ArticleCard = forwardRef(
   }
 );
 ArticleCard.displayName = "ArticleCard";
-var ArticleLayout = forwardRef(
+var BrowserFrame = forwardRef(
   ({
+    variant = "browser",
     children,
-    title,
-    author,
-    date,
-    heroImage,
-    sidebar,
+    url,
+    showControls,
+    withGlow = false,
+    aspectRatio = "16/9",
     className,
     ...props
   }, ref) => {
-    const { track } = useAnalytics();
-    React9.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]);
+    const hasControls = showControls ?? (variant === "browser" || variant === "app");
     return /* @__PURE__ */ jsxs(
-      "article",
+      "div",
       {
         ref,
-        className: clsx9("ds-article-layout", className),
+        className: clsx4(
+          "ds-browser-frame",
+          `ds-browser-frame--${variant}`,
+          withGlow && "ds-browser-frame--glow",
+          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 })
+          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 })
             ] })
           ] }),
-          heroImage && /* @__PURE__ */ jsx("div", { className: "ds-article-layout__hero", children: /* @__PURE__ */ jsx("img", { src: heroImage, alt: "", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsxs("div", { className: clsx9(
-            "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 }) })
-          ] })
+          /* @__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" })
         ]
       }
     );
   }
 );
-ArticleLayout.displayName = "ArticleLayout";
+BrowserFrame.displayName = "BrowserFrame";
 var AuthorBio = forwardRef(
   ({
     name,
@@ -162,7 +156,7 @@ var AuthorBio = forwardRef(
       "div",
       {
         ref,
-        className: clsx9("ds-author-bio", `ds-author-bio--${variant}`, className),
+        className: clsx4("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: [
@@ -248,7 +242,7 @@ var TableOfContents = forwardRef(
       "nav",
       {
         ref,
-        className: clsx9("ds-toc", `ds-toc--${position}`, className),
+        className: clsx4("ds-toc", `ds-toc--${position}`, className),
         "aria-label": finalLabel,
         ...props,
         children: [
@@ -257,7 +251,7 @@ var TableOfContents = forwardRef(
             "button",
             {
               type: "button",
-              className: clsx9(
+              className: clsx4(
                 "ds-toc__link",
                 activeId === item.id && "ds-toc__link--active"
               ),
@@ -286,7 +280,7 @@ var RelatedContent = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx9("ds-related-content", className),
+        className: clsx4("ds-related-content", className),
         background: "muted",
         ...props,
         children: [
@@ -298,40 +292,16 @@ var RelatedContent = forwardRef(
   }
 );
 RelatedContent.displayName = "RelatedContent";
-var LongFormLayout = React9.forwardRef(
+var LongFormLayout = React6.forwardRef(
   ({ children, sidebar, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx9("ds-longform-layout", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx4("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 = React9.forwardRef(
-  ({ children, icon, title, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("aside", { ref, className: clsx9("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 = React9.forwardRef(
-  ({ stat, label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("figure", { ref, className: clsx9("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 ReadingProgress = React9.forwardRef(
+var ReadingProgress = React6.forwardRef(
   ({ targetRef, className, ...props }, ref) => {
     const [progress, setProgress] = useState(0);
     const frameRef = useRef(null);
@@ -379,7 +349,7 @@ var ReadingProgress = React9.forwardRef(
       "div",
       {
         ref,
-        className: clsx9("ds-reading-progress", className),
+        className: clsx4("ds-reading-progress", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -393,93 +363,7 @@ var ReadingProgress = React9.forwardRef(
   }
 );
 ReadingProgress.displayName = "ReadingProgress";
-var VersionedUpgradeAlert = React9.forwardRef(
-  ({ seriesName, viewedYear, latestYear, latestUrl, deltaSummary, className, ...props }, ref) => {
-    const [dismissed, setDismissed] = useState(false);
-    if (dismissed) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx9("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 = React9.forwardRef(
-  ({ seriesName, hubUrl, editions, className, ...props }, ref) => {
-    const sortedEditions = [...editions].sort((a, b) => a.year - b.year);
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx9("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(React9.Fragment, { children: [
-        idx > 0 && /* @__PURE__ */ jsx("div", { className: "ds-versioned-navigator__connector" }),
-        /* @__PURE__ */ jsx(
-          OutboundLink,
-          {
-            href: edition.url,
-            context: "versioned-navigator-edition",
-            className: clsx9(
-              "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";
 
-export { ArticleCard, ArticleLayout, AuthorBio, DataHighlight, InsightCallout, LongFormLayout, ReadingProgress, RelatedContent, TableOfContents, VersionedSeriesNavigator, VersionedUpgradeAlert };
+export { ArticleCard, AuthorBio, BrowserFrame, LongFormLayout, ReadingProgress, RelatedContent, TableOfContents };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-YJ6C3EKW.js.map
+//# sourceMappingURL=chunk-CLXLQCNQ.js.map

package/dist/chunk-CLXLQCNQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ArticleCard/ArticleCard.tsx","../src/components/BrowserFrame/BrowserFrame.tsx","../src/components/AuthorBio/AuthorBio.tsx","../src/components/TableOfContents/TableOfContents.tsx","../src/components/RelatedContent/RelatedContent.tsx","../src/components/LongFormLayout/LongFormLayout.tsx","../src/components/ReadingProgress/ReadingProgress.tsx"],"names":["forwardRef","clsx","jsx","jsxs","React","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 './BrowserFrame.css';\n\n/* ============================================================================\n   BROWSER FRAME\n   ============================================================================\n   Realistic browser/device mockup frame for product screenshots and videos.\n   Makes static screenshots feel like live product demos.\n\n   Strategic objective: Trust (product visualization builds desire)\n   ============================================================================ */\n\nexport interface BrowserFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Frame type */\n  variant?: 'browser' | 'app' | 'mobile' | 'minimal';\n  /** Content to frame (image, video, or React element) */\n  children: React.ReactNode;\n  /** Optional URL bar text */\n  url?: string;\n  /** Show traffic light dots (default: true for browser/app) */\n  showControls?: boolean;\n  /** Optional glow effect behind frame */\n  withGlow?: boolean;\n  /** Aspect ratio */\n  aspectRatio?: '16/9' | '4/3' | '3/2' | 'auto';\n}\n\n/**\n * Device mockup frame for product screenshots.\n *\n * @example\n * ```tsx\n * <BrowserFrame variant=\"browser\" url=\"app.sales-mind.ai\" withGlow>\n *   <img src=\"/screenshot.png\" alt=\"SalesMind dashboard\" />\n * </BrowserFrame>\n * ```\n */\nexport const BrowserFrame = forwardRef<HTMLDivElement, BrowserFrameProps>(\n  (\n    {\n      variant = 'browser',\n      children,\n      url,\n      showControls,\n      withGlow = false,\n      aspectRatio = '16/9',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasControls = showControls ?? (variant === 'browser' || variant === 'app');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'ds-browser-frame',\n          `ds-browser-frame--${variant}`,\n          withGlow && 'ds-browser-frame--glow',\n          className,\n        )}\n        {...props}\n      >\n        {/* Chrome header */}\n        {variant !== 'minimal' && (\n          <div className=\"ds-browser-frame__chrome\">\n            {hasControls && (\n              <div className=\"ds-browser-frame__controls\" aria-hidden=\"true\">\n                <span className=\"ds-browser-frame__dot ds-browser-frame__dot--red\" />\n                <span className=\"ds-browser-frame__dot ds-browser-frame__dot--yellow\" />\n                <span className=\"ds-browser-frame__dot ds-browser-frame__dot--green\" />\n              </div>\n            )}\n            {variant === 'browser' && url && (\n              <div className=\"ds-browser-frame__url-bar\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\" className=\"ds-browser-frame__lock\">\n                  <path d=\"M3 5V4a3 3 0 116 0v1\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" />\n                  <rect x=\"2\" y=\"5\" width=\"8\" height=\"6\" rx=\"1.5\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n                </svg>\n                <span className=\"ds-browser-frame__url-text\">{url}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Content area */}\n        <div\n          className=\"ds-browser-frame__content\"\n          style={aspectRatio !== 'auto' ? { aspectRatio } : undefined}\n        >\n          {children}\n        </div>\n\n        {/* Mobile notch */}\n        {variant === 'mobile' && (\n          <div className=\"ds-browser-frame__notch\" aria-hidden=\"true\" />\n        )}\n      </div>\n    );\n  },\n);\n\nBrowserFrame.displayName = 'BrowserFrame';\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, { 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"]}

package/dist/{chunk-H2KQ3WSH.cjs → chunk-CVLD5RQK.cjs}

@@ -1,8 +1,6 @@
 'use strict';
 
-var chunkMQRB634A_cjs = require('./chunk-MQRB634A.cjs');
-var chunkBJZ2DKS5_cjs = require('./chunk-BJZ2DKS5.cjs');
-var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
+var chunk6QIQCUYC_cjs = require('./chunk-6QIQCUYC.cjs');
 var react = require('react');
 var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
@@ -51,7 +49,7 @@ var HeroSection = react.forwardRef(
       floatingElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("ds-hero__float", `ds-hero__float--${floatingPosition}`), children: floatingElement })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkBJZ2DKS5_cjs.SectionShell,
+      chunk6QIQCUYC_cjs.SectionShell,
       {
         ref,
         className: clsx__default.default(
@@ -73,14 +71,14 @@ var HeroSection = react.forwardRef(
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Box, { children: ContentBlock }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Box, { children: MediaBlock })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: ContentBlock }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: MediaBlock })
             ]
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(chunkMQRB634A_cjs.Stack, { gap: 16, align: isCenter ? "center" : "start", children: [
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-16)", alignItems: isCenter ? "center" : "flex-start" }, children: [
           ContentBlock,
           MediaBlock && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkMDB2WCRQ_cjs.Box,
+            "div",
             {
               style: {
                 width: "100%",
@@ -127,8 +125,8 @@ var FeatureSection = react.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(chunkBJZ2DKS5_cjs.SectionShell, { ref, className: clsx__default.default("ds-feature-section", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBJZ2DKS5_cjs.SectionHeader, { title, subtitle, eyebrow, align: alignHeader }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunk6QIQCUYC_cjs.SectionShell, { ref, className: clsx__default.default("ds-feature-section", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunk6QIQCUYC_cjs.SectionHeader, { title, subtitle, eyebrow, align: alignHeader }),
       variant === "grid" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("ds-feature-grid", `ds-feature-grid--${columns}-col`), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { item: feature }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-zigzag", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureRow, { item: feature }, index)) })
     ] });
   }
@@ -168,14 +166,14 @@ var CTASection = react.forwardRef(
       ] }),
       children
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkBJZ2DKS5_cjs.SectionShell, { ref, className: clsx__default.default(className), ...props, children: isBoxed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-card", children: Content }) : Content });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6QIQCUYC_cjs.SectionShell, { ref, className: clsx__default.default(className), ...props, children: isBoxed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-card", children: Content }) : Content });
   }
 );
 CTASection.displayName = "CTASection";
 var StatsSection = react.forwardRef(
   ({ stats, columns = 4, title, subtitle, eyebrow, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(chunkBJZ2DKS5_cjs.SectionShell, { ref, className: clsx__default.default("ds-stats-section", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBJZ2DKS5_cjs.SectionHeader, { title, subtitle, eyebrow }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunk6QIQCUYC_cjs.SectionShell, { ref, className: clsx__default.default("ds-stats-section", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunk6QIQCUYC_cjs.SectionHeader, { title, subtitle, eyebrow }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-stats-grid", style: { "--stats-columns": columns }, children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-card", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-value", children: [
           stat.prefix,
@@ -194,4 +192,4 @@ exports.FeatureSection = FeatureSection;
 exports.HeroSection = HeroSection;
 exports.StatsSection = StatsSection;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-H2KQ3WSH.cjs.map
+//# sourceMappingURL=chunk-CVLD5RQK.cjs.map

package/dist/chunk-CVLD5RQK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './HeroSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'left' | 'center' | 'split';\n  title: React.ReactNode;\n  titleAs?: React.ElementType;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  eyebrowAs?: React.ElementType;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n\n  /** Main visual (Image, Video, or Component) */\n  media?: React.ReactNode;\n  /** Adds a browser-like header bar to the media container */\n  mediaBrowserFrame?: boolean;\n\n  /** Optional floating elements (e.g. SocialProof cards) over the media */\n  floatingElement?: React.ReactNode;\n  floatingPosition?: 'top-right' | 'bottom-left';\n\n  /** Background Visuals */\n  withGrid?: boolean;\n  withGlow?: boolean;\n\n  align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n   Component\n   ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n  (\n    {\n      variant = 'left',\n      title,\n      titleAs: TitleElement = 'h1',\n      subtitle,\n      eyebrow,\n      eyebrowAs: EyebrowElement = 'span',\n      primaryCta,\n      secondaryCta,\n      media,\n      mediaBrowserFrame = false,\n      floatingElement,\n      floatingPosition = 'bottom-left',\n      withGrid = false,\n      withGlow = false,\n      align,\n      padding = 'lg',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // Determine layout based on variant\n    const isSplit = variant === 'split';\n    const isCenter = variant === 'center';\n\n    // Default alignment\n    const textAlignment = align || (isCenter ? 'center' : 'left');\n\n    const ContentBlock = (\n      <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n        {eyebrow && (\n          <EyebrowElement className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n            {eyebrow}\n          </EyebrowElement>\n        )}\n        <TitleElement className=\"ds-hero__title\">{title}</TitleElement>\n        {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n        {(primaryCta || secondaryCta) && (\n          <div className=\"ds-hero__actions\">\n            {primaryCta}\n            {secondaryCta}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    const MediaBlock = media && (\n      <div className=\"ds-hero__media-wrapper\">\n        <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n          {media}\n        </div>\n        {floatingElement && (\n          <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n            {floatingElement}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <SectionShell\n        ref={ref}\n        className={clsx(\n          'ds-hero',\n          `ds-hero--${variant}`,\n          withGrid && 'ds-hero--bg-grid',\n          withGlow && 'ds-hero--bg-glow',\n          className,\n        )}\n        padding={padding}\n        {...props}\n      >\n        {isSplit ? (\n          <div\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n              gap: 'var(--space-16)',\n              alignItems: 'center',\n            }}\n          >\n            <div>{ContentBlock}</div>\n            <div>{MediaBlock}</div>\n          </div>\n        ) : (\n          <div style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-16)', alignItems: isCenter ? 'center' : 'flex-start'}}>\n            {ContentBlock}\n            {MediaBlock && (\n            <div\n              style={{\n                width: '100%',\n                display: 'flex',\n                justifyContent: isCenter ? 'center' : 'flex-start',\n              }}\n            >\n              <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n                {MediaBlock}\n              </div>\n            </div>\n            )}\n          </div>\n        )}\n      </SectionShell>\n    );\n  },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface FeatureItem {\n  title: React.ReactNode;\n  description: React.ReactNode;\n  icon?: React.ReactNode;\n  media?: React.ReactNode; // For ZigZag\n  step?: string | number; // For ZigZag steps\n  cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'grid' | 'zigzag';\n  columns?: 2 | 3 | 4; // For grid variant\n  features: FeatureItem[];\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n   Components\n   ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-card\">\n    {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n    <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n    <div className=\"ds-feature-card__description\">{item.description}</div>\n    {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n  </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-row\">\n    <div className=\"ds-feature-row__content\">\n      {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n      {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n      <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n        {item.title}\n      </h3>\n      <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n        {item.description}\n      </div>\n      {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n    </div>\n    <div className=\"ds-feature-row__media\">\n      {item.media || (\n        <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n      )}\n    </div>\n  </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n  (\n    {\n      variant = 'grid',\n      columns = 3,\n      features,\n      title,\n      subtitle,\n      eyebrow,\n      alignHeader = 'center',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n        {variant === 'grid' ? (\n          <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n            {features.map((feature, index) => (\n              <FeatureCard key={index} item={feature} />\n            ))}\n          </div>\n        ) : (\n          <div className=\"ds-feature-zigzag\">\n            {features.map((feature, index) => (\n              <FeatureRow key={index} item={feature} />\n            ))}\n          </div>\n        )}\n      </SectionShell>\n    );\n  },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'center' | 'split' | 'boxed';\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n  actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n  (\n    {\n      variant = 'center',\n      title,\n      description,\n      primaryCta,\n      secondaryCta,\n      actions,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // \"Boxed\" is just centered content inside a card-like container within the section\n    const isBoxed = variant === 'boxed';\n    const effectiveVariant = isBoxed ? 'center' : variant;\n\n    const Content = (\n      <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n        {effectiveVariant === 'split' ? (\n          <div className=\"ds-cta-section--split\">\n            <div className=\"ds-cta-content\">\n              <h2 className=\"ds-cta-title\">{title}</h2>\n              {description && <p className=\"ds-cta-description\">{description}</p>}\n            </div>\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        ) : (\n          <div className=\"ds-cta-content\">\n            <h2 className=\"ds-cta-title\">{title}</h2>\n            {description && <p className=\"ds-cta-description\">{description}</p>}\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    return (\n      <SectionShell ref={ref} className={clsx(className)} {...props}>\n        {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n      </SectionShell>\n    );\n  },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n  label: string;\n  value: string | number;\n  suffix?: string;\n  prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n  stats: StatItem[];\n  columns?: number;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n  ({ stats, columns = 4, title, subtitle, eyebrow, className, ...props }, ref) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n        <div className=\"ds-stats-grid\" style={{ '--stats-columns': columns } as React.CSSProperties}>\n          {stats.map((stat, idx) => (\n            <div key={idx} className=\"ds-stat-card\">\n              <div className=\"ds-stat-value\">\n                {stat.prefix}\n                {stat.value}\n                <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n              </div>\n              <div className=\"ds-stat-label\">{stat.label}</div>\n            </div>\n          ))}\n        </div>\n      </SectionShell>\n    );\n  },\n);\nStatsSection.displayName = 'StatsSection';\n"]}