@salesmind-ai/design-system 0.6.0 → 1.0.0

package/dist/{chunk-Y26OHHMX.js → chunk-KSEETC4E.js}

@@ -1,78 +1,87 @@
-import { ToggleGroup, ToggleGroupItem, Badge, Dialog, DialogContent, Tabs, TabsList, TabsTrigger, TabsContent, Slider } from './chunk-TCFC7XTB.js';
-import { TextField } from './chunk-3NKRFUAR.js';
-import { Button } from './chunk-SICKWUWB.js';
+import { Badge, Card } from './chunk-KXVFFEGD.js';
+import { Button } from './chunk-KJHPOB3J.js';
 import { MetricCounter } from './chunk-YSYR54XR.js';
-import { BrowserFrame } from './chunk-XWPDRMZG.js';
 import { useAnalytics } from './chunk-2GARWEJK.js';
-import { Avatar, AvatarImage, AvatarFallback } from './chunk-Y3CPKNB7.js';
-import { SectionShell, SectionHeader } from './chunk-VFJZQQZU.js';
+import { bookingEmbedMessages, commonMessages } from './chunk-RSLA2FJN.js';
+import { SectionShell, SectionHeader } from './chunk-AMNY5TS3.js';
 import { OutboundLink } from './chunk-KJ2OXQF4.js';
-import React34, { forwardRef, useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import clsx27 from 'clsx';
-import { ArrowRight, X, Check } from 'lucide-react';
+import React24, { forwardRef, useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import clsx17 from 'clsx';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CalendarOff, X, Check } from 'lucide-react';
+import { useIntl, FormattedMessage } from 'react-intl';
 
-var AnnouncementBar = forwardRef(
+var AuroraVoid = forwardRef(
   ({
-    badge,
-    message,
-    href,
-    variant = "brand",
-    dismissible = false,
-    onDismiss,
-    showArrow = true,
+    intensity = "base",
+    animated = true,
+    static: isStatic = false,
     className,
-    ...props
+    children
   }, ref) => {
-    const { track } = useAnalytics();
-    const handleClick = () => {
-      if (href) {
-        track("announcement_click", { href, variant });
-      }
-    };
-    const handleDismiss = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      track("announcement_dismiss", { variant });
-      onDismiss?.();
-    };
-    const Component = href ? "a" : "div";
-    const componentProps = href ? { href, onClick: handleClick } : {};
+    const isAnimated = animated && !isStatic;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: clsx27(
-          "ds-announcement-bar",
-          `ds-announcement-bar--${variant}`,
-          href && "ds-announcement-bar--clickable",
+        className: clsx17(
+          "ds-aurora-void",
+          `ds-aurora-void--intensity-${intensity}`,
+          isAnimated && "ds-aurora-void--animated",
+          isStatic && "ds-aurora-void--static",
           className
         ),
-        ...props,
         children: [
-          /* @__PURE__ */ jsxs(Component, { className: "ds-announcement-bar__inner", ...componentProps, children: [
-            /* @__PURE__ */ jsxs("div", { className: "ds-announcement-bar__content", children: [
-              badge && /* @__PURE__ */ jsx("span", { className: "ds-announcement-bar__badge", children: badge }),
-              /* @__PURE__ */ jsx("span", { className: "ds-announcement-bar__message", children: message })
-            ] }),
-            href && showArrow && /* @__PURE__ */ jsx(ArrowRight, { className: "ds-announcement-bar__arrow", size: 16 })
-          ] }),
-          dismissible && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ds-announcement-bar__close",
-              onClick: handleDismiss,
-              "aria-label": "Dismiss announcement",
-              children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: "ds-aurora-void__aurora", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "ds-aurora-void__vignette", "aria-hidden": "true" }),
+          children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
         ]
       }
     );
   }
 );
