@salesmind-ai/design-system 0.2.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/README.md +32 -2
  2. package/dist/AppearancePanel-UT57J69V.d.cts +51 -0
  3. package/dist/AppearancePanel-UT57J69V.d.ts +51 -0
  4. package/dist/AppearanceProvider-C36a8-eb.d.cts +45 -0
  5. package/dist/AppearanceProvider-C36a8-eb.d.ts +45 -0
  6. package/dist/Breadcrumb-RX-B_gDV.d.cts +44 -0
  7. package/dist/Breadcrumb-RX-B_gDV.d.ts +44 -0
  8. package/dist/ExportMenu-A2TLFiVv.d.cts +311 -0
  9. package/dist/ExportMenu-C8qck5AT.d.ts +311 -0
  10. package/dist/SectionShell-BfBw5q0Y.d.cts +18 -0
  11. package/dist/SectionShell-BfBw5q0Y.d.ts +18 -0
  12. package/dist/Select-BdZmK0Lt.d.cts +66 -0
  13. package/dist/Select-BdZmK0Lt.d.ts +66 -0
  14. package/dist/admin/index.cjs +2941 -0
  15. package/dist/admin/index.cjs.map +1 -0
  16. package/dist/admin/index.css +4145 -0
  17. package/dist/admin/index.css.map +1 -0
  18. package/dist/admin/index.d.cts +491 -0
  19. package/dist/admin/index.d.ts +491 -0
  20. package/dist/admin/index.js +2918 -0
  21. package/dist/admin/index.js.map +1 -0
  22. package/dist/{audit-CiyPkxk1.d.cts → audit-BS2fn7M4.d.ts} +2 -51
  23. package/dist/{audit-CiyPkxk1.d.ts → audit-DwCmg32J.d.cts} +2 -51
  24. package/dist/blog/index.cjs +1074 -0
  25. package/dist/blog/index.cjs.map +1 -0
  26. package/dist/blog/index.css +1422 -0
  27. package/dist/blog/index.css.map +1 -0
  28. package/dist/blog/index.d.cts +233 -0
  29. package/dist/blog/index.d.ts +233 -0
  30. package/dist/blog/index.js +1056 -0
  31. package/dist/blog/index.js.map +1 -0
  32. package/dist/chart-types-BGVVO-zl.d.cts +208 -0
  33. package/dist/chart-types-BGVVO-zl.d.ts +208 -0
  34. package/dist/charts/index.cjs +2698 -0
  35. package/dist/charts/index.cjs.map +1 -0
  36. package/dist/charts/index.css +1167 -0
  37. package/dist/charts/index.css.map +1 -0
  38. package/dist/charts/index.d.cts +453 -0
  39. package/dist/charts/index.d.ts +453 -0
  40. package/dist/charts/index.js +2682 -0
  41. package/dist/charts/index.js.map +1 -0
  42. package/dist/core/index.cjs +526 -395
  43. package/dist/core/index.cjs.map +1 -1
  44. package/dist/core/index.css +294 -0
  45. package/dist/core/index.css.map +1 -1
  46. package/dist/core/index.d.cts +7 -982
  47. package/dist/core/index.d.ts +7 -982
  48. package/dist/core/index.js +476 -351
  49. package/dist/core/index.js.map +1 -1
  50. package/dist/i18n/index.cjs +585 -0
  51. package/dist/i18n/index.cjs.map +1 -0
  52. package/dist/i18n/index.d.cts +855 -0
  53. package/dist/i18n/index.d.ts +855 -0
  54. package/dist/i18n/index.js +547 -0
  55. package/dist/i18n/index.js.map +1 -0
  56. package/dist/index.cjs +3 -2
  57. package/dist/index.cjs.map +1 -1
  58. package/dist/index.css +11 -7
  59. package/dist/index.css.map +1 -1
  60. package/dist/index.d.cts +22 -1290
  61. package/dist/index.d.ts +22 -1290
  62. package/dist/index.js +3 -2
  63. package/dist/index.js.map +1 -1
  64. package/dist/marketing/index.cjs +2144 -3023
  65. package/dist/marketing/index.cjs.map +1 -1
  66. package/dist/marketing/index.css +3729 -4824
  67. package/dist/marketing/index.css.map +1 -1
  68. package/dist/marketing/index.d.cts +1351 -4
  69. package/dist/marketing/index.d.ts +1351 -4
  70. package/dist/marketing/index.js +2190 -3054
  71. package/dist/marketing/index.js.map +1 -1
  72. package/dist/motion/index.cjs +1230 -0
  73. package/dist/motion/index.cjs.map +1 -0
  74. package/dist/motion/index.css +699 -0
  75. package/dist/motion/index.css.map +1 -0
  76. package/dist/motion/index.d.cts +68 -0
  77. package/dist/motion/index.d.ts +68 -0
  78. package/dist/motion/index.js +1218 -0
  79. package/dist/motion/index.js.map +1 -0
  80. package/dist/nav/index.cjs +1533 -0
  81. package/dist/nav/index.cjs.map +1 -0
  82. package/dist/nav/index.css +1984 -0
  83. package/dist/nav/index.css.map +1 -0
  84. package/dist/nav/index.d.cts +279 -0
  85. package/dist/nav/index.d.ts +279 -0
  86. package/dist/nav/index.js +1501 -0
  87. package/dist/nav/index.js.map +1 -0
  88. package/dist/report/index.cjs +26 -1649
  89. package/dist/report/index.cjs.map +1 -1
  90. package/dist/report/index.css +0 -963
  91. package/dist/report/index.css.map +1 -1
  92. package/dist/report/index.d.cts +4 -2
  93. package/dist/report/index.d.ts +4 -2
  94. package/dist/report/index.js +27 -1640
  95. package/dist/report/index.js.map +1 -1
  96. package/dist/sections/index.cjs +385 -0
  97. package/dist/sections/index.cjs.map +1 -0
  98. package/dist/sections/index.css +815 -0
  99. package/dist/sections/index.css.map +1 -0
  100. package/dist/sections/index.d.cts +69 -0
  101. package/dist/sections/index.d.ts +69 -0
  102. package/dist/sections/index.js +374 -0
  103. package/dist/sections/index.js.map +1 -0
  104. package/dist/social-proof/index.cjs +1255 -0
  105. package/dist/social-proof/index.cjs.map +1 -0
  106. package/dist/social-proof/index.css +1423 -0
  107. package/dist/social-proof/index.css.map +1 -0
  108. package/dist/social-proof/index.d.cts +258 -0
  109. package/dist/social-proof/index.d.ts +258 -0
  110. package/dist/social-proof/index.js +1238 -0
  111. package/dist/social-proof/index.js.map +1 -0
  112. package/dist/theme/index.cjs +573 -0
  113. package/dist/theme/index.cjs.map +1 -0
  114. package/dist/theme/index.css +464 -0
  115. package/dist/theme/index.css.map +1 -0
  116. package/dist/theme/index.d.cts +48 -0
  117. package/dist/theme/index.d.ts +48 -0
  118. package/dist/theme/index.js +558 -0
  119. package/dist/theme/index.js.map +1 -0
  120. package/dist/types-DAlgDGzw.d.cts +52 -0
  121. package/dist/types-DAlgDGzw.d.ts +52 -0
  122. package/dist/web/client/index.cjs +501 -0
  123. package/dist/web/client/index.cjs.map +1 -0
  124. package/dist/web/client/index.css +456 -0
  125. package/dist/web/client/index.css.map +1 -0
  126. package/dist/web/client/index.d.cts +172 -0
  127. package/dist/web/client/index.d.ts +172 -0
  128. package/dist/web/client/index.js +486 -0
  129. package/dist/web/client/index.js.map +1 -0
  130. package/dist/web/index.d.cts +6 -893
  131. package/dist/web/index.d.ts +6 -893
  132. package/dist/web/server/index.cjs +569 -0
  133. package/dist/web/server/index.cjs.map +1 -0
  134. package/dist/web/server/index.d.cts +725 -0
  135. package/dist/web/server/index.d.ts +725 -0
  136. package/dist/web/server/index.js +562 -0
  137. package/dist/web/server/index.js.map +1 -0
  138. package/package.json +81 -9
  139. package/dist/ExportMenu-hEe5MhLq.d.cts +0 -1027
  140. package/dist/ExportMenu-hEe5MhLq.d.ts +0 -1027
  141. package/dist/index-B64suAAc.d.cts +0 -1498
  142. package/dist/index-B64suAAc.d.ts +0 -1498
