@salesmind-ai/design-system 0.3.1 → 0.3.2

package/dist/motion/index.js

@@ -1,1218 +1,5 @@
 "use client";
-import React3, { useRef, useState, useEffect, useCallback } from 'react';
-import { useInView, motion, useReducedMotion } from 'framer-motion';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx2 from 'clsx';
-
-// src/components/Motion/MotionContainer.tsx
-
-// src/tokens/motion.ts
-var DURATION = {
-  // 150ms
-  short: 0.25,
-  // 250ms
-  medium: 0.5};
-var EASING = {
-  standard: [0.16, 1, 0.3, 1]};
-var VARIANTS = {
-  fadeIn: {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
-  },
-  staggerContainer: {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.08,
-        delayChildren: 0.1
-      }
-    }
-  }};
-var MOTION = {
-  DURATION,
-  EASING};
-var MotionContainer = ({
-  children,
-  viewportMargin = "-10%",
-  once = true,
-  stagger = false,
-  delay = 0,
-  className,
-  ...props
-}) => {
-  const ref = useRef(null);
-  const isInView = useInView(ref, {
-    once,
-    margin: viewportMargin
-  });
-  const variants = stagger ? VARIANTS.staggerContainer : VARIANTS.fadeIn;
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      ref,
-      initial: "hidden",
-      animate: isInView ? "visible" : "hidden",
-      variants,
-      transition: { delay },
-      className,
-      ...props,
-      children
-    }
-  );
-};
-var MotionText = ({
-  text,
-  type = "word",
-  highlightWords = [],
-  className,
-  ...props
-}) => {
-  const items = type === "word" ? text.split(" ") : text.split("");
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: type === "word" ? 0.05 : 0.02,
-        delayChildren: 0.1
-      }
-    }
-  };
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: MOTION.DURATION.short, ease: MOTION.EASING.standard }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      variants: containerVariants,
-      initial: "hidden",
-      whileInView: "visible",
-      viewport: { once: true, margin: "-10%" },
-      className,
-      ...props,
-      style: {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: type === "word" ? "0.25em" : "0.05em",
-        ...props.style
-      },
-      children: items.map((item, i) => {
-        const isHighlighted = highlightWords.includes(item.replace(/[^a-zA-Z0-9]/g, ""));
-        return /* @__PURE__ */ jsxs(
-          motion.span,
-          {
-            variants: itemVariants,
-            style: {
-              color: isHighlighted ? "var(--brand-pink)" : "inherit",
-              fontWeight: isHighlighted ? 600 : "inherit"
-            },
-            children: [
-              item,
-              type === "word" && "\xA0"
-            ]
-          },
-          i
-        );
-      })
-    }
-  );
-};
-var CursorSpotlight = ({
-  children,
-  color = "var(--accent-rgb)",
-  size = 400,
-  opacity = 0.15,
-  borderGlow = true,
-  className,
-  disabled = false
-}) => {
-  const containerRef = useRef(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [isHovering, setIsHovering] = useState(false);
-  const [reducedMotion, setReducedMotion] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setReducedMotion(mediaQuery.matches);
-    const handler = (e) => setReducedMotion(e.matches);
-    mediaQuery.addEventListener("change", handler);
-    return () => mediaQuery.removeEventListener("change", handler);
-  }, []);
-  const isDisabled = disabled || reducedMotion;
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (!containerRef.current || isDisabled) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      setPosition({
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
-      });
-    },
-    [isDisabled]
-  );
-  const handleMouseEnter = useCallback(() => {
-    if (!isDisabled) setIsHovering(true);
-  }, [isDisabled]);
-  const handleMouseLeave = useCallback(() => {
-    setIsHovering(false);
-  }, []);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || isDisabled) return;
-    container.addEventListener("mousemove", handleMouseMove);
-    container.addEventListener("mouseenter", handleMouseEnter);
-    container.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      container.removeEventListener("mousemove", handleMouseMove);
-      container.removeEventListener("mouseenter", handleMouseEnter);
-      container.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);
-  const spotlightColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, ${opacity})` : color.includes(",") ? `rgba(${color}, ${opacity})` : color;
-  const borderColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, 0.5)` : color.includes(",") ? `rgba(${color}, 0.5)` : color;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: `ds-cursor-spotlight ${className || ""}`,
-      style: {
-        "--spotlight-x": `${position.x}px`,
-        "--spotlight-y": `${position.y}px`,
-        "--spotlight-size": `${size}px`,
-        "--spotlight-color": spotlightColor,
-        "--spotlight-border-color": borderColor,
-        "--spotlight-opacity": isHovering ? 1 : 0
-      },
-      "data-hovering": isHovering,
-      "data-border-glow": borderGlow,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__glow", "aria-hidden": "true" }),
-        borderGlow && /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__border", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__content", children })
-      ]
-    }
-  );
-};
-CursorSpotlight.displayName = "CursorSpotlight";
-var SpotlightCard = ({
-  title,
-  description,
-  icon,
-  children,
-  onClick,
-  ...spotlightProps
-}) => {
-  return /* @__PURE__ */ jsx(CursorSpotlight, { ...spotlightProps, className: "ds-spotlight-card", children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "ds-spotlight-card__inner",
-      onClick,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: onClick ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      } : void 0,
-      children: [
-        icon && /* @__PURE__ */ jsx("div", { className: "ds-spotlight-card__icon", children: icon }),
-        title && /* @__PURE__ */ jsx("h3", { className: "ds-spotlight-card__title", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "ds-spotlight-card__description", children: description }),
-        children
-      ]
-    }
-  ) });
-};
-SpotlightCard.displayName = "SpotlightCard";
-var steps = [
-  {
-    id: "test",
-    label: "Test Audience & Messaging",
-    icon: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    )
-  },
-  {
-    id: "execute",
-    label: "Execute Outreach",
-    icon: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2Z",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    )
-  },
-  {
-    id: "results",
-    label: "Book Meetings",
-    icon: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    )
-  }
-];
-var RevenueAutomationLoop = ({ className }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("ds-revenue-loop", className), children: /* @__PURE__ */ jsxs("div", { className: "ds-revenue-loop__circle", children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        className: "ds-revenue-loop__ring",
-        viewBox: "0 0 400 400",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            /* @__PURE__ */ jsxs("linearGradient", { id: "loopGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
-              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--brand-yellow)" }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-pink)" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "marker",
-              {
-                id: "arrowhead",
-                markerWidth: "10",
-                markerHeight: "7",
-                refX: "9",
-                refY: "3.5",
-                orient: "auto",
-                children: /* @__PURE__ */ jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "url(#loopGradient)" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "200",
-              cy: "200",
-              r: "190",
-              stroke: "var(--rim-light-bottom)",
-              strokeWidth: "1",
-              strokeDasharray: "4 4",
-              className: "ds-revenue-loop__track"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            motion.circle,
-            {
-              cx: "200",
-              cy: "200",
-              r: "190",
-              stroke: "url(#loopGradient)",
-              strokeWidth: "2",
-              fill: "none",
-              strokeLinecap: "round",
-              initial: { pathLength: 0, rotate: -90 },
-              animate: { pathLength: 1, rotate: -90 },
-              transition: {
-                duration: 4,
-                ease: "linear",
-                repeat: Infinity
-              }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "ds-revenue-loop__hub", children: [
-      /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__hub-glow" }),
-      /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__hub-content", children: /* @__PURE__ */ jsx("span", { className: "ds-revenue-loop__logo", children: "AI" }) })
-    ] }),
-    steps.map((step, index) => {
-      const angle = index * 360 / steps.length - 90;
-      const radius = 190;
-      const x = 200 + radius * Math.cos(angle * Math.PI / 180);
-      const y = 200 + radius * Math.sin(angle * Math.PI / 180);
-      return /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          className: "ds-revenue-loop__node",
-          style: {
-            left: `${x / 400 * 100}%`,
-            top: `${y / 400 * 100}%`
-          },
-          initial: { opacity: 0, scale: 0.8 },
-          animate: { opacity: 1, scale: 1 },
-          transition: { delay: index * 0.5 },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__icon", children: step.icon }),
-            /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__label", children: step.label })
-          ]
-        },
-        step.id
-      );
-    })
-  ] }) });
-};
-var EASE_PREMIUM = [0.22, 1, 0.36, 1];
-var SCENE_TIMING = {
-  init: 0,
-  funnel: 1500,
-  qualification: 3500,
-  meeting: 5500,
-  mapping: 6500,
-  scaling: 8500
-};
-var HOLD_DURATION = 1200;
-var TOTAL_DURATION = 1e4 + HOLD_DURATION;
-var LINKEDIN_STEPS = [
-  { id: "follow", label: "Profile Follow" },
-  { id: "visit", label: "Profile Visit" },
-  { id: "connect", label: "Connection Request" },
-  { id: "msg1", label: "Message 1" },
-  { id: "msg2", label: "Message 2" },
-  { id: "msg3", label: "Message 3" }
-];
-var FUNNEL_STAGES = [
-  { id: "awareness", label: "Awareness", num: 1 },
-  { id: "discovery", label: "Discovery", num: 2 },
-  { id: "evaluation", label: "Evaluation", num: 3 },
-  { id: "intent", label: "Intent", num: 4 },
-  { id: "negotiation", label: "Negotiation", num: 5 },
-  { id: "purchase", label: "Purchase", num: 6 }
-];
-var WINNING_BULLETS = [
-  "Target audience validated & segmented",
-  "Messaging sequence A/B tested",
-  "Optimal send times confirmed",
-  "Response rate > benchmark threshold",
-  "Conversion path verified end-to-end"
-];
-var SCALING_CHECKS = [
-  "Volume multiplied to 9 senders",
-  "All sequences templated & locked",
-  "Auto-qualification active",
-  "Meeting pipeline on autopilot"
-];
-var AntSVG = ({ size = 28, className }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className,
-    width: size,
-    height: size,
-    viewBox: "0 0 28 28",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
-      ] }) }),
-      /* @__PURE__ */ jsx("circle", { cx: "14", cy: "6", r: "4", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "11",
-          y1: "3",
-          x2: "7",
-          y2: "0.5",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "1",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "17",
-          y1: "3",
-          x2: "21",
-          y2: "0.5",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "1",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx("ellipse", { cx: "14", cy: "13", rx: "3.5", ry: "3", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
-      /* @__PURE__ */ jsx("ellipse", { cx: "14", cy: "22", rx: "5", ry: "5", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "10.5",
-          y1: "11",
-          x2: "5",
-          y2: "9",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "17.5",
-          y1: "11",
-          x2: "23",
-          y2: "9",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "10.5",
-          y1: "13",
-          x2: "4",
-          y2: "14",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "17.5",
-          y1: "13",
-          x2: "24",
-          y2: "14",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "10.5",
-          y1: "15",
-          x2: "5",
-          y2: "18",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "17.5",
-          y1: "15",
-          x2: "23",
-          y2: "18",
-          stroke: "rgba(255,255,255,0.1)",
-          strokeWidth: "0.8",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx("circle", { cx: "12.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" }),
-      /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" })
-    ]
-  }
-);
-var SwarmAntSVG = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "3.5", r: "2.5", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
-      /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "8", rx: "2", ry: "1.8", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
-      /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "13", rx: "3", ry: "3", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" })
-    ]
-  }
-);
-var CalendarIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "16", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "6",
-          y1: "2",
-          x2: "6",
-          y2: "6",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "14",
-          y1: "2",
-          x2: "14",
-          y2: "6",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "3", height: "3", rx: "0.5", fill: "currentColor", opacity: "0.5" })
-    ]
-  }
-);
-var LockIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M4 5V3.5C4 2.4 4.9 1.5 6 1.5C7.1 1.5 8 2.4 8 3.5V5",
-          stroke: "currentColor",
-          strokeWidth: "1.2",
-          strokeLinecap: "round"
-        }
-      )
-    ]
-  }
-);
-var CheckIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: "ds-funnel-scaling__scaling-check",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.2" }),
-      /* @__PURE__ */ jsx(
-        "polyline",
-        {
-          points: "4,7 6,9.5 10,4.5",
-          stroke: "currentColor",
-          strokeWidth: "1.4",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          fill: "none"
-        }
-      )
-    ]
-  }
-);
-var NodeDot = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: "ds-funnel-scaling__flow-icon",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
-    ]
-  }
-);
-var containerStagger = {
-  hidden: { opacity: 0 },
-  show: {
-    opacity: 1,
-    transition: { staggerChildren: 0.1 }
-  }
-};
-var cardReveal = {
-  hidden: { opacity: 0, y: 40 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.6, ease: EASE_PREMIUM }
-  }
-};
-var bulletStagger = {
-  hidden: { opacity: 0, x: -8 },
-  show: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.3, ease: EASE_PREMIUM }
-  }
-};
-var stepNode = {
-  hidden: { opacity: 0, scaleY: 0.85 },
-  show: {
-    opacity: 1,
-    scaleY: 1,
-    transition: { duration: 0.35, ease: EASE_PREMIUM }
-  }
-};
-var funnelLayer = {
-  hidden: { opacity: 0, y: 20 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.4, ease: EASE_PREMIUM }
-  }
-};
-var fadeSlideUp = {
-  hidden: { opacity: 0, y: 30 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.5, ease: EASE_PREMIUM }
-  }
-};
-var scalePulse = {
-  hidden: { scale: 1 },
-  show: {
-    scale: [1, 1.04, 1],
-    transition: { duration: 0.6, ease: EASE_PREMIUM }
-  }
-};
-var swarmEntry = {
-  hidden: { opacity: 0, scale: 0.8 },
-  show: {
-    opacity: 1,
-    scale: 1,
-    transition: { duration: 0.35, ease: EASE_PREMIUM }
-  }
-};
-var qualBlockLeft = {
-  hidden: { opacity: 0, x: -60 },
-  show: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.5, ease: EASE_PREMIUM }
-  }
-};
-var qualBlockRight = {
-  hidden: { opacity: 0, x: 60 },
-  show: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.5, ease: EASE_PREMIUM }
-  }
-};
-function useSceneTimeline(isInView, autoPlay, loop, reducedMotion) {
-  const [scene, setScene] = useState("idle");
-  const timerRef = useRef([]);
-  const clearTimers = useCallback(() => {
-    timerRef.current.forEach(clearTimeout);
-    timerRef.current = [];
-  }, []);
-  const startTimeline = useCallback(() => {
-    clearTimers();
-    const scenes = [
-      "init",
-      "funnel",
-      "qualification",
-      "meeting",
-      "mapping",
-      "scaling"
-    ];
-    if (reducedMotion) {
-      setScene("scaling");
-      return;
-    }
-    scenes.forEach((s) => {
-      const id = setTimeout(() => setScene(s), SCENE_TIMING[s]);
-      timerRef.current.push(id);
-    });
-    if (loop) {
-      const loopId = setTimeout(() => {
-        setScene("idle");
-        const restartId = setTimeout(() => startTimeline(), 100);
-        timerRef.current.push(restartId);
-      }, TOTAL_DURATION);
-      timerRef.current.push(loopId);
-    }
-  }, [clearTimers, loop, reducedMotion]);
-  useEffect(() => {
-    if (isInView && autoPlay) {
-      startTimeline();
-    }
-    return clearTimers;
-  }, [isInView, autoPlay, startTimeline, clearTimers]);
-  return scene;
-}
-function isAtOrPast(current, target) {
-  const order = [
-    "idle",
-    "init",
-    "funnel",
-    "qualification",
-    "meeting",
-    "mapping",
-    "scaling"
-  ];
-  return order.indexOf(current) >= order.indexOf(target);
-}
-var FunnelScalingSender = ({
-  className,
-  autoPlay = true,
-  loop = true
-}) => {
-  const containerRef = useRef(null);
-  const isInView = useInView(containerRef, { once: false, amount: 0.3 });
-  const reducedMotion = useReducedMotion();
-  const scene = useSceneTimeline(isInView, autoPlay, loop, reducedMotion);
-  const isActive = scene !== "idle";
-  const showInit = isAtOrPast(scene, "init");
-  const showFunnel = isAtOrPast(scene, "funnel");
-  const showQualification = isAtOrPast(scene, "qualification");
-  const showMeeting = isAtOrPast(scene, "meeting");
-  const showMapping = isAtOrPast(scene, "mapping");
-  const showScaling = isAtOrPast(scene, "scaling");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: clsx2("ds-funnel-scaling", className),
-      role: "img",
-      "aria-label": "Animated illustration: SalesMind scaling funnel from the sender perspective \u2014 showing how validated outreach becomes an automated pipeline machine",
-      children: [
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "ds-funnel-scaling__bg",
-            initial: { opacity: 0 },
-            animate: { opacity: isActive ? 1 : 0 },
-            transition: { duration: 0.4 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "ds-funnel-scaling__grid",
-            initial: { opacity: 0 },
-            animate: { opacity: isActive ? 1 : 0 },
-            transition: { duration: 0.4, delay: 0.6 }
-          }
-        ),
-        /* @__PURE__ */ jsx("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: "fscFlowGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: "fscQualGrad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__canvas", children: [
-          /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              className: "ds-funnel-scaling__winning-card",
-              variants: cardReveal,
-              initial: "hidden",
-              animate: showInit ? "show" : "hidden",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__winning-header", children: "Solution" }),
-                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__winning-title", children: "Winning Combination" }),
-                /* @__PURE__ */ jsx(
-                  motion.ul,
-                  {
-                    className: "ds-funnel-scaling__winning-bullets",
-                    variants: containerStagger,
-                    initial: "hidden",
-                    animate: showInit ? "show" : "hidden",
-                    children: WINNING_BULLETS.map((bullet) => /* @__PURE__ */ jsx(
-                      motion.li,
-                      {
-                        className: "ds-funnel-scaling__winning-bullet",
-                        variants: bulletStagger,
-                        children: bullet
-                      },
-                      bullet
-                    ))
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  motion.div,
-                  {
-                    className: "ds-funnel-scaling__winning-lock",
-                    initial: { opacity: 0 },
-                    animate: { opacity: showInit ? 1 : 0 },
-                    transition: { delay: 0.8, duration: 0.4 },
-                    children: [
-                      /* @__PURE__ */ jsx(LockIcon, {}),
-                      " Validated & Locked"
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              className: "ds-funnel-scaling__flow",
-              variants: containerStagger,
-              initial: "hidden",
-              animate: showFunnel ? "show" : "hidden",
-              children: [
-                LINKEDIN_STEPS.map((step, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-                  /* @__PURE__ */ jsxs(
-                    motion.div,
-                    {
-                      className: clsx2(
-                        "ds-funnel-scaling__flow-node",
-                        showFunnel && "ds-funnel-scaling__flow-node--active"
-                      ),
-                      variants: stepNode,
-                      custom: i,
-                      children: [
-                        /* @__PURE__ */ jsx(NodeDot, {}),
-                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__flow-label", children: step.label })
-                      ]
-                    }
-                  ),
-                  i < LINKEDIN_STEPS.length - 1 && /* @__PURE__ */ jsx(
-                    motion.svg,
-                    {
-                      className: "ds-funnel-scaling__flow-connector",
-                      width: "2",
-                      height: "12",
-                      viewBox: "0 0 2 12",
-                      initial: { scaleY: 0, opacity: 0 },
-                      animate: showFunnel ? { scaleY: 1, opacity: 1 } : { scaleY: 0, opacity: 0 },
-                      transition: { duration: 0.3, delay: 0.1 * (i + 1), ease: EASE_PREMIUM },
-                      style: { transformOrigin: "top" },
-                      children: /* @__PURE__ */ jsx("rect", { width: "2", height: "12", fill: "url(#fscFlowGrad)", rx: "1" })
-                    }
-                  )
-                ] }, step.id)),
-                showFunnel && /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 0 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    className: "ds-funnel-scaling__ant ds-funnel-scaling__ant--ghost",
-                    initial: { opacity: 0, x: -20 + i * 15, y: -10 },
-                    animate: showFunnel ? { opacity: 0.35, x: -10 + i * 18, y: 0 } : { opacity: 0 },
-                    transition: { delay: 1.2 + i * 0.15, duration: 0.4, ease: EASE_PREMIUM },
-                    style: { position: "absolute" },
-                    children: /* @__PURE__ */ jsx(AntSVG, { size: 20 })
-                  },
-                  `ghost-${i}`
-                )) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              className: "ds-funnel-scaling__qualification",
-              initial: { opacity: 0, scale: 0.9 },
-              animate: showQualification ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 },
-              transition: { duration: 0.6, ease: EASE_PREMIUM },
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__qual-ring", children: [
-                  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 180 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "90", cy: "90", r: "70", stroke: "rgba(255,255,255,0.06)", strokeWidth: "1" }),
-                    /* @__PURE__ */ jsx(
-                      motion.circle,
-                      {
-                        cx: "90",
-                        cy: "90",
-                        r: "70",
-                        stroke: "url(#fscQualGrad)",
-                        strokeWidth: "2",
-                        fill: "none",
-                        strokeLinecap: "round",
-                        strokeDasharray: "440",
-                        initial: { strokeDashoffset: 440 },
-                        animate: showQualification ? { strokeDashoffset: 0 } : { strokeDashoffset: 440 },
-                        transition: { duration: 0.8, ease: EASE_PREMIUM }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      motion.polygon,
-                      {
-                        points: "155,80 165,90 155,100",
-                        fill: "var(--brand-pink)",
-                        initial: { opacity: 0 },
-                        animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
-                        transition: { delay: 0.6, duration: 0.3 }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      motion.polygon,
-                      {
-                        points: "25,100 15,90 25,80",
-                        fill: "var(--brand-yellow)",
-                        initial: { opacity: 0 },
-                        animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
-                        transition: { delay: 0.7, duration: 0.3 }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    motion.div,
-                    {
-                      className: "ds-funnel-scaling__qual-center",
-                      initial: { opacity: 0 },
-                      animate: showQualification ? { opacity: 1 } : { opacity: 0 },
-                      transition: { delay: 0.8, duration: 0.4 },
-                      children: /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__qual-text", children: "Qualification happens during the conversation" })
-                    }
-                  ),
-                  showQualification && !reducedMotion && /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: showScaling ? 9 : 3 }).map((_, i) => /* @__PURE__ */ jsx(
-                    motion.div,
-                    {
-                      className: "ds-funnel-scaling__swarm-ant",
-                      variants: swarmEntry,
-                      initial: "hidden",
-                      animate: "show",
-                      transition: { delay: i * 0.08 },
-                      style: {
-                        animationDelay: `${-(i * (3 / (showScaling ? 9 : 3)))}s`
-                      },
-                      children: /* @__PURE__ */ jsx(SwarmAntSVG, {})
-                    },
-                    `swarm-${i}`
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__qual-blocks", children: [
-                  /* @__PURE__ */ jsx(
-                    motion.div,
-                    {
-                      className: "ds-funnel-scaling__qual-block",
-                      variants: qualBlockLeft,
-                      initial: "hidden",
-                      animate: showQualification ? "show" : "hidden",
-                      children: "Reply Handling"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    motion.div,
-                    {
-                      className: "ds-funnel-scaling__qual-block",
-                      variants: qualBlockRight,
-                      initial: "hidden",
-                      animate: showQualification ? "show" : "hidden",
-                      children: "Follow-up Sequence"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              className: "ds-funnel-scaling__funnel",
-              variants: containerStagger,
-              initial: "hidden",
-              animate: showMapping ? "show" : "hidden",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__funnel-header", children: "Sales Funnel Stages" }),
-                FUNNEL_STAGES.map((stage) => {
-                  const isHighlight = stage.id === "evaluation" || stage.id === "intent";
-                  const isDim = showMapping && !isHighlight;
-                  return /* @__PURE__ */ jsxs(
-                    motion.div,
-                    {
-                      className: clsx2(
-                        "ds-funnel-scaling__funnel-stage",
-                        isHighlight && showMapping && "ds-funnel-scaling__funnel-stage--highlight",
-                        isDim && "ds-funnel-scaling__funnel-stage--dim"
-                      ),
-                      variants: funnelLayer,
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__funnel-num", children: stage.num }),
-                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__funnel-label", children: stage.label })
-                      ]
-                    },
-                    stage.id
-                  );
-                })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "ds-funnel-scaling__meeting",
-            variants: fadeSlideUp,
-            initial: "hidden",
-            animate: showMeeting ? "show" : "hidden",
-            children: /* @__PURE__ */ jsxs(
-              motion.div,
-              {
-                variants: scalePulse,
-                initial: "hidden",
-                animate: showMeeting ? "show" : "hidden",
-                style: { display: "flex", alignItems: "center", gap: "12px" },
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__meeting-icon", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
-                  /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__meeting-label", children: "Meeting Booked" })
-                ]
-              }
-            )
-          }
-        ),
-        showMeeting && showMapping && /* @__PURE__ */ jsxs(
-          motion.svg,
-          {
-            className: "ds-funnel-scaling__data-line",
-            style: { right: 240, bottom: 80, width: 120, height: 200 },
-            viewBox: "0 0 120 200",
-            initial: { opacity: 0 },
-            animate: { opacity: 0.4 },
-            transition: { delay: 0.3, duration: 0.5 },
-            children: [
-              /* @__PURE__ */ jsx(
-                motion.path,
-                {
-                  d: "M 0 200 C 20 150, 80 100, 120 40",
-                  stroke: "url(#fscFlowGrad)",
-                  strokeWidth: "1.5",
-                  fill: "none",
-                  strokeLinecap: "round",
-                  initial: { pathLength: 0 },
-                  animate: { pathLength: 1 },
-                  transition: { duration: 0.8, ease: EASE_PREMIUM, delay: 0.2 }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                motion.circle,
-                {
-                  cx: "120",
-                  cy: "40",
-                  r: "3",
-                  fill: "var(--brand-pink)",
-                  initial: { opacity: 0, scale: 0 },
-                  animate: { opacity: 1, scale: 1 },
-                  transition: { delay: 1, duration: 0.3 }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            className: "ds-funnel-scaling__scaling-panel",
-            initial: { opacity: 0, y: 20 },
-            animate: showScaling ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },
-            transition: { duration: 0.5, ease: EASE_PREMIUM },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__scaling-header", children: [
-                /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 1L11 6L6 11L1 6Z", stroke: "currentColor", strokeWidth: "1.2" }) }),
-                "Scaling Mode"
-              ] }),
-              SCALING_CHECKS.map((item, i) => /* @__PURE__ */ jsxs(
-                motion.div,
-                {
-                  className: "ds-funnel-scaling__scaling-item",
-                  initial: { opacity: 0, x: -10 },
-                  animate: showScaling ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 },
-                  transition: { delay: 0.15 + i * 0.12, duration: 0.35, ease: EASE_PREMIUM },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      motion.div,
-                      {
-                        initial: { scale: 0 },
-                        animate: showScaling ? { scale: 1 } : { scale: 0 },
-                        transition: { delay: 0.25 + i * 0.12, duration: 0.3, ease: EASE_PREMIUM },
-                        children: /* @__PURE__ */ jsx(CheckIcon, {})
-                      }
-                    ),
-                    item
-                  ]
-                },
-                item
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "ds-funnel-scaling__ant",
-            initial: { opacity: 0, x: -40, y: 100 },
-            animate: showScaling ? { opacity: 1, x: 280, y: 60 } : showMapping ? { opacity: 1, x: 240, y: 160 } : showMeeting ? { opacity: 1, x: 400, y: 280 } : showQualification ? { opacity: 1, x: 380, y: 200 } : showFunnel ? { opacity: 1, x: 320, y: 40 } : showInit ? { opacity: 1, x: 220, y: 30 } : { opacity: 0, x: -40, y: 100 },
-            transition: {
-              duration: 0.8,
-              ease: EASE_PREMIUM,
-              opacity: { duration: 0.4 }
-            },
-            children: /* @__PURE__ */ jsx(AntSVG, {})
-          }
-        )
-      ]
-    }
-  );
-};
-FunnelScalingSender.displayName = "FunnelScalingSender";
-
-export { CursorSpotlight, FunnelScalingSender, MotionContainer, MotionText, RevenueAutomationLoop, SpotlightCard };
+export { CursorSpotlight, FunnelScalingSender, MotionContainer, MotionText, RevenueAutomationLoop, SpotlightCard } from '../chunk-T343CCH5.js';
+import '../chunk-YNVRDD2P.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map