-AnnouncementBar.displayName = "AnnouncementBar";
+AuroraVoid.displayName = "AuroraVoid";
+var Vignette = forwardRef(
+  ({ intensity = "base", as: Tag = "div", className, children }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: clsx17(
+          "ds-vignette",
+          `ds-vignette--${intensity}`,
+          className
+        ),
+        "aria-hidden": "true",
+        children
+      }
+    );
+  }
+);
+Vignette.displayName = "Vignette";
+var GridOverlay = forwardRef(
+  ({ cell = "64", opacity = 0.04, mask = true, className }, ref) => {
+    const style = {};
+    if (opacity !== 0.04) {
+      style.opacity = opacity;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx17(
+          "ds-grid-overlay",
+          `ds-grid-overlay--cell-${cell}`,
+          mask && "ds-grid-overlay--masked",
+          className
+        ),
+        style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+GridOverlay.displayName = "GridOverlay";
 var StickyActionBar = forwardRef(
   ({
     message,
@@ -105,7 +114,7 @@ var StickyActionBar = forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx17(
           "ds-sticky-action-bar",
           `ds-sticky-action-bar--${position}`,
           `ds-sticky-action-bar--${variant}`,
@@ -124,67 +133,92 @@ var StickyActionBar = forwardRef(
   }
 );
 StickyActionBar.displayName = "StickyActionBar";
-var PricingToggle = forwardRef(
-  ({
-    value,
-    onChange,
-    monthlyLabel = "Monthly",
-    annualLabel = "Annual",
-    savingsBadge,
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx27("ds-pricing-toggle", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(
-            ToggleGroup,
-            {
-              type: "single",
-              value,
-              onValueChange: (v) => {
-                if (v && typeof v === "string") {
-                  onChange(v);
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "monthly", children: monthlyLabel }),
-                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "annual", children: annualLabel })
-              ]
-            }
-          ),
-          savingsBadge && /* @__PURE__ */ jsx(Badge, { className: "ds-pricing-toggle__badge", children: savingsBadge })
-        ]
+function parseSetHeight(data) {
+  if (!Array.isArray(data) || data[0] !== "highlevel.setHeight") return null;
+  const payload = data[1];
+  if (typeof payload !== "object" || payload === null) return null;
+  const height = payload.height;
+  if (typeof height !== "number" || !Number.isFinite(height) || height < 0) return null;
+  return { height: Math.min(height, 2e3) };
+}
+function parseBookingComplete(data) {
+  if (!Array.isArray(data) || data[0] !== "msgsndr-booking-complete") return null;
+  const raw = typeof data[1] === "object" && data[1] !== null ? data[1] : {};
+  const payload = {};
+  if (typeof raw.date === "string") payload.date = raw.date;
+  if (typeof raw.time === "string") payload.time = raw.time;
+  if (typeof raw.timezone === "string") payload.timezone = raw.timezone;
+  return payload;
+}
+function useGhlMessages(options) {
+  const { origin, onSetHeight, onBookingComplete, throttleMs = 200 } = options;
+  const lastHeightUpdateRef = useRef(0);
+  const onSetHeightRef = useRef(onSetHeight);
+  const onBookingCompleteRef = useRef(onBookingComplete);
+  useEffect(() => {
+    onSetHeightRef.current = onSetHeight;
+    onBookingCompleteRef.current = onBookingComplete;
+  }, [onSetHeight, onBookingComplete]);
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.origin !== origin) return;
+      const setHeightResult = parseSetHeight(event.data);
+      if (setHeightResult) {
+        const now = performance.now();
+        if (now - lastHeightUpdateRef.current >= throttleMs) {
+          lastHeightUpdateRef.current = now;
+          onSetHeightRef.current?.(setHeightResult.height);
+        }
+        return;
       }
-    );
-  }
-);
-PricingToggle.displayName = "PricingToggle";
+      const bookingCompleteResult = parseBookingComplete(event.data);
+      if (bookingCompleteResult) {
+        onBookingCompleteRef.current?.(bookingCompleteResult);
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [origin, throttleMs]);
+}
 var BookingEmbed = forwardRef(
   ({
     url,
     aspectRatio = "16/9",
     title = "Book a call",
     lazyLoad = true,
+    expectedHeight,
+    onError,
+    onReady,
+    onEvent,
+    showRetry = true,
+    maxRetries = 3,
+    timeoutMs,
     className,
     style,
     ...props
   }, ref) => {
     const [isLoaded, setIsLoaded] = useState(!lazyLoad);
-    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+    const [status, setStatus] = useState("loading");
+    const [dynamicHeight, setDynamicHeight] = useState(null);
+    const [retryCount, setRetryCount] = useState(0);
+    const [iframeKey, setIframeKey] = useState(0);
     const containerRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const readyCalledRef = useRef(false);
+    const retryTimerRef = useRef(null);
     const { track } = useAnalytics();
+    const intl = useIntl();
+    const handleTrack = useCallback((event, trackProps = {}) => {
+      onEvent?.(event, trackProps);
+      track(event, trackProps);
+    }, [onEvent, track]);
     useEffect(() => {
       if (!lazyLoad) return;
       const observer = new IntersectionObserver(
         (entries) => {
           if (entries[0].isIntersecting) {
             setIsLoaded(true);
-            track("booking_embed_visible", { url });
+            handleTrack("booking_embed_visible", { url });
             observer.disconnect();
           }
         },
@@ -194,37 +228,130 @@ var BookingEmbed = forwardRef(
         observer.observe(containerRef.current);
       }
       return () => observer.disconnect();
-    }, [lazyLoad, url, track]);
-    const handleIframeLoad = () => {
-      setIsIframeLoaded(true);
-      track("booking_embed_loaded", { url });
+    }, [lazyLoad, url, handleTrack]);
+    useEffect(() => {
+      if (status !== "loading") return;
+      const ms = timeoutMs ?? 8e3;
+      const id = window.setTimeout(() => {
+        setStatus("error");
+        onError?.("timeout");
+      }, ms);
+      timeoutRef.current = id;
+      return () => {
+        window.clearTimeout(id);
+        timeoutRef.current = null;
+      };
+    }, [status, timeoutMs, onError]);
+    const handleReady = useCallback(() => {
+      if (readyCalledRef.current) return;
+      readyCalledRef.current = true;
+      setStatus((prev) => prev === "loading" ? "ready" : prev);
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      onReady?.();
+    }, [onReady]);
+    const handleRetry = useCallback(() => {
+      if (retryCount >= maxRetries) return;
+      const delay = 1e3 * Math.pow(2, retryCount);
+      setRetryCount((c) => c + 1);
+      readyCalledRef.current = false;
+      setStatus("loading");
+      retryTimerRef.current = window.setTimeout(() => {
+        setIframeKey((k) => k + 1);
+      }, delay);
+    }, [retryCount, maxRetries]);
+    useEffect(() => () => {
+      if (retryTimerRef.current !== null) window.clearTimeout(retryTimerRef.current);
+    }, []);
+    const handleSetHeight = useCallback((height) => {
+      setDynamicHeight(height);
+      handleReady();
+    }, [handleReady]);
+    const handleBookingComplete = useCallback((payload) => {
+      containerRef.current?.dispatchEvent(
+        new CustomEvent("booking-complete", {
+          detail: {
+            date: payload.date,
+            time: payload.time,
+            timezone: payload.timezone
+          },
+          bubbles: true
+        })
+      );
+    }, []);
+    useGhlMessages({
+      origin: "https://meet.sales-mind.ai",
+      onSetHeight: handleSetHeight,
+      onBookingComplete: handleBookingComplete
+    });
+    const handleIframeLoad = useCallback(() => {
+      handleReady();
+      handleTrack("booking_embed_loaded", { url });
+    }, [handleReady, handleTrack, url]);
+    const containerStyle = {
+      "--embed-aspect-ratio": aspectRatio,
+      ...dynamicHeight !== null ? { "--embed-dynamic-height": `${dynamicHeight}px` } : {},
+      ...expectedHeight !== void 0 ? { "--embed-min-height": `${expectedHeight}px` } : {},
+      ...style
     };
+    const handleRef = useCallback((node) => {
+      containerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: (node) => {
-          containerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        className: clsx27("ds-booking-embed", className),
-        style: { "--embed-aspect-ratio": aspectRatio, ...style },
+        ref: handleRef,
+        className: clsx17(
+          "ds-booking-embed",
+          dynamicHeight !== null && "ds-booking-embed--dynamic-height",
+          status === "loading" && "ds-booking-embed--loading",
+          status === "ready" && "ds-booking-embed--ready",
+          status === "error" && "ds-booking-embed--error",
+          className
+        ),
+        style: containerStyle,
+        "aria-busy": status === "loading" || void 0,
         ...props,
         children: [
-          !isIframeLoaded && /* @__PURE__ */ jsxs("div", { className: "ds-booking-embed__skeleton", children: [
+          status !== "ready" && status !== "error" && /* @__PURE__ */ jsxs("div", { className: "ds-booking-embed__skeleton", children: [
             /* @__PURE__ */ jsx("div", { className: "ds-booking-embed__spinner" }),
-            /* @__PURE__ */ jsx("p", { children: "Loading calendar..." })
+            /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(FormattedMessage, { ...bookingEmbedMessages.loading }) })
           ] }),
+          status === "error" && /* @__PURE__ */ jsx("div", { className: "ds-booking-embed__error", role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ds-booking-embed__error-content", children: [
+            /* @__PURE__ */ jsx(CalendarOff, { className: "ds-booking-embed__error-icon", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("h3", { className: "ds-booking-embed__error-title", children: intl.formatMessage(bookingEmbedMessages.errorTitle) }),
+            /* @__PURE__ */ jsx("p", { className: "ds-booking-embed__error-description", children: intl.formatMessage(bookingEmbedMessages.errorDescription) }),
+            showRetry && retryCount < maxRetries ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleRetry, children: /* @__PURE__ */ jsx(FormattedMessage, { ...commonMessages.retry }) }) : /* @__PURE__ */ jsx(
+              OutboundLink,
+              {
+                href: url,
+                context: "booking-embed-fallback",
+                openInNewTab: true,
+                className: "ds-button ds-button--outline ds-button--md",
+                children: /* @__PURE__ */ jsx("span", { className: "ds-button__content", children: /* @__PURE__ */ jsx(FormattedMessage, { ...bookingEmbedMessages.openInNewTab }) })
+              }
+            )
+          ] }) }),
           isLoaded && /* @__PURE__ */ jsx(
             "iframe",
             {
               src: url,
               title,
-              className: clsx27("ds-booking-embed__iframe", isIframeLoaded && "ds-booking-embed__iframe--loaded"),
+              className: clsx17(
+                "ds-booking-embed__iframe",
+                status === "ready" && "ds-booking-embed__iframe--loaded"
+              ),
               onLoad: handleIframeLoad,
-              frameBorder: "0",
-              scrolling: "no"
-            }
+              frameBorder: "0"
+            },
+            iframeKey
           )
         ]
       }
@@ -246,7 +373,7 @@ var ProblemAgitation = forwardRef(
       "section",
       {
         ref,
-        className: clsx27("ds-problem-agitation", className),
+        className: clsx17("ds-problem-agitation", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "ds-problem-agitation__header", children: [
@@ -258,7 +385,7 @@ var ProblemAgitation = forwardRef(
             /* @__PURE__ */ jsx("div", { className: "ds-problem-agitation__mobile-label ds-problem-agitation__mobile-label--new", children: newWayLabel }),
             /* @__PURE__ */ jsx("div", { className: "ds-problem-agitation__column-header ds-problem-agitation__column-header--old", children: oldWayLabel }),
             /* @__PURE__ */ jsx("div", { className: "ds-problem-agitation__column-header ds-problem-agitation__column-header--new", children: newWayLabel }),
-            points.map((point, index) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+            points.map((point, index) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "ds-problem-agitation__cell ds-problem-agitation__cell--old", children: [
                 /* @__PURE__ */ jsx("div", { className: "ds-problem-agitation__icon-wrapper ds-problem-agitation__icon-wrapper--old", children: /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": "true" }) }),
                 /* @__PURE__ */ jsx("div", { className: "ds-problem-agitation__content", children: point.problem })
@@ -275,295 +402,6 @@ var ProblemAgitation = forwardRef(
   }
 );
 ProblemAgitation.displayName = "ProblemAgitation";
-var ProcessTimeline = forwardRef(
-  ({
-    steps,
-    animated = true,
-    className,
-    ...props
-  }, ref) => {
-    const [progress, setProgress] = useState(0);
-    const containerRef = useRef(null);
-    const { track } = useAnalytics();
-    const hasTrackedRef = useRef(false);
-    useEffect(() => {
-      if (!animated) return;
-      const handleScroll = () => {
-        if (!containerRef.current) return;
-        const rect = containerRef.current.getBoundingClientRect();
-        const windowHeight = window.innerHeight;
-        const startDraw = windowHeight * 0.5;
-        const travelDistance = rect.height;
-        const currentPos = startDraw - rect.top;
-        if (currentPos < 0) {
-          setProgress(0);
-        } else if (currentPos > travelDistance) {
-          setProgress(100);
-          if (!hasTrackedRef.current) {
-            hasTrackedRef.current = true;
-            track("timeline_complete");
-          }
-        } else {
-          setProgress(currentPos / travelDistance * 100);
-        }
-      };
-      window.addEventListener("scroll", handleScroll, { passive: true });
-      handleScroll();
-      return () => window.removeEventListener("scroll", handleScroll);
-    }, [animated, track]);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: (node) => {
-          containerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        className: clsx27(
-          "ds-process-timeline",
-          animated && "ds-process-timeline--animated",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "ds-process-timeline__track", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "ds-process-timeline__progress",
-              style: { height: animated ? `${progress}%` : "100%" }
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "ds-process-timeline__steps", children: steps.map((step, index) => {
-            const stepProgress = index / (steps.length - 1) * 100;
-            const isActive = !animated || progress >= stepProgress;
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: clsx27(
-                  "ds-process-timeline__step",
-                  isActive && "ds-process-timeline__step--active"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "ds-process-timeline__indicator", children: step.indicator }),
-                  /* @__PURE__ */ jsxs("div", { className: "ds-process-timeline__content", children: [
-                    /* @__PURE__ */ jsx("h3", { className: "ds-process-timeline__title", children: step.title }),
-                    /* @__PURE__ */ jsx("p", { className: "ds-process-timeline__description", children: step.description })
-                  ] })
-                ]
-              },
-              index
-            );
-          }) })
-        ]
-      }
-    );
-  }
-);
-ProcessTimeline.displayName = "ProcessTimeline";
-var PricingCard = React34.forwardRef(
-  ({
-    tier,
-    tagline,
-    price,
-    priceSuffix,
-    anchorPrice,
-    badge,
-    highlighted = false,
-    features = [],
-    cta,
-    secondaryCta,
-    footerNote,
-    className,
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clsx27(
-          "ds-pricing-card",
-          highlighted && "ds-pricing-card--highlighted",
-          className
-        ),
-        ...props,
-        children: [
-          badge && /* @__PURE__ */ jsx("div", { className: "ds-pricing-card__badge", children: badge }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__header", children: [
-            /* @__PURE__ */ jsx("h3", { className: "ds-pricing-card__tier", children: tier }),
-            tagline && /* @__PURE__ */ jsx("p", { className: "ds-pricing-card__tagline", children: tagline })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__price-block", children: [
-            anchorPrice && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__anchor-price", children: anchorPrice }),
-            /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__price-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__price", children: price }),
-              priceSuffix && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__price-suffix", children: priceSuffix })
-            ] })
-          ] }),
-          features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ds-pricing-card__features", children: features.map((feature, idx) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              className: clsx27(
-                "ds-pricing-card__feature",
-                feature.included === false && "ds-pricing-card__feature--excluded"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__feature-icon", "aria-hidden": "true", children: feature.included === false ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ] }) : /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
-                /* @__PURE__ */ jsxs("span", { className: "ds-pricing-card__feature-text", children: [
-                  feature.text,
-                  feature.detail && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__feature-detail", children: feature.detail })
-                ] })
-              ]
-            },
-            idx
-          )) }),
-          (cta || secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__cta-area", children: [
-            cta,
-            secondaryCta && /* @__PURE__ */ jsx("div", { className: "ds-pricing-card__secondary-cta", children: secondaryCta })
-          ] }),
-          footerNote && /* @__PURE__ */ jsx("p", { className: "ds-pricing-card__footer-note", children: footerNote }),
-          children
-        ]
-      }
-    );
-  }
-);
-PricingCard.displayName = "PricingCard";
-var PricingSection = forwardRef(
-  ({
-    title,
-    description,
-    plans,
-    toggle,
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        className: clsx27("ds-pricing-section", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "ds-pricing-section__header", children: [
-            /* @__PURE__ */ jsx("h2", { className: "ds-pricing-section__title", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "ds-pricing-section__description", children: description }),
-            toggle && /* @__PURE__ */ jsx("div", { className: "ds-pricing-section__toggle", children: toggle })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "ds-pricing-section__grid", children: plans.map((plan, index) => /* @__PURE__ */ jsx(
-            PricingCard,
-            {
-              ...plan,
-              className: clsx27(
-                "ds-pricing-section__card",
-                plan.highlighted && "ds-pricing-section__card--popular"
-              )
-            },
-            index
-          )) })
-        ]
-      }
-    );
-  }
-);
-PricingSection.displayName = "PricingSection";
-var LeadCaptureForm = forwardRef(
-  ({
-    buttonText = "Subscribe",
-    emailLabel = "Work Email",
-    emailPlaceholder = "you@company.com",
-    disclaimer,
-    onSubmitSuccess,
-    layout = "horizontal",
-    isLoading = false,
-    className,
-    onSubmit,
-    ...props
-  }, ref) => {
-    const [email, setEmail] = useState("");
-    const [error, setError] = useState();
-    const [internalLoading, setInternalLoading] = useState(false);
-    const { track } = useAnalytics();
-    const isCurrentlyLoading = isLoading || internalLoading;
-    const handleSubmit = async (e) => {
-      e.preventDefault();
-      if (!email) {
-        setError("Email is required");
-        return;
-      }
-      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-        setError("Please enter a valid email address");
-        return;
-      }
-      setError(void 0);
-      setInternalLoading(true);
-      track("lead_capture_submit", { email_domain: email.split("@")[1] });
-      try {
-        if (onSubmitSuccess) {
-          await onSubmitSuccess(email);
-        }
-        track("lead_capture_success");
-      } catch (err) {
-        setError("Something went wrong. Please try again.");
-        track("lead_capture_error", { error: String(err) });
-      } finally {
-        setInternalLoading(false);
-      }
-      if (onSubmit) {
-        onSubmit(e);
-      }
-    };
-    return /* @__PURE__ */ jsxs(
-      "form",
-      {
-        ref,
-        className: clsx27(
-          "ds-lead-capture",
-          `ds-lead-capture--${layout}`,
-          className
-        ),
-        onSubmit: handleSubmit,
-        noValidate: true,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "ds-lead-capture__inputs", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ds-lead-capture__input-wrapper", children: [
-              layout === "vertical" && /* @__PURE__ */ jsx("label", { htmlFor: "lead-email", className: "ds-lead-capture__label", children: emailLabel }),
-              /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  id: "lead-email",
-                  type: "email",
-                  value: email,
-                  onChange: (e) => setEmail(e.target.value),
-                  placeholder: emailPlaceholder,
-                  disabled: isCurrentlyLoading,
-                  "aria-label": layout === "horizontal" ? emailLabel : void 0,
-                  className: clsx27("ds-lead-capture__input", error && "ds-lead-capture__input--error")
-                }
-              ),
-              error && /* @__PURE__ */ jsx("div", { className: "ds-lead-capture__error", children: error })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "submit",
-                isLoading: isCurrentlyLoading,
-                className: "ds-lead-capture__submit",
-                children: buttonText
-              }
-            )
-          ] }),
-          disclaimer && /* @__PURE__ */ jsx("div", { className: "ds-lead-capture__disclaimer", children: disclaimer })
-        ]
-      }
-    );
-  }
-);
-LeadCaptureForm.displayName = "LeadCaptureForm";
 var CaseStudyCard = forwardRef(
   ({
     company,
@@ -581,7 +419,7 @@ var CaseStudyCard = forwardRef(
       "article",
       {
         ref,
-        className: clsx27("ds-case-study-card", className),
+        className: clsx17("ds-case-study-card", className),
         ...props,
         children: /* @__PURE__ */ jsxs(OutboundLink, { href, context: "case-study-card", className: "ds-case-study-card__link", openInNewTab: false, children: [
           coverImage && /* @__PURE__ */ jsx("div", { className: "ds-case-study-card__image-wrap", children: /* @__PURE__ */ jsx(
@@ -608,219 +446,21 @@ var CaseStudyCard = forwardRef(
                 metric.prefix,
                 metric.value,
                 metric.suffix
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "ds-case-study-card__metric-label", children: metric.label })
-            ] }, i)) }),
-            quote && /* @__PURE__ */ jsx("blockquote", { className: "ds-case-study-card__quote", children: /* @__PURE__ */ jsxs("p", { children: [
-              "\u201C",
-              quote,
-              "\u201D"
-            ] }) })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-CaseStudyCard.displayName = "CaseStudyCard";
-function getEmbedUrl(src, muted = false) {
-  const ytMatch = src.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
-  if (ytMatch) {
-    const params = muted ? "autoplay=1&mute=1&rel=0" : "autoplay=1&rel=0";
-    return `https://www.youtube.com/embed/${ytMatch[1]}?${params}`;
-  }
-  const vimeoMatch = src.match(/(?:vimeo\.com\/)(\d+)/);
-  if (vimeoMatch) {
-    const params = muted ? "autoplay=1&muted=1" : "autoplay=1";
-    return `https://player.vimeo.com/video/${vimeoMatch[1]}?${params}`;
-  }
-  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 VideoEmbed = forwardRef(
-  ({
-    src,
-    poster,
-    title,
-    aspectRatio = "16/9",
-    autoPlay = false,
-    withFrame = false,
-    onPlay,
-    className,
-    ...props
-  }, ref) => {
-    const [playing, setPlaying] = useState(false);
-    const containerRef = useRef(null);
-    const handlePlay = useCallback(() => {
-      setPlaying(true);
-      onPlay?.();
-    }, [onPlay]);
-    useEffect(() => {
-      if (!autoPlay || playing) return;
-      if (typeof window === "undefined") return;
-      const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-      if (motionQuery.matches) return;
-      const target = containerRef.current;
-      if (!target) return;
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          if (entry.isIntersecting) {
-            handlePlay();
-            observer.disconnect();
-          }
-        },
-        { threshold: 0.5 }
-      );
-      observer.observe(target);
-      return () => observer.disconnect();
-    }, [autoPlay, playing, handlePlay]);
-    const embedContent = /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: clsx27("ds-video-embed", withFrame && "ds-video-embed--framed", className),
-        style: { aspectRatio },
-        children: !playing ? /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "ds-video-embed__poster-btn",
-            onClick: handlePlay,
-            "aria-label": `Play video: ${title}`,
-            children: [
-              poster && /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: poster,
-                  alt: "",
-                  className: "ds-video-embed__poster",
-                  loading: "lazy",
-                  decoding: "async"
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "ds-video-embed__overlay" }),
-              /* @__PURE__ */ jsx("div", { className: "ds-video-embed__play", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [
-                /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "24", fill: "rgba(0,0,0,0.5)" }),
-                /* @__PURE__ */ jsx("path", { d: "M19 15l14 9-14 9V15z", fill: "white" })
-              ] }) })
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
-          "iframe",
-          {
-            src: getEmbedUrl(src, autoPlay),
-            title,
-            className: "ds-video-embed__iframe",
-            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-            allowFullScreen: true
-          }
-        )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ds-case-study-card__metric-label", children: metric.label })
+            ] }, i)) }),
+            quote && /* @__PURE__ */ jsx("blockquote", { className: "ds-case-study-card__quote", children: /* @__PURE__ */ jsxs("p", { children: [
+              "\u201C",
+              quote,
+              "\u201D"
+            ] }) })
+          ] })
+        ] })
       }
     );