@@ -0,0 +1,1230 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var React3 = require('react');
5
+ var framerMotion = require('framer-motion');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+ var clsx2 = require('clsx');
8
+
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ var React3__default = /*#__PURE__*/_interopDefault(React3);
12
+ var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
13
+
14
+ // src/components/Motion/MotionContainer.tsx
15
+
16
+ // src/tokens/motion.ts
17
+ var DURATION = {
18
+ // 150ms
19
+ short: 0.25,
20
+ // 250ms
21
+ medium: 0.5};
22
+ var EASING = {
23
+ standard: [0.16, 1, 0.3, 1]};
24
+ var VARIANTS = {
25
+ fadeIn: {
26
+ hidden: { opacity: 0 },
27
+ visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
28
+ },
29
+ staggerContainer: {
30
+ hidden: { opacity: 0 },
31
+ visible: {
32
+ opacity: 1,
33
+ transition: {
34
+ staggerChildren: 0.08,
35
+ delayChildren: 0.1
36
+ }
37
+ }
38
+ }};
39
+ var MOTION = {
40
+ DURATION,
41
+ EASING};
42
+ var MotionContainer = ({
43
+ children,
44
+ viewportMargin = "-10%",
45
+ once = true,
46
+ stagger = false,
47
+ delay = 0,
48
+ className,
49
+ ...props
50
+ }) => {
51
+ const ref = React3.useRef(null);
52
+ const isInView = framerMotion.useInView(ref, {
53
+ once,
54
+ margin: viewportMargin
55
+ });
56
+ const variants = stagger ? VARIANTS.staggerContainer : VARIANTS.fadeIn;
57
+ return /* @__PURE__ */ jsxRuntime.jsx(
58
+ framerMotion.motion.div,
59
+ {
60
+ ref,
61
+ initial: "hidden",
62
+ animate: isInView ? "visible" : "hidden",
63
+ variants,
64
+ transition: { delay },
65
+ className,
66
+ ...props,
67
+ children
68
+ }
69
+ );
70
+ };
71
+ var MotionText = ({
72
+ text,
73
+ type = "word",
74
+ highlightWords = [],
75
+ className,
76
+ ...props
77
+ }) => {
78
+ const items = type === "word" ? text.split(" ") : text.split("");
79
+ const containerVariants = {
80
+ hidden: { opacity: 0 },
81
+ visible: {
82
+ opacity: 1,
83
+ transition: {
84
+ staggerChildren: type === "word" ? 0.05 : 0.02,
85
+ delayChildren: 0.1
86
+ }
87
+ }
88
+ };
89
+ const itemVariants = {
90
+ hidden: { opacity: 0, y: 10 },
91
+ visible: {
92
+ opacity: 1,
93
+ y: 0,
94
+ transition: { duration: MOTION.DURATION.short, ease: MOTION.EASING.standard }
95
+ }
96
+ };
97
+ return /* @__PURE__ */ jsxRuntime.jsx(
98
+ framerMotion.motion.div,
99
+ {
100
+ variants: containerVariants,
101
+ initial: "hidden",
102
+ whileInView: "visible",
103
+ viewport: { once: true, margin: "-10%" },
104
+ className,
105
+ ...props,
106
+ style: {
107
+ display: "flex",
108
+ flexWrap: "wrap",
109
+ gap: type === "word" ? "0.25em" : "0.05em",
110
+ ...props.style
111
+ },
112
+ children: items.map((item, i) => {
113
+ const isHighlighted = highlightWords.includes(item.replace(/[^a-zA-Z0-9]/g, ""));
114
+ return /* @__PURE__ */ jsxRuntime.jsxs(
115
+ framerMotion.motion.span,
116
+ {
117
+ variants: itemVariants,
118
+ style: {
119
+ color: isHighlighted ? "var(--brand-pink)" : "inherit",
120
+ fontWeight: isHighlighted ? 600 : "inherit"
121
+ },
122
+ children: [
123
+ item,
124
+ type === "word" && "\xA0"
125
+ ]
126
+ },
127
+ i
128
+ );
129
+ })
130
+ }
131
+ );
132
+ };
133
+ var CursorSpotlight = ({
134
+ children,
135
+ color = "var(--accent-rgb)",
136
+ size = 400,
137
+ opacity = 0.15,
138
+ borderGlow = true,
139
+ className,
140
+ disabled = false
141
+ }) => {
142
+ const containerRef = React3.useRef(null);
143
+ const [position, setPosition] = React3.useState({ x: 0, y: 0 });
144
+ const [isHovering, setIsHovering] = React3.useState(false);
145
+ const [reducedMotion, setReducedMotion] = React3.useState(false);
146
+ React3.useEffect(() => {
147
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
148
+ setReducedMotion(mediaQuery.matches);
149
+ const handler = (e) => setReducedMotion(e.matches);
150
+ mediaQuery.addEventListener("change", handler);
151
+ return () => mediaQuery.removeEventListener("change", handler);
152
+ }, []);
153
+ const isDisabled = disabled || reducedMotion;
154
+ const handleMouseMove = React3.useCallback(
155
+ (e) => {
156
+ if (!containerRef.current || isDisabled) return;
157
+ const rect = containerRef.current.getBoundingClientRect();
158
+ setPosition({
159
+ x: e.clientX - rect.left,
160
+ y: e.clientY - rect.top
161
+ });
162
+ },
163
+ [isDisabled]
164
+ );
165
+ const handleMouseEnter = React3.useCallback(() => {
166
+ if (!isDisabled) setIsHovering(true);
167
+ }, [isDisabled]);
168
+ const handleMouseLeave = React3.useCallback(() => {
169
+ setIsHovering(false);
170
+ }, []);
171
+ React3.useEffect(() => {
172
+ const container = containerRef.current;
173
+ if (!container || isDisabled) return;
174
+ container.addEventListener("mousemove", handleMouseMove);
175
+ container.addEventListener("mouseenter", handleMouseEnter);
176
+ container.addEventListener("mouseleave", handleMouseLeave);
177
+ return () => {
178
+ container.removeEventListener("mousemove", handleMouseMove);
179
+ container.removeEventListener("mouseenter", handleMouseEnter);
180
+ container.removeEventListener("mouseleave", handleMouseLeave);
181
+ };
182
+ }, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);
183
+ const spotlightColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, ${opacity})` : color.includes(",") ? `rgba(${color}, ${opacity})` : color;
184
+ const borderColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, 0.5)` : color.includes(",") ? `rgba(${color}, 0.5)` : color;
185
+ return /* @__PURE__ */ jsxRuntime.jsxs(
186
+ "div",
187
+ {
188
+ ref: containerRef,
189
+ className: `ds-cursor-spotlight ${className || ""}`,
190
+ style: {
191
+ "--spotlight-x": `${position.x}px`,
192
+ "--spotlight-y": `${position.y}px`,
193
+ "--spotlight-size": `${size}px`,
194
+ "--spotlight-color": spotlightColor,
195
+ "--spotlight-border-color": borderColor,
196
+ "--spotlight-opacity": isHovering ? 1 : 0
197
+ },
198
+ "data-hovering": isHovering,
199
+ "data-border-glow": borderGlow,
200
+ children: [
201
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__glow", "aria-hidden": "true" }),
202
+ borderGlow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__border", "aria-hidden": "true" }),
203
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cursor-spotlight__content", children })
204
+ ]
205
+ }
206
+ );
207
+ };
208
+ CursorSpotlight.displayName = "CursorSpotlight";
209
+ var SpotlightCard = ({
210
+ title,
211
+ description,
212
+ icon,
213
+ children,
214
+ onClick,
215
+ ...spotlightProps
216
+ }) => {
217
+ return /* @__PURE__ */ jsxRuntime.jsx(CursorSpotlight, { ...spotlightProps, className: "ds-spotlight-card", children: /* @__PURE__ */ jsxRuntime.jsxs(
218
+ "div",
219
+ {
220
+ className: "ds-spotlight-card__inner",
221
+ onClick,
222
+ role: onClick ? "button" : void 0,
223
+ tabIndex: onClick ? 0 : void 0,
224
+ onKeyDown: onClick ? (e) => {
225
+ if (e.key === "Enter" || e.key === " ") {
226
+ e.preventDefault();
227
+ onClick();
228
+ }
229
+ } : void 0,
230
+ children: [
231
+ icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-spotlight-card__icon", children: icon }),
232
+ title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-spotlight-card__title", children: title }),
233
+ description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-spotlight-card__description", children: description }),
234
+ children
235
+ ]
236
+ }
237
+ ) });
238
+ };
239
+ SpotlightCard.displayName = "SpotlightCard";
240
+ var steps = [
241
+ {
242
+ id: "test",
243
+ label: "Test Audience & Messaging",
244
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
245
+ "svg",
246
+ {
247
+ width: "24",
248
+ height: "24",
249
+ viewBox: "0 0 24 24",
250
+ fill: "none",
251
+ xmlns: "http://www.w3.org/2000/svg",
252
+ children: /* @__PURE__ */ jsxRuntime.jsx(
253
+ "path",
254
+ {
255
+ 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",
256
+ stroke: "currentColor",
257
+ strokeWidth: "2",
258
+ strokeLinecap: "round",
259
+ strokeLinejoin: "round"
260
+ }
261
+ )
262
+ }
263
+ )
264
+ },
265
+ {
266
+ id: "execute",
267
+ label: "Execute Outreach",
268
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
269
+ "svg",
270
+ {
271
+ width: "24",
272
+ height: "24",
273
+ viewBox: "0 0 24 24",
274
+ fill: "none",
275
+ xmlns: "http://www.w3.org/2000/svg",
276
+ children: /* @__PURE__ */ jsxRuntime.jsx(
277
+ "path",
278
+ {
279
+ d: "M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2Z",
280
+ stroke: "currentColor",
281
+ strokeWidth: "2",
282
+ strokeLinecap: "round",
283
+ strokeLinejoin: "round"
284
+ }
285
+ )
286
+ }
287
+ )
288
+ },
289
+ {
290
+ id: "results",
291
+ label: "Book Meetings",
292
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
293
+ "svg",
294
+ {
295
+ width: "24",
296
+ height: "24",
297
+ viewBox: "0 0 24 24",
298
+ fill: "none",
299
+ xmlns: "http://www.w3.org/2000/svg",
300
+ children: /* @__PURE__ */ jsxRuntime.jsx(
301
+ "path",
302
+ {
303
+ 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",
304
+ stroke: "currentColor",
305
+ strokeWidth: "2",
306
+ strokeLinecap: "round",
307
+ strokeLinejoin: "round"
308
+ }
309
+ )
310
+ }
311
+ )
312
+ }
313
+ ];
314
+ var RevenueAutomationLoop = ({ className }) => {
315
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("ds-revenue-loop", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__circle", children: [
316
+ /* @__PURE__ */ jsxRuntime.jsxs(
317
+ "svg",
318
+ {
319
+ className: "ds-revenue-loop__ring",
320
+ viewBox: "0 0 400 400",
321
+ fill: "none",
322
+ xmlns: "http://www.w3.org/2000/svg",
323
+ children: [
324
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
325
+ /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "loopGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
326
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
327
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "var(--brand-yellow)" }),
328
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-pink)" })
329
+ ] }),
330
+ /* @__PURE__ */ jsxRuntime.jsx(
331
+ "marker",
332
+ {
333
+ id: "arrowhead",
334
+ markerWidth: "10",
335
+ markerHeight: "7",
336
+ refX: "9",
337
+ refY: "3.5",
338
+ orient: "auto",
339
+ children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "url(#loopGradient)" })
340
+ }
341
+ )
342
+ ] }),
343
+ /* @__PURE__ */ jsxRuntime.jsx(
344
+ "circle",
345
+ {
346
+ cx: "200",
347
+ cy: "200",
348
+ r: "190",
349
+ stroke: "var(--rim-light-bottom)",
350
+ strokeWidth: "1",
351
+ strokeDasharray: "4 4",
352
+ className: "ds-revenue-loop__track"
353
+ }
354
+ ),
355
+ /* @__PURE__ */ jsxRuntime.jsx(
356
+ framerMotion.motion.circle,
357
+ {
358
+ cx: "200",
359
+ cy: "200",
360
+ r: "190",
361
+ stroke: "url(#loopGradient)",
362
+ strokeWidth: "2",
363
+ fill: "none",
364
+ strokeLinecap: "round",
365
+ initial: { pathLength: 0, rotate: -90 },
366
+ animate: { pathLength: 1, rotate: -90 },
367
+ transition: {
368
+ duration: 4,
369
+ ease: "linear",
370
+ repeat: Infinity
371
+ }
372
+ }
373
+ )
374
+ ]
375
+ }
376
+ ),
377
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__hub", children: [
378
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__hub-glow" }),
379
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__hub-content", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-revenue-loop__logo", children: "AI" }) })
380
+ ] }),
381
+ steps.map((step, index) => {
382
+ const angle = index * 360 / steps.length - 90;
383
+ const radius = 190;
384
+ const x = 200 + radius * Math.cos(angle * Math.PI / 180);
385
+ const y = 200 + radius * Math.sin(angle * Math.PI / 180);
386
+ return /* @__PURE__ */ jsxRuntime.jsxs(
387
+ framerMotion.motion.div,
388
+ {
389
+ className: "ds-revenue-loop__node",
390
+ style: {
391
+ left: `${x / 400 * 100}%`,
392
+ top: `${y / 400 * 100}%`
393
+ },
394
+ initial: { opacity: 0, scale: 0.8 },
395
+ animate: { opacity: 1, scale: 1 },
396
+ transition: { delay: index * 0.5 },
397
+ children: [
398
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__icon", children: step.icon }),
399
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-revenue-loop__label", children: step.label })
400
+ ]
401
+ },
402
+ step.id
403
+ );
404
+ })
405
+ ] }) });
406
+ };
407
+ var EASE_PREMIUM = [0.22, 1, 0.36, 1];
408
+ var SCENE_TIMING = {
409
+ init: 0,
410
+ funnel: 1500,
411
+ qualification: 3500,
412
+ meeting: 5500,
413
+ mapping: 6500,
414
+ scaling: 8500
415
+ };
416
+ var HOLD_DURATION = 1200;
417
+ var TOTAL_DURATION = 1e4 + HOLD_DURATION;
418
+ var LINKEDIN_STEPS = [
419
+ { id: "follow", label: "Profile Follow" },
420
+ { id: "visit", label: "Profile Visit" },
421
+ { id: "connect", label: "Connection Request" },
422
+ { id: "msg1", label: "Message 1" },
423
+ { id: "msg2", label: "Message 2" },
424
+ { id: "msg3", label: "Message 3" }
425
+ ];
426
+ var FUNNEL_STAGES = [
427
+ { id: "awareness", label: "Awareness", num: 1 },
428
+ { id: "discovery", label: "Discovery", num: 2 },
429
+ { id: "evaluation", label: "Evaluation", num: 3 },
430
+ { id: "intent", label: "Intent", num: 4 },
431
+ { id: "negotiation", label: "Negotiation", num: 5 },
432
+ { id: "purchase", label: "Purchase", num: 6 }
433
+ ];
434
+ var WINNING_BULLETS = [
435
+ "Target audience validated & segmented",
436
+ "Messaging sequence A/B tested",
437
+ "Optimal send times confirmed",
438
+ "Response rate > benchmark threshold",
439
+ "Conversion path verified end-to-end"
440
+ ];
441
+ var SCALING_CHECKS = [
442
+ "Volume multiplied to 9 senders",
443
+ "All sequences templated & locked",
444
+ "Auto-qualification active",
445
+ "Meeting pipeline on autopilot"
446
+ ];
447
+ var AntSVG = ({ size = 28, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
448
+ "svg",
449
+ {
450
+ className,
451
+ width: size,
452
+ height: size,
453
+ viewBox: "0 0 28 28",
454
+ fill: "none",
455
+ xmlns: "http://www.w3.org/2000/svg",
456
+ "aria-hidden": "true",
457
+ children: [
458
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
459
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
460
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
461
+ ] }) }),
462
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14", cy: "6", r: "4", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
463
+ /* @__PURE__ */ jsxRuntime.jsx(
464
+ "line",
465
+ {
466
+ x1: "11",
467
+ y1: "3",
468
+ x2: "7",
469
+ y2: "0.5",
470
+ stroke: "rgba(255,255,255,0.1)",
471
+ strokeWidth: "1",
472
+ strokeLinecap: "round"
473
+ }
474
+ ),
475
+ /* @__PURE__ */ jsxRuntime.jsx(
476
+ "line",
477
+ {
478
+ x1: "17",
479
+ y1: "3",
480
+ x2: "21",
481
+ y2: "0.5",
482
+ stroke: "rgba(255,255,255,0.1)",
483
+ strokeWidth: "1",
484
+ strokeLinecap: "round"
485
+ }
486
+ ),
487
+ /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "14", cy: "13", rx: "3.5", ry: "3", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
488
+ /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "14", cy: "22", rx: "5", ry: "5", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
489
+ /* @__PURE__ */ jsxRuntime.jsx(
490
+ "line",
491
+ {
492
+ x1: "10.5",
493
+ y1: "11",
494
+ x2: "5",
495
+ y2: "9",
496
+ stroke: "rgba(255,255,255,0.1)",
497
+ strokeWidth: "0.8",
498
+ strokeLinecap: "round"
499
+ }
500
+ ),
501
+ /* @__PURE__ */ jsxRuntime.jsx(
502
+ "line",
503
+ {
504
+ x1: "17.5",
505
+ y1: "11",
506
+ x2: "23",
507
+ y2: "9",
508
+ stroke: "rgba(255,255,255,0.1)",
509
+ strokeWidth: "0.8",
510
+ strokeLinecap: "round"
511
+ }
512
+ ),
513
+ /* @__PURE__ */ jsxRuntime.jsx(
514
+ "line",
515
+ {
516
+ x1: "10.5",
517
+ y1: "13",
518
+ x2: "4",
519
+ y2: "14",
520
+ stroke: "rgba(255,255,255,0.1)",
521
+ strokeWidth: "0.8",
522
+ strokeLinecap: "round"
523
+ }
524
+ ),
525
+ /* @__PURE__ */ jsxRuntime.jsx(
526
+ "line",
527
+ {
528
+ x1: "17.5",
529
+ y1: "13",
530
+ x2: "24",
531
+ y2: "14",
532
+ stroke: "rgba(255,255,255,0.1)",
533
+ strokeWidth: "0.8",
534
+ strokeLinecap: "round"
535
+ }
536
+ ),
537
+ /* @__PURE__ */ jsxRuntime.jsx(
538
+ "line",
539
+ {
540
+ x1: "10.5",
541
+ y1: "15",
542
+ x2: "5",
543
+ y2: "18",
544
+ stroke: "rgba(255,255,255,0.1)",
545
+ strokeWidth: "0.8",
546
+ strokeLinecap: "round"
547
+ }
548
+ ),
549
+ /* @__PURE__ */ jsxRuntime.jsx(
550
+ "line",
551
+ {
552
+ x1: "17.5",
553
+ y1: "15",
554
+ x2: "23",
555
+ y2: "18",
556
+ stroke: "rgba(255,255,255,0.1)",
557
+ strokeWidth: "0.8",
558
+ strokeLinecap: "round"
559
+ }
560
+ ),
561
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" }),
562
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" })
563
+ ]
564
+ }
565
+ );
566
+ var SwarmAntSVG = () => /* @__PURE__ */ jsxRuntime.jsxs(
567
+ "svg",
568
+ {
569
+ width: "16",
570
+ height: "16",
571
+ viewBox: "0 0 16 16",
572
+ fill: "none",
573
+ xmlns: "http://www.w3.org/2000/svg",
574
+ "aria-hidden": "true",
575
+ children: [
576
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "3.5", r: "2.5", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
577
+ /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "8", cy: "8", rx: "2", ry: "1.8", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
578
+ /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "8", cy: "13", rx: "3", ry: "3", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" })
579
+ ]
580
+ }
581
+ );
582
+ var CalendarIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
583
+ "svg",
584
+ {
585
+ width: "20",
586
+ height: "20",
587
+ viewBox: "0 0 20 20",
588
+ fill: "none",
589
+ xmlns: "http://www.w3.org/2000/svg",
590
+ "aria-hidden": "true",
591
+ children: [
592
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "16", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
593
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }),
594
+ /* @__PURE__ */ jsxRuntime.jsx(
595
+ "line",
596
+ {
597
+ x1: "6",
598
+ y1: "2",
599
+ x2: "6",
600
+ y2: "6",
601
+ stroke: "currentColor",
602
+ strokeWidth: "1.5",
603
+ strokeLinecap: "round"
604
+ }
605
+ ),
606
+ /* @__PURE__ */ jsxRuntime.jsx(
607
+ "line",
608
+ {
609
+ x1: "14",
610
+ y1: "2",
611
+ x2: "14",
612
+ y2: "6",
613
+ stroke: "currentColor",
614
+ strokeWidth: "1.5",
615
+ strokeLinecap: "round"
616
+ }
617
+ ),
618
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "10", width: "3", height: "3", rx: "0.5", fill: "currentColor", opacity: "0.5" })
619
+ ]
620
+ }
621
+ );
622
+ var LockIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
623
+ "svg",
624
+ {
625
+ width: "12",
626
+ height: "12",
627
+ viewBox: "0 0 12 12",
628
+ fill: "none",
629
+ xmlns: "http://www.w3.org/2000/svg",
630
+ "aria-hidden": "true",
631
+ children: [
632
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
633
+ /* @__PURE__ */ jsxRuntime.jsx(
634
+ "path",
635
+ {
636
+ d: "M4 5V3.5C4 2.4 4.9 1.5 6 1.5C7.1 1.5 8 2.4 8 3.5V5",
637
+ stroke: "currentColor",
638
+ strokeWidth: "1.2",
639
+ strokeLinecap: "round"
640
+ }
641
+ )
642
+ ]
643
+ }
644
+ );
645
+ var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
646
+ "svg",
647
+ {
648
+ className: "ds-funnel-scaling__scaling-check",
649
+ width: "14",
650
+ height: "14",
651
+ viewBox: "0 0 14 14",
652
+ fill: "none",
653
+ xmlns: "http://www.w3.org/2000/svg",
654
+ "aria-hidden": "true",
655
+ children: [
656
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.2" }),
657
+ /* @__PURE__ */ jsxRuntime.jsx(
658
+ "polyline",
659
+ {
660
+ points: "4,7 6,9.5 10,4.5",
661
+ stroke: "currentColor",
662
+ strokeWidth: "1.4",
663
+ strokeLinecap: "round",
664
+ strokeLinejoin: "round",
665
+ fill: "none"
666
+ }
667
+ )
668
+ ]
669
+ }
670
+ );
671
+ var NodeDot = () => /* @__PURE__ */ jsxRuntime.jsxs(
672
+ "svg",
673
+ {
674
+ className: "ds-funnel-scaling__flow-icon",
675
+ width: "20",
676
+ height: "20",
677
+ viewBox: "0 0 20 20",
678
+ fill: "none",
679
+ xmlns: "http://www.w3.org/2000/svg",
680
+ "aria-hidden": "true",
681
+ children: [
682
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
683
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
684
+ ]
685
+ }
686
+ );
687
+ var containerStagger = {
688
+ hidden: { opacity: 0 },
689
+ show: {
690
+ opacity: 1,
691
+ transition: { staggerChildren: 0.1 }
692
+ }
693
+ };
694
+ var cardReveal = {
695
+ hidden: { opacity: 0, y: 40 },
696
+ show: {
697
+ opacity: 1,
698
+ y: 0,
699
+ transition: { duration: 0.6, ease: EASE_PREMIUM }
700
+ }
701
+ };
702
+ var bulletStagger = {
703
+ hidden: { opacity: 0, x: -8 },
704
+ show: {
705
+ opacity: 1,
706
+ x: 0,
707
+ transition: { duration: 0.3, ease: EASE_PREMIUM }
708
+ }
709
+ };
710
+ var stepNode = {
711
+ hidden: { opacity: 0, scaleY: 0.85 },
712
+ show: {
713
+ opacity: 1,
714
+ scaleY: 1,
715
+ transition: { duration: 0.35, ease: EASE_PREMIUM }
716
+ }
717
+ };
718
+ var funnelLayer = {
719
+ hidden: { opacity: 0, y: 20 },
720
+ show: {
721
+ opacity: 1,
722
+ y: 0,
723
+ transition: { duration: 0.4, ease: EASE_PREMIUM }
724
+ }
725
+ };
726
+ var fadeSlideUp = {
727
+ hidden: { opacity: 0, y: 30 },
728
+ show: {
729
+ opacity: 1,
730
+ y: 0,
731
+ transition: { duration: 0.5, ease: EASE_PREMIUM }
732
+ }
733
+ };
734
+ var scalePulse = {
735
+ hidden: { scale: 1 },
736
+ show: {
737
+ scale: [1, 1.04, 1],
738
+ transition: { duration: 0.6, ease: EASE_PREMIUM }
739
+ }
740
+ };
741
+ var swarmEntry = {
742
+ hidden: { opacity: 0, scale: 0.8 },
743
+ show: {
744
+ opacity: 1,
745
+ scale: 1,
746
+ transition: { duration: 0.35, ease: EASE_PREMIUM }
747
+ }
748
+ };
749
+ var qualBlockLeft = {
750
+ hidden: { opacity: 0, x: -60 },
751
+ show: {
752
+ opacity: 1,
753
+ x: 0,
754
+ transition: { duration: 0.5, ease: EASE_PREMIUM }
755
+ }
756
+ };
757
+ var qualBlockRight = {
758
+ hidden: { opacity: 0, x: 60 },
759
+ show: {
760
+ opacity: 1,
761
+ x: 0,
762
+ transition: { duration: 0.5, ease: EASE_PREMIUM }
763
+ }
764
+ };
765
+ function useSceneTimeline(isInView, autoPlay, loop, reducedMotion) {
766
+ const [scene, setScene] = React3.useState("idle");
767
+ const timerRef = React3.useRef([]);
768
+ const clearTimers = React3.useCallback(() => {
769
+ timerRef.current.forEach(clearTimeout);
770
+ timerRef.current = [];
771
+ }, []);
772
+ const startTimeline = React3.useCallback(() => {
773
+ clearTimers();
774
+ const scenes = [
775
+ "init",
776
+ "funnel",
777
+ "qualification",
778
+ "meeting",
779
+ "mapping",
780
+ "scaling"
781
+ ];
782
+ if (reducedMotion) {
783
+ setScene("scaling");
784
+ return;
785
+ }
786
+ scenes.forEach((s) => {
787
+ const id = setTimeout(() => setScene(s), SCENE_TIMING[s]);
788
+ timerRef.current.push(id);
789
+ });
790
+ if (loop) {
791
+ const loopId = setTimeout(() => {
792
+ setScene("idle");
793
+ const restartId = setTimeout(() => startTimeline(), 100);
794
+ timerRef.current.push(restartId);
795
+ }, TOTAL_DURATION);
796
+ timerRef.current.push(loopId);
797
+ }
798
+ }, [clearTimers, loop, reducedMotion]);
799
+ React3.useEffect(() => {
800
+ if (isInView && autoPlay) {
801
+ startTimeline();
802
+ }
803
+ return clearTimers;
804
+ }, [isInView, autoPlay, startTimeline, clearTimers]);
805
+ return scene;
806
+ }
807
+ function isAtOrPast(current, target) {
808
+ const order = [
809
+ "idle",
810
+ "init",
811
+ "funnel",
812
+ "qualification",
813
+ "meeting",
814
+ "mapping",
815
+ "scaling"
816
+ ];
817
+ return order.indexOf(current) >= order.indexOf(target);
818
+ }
819
+ var FunnelScalingSender = ({
820
+ className,
821
+ autoPlay = true,
822
+ loop = true
823
+ }) => {
824
+ const containerRef = React3.useRef(null);
825
+ const isInView = framerMotion.useInView(containerRef, { once: false, amount: 0.3 });
826
+ const reducedMotion = framerMotion.useReducedMotion();
827
+ const scene = useSceneTimeline(isInView, autoPlay, loop, reducedMotion);
828
+ const isActive = scene !== "idle";
829
+ const showInit = isAtOrPast(scene, "init");
830
+ const showFunnel = isAtOrPast(scene, "funnel");
831
+ const showQualification = isAtOrPast(scene, "qualification");
832
+ const showMeeting = isAtOrPast(scene, "meeting");
833
+ const showMapping = isAtOrPast(scene, "mapping");
834
+ const showScaling = isAtOrPast(scene, "scaling");
835
+ return /* @__PURE__ */ jsxRuntime.jsxs(
836
+ "div",
837
+ {
838
+ ref: containerRef,
839
+ className: clsx2__default.default("ds-funnel-scaling", className),
840
+ role: "img",
841
+ "aria-label": "Animated illustration: SalesMind scaling funnel from the sender perspective \u2014 showing how validated outreach becomes an automated pipeline machine",
842
+ children: [
843
+ /* @__PURE__ */ jsxRuntime.jsx(
844
+ framerMotion.motion.div,
845
+ {
846
+ className: "ds-funnel-scaling__bg",
847
+ initial: { opacity: 0 },
848
+ animate: { opacity: isActive ? 1 : 0 },
849
+ transition: { duration: 0.4 }
850
+ }
851
+ ),
852
+ /* @__PURE__ */ jsxRuntime.jsx(
853
+ framerMotion.motion.div,
854
+ {
855
+ className: "ds-funnel-scaling__grid",
856
+ initial: { opacity: 0 },
857
+ animate: { opacity: isActive ? 1 : 0 },
858
+ transition: { duration: 0.4, delay: 0.6 }
859
+ }
860
+ ),
861
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
862
+ /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
863
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
864
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
865
+ ] }),
866
+ /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "fscFlowGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
867
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
868
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
869
+ ] }),
870
+ /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "fscQualGrad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
871
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
872
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
873
+ ] })
874
+ ] }) }),
875
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__canvas", children: [
876
+ /* @__PURE__ */ jsxRuntime.jsxs(
877
+ framerMotion.motion.div,
878
+ {
879
+ className: "ds-funnel-scaling__winning-card",
880
+ variants: cardReveal,
881
+ initial: "hidden",
882
+ animate: showInit ? "show" : "hidden",
883
+ children: [
884
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__winning-header", children: "Solution" }),
885
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__winning-title", children: "Winning Combination" }),
886
+ /* @__PURE__ */ jsxRuntime.jsx(
887
+ framerMotion.motion.ul,
888
+ {
889
+ className: "ds-funnel-scaling__winning-bullets",
890
+ variants: containerStagger,
891
+ initial: "hidden",
892
+ animate: showInit ? "show" : "hidden",
893
+ children: WINNING_BULLETS.map((bullet) => /* @__PURE__ */ jsxRuntime.jsx(
894
+ framerMotion.motion.li,
895
+ {
896
+ className: "ds-funnel-scaling__winning-bullet",
897
+ variants: bulletStagger,
898
+ children: bullet
899
+ },
900
+ bullet
901
+ ))
902
+ }
903
+ ),
904
+ /* @__PURE__ */ jsxRuntime.jsxs(
905
+ framerMotion.motion.div,
906
+ {
907
+ className: "ds-funnel-scaling__winning-lock",
908
+ initial: { opacity: 0 },
909
+ animate: { opacity: showInit ? 1 : 0 },
910
+ transition: { delay: 0.8, duration: 0.4 },
911
+ children: [
912
+ /* @__PURE__ */ jsxRuntime.jsx(LockIcon, {}),
913
+ " Validated & Locked"
914
+ ]
915
+ }
916
+ )
917
+ ]
918
+ }
919
+ ),
920
+ /* @__PURE__ */ jsxRuntime.jsxs(
921
+ framerMotion.motion.div,
922
+ {
923
+ className: "ds-funnel-scaling__flow",
924
+ variants: containerStagger,
925
+ initial: "hidden",
926
+ animate: showFunnel ? "show" : "hidden",
927
+ children: [
928
+ LINKEDIN_STEPS.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
929
+ /* @__PURE__ */ jsxRuntime.jsxs(
930
+ framerMotion.motion.div,
931
+ {
932
+ className: clsx2__default.default(
933
+ "ds-funnel-scaling__flow-node",
934
+ showFunnel && "ds-funnel-scaling__flow-node--active"
935
+ ),
936
+ variants: stepNode,
937
+ custom: i,
938
+ children: [
939
+ /* @__PURE__ */ jsxRuntime.jsx(NodeDot, {}),
940
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__flow-label", children: step.label })
941
+ ]
942
+ }
943
+ ),
944
+ i < LINKEDIN_STEPS.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
945
+ framerMotion.motion.svg,
946
+ {
947
+ className: "ds-funnel-scaling__flow-connector",
948
+ width: "2",
949
+ height: "12",
950
+ viewBox: "0 0 2 12",
951
+ initial: { scaleY: 0, opacity: 0 },
952
+ animate: showFunnel ? { scaleY: 1, opacity: 1 } : { scaleY: 0, opacity: 0 },
953
+ transition: { duration: 0.3, delay: 0.1 * (i + 1), ease: EASE_PREMIUM },
954
+ style: { transformOrigin: "top" },
955
+ children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "2", height: "12", fill: "url(#fscFlowGrad)", rx: "1" })
956
+ }
957
+ )
958
+ ] }, step.id)),
959
+ showFunnel && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", height: 0 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
960
+ framerMotion.motion.div,
961
+ {
962
+ className: "ds-funnel-scaling__ant ds-funnel-scaling__ant--ghost",
963
+ initial: { opacity: 0, x: -20 + i * 15, y: -10 },
964
+ animate: showFunnel ? { opacity: 0.35, x: -10 + i * 18, y: 0 } : { opacity: 0 },
965
+ transition: { delay: 1.2 + i * 0.15, duration: 0.4, ease: EASE_PREMIUM },
966
+ style: { position: "absolute" },
967
+ children: /* @__PURE__ */ jsxRuntime.jsx(AntSVG, { size: 20 })
968
+ },
969
+ `ghost-${i}`
970
+ )) })
971
+ ]
972
+ }
973
+ ),
974
+ /* @__PURE__ */ jsxRuntime.jsxs(
975
+ framerMotion.motion.div,
976
+ {
977
+ className: "ds-funnel-scaling__qualification",
978
+ initial: { opacity: 0, scale: 0.9 },
979
+ animate: showQualification ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 },
980
+ transition: { duration: 0.6, ease: EASE_PREMIUM },
981
+ children: [
982
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__qual-ring", children: [
983
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 180 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
984
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "90", r: "70", stroke: "rgba(255,255,255,0.06)", strokeWidth: "1" }),
985
+ /* @__PURE__ */ jsxRuntime.jsx(
986
+ framerMotion.motion.circle,
987
+ {
988
+ cx: "90",
989
+ cy: "90",
990
+ r: "70",
991
+ stroke: "url(#fscQualGrad)",
992
+ strokeWidth: "2",
993
+ fill: "none",
994
+ strokeLinecap: "round",
995
+ strokeDasharray: "440",
996
+ initial: { strokeDashoffset: 440 },
997
+ animate: showQualification ? { strokeDashoffset: 0 } : { strokeDashoffset: 440 },
998
+ transition: { duration: 0.8, ease: EASE_PREMIUM }
999
+ }
1000
+ ),
1001
+ /* @__PURE__ */ jsxRuntime.jsx(
1002
+ framerMotion.motion.polygon,
1003
+ {
1004
+ points: "155,80 165,90 155,100",
1005
+ fill: "var(--brand-pink)",
1006
+ initial: { opacity: 0 },
1007
+ animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
1008
+ transition: { delay: 0.6, duration: 0.3 }
1009
+ }
1010
+ ),
1011
+ /* @__PURE__ */ jsxRuntime.jsx(
1012
+ framerMotion.motion.polygon,
1013
+ {
1014
+ points: "25,100 15,90 25,80",
1015
+ fill: "var(--brand-yellow)",
1016
+ initial: { opacity: 0 },
1017
+ animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
1018
+ transition: { delay: 0.7, duration: 0.3 }
1019
+ }
1020
+ )
1021
+ ] }),
1022
+ /* @__PURE__ */ jsxRuntime.jsx(
1023
+ framerMotion.motion.div,
1024
+ {
1025
+ className: "ds-funnel-scaling__qual-center",
1026
+ initial: { opacity: 0 },
1027
+ animate: showQualification ? { opacity: 1 } : { opacity: 0 },
1028
+ transition: { delay: 0.8, duration: 0.4 },
1029
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__qual-text", children: "Qualification happens during the conversation" })
1030
+ }
1031
+ ),
1032
+ showQualification && !reducedMotion && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: showScaling ? 9 : 3 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
1033
+ framerMotion.motion.div,
1034
+ {
1035
+ className: "ds-funnel-scaling__swarm-ant",
1036
+ variants: swarmEntry,
1037
+ initial: "hidden",
1038
+ animate: "show",
1039
+ transition: { delay: i * 0.08 },
1040
+ style: {
1041
+ animationDelay: `${-(i * (3 / (showScaling ? 9 : 3)))}s`
1042
+ },
1043
+ children: /* @__PURE__ */ jsxRuntime.jsx(SwarmAntSVG, {})
1044
+ },
1045
+ `swarm-${i}`
1046
+ )) })
1047
+ ] }),
1048
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__qual-blocks", children: [
1049
+ /* @__PURE__ */ jsxRuntime.jsx(
1050
+ framerMotion.motion.div,
1051
+ {
1052
+ className: "ds-funnel-scaling__qual-block",
1053
+ variants: qualBlockLeft,
1054
+ initial: "hidden",
1055
+ animate: showQualification ? "show" : "hidden",
1056
+ children: "Reply Handling"
1057
+ }
1058
+ ),
1059
+ /* @__PURE__ */ jsxRuntime.jsx(
1060
+ framerMotion.motion.div,
1061
+ {
1062
+ className: "ds-funnel-scaling__qual-block",
1063
+ variants: qualBlockRight,
1064
+ initial: "hidden",
1065
+ animate: showQualification ? "show" : "hidden",
1066
+ children: "Follow-up Sequence"
1067
+ }
1068
+ )
1069
+ ] })
1070
+ ]
1071
+ }
1072
+ ),
1073
+ /* @__PURE__ */ jsxRuntime.jsxs(
1074
+ framerMotion.motion.div,
1075
+ {
1076
+ className: "ds-funnel-scaling__funnel",
1077
+ variants: containerStagger,
1078
+ initial: "hidden",
1079
+ animate: showMapping ? "show" : "hidden",
1080
+ children: [
1081
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__funnel-header", children: "Sales Funnel Stages" }),
1082
+ FUNNEL_STAGES.map((stage) => {
1083
+ const isHighlight = stage.id === "evaluation" || stage.id === "intent";
1084
+ const isDim = showMapping && !isHighlight;
1085
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1086
+ framerMotion.motion.div,
1087
+ {
1088
+ className: clsx2__default.default(
1089
+ "ds-funnel-scaling__funnel-stage",
1090
+ isHighlight && showMapping && "ds-funnel-scaling__funnel-stage--highlight",
1091
+ isDim && "ds-funnel-scaling__funnel-stage--dim"
1092
+ ),
1093
+ variants: funnelLayer,
1094
+ children: [
1095
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__funnel-num", children: stage.num }),
1096
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__funnel-label", children: stage.label })
1097
+ ]
1098
+ },
1099
+ stage.id
1100
+ );
1101
+ })
1102
+ ]
1103
+ }
1104
+ )
1105
+ ] }),
1106
+ /* @__PURE__ */ jsxRuntime.jsx(
1107
+ framerMotion.motion.div,
1108
+ {
1109
+ className: "ds-funnel-scaling__meeting",
1110
+ variants: fadeSlideUp,
1111
+ initial: "hidden",
1112
+ animate: showMeeting ? "show" : "hidden",
1113
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1114
+ framerMotion.motion.div,
1115
+ {
1116
+ variants: scalePulse,
1117
+ initial: "hidden",
1118
+ animate: showMeeting ? "show" : "hidden",
1119
+ style: { display: "flex", alignItems: "center", gap: "12px" },
1120
+ children: [
1121
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-scaling__meeting-icon", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }),
1122
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-scaling__meeting-label", children: "Meeting Booked" })
1123
+ ]
1124
+ }
1125
+ )
1126
+ }
1127
+ ),
1128
+ showMeeting && showMapping && /* @__PURE__ */ jsxRuntime.jsxs(
1129
+ framerMotion.motion.svg,
1130
+ {
1131
+ className: "ds-funnel-scaling__data-line",
1132
+ style: { right: 240, bottom: 80, width: 120, height: 200 },
1133
+ viewBox: "0 0 120 200",
1134
+ initial: { opacity: 0 },
1135
+ animate: { opacity: 0.4 },
1136
+ transition: { delay: 0.3, duration: 0.5 },
1137
+ children: [
1138
+ /* @__PURE__ */ jsxRuntime.jsx(
1139
+ framerMotion.motion.path,
1140
+ {
1141
+ d: "M 0 200 C 20 150, 80 100, 120 40",
1142
+ stroke: "url(#fscFlowGrad)",
1143
+ strokeWidth: "1.5",
1144
+ fill: "none",
1145
+ strokeLinecap: "round",
1146
+ initial: { pathLength: 0 },
1147
+ animate: { pathLength: 1 },
1148
+ transition: { duration: 0.8, ease: EASE_PREMIUM, delay: 0.2 }
1149
+ }
1150
+ ),
1151
+ /* @__PURE__ */ jsxRuntime.jsx(
1152
+ framerMotion.motion.circle,
1153
+ {
1154
+ cx: "120",
1155
+ cy: "40",
1156
+ r: "3",
1157
+ fill: "var(--brand-pink)",
1158
+ initial: { opacity: 0, scale: 0 },
1159
+ animate: { opacity: 1, scale: 1 },
1160
+ transition: { delay: 1, duration: 0.3 }
1161
+ }
1162
+ )
1163
+ ]
1164
+ }
1165
+ ),
1166
+ /* @__PURE__ */ jsxRuntime.jsxs(
1167
+ framerMotion.motion.div,
1168
+ {
1169
+ className: "ds-funnel-scaling__scaling-panel",
1170
+ initial: { opacity: 0, y: 20 },
1171
+ animate: showScaling ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },
1172
+ transition: { duration: 0.5, ease: EASE_PREMIUM },
1173
+ children: [
1174
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-scaling__scaling-header", children: [
1175
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 1L11 6L6 11L1 6Z", stroke: "currentColor", strokeWidth: "1.2" }) }),
1176
+ "Scaling Mode"
1177
+ ] }),
1178
+ SCALING_CHECKS.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
1179
+ framerMotion.motion.div,
1180
+ {
1181
+ className: "ds-funnel-scaling__scaling-item",
1182
+ initial: { opacity: 0, x: -10 },
1183
+ animate: showScaling ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 },
1184
+ transition: { delay: 0.15 + i * 0.12, duration: 0.35, ease: EASE_PREMIUM },
1185
+ children: [
1186
+ /* @__PURE__ */ jsxRuntime.jsx(
1187
+ framerMotion.motion.div,
1188
+ {
1189
+ initial: { scale: 0 },
1190
+ animate: showScaling ? { scale: 1 } : { scale: 0 },
1191
+ transition: { delay: 0.25 + i * 0.12, duration: 0.3, ease: EASE_PREMIUM },
1192
+ children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
1193
+ }
1194
+ ),
1195
+ item
1196
+ ]
1197
+ },
1198
+ item
1199
+ ))
1200
+ ]
1201
+ }
1202
+ ),
1203
+ /* @__PURE__ */ jsxRuntime.jsx(
1204
+ framerMotion.motion.div,
1205
+ {
1206
+ className: "ds-funnel-scaling__ant",
1207
+ initial: { opacity: 0, x: -40, y: 100 },
1208
+ 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 },
1209
+ transition: {
1210
+ duration: 0.8,
1211
+ ease: EASE_PREMIUM,
1212
+ opacity: { duration: 0.4 }
1213
+ },
1214
+ children: /* @__PURE__ */ jsxRuntime.jsx(AntSVG, {})
1215
+ }
1216
+ )
1217
+ ]
1218
+ }
1219
+ );
1220
+ };
1221
+ FunnelScalingSender.displayName = "FunnelScalingSender";
1222
+
1223
+ exports.CursorSpotlight = CursorSpotlight;
1224
+ exports.FunnelScalingSender = FunnelScalingSender;
1225
+ exports.MotionContainer = MotionContainer;
1226
+ exports.MotionText = MotionText;
1227
+ exports.RevenueAutomationLoop = RevenueAutomationLoop;
1228
+ exports.SpotlightCard = SpotlightCard;
1229
+ //# sourceMappingURL=out.js.map
1230
+ //# sourceMappingURL=index.cjs.map