@salesmind-ai/design-system 0.3.4 → 0.3.5

package/dist/chunk-T5H5PNLN.js

@@ -0,0 +1,701 @@
+import { VARIANTS } from './chunk-YNVRDD2P.js';
+import { SectionShell } from './chunk-UFAJY2DM.js';
+import { OutboundLink } from './chunk-KJ2OXQF4.js';
+import React3, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import clsx4 from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { Dialog } from '@base-ui/react/dialog';
+
+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: clsx4(
+            "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: clsx4("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,
+        role: "img",
+        className: clsx4(
+          "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 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 = clsx4(
+      "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";
+var SocialProofGrid = forwardRef(
+  ({ columns = 3, masonry = false, staggered = false, className, children, ...props }, ref) => {
+    const enhancedChildren = staggered ? React3.Children.map(children, (child, index) => {
+      if (!React3.isValidElement(child)) return child;
+      const delay = Math.min(index * 50, 600);
+      const childProps = child.props;
+      return React3.cloneElement(child, {
+        style: { ...childProps.style, "--card-delay": `${delay}ms` },
+        className: clsx4(childProps.className, "ds-social-card--animated")
+      });
+    }) : children;
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        padding: "md",
+        className: clsx4("ds-social-proof", className),
+        ...props,
+        children: masonry ? /* @__PURE__ */ jsx("div", { className: "ds-social-masonry", children: enhancedChildren }) : /* @__PURE__ */ jsx("div", { className: clsx4("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: clsx4("ds-social-logos__item", className),
+        title: item.alt,
+        openInNewTab: !isInternal,
+        children: innerContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx4("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: clsx4("ds-social-logos", className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              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: clsx4("ds-social-featured-section", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx4(
+              "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";
+var SocialProofCarousel = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        padding: "none",
+        containerFluid: true,
+        className: clsx4("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: clsx4("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: clsx4("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";
+
+export { PlatformBadge, SocialProof, SocialProofCard, SocialProofCarousel, SocialProofFeatured, SocialProofGrid, SocialProofLogos, StarRating, VerticalVideoGrid, VideoLightbox };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-T5H5PNLN.js.map