-    if (withFrame) {
-      return /* @__PURE__ */ jsx(BrowserFrame, { ref, variant: "browser", url: src, ...props, children: embedContent });
-    }
-    return React34.cloneElement(embedContent, { ref, ...props });
-  }
-);
-VideoEmbed.displayName = "VideoEmbed";
-var DEFAULT_SUPPRESSION = 7 * 24 * 60 * 60 * 1e3;
-var DEFAULT_ACTIVATION_DELAY = 5e3;
-var MOBILE_INACTIVITY_TIMEOUT = 45e3;
-function isSuppressed(key, duration) {
-  if (typeof window === "undefined") return true;
-  try {
-    const ts = localStorage.getItem(key);
-    if (!ts) return false;
-    return Date.now() - Number(ts) < duration;
-  } catch {
-    return false;
-  }
-}
-function suppress(key) {
-  try {
-    localStorage.setItem(key, String(Date.now()));
-  } catch {
-  }
-}
-function isMobile() {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia("(max-width: 768px)").matches || "ontouchstart" in window;
-}
-var ExitIntentOverlay = forwardRef(
-  ({
-    children,
-    enabled = true,
-    activationDelay = DEFAULT_ACTIVATION_DELAY,
-    excludePaths,
-    storageKey = "ds-exit-intent",
-    suppressionDuration = DEFAULT_SUPPRESSION,
-    onShow,
-    onDismiss,
-    className,
-    ...props
-  }, ref) => {
-    const [open, setOpen] = useState(false);
-    const activatedRef = useRef(false);
-    const shownRef = useRef(false);
-    const show = useCallback(() => {
-      if (shownRef.current) return;
-      shownRef.current = true;
-      setOpen(true);
-      onShow?.();
-    }, [onShow]);
-    const handleDismiss = useCallback(() => {
-      setOpen(false);
-      suppress(storageKey);
-      onDismiss?.();
-    }, [storageKey, onDismiss]);
-    useEffect(() => {
-      if (!enabled) return;
-      if (typeof window === "undefined") return;
-      if (excludePaths?.some((p) => window.location.pathname.startsWith(p))) return;
-      if (isSuppressed(storageKey, suppressionDuration)) return;
-      const activationTimer = setTimeout(() => {
-        activatedRef.current = true;
-      }, activationDelay);
-      const handleMouseOut = (e) => {
-        if (!activatedRef.current) return;
-        if (e.clientY < 10 && e.relatedTarget === null) {
-          show();
-        }
-      };
-      let mobileTimer = null;
-      const resetMobileTimer = () => {
-        if (mobileTimer) clearTimeout(mobileTimer);
-        if (!activatedRef.current) return;
-        mobileTimer = setTimeout(show, MOBILE_INACTIVITY_TIMEOUT);
-      };
-      if (isMobile()) {
-        const mobileStart = setTimeout(() => {
-          resetMobileTimer();
-          document.addEventListener("touchstart", resetMobileTimer, { passive: true });
-          document.addEventListener("scroll", resetMobileTimer, { passive: true });
-        }, activationDelay);
-        return () => {
-          clearTimeout(activationTimer);
-          clearTimeout(mobileStart);
-          if (mobileTimer) clearTimeout(mobileTimer);
-          document.removeEventListener("touchstart", resetMobileTimer);
-          document.removeEventListener("scroll", resetMobileTimer);
-        };
-      }
-      document.addEventListener("mouseout", handleMouseOut);
-      return () => {
-        clearTimeout(activationTimer);
-        document.removeEventListener("mouseout", handleMouseOut);
-      };
-    }, [enabled, activationDelay, excludePaths, storageKey, suppressionDuration, show]);
-    return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-exit-intent-overlay", className), ...props, children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => {
-      if (!isOpen) handleDismiss();
-    }, children: /* @__PURE__ */ jsx(DialogContent, { className: "ds-exit-intent-overlay__dialog", children }) }) });
   }
 );
