@salesmind-ai/design-system 0.2.0 → 0.3.0

package/dist/social-proof/index.js

@@ -0,0 +1,1237 @@
+"use client";
+import React5, { forwardRef, useState, useRef, useEffect, createContext, useCallback, useContext } from 'react';
+import clsx7 from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { Dialog } from '@base-ui/react/dialog';
+
+// src/components/SocialProof/Card.tsx
+var StarRating = forwardRef(
+  ({
+    value,
+    max = 5,
+    size = "md",
+    animate = false,
+    showValue = false,
+    valueLabel,
+    className,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = useState(!animate);
+    const containerRef = useRef(null);
+    useEffect(() => {
+      if (!animate) return;
+      if (typeof window !== "undefined") {
+        const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+        if (mq.matches) {
+          setVisible(true);
+          return;
+        }
+      }
+      const target = containerRef.current;
+      if (!target) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.5 }
+      );
+      observer.observe(target);
+      return () => observer.disconnect();
+    }, [animate]);
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const stars = Array.from({ length: max }, (_, i) => {
+      const starIndex = i + 1;
+      const fillPercent = clampedValue >= starIndex ? 100 : clampedValue > starIndex - 1 ? (clampedValue - (starIndex - 1)) * 100 : 0;
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: clsx7(
+            "ds-star-rating__star",
+            visible && "ds-star-rating__star--visible"
+          ),
+          style: {
+            "--star-fill": `${fillPercent}%`,
+            "--star-delay": animate ? `${i * 100}ms` : "0ms"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "ds-star-rating__svg",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                    className: "ds-star-rating__empty"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "ds-star-rating__svg ds-star-rating__svg--filled",
+                "aria-hidden": "true",
+                style: {
+                  clipPath: `inset(0 ${100 - fillPercent}% 0 0)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                    className: "ds-star-rating__filled"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        i
+      );
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: clsx7("ds-star-rating", `ds-star-rating--${size}`, className),
+        role: "img",
+        "aria-label": `${clampedValue} out of ${max} stars`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-star-rating__stars", children: stars }),
+          showValue && /* @__PURE__ */ jsxs("span", { className: "ds-star-rating__value", children: [
+            clampedValue.toLocaleString(void 0, {
+              minimumFractionDigits: clampedValue % 1 !== 0 ? 1 : 0,
+              maximumFractionDigits: 1
+            }),
+            valueLabel && /* @__PURE__ */ jsx("span", { className: "ds-star-rating__value-label", children: valueLabel })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StarRating.displayName = "StarRating";
+var TrustpilotIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2l2.9 8.9H24l-7.35 5.34 2.81 8.64L12 19.56l-7.46 5.32 2.81-8.64L0 10.9h9.1L12 2z", fill: "#00B67A" }) });
+var G2Icon = ({ size }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z", fill: "#FF492C" }),
+  /* @__PURE__ */ jsx("text", { x: "50%", y: "54%", dominantBaseline: "middle", textAnchor: "middle", fill: "white", fontWeight: "bold", fontSize: "11", fontFamily: "Arial, sans-serif", children: "G2" })
+] });
+var GoogleIcon = ({ size }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z", fill: "#FBBC05" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+] });
+var ChromeWebStoreIcon = ({ size }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#4285F4", opacity: "0.1", stroke: "#4285F4", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 8.5 12 8.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L4 5.5", stroke: "#EA4335", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M16.5 10.5L20 5.5", stroke: "#FBBC05", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 17l-3.5 5", stroke: "#34A853", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var PLATFORM_ICONS = {
+  trustpilot: TrustpilotIcon,
+  g2: G2Icon,
+  google: GoogleIcon,
+  "chrome-web-store": ChromeWebStoreIcon
+};
+var PLATFORM_LABELS = {
+  trustpilot: "Trustpilot",
+  g2: "G2",
+  google: "Google",
+  "chrome-web-store": "Chrome Web Store"
+};
+var PLATFORM_COLORS = {
+  trustpilot: "#00B67A",
+  g2: "#FF492C",
+  google: "#4285F4",
+  "chrome-web-store": "#4285F4"
+};
+var PlatformBadge = forwardRef(
+  ({
+    platform,
+    variant = "icon-label",
+    rating,
+    count,
+    size = "sm",
+    className,
+    ...props
+  }, ref) => {
+    const Icon = PLATFORM_ICONS[platform];
+    const label = PLATFORM_LABELS[platform];
+    const accentColor = PLATFORM_COLORS[platform];
+    const iconSize = size === "sm" ? 18 : 22;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx7(
+          "ds-platform-badge",
+          `ds-platform-badge--${variant}`,
+          `ds-platform-badge--${size}`,
+          className
+        ),
+        style: { "--platform-accent": accentColor },
+        "aria-label": variant === "full" && rating ? `${label}: ${rating} stars${count ? ` from ${count} reviews` : ""}` : label,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-platform-badge__icon", children: /* @__PURE__ */ jsx(Icon, { size: iconSize }) }),
+          variant !== "icon-only" && /* @__PURE__ */ jsx("span", { className: "ds-platform-badge__label", children: label }),
+          variant === "full" && rating != null && /* @__PURE__ */ jsxs("span", { className: "ds-platform-badge__rating", children: [
+            /* @__PURE__ */ jsx(StarRating, { value: rating, size: "sm" }),
+            count != null && /* @__PURE__ */ jsxs("span", { className: "ds-platform-badge__count", children: [
+              "(",
+              count,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PlatformBadge.displayName = "PlatformBadge";
+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 PlayIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+var SocialProofCard = forwardRef(
+  ({
+    variant = "simple",
+    content,
+    author,
+    media,
+    sourceIcon,
+    platform,
+    starRating,
+    date,
+    badges,
+    ctaText,
+    href,
+    className,
+    children,
+    animationDelay,
+    headline,
+    logo,
+    industry,
+    metrics,
+    ...props
+  }, ref) => {
+    const cardClass = clsx7(
+      "ds-social-card",
+      `ds-social-card--${variant}`,
+      animationDelay != null && "ds-social-card--animated",
+      className
+    );
+    const cardStyle = animationDelay != null ? { "--card-delay": `${animationDelay}ms` } : void 0;
+    if (variant === "rating-only") {
+      const inner = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "ds-social-card__rating-row", children: [
+        starRating != null && /* @__PURE__ */ jsx(StarRating, { value: starRating, size: "lg" }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__meta", children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-social-card__name", children: author.name }),
+          (author.role || author.company) && /* @__PURE__ */ jsxs("span", { className: "ds-social-card__role", children: [
+            author.role,
+            author.role && author.company && " \xB7 ",
+            author.company
+          ] })
+        ] }),
+        platform && /* @__PURE__ */ jsx(PlatformBadge, { platform, variant: "icon-label", size: "sm" })
+      ] }) });
+      if (href) {
+        return /* @__PURE__ */ jsx(OutboundLink, { ref, href, context: "social-proof-card", className: cardClass, style: cardStyle, openInNewTab: false, ...props, children: inner });
+      }
+      return /* @__PURE__ */ jsx("div", { ref, className: cardClass, style: cardStyle, ...props, children: inner });
+    }
+    if (variant === "case-study") {
+      const defaultCta2 = ctaText || "Read Case Study \u2192";
+      const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        media && /* @__PURE__ */ jsx("div", { className: "ds-social-card__media", children: /* @__PURE__ */ jsx("img", { src: media.src, alt: media.alt || `${author.company} case study` }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-social-card__cs-header", children: [
+            logo && /* @__PURE__ */ jsx("div", { className: "ds-social-card__cs-logo", children: logo }),
+            /* @__PURE__ */ jsxs("div", { className: "ds-social-card__cs-company", children: [
+              /* @__PURE__ */ jsx("span", { className: "ds-social-card__name", children: author.company || author.name }),
+              industry && /* @__PURE__ */ jsx("span", { className: "ds-social-card__cs-industry", children: industry })
+            ] })
+          ] }),
+          headline && /* @__PURE__ */ jsx("h3", { className: "ds-social-card__cs-headline", children: headline }),
+          metrics && metrics.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-social-card__cs-metrics", children: metrics.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "ds-social-card__cs-metric", children: [
+            /* @__PURE__ */ jsxs("span", { className: "ds-social-card__cs-metric-value", children: [
+              m.prefix,
+              m.value,
+              m.suffix
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ds-social-card__cs-metric-label", children: m.label })
+          ] }, i)) }),
+          content && /* @__PURE__ */ jsxs("blockquote", { className: "ds-social-card__quote ds-social-card__quote--excerpt", children: [
+            "\u201C",
+            content,
+            "\u201D"
+          ] }),
+          href && /* @__PURE__ */ jsx("div", { className: "ds-social-card__cta", children: defaultCta2 })
+        ] })
+      ] });
+      if (href) {
+        return /* @__PURE__ */ jsx(OutboundLink, { ref, href, context: "social-proof-card", className: cardClass, style: cardStyle, openInNewTab: false, ...props, children: inner });
+      }
+      return /* @__PURE__ */ jsx("div", { ref, className: cardClass, style: cardStyle, ...props, children: inner });
+    }
+    if (variant === "video") {
+      const defaultCta2 = ctaText || "Watch Video \u2192";
+      const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__media", children: [
+          media ? /* @__PURE__ */ jsx("img", { src: media.src, alt: media.alt || `${author.name} video` }) : /* @__PURE__ */ jsx("div", { className: "ds-social-card__media-placeholder" }),
+          /* @__PURE__ */ jsx("div", { className: "ds-social-card__play", children: /* @__PURE__ */ jsx("div", { className: "ds-social-card__play-icon", children: /* @__PURE__ */ jsx(PlayIcon, {}) }) }),
+          badges && badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-social-card__badges", children: badges.map((badge, idx) => /* @__PURE__ */ jsx("span", { className: "ds-social-card__badge", children: badge }, idx)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-social-card__author", children: [
+            author.avatar && /* @__PURE__ */ jsx("div", { className: "ds-social-card__avatar", children: /* @__PURE__ */ jsx("img", { src: author.avatar, alt: author.name }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ds-social-card__meta", children: [
+              /* @__PURE__ */ jsx("span", { className: "ds-social-card__name", children: author.name }),
+              (author.role || author.company) && /* @__PURE__ */ jsxs("span", { className: "ds-social-card__role", children: [
+                author.role,
+                author.role && author.company && " \xB7 ",
+                author.company
+              ] })
+            ] }),
+            platform && /* @__PURE__ */ jsx(PlatformBadge, { platform, variant: "icon-only", size: "sm" })
+          ] }),
+          content && /* @__PURE__ */ jsx("blockquote", { className: "ds-social-card__quote", children: content }),
+          href && /* @__PURE__ */ jsx("div", { className: "ds-social-card__cta", children: defaultCta2 })
+        ] })
+      ] });
+      if (href) {
+        return /* @__PURE__ */ jsx(OutboundLink, { ref, href, context: "social-proof-card", className: cardClass, style: cardStyle, openInNewTab: false, ...props, children: inner });
+      }
+      return /* @__PURE__ */ jsx("div", { ref, className: cardClass, style: cardStyle, ...props, children: inner });
+    }
+    if (variant === "social") {
+      const inner = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "ds-social-card__content", children: [
+        (platform || sourceIcon) && /* @__PURE__ */ jsx("div", { className: "ds-social-card__source", children: platform ? /* @__PURE__ */ jsx(PlatformBadge, { platform, variant: "icon-only", size: "sm" }) : sourceIcon }),
+        content && /* @__PURE__ */ jsx("blockquote", { className: "ds-social-card__quote ds-social-card__quote--clamp", children: content }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__author", children: [
+          author.avatar && /* @__PURE__ */ jsx("div", { className: "ds-social-card__avatar", children: /* @__PURE__ */ jsx("img", { src: author.avatar, alt: author.name }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-social-card__meta", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-social-card__name", children: author.name }),
+            (author.role || author.company) && /* @__PURE__ */ jsxs("span", { className: "ds-social-card__role", children: [
+              author.role,
+              author.role && author.company && " \xB7 ",
+              author.company
+            ] }),
+            date && /* @__PURE__ */ jsx("span", { className: "ds-social-card__role", children: date })
+          ] })
+        ] }),
+        starRating != null && /* @__PURE__ */ jsx(StarRating, { value: starRating, size: "sm" }),
+        children
+      ] }) });
+      if (href) {
+        return /* @__PURE__ */ jsx(OutboundLink, { ref, href, context: "social-proof-card", className: cardClass, style: cardStyle, openInNewTab: false, ...props, children: inner });
+      }
+      return /* @__PURE__ */ jsx("div", { ref, className: cardClass, style: cardStyle, ...props, children: inner });
+    }
+    const BadgeList = badges && badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-social-card__badges", children: badges.map((badge, idx) => /* @__PURE__ */ jsx("span", { className: "ds-social-card__badge", children: badge }, idx)) });
+    const defaultCta = ctaText || "Read Story \u2192";
+    const simpleInner = /* @__PURE__ */ jsxs("div", { className: "ds-social-card__content", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-social-card__deco-quote", "aria-hidden": "true", children: "\u201C" }),
+      (platform || sourceIcon) && /* @__PURE__ */ jsx("div", { className: "ds-social-card__source", children: platform ? /* @__PURE__ */ jsx(PlatformBadge, { platform, variant: "icon-only", size: "sm" }) : sourceIcon }),
+      BadgeList,
+      content && /* @__PURE__ */ jsx("blockquote", { className: "ds-social-card__quote", children: content }),
+      starRating != null && /* @__PURE__ */ jsx(StarRating, { value: starRating, size: "sm" }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-social-card__author", children: [
+        author.avatar && /* @__PURE__ */ jsx("div", { className: "ds-social-card__avatar", children: /* @__PURE__ */ jsx("img", { src: author.avatar, alt: author.name }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-social-card__meta", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ds-social-card__name", children: [
+            author.name,
+            author.handle && /* @__PURE__ */ jsxs("span", { className: "ds-social-card__handle", children: [
+              "@",
+              author.handle
+            ] })
+          ] }),
+          (author.role || author.company) && /* @__PURE__ */ jsxs("span", { className: "ds-social-card__role", children: [
+            author.role,
+            author.role && author.company && " \xB7 ",
+            author.company
+          ] }),
+          date && /* @__PURE__ */ jsx("span", { className: "ds-social-card__role", children: date })
+        ] })
+      ] }),
+      children,
+      href && /* @__PURE__ */ jsx("div", { className: "ds-social-card__cta", children: defaultCta })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(OutboundLink, { ref, href, context: "social-proof-card", className: cardClass, style: cardStyle, openInNewTab: false, ...props, children: simpleInner });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className: cardClass, style: cardStyle, ...props, children: simpleInner });
+  }
+);
+SocialProofCard.displayName = "SocialProofCard";
+
+// 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: clsx7("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: clsx7("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: clsx7("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: clsx7(
+          "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 SocialProofGrid = forwardRef(
+  ({ columns = 3, masonry = false, staggered = false, className, children, ...props }, ref) => {
+    const enhancedChildren = staggered ? React5.Children.map(children, (child, index) => {
+      if (!React5.isValidElement(child)) return child;
+      const delay = Math.min(index * 50, 600);
+      const childProps = child.props;
+      return React5.cloneElement(child, {
+        style: { ...childProps.style, "--card-delay": `${delay}ms` },
+        className: clsx7(childProps.className, "ds-social-card--animated")
+      });
+    }) : children;
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        padding: "md",
+        className: clsx7("ds-social-proof", className),
+        ...props,
+        children: masonry ? /* @__PURE__ */ jsx("div", { className: "ds-social-masonry", children: enhancedChildren }) : /* @__PURE__ */ jsx("div", { className: clsx7("ds-social-grid", `ds-social-grid--${columns}-col`), children: enhancedChildren })
+      }
+    );
+  }
+);
+SocialProofGrid.displayName = "SocialProofGrid";
+var LogoItemRender = ({ item, className }) => {
+  const content = item.logo ? item.logo : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: item.src,
+      alt: item.alt,
+      width: 120,
+      height: 48,
+      loading: "lazy",
+      decoding: "async",
+      style: { objectFit: "contain", width: "auto", height: "100%" }
+    }
+  );
+  const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    item.badge && /* @__PURE__ */ jsx("span", { className: "ds-social-logos__badge", children: item.badge })
+  ] });
+  if (item.href) {
+    const isInternal = item.href.startsWith("/");
+    return /* @__PURE__ */ jsx(
+      OutboundLink,
+      {
+        href: item.href,
+        context: "social-proof-logo",
+        className: clsx7("ds-social-logos__item", className),
+        title: item.alt,
+        openInNewTab: !isInternal,
+        children: innerContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx7("ds-social-logos__item", className), title: item.alt, children: innerContent });
+};
+var SocialProofLogos = forwardRef(
+  ({ title, logos, variant = "grid", speed = 40, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      SectionShell,
+      {
+        ref,
+        padding: "sm",
+        className: clsx7("ds-social-logos", className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: "ds-section-header__eyebrow",
+              style: { textAlign: "center", marginBottom: "var(--space-8)" },
+              children: title
+            }
+          ),
+          variant === "marquee" ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ds-social-logos__marquee",
+              style: { "--marquee-duration": `${speed}s` },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "ds-social-logos__track", children: logos.map((item) => /* @__PURE__ */ jsx(LogoItemRender, { item }, `set1-${item.id}`)) }),
+                /* @__PURE__ */ jsx("div", { className: "ds-social-logos__track", "aria-hidden": "true", children: logos.map((item) => /* @__PURE__ */ jsx(LogoItemRender, { item }, `set2-${item.id}`)) })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "ds-social-grid ds-social-grid--4-col", style: { alignItems: "center" }, children: logos.map((item) => /* @__PURE__ */ jsx(LogoItemRender, { item }, item.id)) })
+        ]
+      }
+    );
+  }
+);
+SocialProofLogos.displayName = "SocialProofLogos";
+var PlayIconLarge = () => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "32", fill: "white", fillOpacity: "0.9" }),
+  /* @__PURE__ */ jsx("path", { d: "M42 32L26 41.2376L26 22.7624L42 32Z", fill: "black" })
+] });
+var SocialProofFeatured = forwardRef(
+  ({
+    quote,
+    author,
+    media,
+    mediaSrc,
+    orientation = "horizontal",
+    featuredVariant = "standard",
+    starRating,
+    platform,
+    logo,
+    className,
+    ...props
+  }, ref) => {
+    const showMedia = media || mediaSrc;
+    const effectiveOrientation = featuredVariant === "spotlight" ? "vertical" : orientation;
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        padding: "md",
+        className: clsx7("ds-social-featured-section", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx7(
+              "ds-social-featured",
+              `ds-social-featured--${effectiveOrientation}`,
+              `ds-social-featured--${featuredVariant}`
+            ),
+            children: [
+              showMedia && featuredVariant !== "spotlight" && /* @__PURE__ */ jsx("div", { className: "ds-social-featured__media", children: media ? media : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: mediaSrc || "https://placehold.co/1920x1080/111/FFF?text=Video+Case+Study",
+                    alt: `Case study by ${author.name}`,
+                    style: { width: "100%", height: "100%", objectFit: "cover" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "ds-social-card__play", children: /* @__PURE__ */ jsx(PlayIconLarge, {}) })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "ds-social-featured__content", children: [
+                logo && /* @__PURE__ */ jsx("div", { className: "ds-social-featured__logo", children: logo }),
+                /* @__PURE__ */ jsxs("blockquote", { className: "ds-social-featured__quote", children: [
+                  "\u201C",
+                  quote,
+                  "\u201D"
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ds-social-featured__author-large", children: [
+                  author.avatar && /* @__PURE__ */ jsx("div", { className: "ds-social-card__avatar", children: /* @__PURE__ */ jsx("img", { src: author.avatar, alt: author.name }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "ds-social-card__meta", children: [
+                    /* @__PURE__ */ jsx("span", { className: "ds-social-card__name", children: author.name }),
+                    /* @__PURE__ */ jsxs("span", { className: "ds-social-card__role", children: [
+                      author.role,
+                      author.role && author.company && ", ",
+                      author.company
+                    ] })
+                  ] })
+                ] }),
+                (starRating != null || platform) && /* @__PURE__ */ jsxs("div", { className: "ds-social-featured__trust", children: [
+                  starRating != null && /* @__PURE__ */ jsx(StarRating, { value: starRating, size: "md", showValue: true }),
+                  platform && /* @__PURE__ */ jsx(PlatformBadge, { platform, variant: "icon-label", size: "md" })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SocialProofFeatured.displayName = "SocialProofFeatured";
+
+// src/tokens/motion.ts
+var DURATION = {
+  // 250ms
+  medium: 0.5};
+var EASING = {
+  standard: [0.16, 1, 0.3, 1]};
+var VARIANTS = {
+  fadeIn: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  }};
+var SocialProofCarousel = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        padding: "none",
+        containerFluid: true,
+        className: clsx7("ds-social-carousel", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "ds-social-carousel__track",
+            variants: VARIANTS.fadeIn,
+            initial: "hidden",
+            whileInView: "visible",
+            viewport: { once: true, margin: "-10%" },
+            children: [
+              children,
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SocialProofCarousel.displayName = "SocialProofCarousel";
+function getShortsEmbedUrl(url) {
+  const match = url.match(/(?:youtube\.com\/shorts\/|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
+  if (match) {
+    return `https://www.youtube-nocookie.com/embed/${match[1]}?rel=0&modestbranding=1&playsinline=1&controls=1`;
+  }
+  return url.replace("youtube.com", "youtube-nocookie.com") + (url.includes("?") ? "&" : "?") + "rel=0&modestbranding=1&playsinline=1";
+}
+function VerticalVideoGrid({ urls, className }) {
+  if (!urls || urls.length === 0) return null;
+  return /* @__PURE__ */ jsx(SectionShell, { className: clsx7("ds-vertical-video-grid my-16", className), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-6xl mx-auto", children: urls.map((url, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative w-full overflow-hidden rounded-[20px] shadow-lg border border-white/10 bg-black",
+      style: { aspectRatio: "9/16" },
+      children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: getShortsEmbedUrl(url),
+          title: `Short testimonial ${i + 1}`,
+          className: "absolute inset-0 w-full h-full",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowFullScreen: true,
+          loading: "lazy"
+        }
+      )
+    },
+    i
+  )) }) });
+}
+
+// src/components/SocialProof/index.ts
+var SocialProof = {
+  Card: SocialProofCard,
+  Grid: SocialProofGrid,
+  Logos: SocialProofLogos,
+  Featured: SocialProofFeatured,
+  Carousel: SocialProofCarousel,
+  VerticalGrid: VerticalVideoGrid
+};
+function getEmbedUrl(src) {
+  const ytMatch = src.match(
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}?autoplay=1&rel=0`;
+  const vimeoMatch = src.match(/(?:vimeo\.com\/)(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  const loomMatch = src.match(/(?:loom\.com\/share\/)([a-zA-Z0-9]+)/);
+  if (loomMatch) return `https://www.loom.com/embed/${loomMatch[1]}?autoplay=1`;
+  return src;
+}
+var PlayIcon2 = () => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "32", className: "ds-video-lightbox__play-bg" }),
+  /* @__PURE__ */ jsx("path", { d: "M26 20v24l20-12L26 20z", fill: "white" })
+] });
+var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var VideoLightbox = forwardRef(
+  ({
+    videoUrl,
+    thumbnailSrc,
+    thumbnailAlt,
+    title = "Video",
+    trigger,
+    className,
+    onPlay
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const handleOpen = useCallback(() => {
+      setOpen(true);
+      onPlay?.();
+    }, [onPlay]);
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx7("ds-video-lightbox", className), children: /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Trigger,
+        {
+          className: "ds-video-lightbox__trigger",
+          onClick: handleOpen,
+          children: trigger || /* @__PURE__ */ jsxs("div", { className: "ds-video-lightbox__thumbnail-wrap", children: [
+            thumbnailSrc ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnailSrc,
+                alt: thumbnailAlt || `Play: ${title}`,
+                className: "ds-video-lightbox__thumbnail",
+                loading: "lazy",
+                decoding: "async"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "ds-video-lightbox__placeholder" }),
+            /* @__PURE__ */ jsx("div", { className: "ds-video-lightbox__overlay", children: /* @__PURE__ */ jsx("div", { className: "ds-video-lightbox__play-btn", children: /* @__PURE__ */ jsx(PlayIcon2, {}) }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "ds-video-lightbox__backdrop" }),
+        /* @__PURE__ */ jsxs(Dialog.Popup, { className: "ds-video-lightbox__popup", children: [
+          /* @__PURE__ */ jsx(Dialog.Close, { className: "ds-video-lightbox__close", "aria-label": "Close video", children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "ds-sr-only", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "ds-video-lightbox__iframe-wrap", children: open && /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: getEmbedUrl(videoUrl),
+              title,
+              className: "ds-video-lightbox__iframe",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          ) })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+VideoLightbox.displayName = "VideoLightbox";
+var MetricCounter = forwardRef(
+  ({
+    value,
+    prefix = "",
+    suffix = "",
+    duration = 1500,
+    decimals = 0,
+    label,
+    className,
+    ...props
+  }, ref) => {
+    const [displayValue, setDisplayValue] = useState(0);
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const containerRef = useRef(null);
+    const prefersReducedMotion = useRef(false);
+    useEffect(() => {
+      prefersReducedMotion.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (prefersReducedMotion.current) {
+        setDisplayValue(value);
+        setHasAnimated(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && !hasAnimated) {
+            startAnimation();
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.5 }
+      );
+      if (containerRef.current) {
+        observer.observe(containerRef.current);
+      }
+      return () => observer.disconnect();
+    }, [value, hasAnimated]);
+    const startAnimation = () => {
+      let startTime;
+      setHasAnimated(true);
+      const easeOutExpo = (t) => {
+        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+      };
+      const animate = (currentTime) => {
+        if (!startTime) startTime = currentTime;
+        const progress = Math.min((currentTime - startTime) / duration, 1);
+        const currentMultiplier = easeOutExpo(progress);
+        const nextValue = value * currentMultiplier;
+        setDisplayValue(nextValue);
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        } else {
+          setDisplayValue(value);
+        }
+      };
+      requestAnimationFrame(animate);
+    };
+    const formattedValue = displayValue.toLocaleString(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: clsx7("ds-metric-counter", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-metric-counter__value-wrapper", children: [
+            prefix && /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__prefix", children: prefix }),
+            /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__value", children: formattedValue }),
+            suffix && /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__suffix", children: suffix })
+          ] }),
+          label && /* @__PURE__ */ jsx("div", { className: "ds-metric-counter__label", children: label })
+        ]
+      }
+    );
+  }
+);
+MetricCounter.displayName = "MetricCounter";
+
+export { MetricCounter, PlatformBadge, SocialProof, SocialProofCard, SocialProofCarousel, SocialProofFeatured, SocialProofGrid, SocialProofLogos, StarRating, VerticalVideoGrid, VideoLightbox };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map