-ExitIntentOverlay.displayName = "ExitIntentOverlay";
+CaseStudyCard.displayName = "CaseStudyCard";
 var BeforeAfterBlock = forwardRef(
   ({
     eyebrow,
@@ -834,7 +474,7 @@ var BeforeAfterBlock = forwardRef(
     const renderItems = (items, side) => items.map((item, i) => /* @__PURE__ */ jsxs(
       "li",
       {
-        className: clsx27(
+        className: clsx17(
           "ds-before-after__item",
           item.sentiment && `ds-before-after__item--${item.sentiment}`
         ),
@@ -849,11 +489,11 @@ var BeforeAfterBlock = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-before-after", className),
+        className: clsx17("ds-before-after", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title }),
-          /* @__PURE__ */ jsxs("div", { className: clsx27("ds-before-after__layout", `ds-before-after__layout--${variant}`), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx17("ds-before-after__layout", `ds-before-after__layout--${variant}`), children: [
             /* @__PURE__ */ jsxs("div", { className: "ds-before-after__column ds-before-after__column--before", children: [
               /* @__PURE__ */ jsx("h3", { className: "ds-before-after__label", children: before.label }),
               /* @__PURE__ */ jsx("ul", { className: "ds-before-after__list", children: renderItems(before.items, "before") }),
@@ -889,7 +529,7 @@ var CompetitorDiff = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-competitor-diff", className),
+        className: clsx17("ds-competitor-diff", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -954,226 +594,6 @@ var CompetitorDiff = forwardRef(
   }
 );
 CompetitorDiff.displayName = "CompetitorDiff";
-var StakeholderTabs = forwardRef(
-  ({
-    eyebrow,
-    title,
-    stakeholders,
-    defaultIndex = 0,
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      SectionShell,
-      {
-        ref,
-        className: clsx27("ds-stakeholder-tabs", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title }),
-          /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultIndex, children: [
-            /* @__PURE__ */ jsx(TabsList, { className: "ds-stakeholder-tabs__list", children: stakeholders.map((s, i) => /* @__PURE__ */ jsxs(TabsTrigger, { value: i, className: "ds-stakeholder-tabs__trigger", children: [
-              s.icon && /* @__PURE__ */ jsx("span", { className: "ds-stakeholder-tabs__icon", "aria-hidden": "true", children: s.icon }),
-              s.label
-            ] }, i)) }),
-            stakeholders.map((s, i) => /* @__PURE__ */ jsx(TabsContent, { value: i, className: "ds-stakeholder-tabs__content", children: /* @__PURE__ */ jsxs("div", { className: "ds-stakeholder-tabs__panel", children: [
-              /* @__PURE__ */ jsxs("div", { className: "ds-stakeholder-tabs__text", children: [
-                /* @__PURE__ */ jsx("h3", { className: "ds-stakeholder-tabs__headline", children: s.content.headline }),
-                /* @__PURE__ */ jsx("p", { className: "ds-stakeholder-tabs__desc", children: s.content.description }),
-                s.content.features && s.content.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ds-stakeholder-tabs__features", children: s.content.features.map((f, j) => /* @__PURE__ */ jsxs("li", { className: "ds-stakeholder-tabs__feature", children: [
-                  f.icon && /* @__PURE__ */ jsx("span", { className: "ds-stakeholder-tabs__feature-icon", "aria-hidden": "true", children: f.icon }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("strong", { children: f.title }),
-                    /* @__PURE__ */ jsx("span", { children: f.description })
-                  ] })
-                ] }, j)) }),
-                /* @__PURE__ */ jsx("div", { className: "ds-stakeholder-tabs__cta-wrap", children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(OutboundLink, { href: s.content.cta.href, context: "stakeholder-tabs-cta", openInNewTab: false, children: s.content.cta.label }) }) })
-              ] }),
-              s.content.testimonial && /* @__PURE__ */ jsx("div", { className: "ds-stakeholder-tabs__testimonial", children: s.content.testimonial })
-            ] }) }, i))
-          ] })
-        ]
-      }
-    );
-  }
-);
-StakeholderTabs.displayName = "StakeholderTabs";
-var IntegrationShowcase = forwardRef(
-  ({
-    eyebrow,
-    title,
-    subtitle,
-    integrations,
-    categories,
-    variant = "grid",
-    filterable = !!categories,
-    className,
-    ...props
-  }, ref) => {
-    const [activeCategory, setActiveCategory] = useState("All");
-    const allCategories = categories ?? ["All", ...new Set(integrations.map((i) => i.category))];
-    const filtered = activeCategory === "All" ? integrations : integrations.filter((i) => i.category === activeCategory);
-    return /* @__PURE__ */ jsxs(
-      SectionShell,
-      {
-        ref,
-        className: clsx27("ds-integration-showcase", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
-          filterable && allCategories.length > 1 && /* @__PURE__ */ jsxs(
-            Tabs,
-            {
-              value: allCategories.indexOf(activeCategory),
-              onValueChange: (v) => setActiveCategory(allCategories[v] ?? "All"),
-              children: [
-                /* @__PURE__ */ jsx(TabsList, { className: "ds-integration-showcase__filters", children: allCategories.map((cat, i) => /* @__PURE__ */ jsx(TabsTrigger, { value: i, className: "ds-integration-showcase__filter", children: cat }, cat)) }),
-                allCategories.map((_, i) => /* @__PURE__ */ jsx(TabsContent, { value: i, className: "ds-integration-showcase__tab-content" }, i))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: clsx27("ds-integration-showcase__grid", `ds-integration-showcase__grid--${variant}`), children: filtered.map((integration, i) => {
-            const Card = /* @__PURE__ */ jsxs("div", { className: "ds-integration-showcase__card", children: [
-              /* @__PURE__ */ jsx("div", { className: "ds-integration-showcase__logo", children: integration.logo }),
-              /* @__PURE__ */ jsxs("div", { className: "ds-integration-showcase__info", children: [
-                /* @__PURE__ */ jsxs("span", { className: "ds-integration-showcase__name", children: [
-                  integration.name,
-                  integration.badge && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ds-integration-showcase__badge", children: integration.badge })
-                ] }),
-                integration.description && variant !== "compact" && /* @__PURE__ */ jsx("span", { className: "ds-integration-showcase__desc", children: integration.description })
-              ] })
-            ] }, i);
-            return integration.href ? /* @__PURE__ */ jsx(OutboundLink, { href: integration.href, context: "integration-showcase-card", className: "ds-integration-showcase__card-link", children: Card }, i) : Card;
-          }) })
-        ]
-      }
-    );
-  }
-);
-IntegrationShowcase.displayName = "IntegrationShowcase";
-var SecurityBlock = forwardRef(
-  ({
-    eyebrow,
-    title,
-    subtitle,
-    certifications,
-    features,
-    variant = "badges",
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      SectionShell,
-      {
-        ref,
-        className: clsx27("ds-security-block", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
-          certifications && certifications.length > 0 && /* @__PURE__ */ jsx("div", { className: clsx27("ds-security-block__certs", `ds-security-block__certs--${variant}`), children: certifications.map((cert, i) => {
-            const inner = /* @__PURE__ */ jsxs("div", { className: "ds-security-block__cert", children: [
-              /* @__PURE__ */ jsx("div", { className: "ds-security-block__cert-icon", children: cert.icon }),
-              /* @__PURE__ */ jsxs("div", { className: "ds-security-block__cert-info", children: [
-                /* @__PURE__ */ jsx("span", { className: "ds-security-block__cert-name", children: cert.name }),
-                variant === "detailed" && cert.description && /* @__PURE__ */ jsx("span", { className: "ds-security-block__cert-desc", children: cert.description })
-              ] })
-            ] }, i);
-            return cert.href ? /* @__PURE__ */ jsx(OutboundLink, { href: cert.href, context: "security-block-cert", className: "ds-security-block__cert-link", children: inner }, i) : /* @__PURE__ */ jsx(React34.Fragment, { children: inner }, i);
-          }) }),
-          features && features.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-security-block__features", children: features.map((feature, i) => /* @__PURE__ */ jsxs("div", { className: "ds-security-block__feature", children: [
-            feature.icon && /* @__PURE__ */ jsx("span", { className: "ds-security-block__feature-icon", "aria-hidden": "true", children: feature.icon }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h4", { className: "ds-security-block__feature-title", children: feature.title }),
-              /* @__PURE__ */ jsx("p", { className: "ds-security-block__feature-desc", children: feature.description })
-            ] })
-          ] }, i)) })
-        ]
-      }
-    );
-  }
-);
-SecurityBlock.displayName = "SecurityBlock";
-var CaseStudySection = forwardRef(
-  ({
-    eyebrow,
-    title,
-    subtitle,
-    caseStudies,
-    filterable = false,
-    filters,
-    maxVisible,
-    seeAllHref,
-    className,
-    ...props
-  }, ref) => {
-    const allFilters = filters ?? [
-      "All",
-      ...new Set(caseStudies.map((cs) => cs.industry).filter(Boolean))
-    ];
-    const [activeFilter, setActiveFilter] = useState("All");
-    const filtered = activeFilter === "All" ? caseStudies : caseStudies.filter((cs) => cs.industry === activeFilter);
-    const visible = maxVisible ? filtered.slice(0, maxVisible) : filtered;
-    return /* @__PURE__ */ jsxs(
-      SectionShell,
-      {
-        ref,
-        className: clsx27("ds-case-study-section", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
-          filterable && allFilters.length > 1 && /* @__PURE__ */ jsxs(
-            Tabs,
-            {
-              value: allFilters.indexOf(activeFilter),
-              onValueChange: (v) => setActiveFilter(allFilters[v] ?? "All"),
-              children: [
-                /* @__PURE__ */ jsx(TabsList, { className: "ds-case-study-section__filters", children: allFilters.map((filter, i) => /* @__PURE__ */ jsx(TabsTrigger, { value: i, className: "ds-case-study-section__filter", children: filter }, filter)) }),
-                allFilters.map((_, i) => /* @__PURE__ */ jsx(TabsContent, { value: i, className: "ds-case-study-section__tab-content" }, i))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ds-case-study-section__grid", children: visible.map((cs, i) => /* @__PURE__ */ jsx(CaseStudyCard, { ...cs }, i)) }),
-          seeAllHref && /* @__PURE__ */ jsx("div", { className: "ds-case-study-section__see-all", children: /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsx(OutboundLink, { href: seeAllHref, context: "case-study-section-see-all", openInNewTab: false, children: "See all case studies" }) }) })
-        ]
-      }
-    );
-  }
-);
-CaseStudySection.displayName = "CaseStudySection";
-var ManifestoBlock = forwardRef(
-  ({
-    statement,
-    attribution,
-    variant = "centered",
-    className,
-    ...props
-  }, ref) => {
-    const initials = attribution ? attribution.name.split(" ").map((n) => n[0]).join("").slice(0, 2) : "";
-    return /* @__PURE__ */ jsx(
-      SectionShell,
-      {
-        ref,
-        className: clsx27("ds-manifesto", `ds-manifesto--${variant}`, className),
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "ds-manifesto__inner", children: [
-          variant === "quote" && /* @__PURE__ */ jsx("span", { className: "ds-manifesto__quote-mark", "aria-hidden": "true", children: "\u201C" }),
-          /* @__PURE__ */ jsx("blockquote", { className: "ds-manifesto__statement", children: statement }),
-          attribution && /* @__PURE__ */ jsxs("div", { className: "ds-manifesto__attribution", children: [
-            /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
-              attribution.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: attribution.avatar, alt: attribution.name }),
-              /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ds-manifesto__attribution-text", children: [
-              /* @__PURE__ */ jsx("span", { className: "ds-manifesto__attribution-name", children: attribution.name }),
-              /* @__PURE__ */ jsx("span", { className: "ds-manifesto__attribution-role", children: attribution.role })
-            ] })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-ManifestoBlock.displayName = "ManifestoBlock";
 var STATUS_LABELS = {
   certified: "Certified",
   "in-progress": "In Progress",
@@ -1192,7 +612,7 @@ var ComplianceGrid = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-compliance-grid", className),
+        className: clsx17("ds-compliance-grid", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1200,7 +620,7 @@ var ComplianceGrid = forwardRef(
             const inner = /* @__PURE__ */ jsxs(
               "div",
               {
-                className: clsx27(
+                className: clsx17(
                   "ds-compliance-grid__item",
                   `ds-compliance-grid__item--${item.status}`
                 ),
@@ -1211,7 +631,7 @@ var ComplianceGrid = forwardRef(
                     /* @__PURE__ */ jsx(
                       Badge,
                       {
-                        className: clsx27(
+                        className: clsx17(
                           "ds-compliance-grid__status",
                           `ds-compliance-grid__status--${item.status}`
                         ),
@@ -1225,7 +645,7 @@ var ComplianceGrid = forwardRef(
               },
               i
             );
-            return item.documentHref ? /* @__PURE__ */ jsx(OutboundLink, { href: item.documentHref, context: "compliance-grid-doc", className: "ds-compliance-grid__link", children: inner }, i) : /* @__PURE__ */ jsx(React34.Fragment, { children: inner }, i);
+            return item.documentHref ? /* @__PURE__ */ jsx(OutboundLink, { href: item.documentHref, context: "compliance-grid-doc", className: "ds-compliance-grid__link", children: inner }, i) : /* @__PURE__ */ jsx(React24.Fragment, { children: inner }, i);
           }) })
         ]
       }
@@ -1246,7 +666,7 @@ var ArchitectureDiagram = forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx17(
           "ds-architecture",
           `ds-architecture--${direction}`,
           className
@@ -1254,12 +674,12 @@ var ArchitectureDiagram = forwardRef(
         role: "img",
         "aria-label": "Architecture diagram",
         ...props,
-        children: /* @__PURE__ */ jsx("div", { className: "ds-architecture__nodes", children: nodes.map((node, i) => /* @__PURE__ */ jsxs(React34.Fragment, { children: [
+        children: /* @__PURE__ */ jsx("div", { className: "ds-architecture__nodes", children: nodes.map((node, i) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsxs("div", { className: "ds-architecture__connection", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx27(
+                className: clsx17(
                   "ds-architecture__line",
                   connections.find(
                     (c) => c.from === nodes[i - 1]?.id && c.to === node.id
@@ -1277,7 +697,7 @@ var ArchitectureDiagram = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: clsx27(
+              className: clsx17(
                 "ds-architecture__node",
                 `ds-architecture__node--${node.type}`
               ),
@@ -1328,7 +748,7 @@ var SegmentSwitch = forwardRef(
     }, [controlledSegment, source, utmParam, cookieName]);
     const content = resolvedSegment && segments[resolvedSegment] ? segments[resolvedSegment] : fallback;
     if (!content) return null;
-    return /* @__PURE__ */ jsx("div", { ref, className: clsx27(className), ...props, children: content });
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx17(className), ...props, children: content });
   }
 );
 SegmentSwitch.displayName = "SegmentSwitch";
@@ -1391,7 +811,7 @@ var IntentCTA = forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-intent-cta", className),
+        className: clsx17("ds-intent-cta", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           Button,
@@ -1421,7 +841,7 @@ var EvolutionTimeline = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-evolution-timeline", className),
+        className: clsx17("ds-evolution-timeline", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1430,7 +850,7 @@ var EvolutionTimeline = forwardRef(
             eras.map((era, i) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: clsx27(
+                className: clsx17(
                   "ds-evolution-timeline__era",
                   `ds-evolution-timeline__era--${era.sentiment}`,
                   era.current && "ds-evolution-timeline__era--current"
@@ -1476,7 +896,7 @@ var EcosystemDiagram = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-ecosystem", `ds-ecosystem--${variant}`, className),
+        className: clsx17("ds-ecosystem", `ds-ecosystem--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1530,7 +950,7 @@ var ValueAnchor = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-value-anchor", className),
+        className: clsx17("ds-value-anchor", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1541,19 +961,22 @@ var ValueAnchor = forwardRef(
                 /* @__PURE__ */ jsx("span", { className: "ds-value-anchor__input-value", children: formatNumber(values[input.name], input.prefix, input.suffix) })
               ] }),
               input.type === "slider" ? /* @__PURE__ */ jsx(
-                Slider,
+                "input",
                 {
+                  type: "range",
+                  className: "ds-slider",
                   value: values[input.name],
                   min: input.min ?? 0,
                   max: input.max ?? 100,
                   step: input.step ?? 1,
-                  onValueChange: (v) => handleChange(input.name, v),
-                  inputLabel: input.label
+                  onChange: (e) => handleChange(input.name, Number(e.target.value)),
+                  "aria-label": input.label
                 }
               ) : /* @__PURE__ */ jsx(
-                TextField,
+                "input",
                 {
                   type: "number",
+                  className: "ds-text-field",
                   value: String(values[input.name]),
                   onChange: (e) => handleChange(input.name, Number(e.target.value) || 0)
                 }
@@ -1612,7 +1035,7 @@ var EnterpriseSignaling = forwardRef(
         "div",
         {
           ref,
-          className: clsx27("ds-enterprise-signaling", "ds-enterprise-signaling--strip", className),
+          className: clsx17("ds-enterprise-signaling", "ds-enterprise-signaling--strip", className),
           ...props,
           children: /* @__PURE__ */ jsx("div", { className: "ds-enterprise-signaling__strip-inner", children: categories.flatMap((cat) => cat.items.filter((i) => i.status === "active")).map((item, i) => /* @__PURE__ */ jsx("span", { className: "ds-enterprise-signaling__strip-item", children: item.name }, i)) })
         }
@@ -1622,7 +1045,7 @@ var EnterpriseSignaling = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-enterprise-signaling", `ds-enterprise-signaling--${variant}`, className),
+        className: clsx17("ds-enterprise-signaling", `ds-enterprise-signaling--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1635,7 +1058,7 @@ var EnterpriseSignaling = forwardRef(
               const inner = /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: clsx27(
+                  className: clsx17(
                     "ds-enterprise-signaling__item",
                     `ds-enterprise-signaling__item--${item.status}`
                   ),
@@ -1644,7 +1067,7 @@ var EnterpriseSignaling = forwardRef(
                     /* @__PURE__ */ jsx(
                       Badge,
                       {
-                        className: clsx27("ds-enterprise-signaling__item-status", `ds-enterprise-signaling__item-status--${item.status}`),
+                        className: clsx17("ds-enterprise-signaling__item-status", `ds-enterprise-signaling__item-status--${item.status}`),
                         variant: "outline",
                         children: STATUS_LABELS2[item.status]
                       }
@@ -1654,7 +1077,7 @@ var EnterpriseSignaling = forwardRef(
                 },
                 ii
               );
-              return item.href ? /* @__PURE__ */ jsx(OutboundLink, { href: item.href, context: "enterprise-signaling-item", className: "ds-enterprise-signaling__item-link", children: inner }, ii) : /* @__PURE__ */ jsx(React34.Fragment, { children: inner }, ii);
+              return item.href ? /* @__PURE__ */ jsx(OutboundLink, { href: item.href, context: "enterprise-signaling-item", className: "ds-enterprise-signaling__item-link", children: inner }, ii) : /* @__PURE__ */ jsx(React24.Fragment, { children: inner }, ii);
             }) })
           ] }, ci)) }),
           sla && sla.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ds-enterprise-signaling__sla", children: [
@@ -1723,7 +1146,7 @@ var IntelligenceBlock = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-intelligence", `ds-intelligence--${variant}`, className),
+        className: clsx17("ds-intelligence", `ds-intelligence--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1778,7 +1201,7 @@ var PartnerValueProp = forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx27("ds-partner-vp", className),
+        className: clsx17("ds-partner-vp", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -1792,22 +1215,21 @@ var PartnerValueProp = forwardRef(
             ] }, i)) }),
             calculator && calcOutput && /* @__PURE__ */ jsxs("div", { className: "ds-partner-vp__calculator", children: [
               /* @__PURE__ */ jsx("h3", { className: "ds-partner-vp__calc-title", children: "Partner Economics" }),
-              calculator.inputs.map((input) => /* @__PURE__ */ jsxs("div", { className: "ds-partner-vp__calc-input", children: [
-                /* @__PURE__ */ jsxs("label", { className: "ds-partner-vp__calc-label", children: [
-                  input.label,
-                  /* @__PURE__ */ jsx("span", { className: "ds-partner-vp__calc-value", children: fmtNum(values[input.name], input.prefix, input.suffix) })
-                ] }),
+              calculator.inputs.map((input) => /* @__PURE__ */ jsx("div", { className: "ds-partner-vp__calc-input", children: /* @__PURE__ */ jsxs("label", { className: "ds-partner-vp__calc-label", children: [
+                input.label,
+                /* @__PURE__ */ jsx("span", { className: "ds-partner-vp__calc-value", children: fmtNum(values[input.name], input.prefix, input.suffix) }),
                 /* @__PURE__ */ jsx(
-                  Slider,
+                  "input",
                   {
+                    type: "range",
                     value: values[input.name],
                     min: input.min ?? 0,
                     max: input.max ?? 100,
-                    inputLabel: input.label,
-                    onValueChange: (v) => handleChange(input.name, v)
+                    "aria-label": input.label,
+                    onChange: (e) => handleChange(input.name, Number(e.target.value))
                   }
                 )
-              ] }, input.name)),
+              ] }) }, input.name)),
               /* @__PURE__ */ jsxs("div", { className: "ds-partner-vp__calc-results", children: [
                 /* @__PURE__ */ jsxs("div", { className: "ds-partner-vp__calc-margin", children: [
                   /* @__PURE__ */ jsxs("span", { className: "ds-partner-vp__calc-margin-value", children: [
@@ -1859,9 +1281,81 @@ var PartnerValueProp = forwardRef(
   }
 );
 PartnerValueProp.displayName = "PartnerValueProp";
-var ComparisonTable = React34.forwardRef(
+var PricingCard = React24.forwardRef(
+  ({
+    tier,
+    tagline,
+    price,
+    priceSuffix,
+    anchorPrice,
+    badge,
+    highlighted = false,
+    features = [],
+    cta,
+    secondaryCta,
+    footerNote,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx17(
+          "ds-pricing-card",
+          highlighted && "ds-pricing-card--highlighted",
+          className
+        ),
+        ...props,
+        children: [
+          badge && /* @__PURE__ */ jsx("div", { className: "ds-pricing-card__badge", children: badge }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__header", children: [
+            /* @__PURE__ */ jsx("h3", { className: "ds-pricing-card__tier", children: tier }),
+            tagline && /* @__PURE__ */ jsx("p", { className: "ds-pricing-card__tagline", children: tagline })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__price-block", children: [
+            anchorPrice && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__anchor-price", children: anchorPrice }),
+            /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__price-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__price", children: price }),
+              priceSuffix && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__price-suffix", children: priceSuffix })
+            ] })
+          ] }),
+          features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ds-pricing-card__features", children: features.map((feature, idx) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: clsx17(
+                "ds-pricing-card__feature",
+                feature.included === false && "ds-pricing-card__feature--excluded"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__feature-icon", "aria-hidden": "true", children: feature.included === false ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] }) : /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+                /* @__PURE__ */ jsxs("span", { className: "ds-pricing-card__feature-text", children: [
+                  feature.text,
+                  feature.detail && /* @__PURE__ */ jsx("span", { className: "ds-pricing-card__feature-detail", children: feature.detail })
+                ] })
+              ]
+            },
+            idx
+          )) }),
+          (cta || secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "ds-pricing-card__cta-area", children: [
+            cta,
+            secondaryCta && /* @__PURE__ */ jsx("div", { className: "ds-pricing-card__secondary-cta", children: secondaryCta })
+          ] }),
+          footerNote && /* @__PURE__ */ jsx("p", { className: "ds-pricing-card__footer-note", children: footerNote }),
+          children
+        ]
+      }
+    );
+  }
+);
+PricingCard.displayName = "PricingCard";
+var ComparisonTable = React24.forwardRef(
   ({ columns, rows, caption, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-comparison-table", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "ds-comparison-table__scroll", children: /* @__PURE__ */ jsxs("table", { className: "ds-comparison-table__table", role: "table", children: [
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx17("ds-comparison-table", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "ds-comparison-table__scroll", children: /* @__PURE__ */ jsxs("table", { className: "ds-comparison-table__table", role: "table", children: [
       caption && /* @__PURE__ */ jsx("caption", { className: "ds-comparison-table__caption", children: caption }),
       /* @__PURE__ */ jsx("thead", { className: "ds-comparison-table__head", children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { className: "ds-comparison-table__corner", scope: "col", children: /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: "Feature" }) }),
@@ -1869,7 +1363,7 @@ var ComparisonTable = React34.forwardRef(
           "th",
           {
             scope: "col",
-            className: clsx27(
+            className: clsx17(
               "ds-comparison-table__col-header",
               col.highlighted && "ds-comparison-table__col-header--highlighted"
             ),
@@ -1894,7 +1388,7 @@ var ComparisonTable = React34.forwardRef(
           row.values.map((val, colIdx) => /* @__PURE__ */ jsx(
             "td",
             {
-              className: clsx27(
+              className: clsx17(
                 "ds-comparison-table__cell",
                 columns[colIdx]?.highlighted && "ds-comparison-table__cell--highlighted"
               ),
@@ -1908,7 +1402,7 @@ var ComparisonTable = React34.forwardRef(
   }
 );
 ComparisonTable.displayName = "ComparisonTable";
-var GuaranteeHighlight = React34.forwardRef(
+var GuaranteeHighlight = React24.forwardRef(
   ({
     guarantee,
     detail,
@@ -1922,7 +1416,7 @@ var GuaranteeHighlight = React34.forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx17(
           "ds-guarantee",
           `ds-guarantee--${variant}`,
           className
@@ -1941,7 +1435,7 @@ var GuaranteeHighlight = React34.forwardRef(
   }
 );
 GuaranteeHighlight.displayName = "GuaranteeHighlight";
-var ROICalculator = React34.forwardRef(
+var ROICalculator = React24.forwardRef(
   ({
     eyebrow,
     title,
@@ -1951,7 +1445,7 @@ var ROICalculator = React34.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-roi-calculator", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx17("ds-roi-calculator", className), ...props, children: [
       (eyebrow || title) && /* @__PURE__ */ jsxs("div", { className: "ds-roi-calculator__header", children: [
         eyebrow && /* @__PURE__ */ jsx("span", { className: "ds-roi-calculator__eyebrow", children: eyebrow }),
         title && /* @__PURE__ */ jsx("h3", { className: "ds-roi-calculator__title", children: title })
@@ -1959,7 +1453,7 @@ var ROICalculator = React34.forwardRef(
       /* @__PURE__ */ jsx("div", { className: "ds-roi-calculator__grid", children: items.map((item, idx) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: clsx27(
+          className: clsx17(
             "ds-roi-calculator__item",
             item.isRecommended && "ds-roi-calculator__item--recommended"
           ),
@@ -1979,7 +1473,7 @@ var ROICalculator = React34.forwardRef(
   }
 );
 ROICalculator.displayName = "ROICalculator";
-var ICPFilter = React34.forwardRef(
+var ICPFilter = React24.forwardRef(
   ({
     qualifiedItems,
     disqualifiedItems,
@@ -1993,7 +1487,7 @@ var ICPFilter = React34.forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx17(
           "ds-icp-filter",
           `ds-icp-filter--${variant}`,
           className
@@ -2023,7 +1517,7 @@ var ICPFilter = React34.forwardRef(
   }
 );
 ICPFilter.displayName = "ICPFilter";
-var ObjectionFAQ = React34.forwardRef(
+var ObjectionFAQ = React24.forwardRef(
   ({
     items,
     title,
@@ -2033,12 +1527,12 @@ var ObjectionFAQ = React34.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [openItems, setOpenItems] = React34.useState(() => {
+    const [openItems, setOpenItems] = React24.useState(() => {
       const initial = /* @__PURE__ */ new Set();
       if (defaultOpenIndex !== void 0) initial.add(defaultOpenIndex);
       return initial;
     });
-    const toggle = React34.useCallback(
+    const toggle = React24.useCallback(
       (index) => {
         setOpenItems((prev) => {
           const next = new Set(prev);
@@ -2053,7 +1547,7 @@ var ObjectionFAQ = React34.forwardRef(
       },
       [allowMultiple]
     );
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-objection-faq", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx17("ds-objection-faq", className), ...props, children: [
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "ds-objection-faq__header", children: [
         title && /* @__PURE__ */ jsx("h3", { className: "ds-objection-faq__title", children: title }),
         subtitle && /* @__PURE__ */ jsx("p", { className: "ds-objection-faq__subtitle", children: subtitle })
@@ -2063,7 +1557,7 @@ var ObjectionFAQ = React34.forwardRef(
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx27(
+            className: clsx17(
               "ds-objection-faq__item",
               isOpen && "ds-objection-faq__item--open"
             ),
@@ -2118,7 +1612,130 @@ var ObjectionFAQ = React34.forwardRef(
   }
 );
 ObjectionFAQ.displayName = "ObjectionFAQ";
+var DEFAULT_CELLS = [
+  {
+    label: "Leads",
+    value: "1,248",
+    trend: { direction: "up", delta: "16%", valence: "positive" },
+    provenance: "7-day rolling avg"
+  },
+  {
+    label: "Replies",
+    value: "418",
+    trend: { direction: "up", delta: "22%", valence: "positive" }
+  },
+  {
+    label: "Reply Rate",
+    value: "42%",
+    trend: { direction: "up", delta: "8.4 pts", valence: "positive" }
+  },
+  {
+    label: "Pipeline",
+    value: "$3.4M",
+    trend: { direction: "up", delta: "31%", valence: "positive" },
+    provenance: "Qualified opps only"
+  }
+];
+var KPIPanel = forwardRef(
+  ({ cells = DEFAULT_CELLS, className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx17("ds-kpi-panel", className), children: cells.map((cell, i) => {
+      const valence = cell.trend?.valence ?? (cell.trend?.direction === "up" ? "positive" : "negative");
+      return /* @__PURE__ */ jsxs(
+        Card,
+        {
+          tier: 1,
+          className: "ds-kpi-panel__cell",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-kpi-panel__label", children: cell.label }),
+            /* @__PURE__ */ jsx("span", { className: "ds-kpi-panel__value", children: cell.value }),
+            cell.trend && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: clsx17(
+                  "ds-kpi-panel__trend",
+                  `ds-kpi-panel__trend--${valence}`
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ds-kpi-panel__trend-arrow",
+                      "aria-hidden": "true",
+                      children: cell.trend.direction === "up" ? "\u2191" : "\u2193"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "ds-kpi-panel__trend-delta", children: cell.trend.delta })
+                ]
+              }
+            ),
+            cell.provenance && /* @__PURE__ */ jsx("span", { className: "ds-kpi-panel__provenance", children: cell.provenance })
+          ]
+        },
+        i
+      );
+    }) });
+  }
+);
+KPIPanel.displayName = "KPIPanel";
+var HeroComposition = forwardRef(
+  ({
+    headline = ["Pipeline that runs", "while you sleep"],
+    subline = "Outbound sequences powered by intent signals. Replies routed to the right teammate. Always-on revenue motion.",
+    eyebrow = "PIPELINE OPERATING SYSTEM",
+    metrics,
+    tone = "sentence",
+    className
+  }, ref) => {
+    const [firstLine, ...restLines] = headline;
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx17("ds-hero-composition", className), children: [
+      /* @__PURE__ */ jsx(
+        AuroraVoid,
+        {
+          intensity: "base",
+          animated: true,
+          className: "ds-hero-composition__aurora"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Vignette,
+        {
+          intensity: "base",
+          className: "ds-hero-composition__vignette"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        GridOverlay,
+        {
+          cell: "64",
+          mask: true,
+          className: "ds-hero-composition__grid"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ds-hero-composition__content", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-hero-composition__left", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "ds-hero-composition__eyebrow", children: eyebrow }),
+          /* @__PURE__ */ jsxs(
+            "h1",
+            {
+              className: clsx17(
+                "ds-hero-composition__headline",
+                tone === "shouty" && "ds-hero-composition__headline--shouty"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-hero-composition__headline-dropcap", children: firstLine }),
+                restLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "ds-hero-composition__headline-line", children: line }, i))
+              ]
+            }
+          ),
+          subline && /* @__PURE__ */ jsx("p", { className: "ds-hero-composition__subline", children: subline })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ds-hero-composition__right", children: /* @__PURE__ */ jsx(KPIPanel, { cells: metrics }) })
+      ] })
+    ] });
+  }
+);
+HeroComposition.displayName = "HeroComposition";
 
-export { AnnouncementBar, ArchitectureDiagram, BeforeAfterBlock, BookingEmbed, CaseStudyCard, CaseStudySection, ComparisonTable, CompetitorDiff, ComplianceGrid, EcosystemDiagram, EnterpriseSignaling, EvolutionTimeline, ExitIntentOverlay, GuaranteeHighlight, ICPFilter, IntegrationShowcase, IntelligenceBlock, IntentCTA, LeadCaptureForm, ManifestoBlock, ObjectionFAQ, PartnerValueProp, PricingCard, PricingSection, PricingToggle, ProblemAgitation, ProcessTimeline, ROICalculator, SecurityBlock, SegmentSwitch, StakeholderTabs, StickyActionBar, ValueAnchor, VideoEmbed };
+export { ArchitectureDiagram, AuroraVoid, BeforeAfterBlock, BookingEmbed, CaseStudyCard, ComparisonTable, CompetitorDiff, ComplianceGrid, EcosystemDiagram, EnterpriseSignaling, EvolutionTimeline, GridOverlay, GuaranteeHighlight, HeroComposition, ICPFilter, IntelligenceBlock, IntentCTA, KPIPanel, ObjectionFAQ, PartnerValueProp, PricingCard, ProblemAgitation, ROICalculator, SegmentSwitch, StickyActionBar, ValueAnchor, Vignette };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-Y26OHHMX.js.map
+//# sourceMappingURL=chunk-KSEETC4E.js.map