@gravity-ai/react 1.1.4 → 1.1.6

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 (6) hide show
  1. package/README.md +149 -5
  2. package/dist/index.d.mts +102 -115
  3. package/dist/index.d.ts +102 -115
  4. package/dist/index.js +1217 -156
  5. package/dist/index.mjs +1216 -155
  6. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // src/components/AdBanner.tsx
1
+ // src/components/GravityAd.tsx
2
2
  import { useState } from "react";
3
3
 
4
4
  // src/hooks/useAdTracking.ts
@@ -9,180 +9,1231 @@ function useAdTracking({
9
9
  onImpression,
10
10
  onClickTracked
11
11
  }) {
12
- const impressionTracked = useRef(false);
12
+ const containerRef = useRef(null);
13
+ const impressionFired = useRef(false);
14
+ const impUrlRef = useRef(ad?.impUrl);
13
15
  useEffect(() => {
14
- if (!ad || !ad.impUrl || disableImpressionTracking || impressionTracked.current) {
16
+ if (ad?.impUrl !== impUrlRef.current) {
17
+ impressionFired.current = false;
18
+ impUrlRef.current = ad?.impUrl;
19
+ }
20
+ }, [ad?.impUrl]);
21
+ useEffect(() => {
22
+ if (!ad?.impUrl || disableImpressionTracking || impressionFired.current) {
15
23
  return;
16
24
  }
17
- const trackImpression = async () => {
18
- try {
19
- const img = new Image();
20
- img.src = ad.impUrl;
21
- impressionTracked.current = true;
22
- onImpression?.();
23
- } catch (error) {
24
- console.error("[Gravity] Failed to track impression:", error);
25
- }
26
- };
27
- trackImpression();
25
+ const el = containerRef.current;
26
+ if (!el) return;
27
+ if (typeof IntersectionObserver === "undefined") {
28
+ fireImpression(ad.impUrl, impressionFired, onImpression);
29
+ return;
30
+ }
31
+ const observer = new IntersectionObserver(
32
+ (entries) => {
33
+ for (const entry of entries) {
34
+ if (entry.isIntersecting && !impressionFired.current && ad.impUrl) {
35
+ fireImpression(ad.impUrl, impressionFired, onImpression);
36
+ observer.disconnect();
37
+ }
38
+ }
39
+ },
40
+ { threshold: 0.5 }
41
+ );
42
+ observer.observe(el);
43
+ return () => observer.disconnect();
28
44
  }, [ad, disableImpressionTracking, onImpression]);
29
- useEffect(() => {
30
- impressionTracked.current = false;
31
- }, [ad?.impUrl]);
32
45
  const handleClick = useCallback(() => {
33
46
  if (!ad?.clickUrl) return;
34
47
  onClickTracked?.();
35
48
  }, [ad?.clickUrl, onClickTracked]);
36
49
  return {
50
+ containerRef,
37
51
  handleClick,
38
- impressionTracked: impressionTracked.current
52
+ impressionFired: impressionFired.current
39
53
  };
40
54
  }
55
+ function fireImpression(impUrl, firedRef, onImpression) {
56
+ try {
57
+ const img = new Image();
58
+ img.src = impUrl;
59
+ firedRef.current = true;
60
+ onImpression?.();
61
+ } catch {
62
+ }
63
+ }
41
64
 
42
- // src/styles.ts
43
- var baseContainerStyle = {
44
- display: "block",
45
- textDecoration: "none",
46
- cursor: "pointer",
47
- transition: "all 0.2s ease",
48
- boxSizing: "border-box",
49
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
50
- };
51
- var themeStyles = {
52
- light: {
53
- backgroundColor: "#ffffff",
54
- color: "#1a1a1a",
55
- border: "1px solid #e5e5e5",
56
- boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)"
65
+ // src/components/renderers.tsx
66
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
67
+ var FONT = 'Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
68
+ function m(base, ...ov) {
69
+ let r = base;
70
+ for (const o of ov) if (o) r = { ...r, ...o };
71
+ return r;
72
+ }
73
+ function ss(slot, base, sp, extra) {
74
+ return m(base, sp?.[slot]?.style, extra);
75
+ }
76
+ function sc(slot, sp) {
77
+ return sp?.[slot]?.className;
78
+ }
79
+ var ArrowRight = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
80
+ var ArrowUpRight = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 9L9 3M9 3H4M9 3V8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
81
+ var ChevronRight = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.3 }, children: /* @__PURE__ */ jsx("path", { d: "M5 3L9 7L5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
82
+ function WrapLink({
83
+ p,
84
+ containerStyle,
85
+ hoverStyle,
86
+ children
87
+ }) {
88
+ const style = m(containerStyle, p.hovered && hoverStyle ? hoverStyle : void 0, p.style);
89
+ return /* @__PURE__ */ jsx(
90
+ "a",
91
+ {
92
+ ...p.linkProps,
93
+ ref: p.containerRef,
94
+ className: p.className,
95
+ style,
96
+ onClick: p.handleClick,
97
+ onMouseEnter: () => p.setHovered(true),
98
+ onMouseLeave: () => p.setHovered(false),
99
+ "data-gravity-ad": true,
100
+ children
101
+ }
102
+ );
103
+ }
104
+ var D = {
105
+ container: {
106
+ display: "flex",
107
+ flexDirection: "column",
108
+ gap: 0,
109
+ padding: 0,
110
+ background: "#FFFFFF",
111
+ color: "#18181B",
112
+ border: "1px solid #E4E4E7",
113
+ borderRadius: 10,
114
+ boxShadow: "0 1px 2px 0 rgba(0,0,0,0.04),0 1px 6px 0 rgba(0,0,0,0.06)",
115
+ fontFamily: FONT,
116
+ textDecoration: "none",
117
+ cursor: "pointer",
118
+ transition: "box-shadow 150ms ease, transform 150ms ease",
119
+ boxSizing: "border-box",
120
+ lineHeight: 1.5,
121
+ position: "relative",
122
+ overflow: "hidden"
57
123
  },
58
- dark: {
59
- backgroundColor: "#1a1a1a",
60
- color: "#f5f5f5",
61
- border: "1px solid #333333",
62
- boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
124
+ containerHover: {
125
+ boxShadow: "0 4px 16px 0 rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06)",
126
+ transform: "translateY(-1px)"
63
127
  },
64
- minimal: {
65
- backgroundColor: "transparent",
66
- color: "inherit",
67
- border: "none",
68
- boxShadow: "none"
128
+ inner: { display: "flex", flexDirection: "column", gap: 10, padding: "14px 16px 16px" },
129
+ header: { display: "flex", alignItems: "center", gap: 8 },
130
+ favicon: { width: 20, height: 20, borderRadius: 4, objectFit: "contain", flexShrink: 0 },
131
+ brand: { fontSize: 13, fontWeight: 600, color: "#18181B", lineHeight: 1 },
132
+ label: {
133
+ fontSize: 10,
134
+ fontWeight: 500,
135
+ letterSpacing: "0.03em",
136
+ textTransform: "uppercase",
137
+ color: "#71717A",
138
+ lineHeight: 1,
139
+ marginLeft: "auto",
140
+ padding: "2px 6px",
141
+ border: "1px solid #E4E4E7",
142
+ borderRadius: 4
69
143
  },
70
- branded: {
71
- backgroundColor: "#6366f1",
72
- color: "#ffffff",
144
+ body: { display: "flex", flexDirection: "column", gap: 6 },
145
+ title: { fontSize: 14, fontWeight: 500, color: "#18181B", margin: 0, lineHeight: 1.4 },
146
+ text: { fontSize: 13, color: "#71717A", margin: 0, lineHeight: 1.5 },
147
+ cta: {
148
+ display: "inline-flex",
149
+ alignItems: "center",
150
+ justifyContent: "center",
151
+ alignSelf: "flex-start",
152
+ gap: 4,
153
+ padding: "7px 16px",
154
+ fontSize: 13,
155
+ fontWeight: 500,
156
+ color: "#FFFFFF",
157
+ background: "#2563EB",
73
158
  border: "none",
74
- boxShadow: "0 2px 8px rgba(99, 102, 241, 0.3)"
75
- }
76
- };
77
- var sizeStyles = {
78
- small: {
79
- padding: "8px 12px",
80
- fontSize: "13px",
81
- lineHeight: "1.4",
82
- borderRadius: "6px"
83
- },
84
- medium: {
85
- padding: "12px 16px",
86
- fontSize: "14px",
87
- lineHeight: "1.5",
88
- borderRadius: "8px"
89
- },
90
- large: {
91
- padding: "16px 20px",
92
- fontSize: "16px",
93
- lineHeight: "1.6",
94
- borderRadius: "10px"
95
- },
96
- responsive: {
97
- padding: "clamp(8px, 2vw, 16px) clamp(12px, 3vw, 20px)",
98
- fontSize: "clamp(13px, 1.5vw, 16px)",
99
- lineHeight: "1.5",
100
- borderRadius: "clamp(6px, 1vw, 10px)"
159
+ borderRadius: 6,
160
+ cursor: "pointer",
161
+ transition: "background 150ms ease",
162
+ textDecoration: "none",
163
+ lineHeight: 1,
164
+ fontFamily: "inherit",
165
+ marginTop: 2
101
166
  }
102
167
  };
103
- var baseLabelStyle = {
104
- fontSize: "10px",
168
+ var inlineLabel = {
169
+ fontSize: 10,
105
170
  fontWeight: 600,
171
+ letterSpacing: "0.06em",
106
172
  textTransform: "uppercase",
107
- letterSpacing: "0.5px",
108
- opacity: 0.7,
109
- marginBottom: "4px",
110
- display: "block"
173
+ color: "rgba(0,0,0,0.3)",
174
+ lineHeight: 1
175
+ };
176
+ var linkCta = {
177
+ fontSize: 13,
178
+ fontWeight: 600,
179
+ color: "#2563EB",
180
+ textDecoration: "none",
181
+ display: "inline-flex",
182
+ alignItems: "center",
183
+ gap: 4,
184
+ background: "none",
185
+ border: "none",
186
+ cursor: "pointer",
187
+ fontFamily: "inherit",
188
+ padding: 0
111
189
  };
112
- function getAdBannerStyles(theme, size, customStyles) {
113
- const combined = {
114
- ...baseContainerStyle,
115
- ...themeStyles[theme],
116
- ...sizeStyles[size]
190
+ function renderCard(p) {
191
+ const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
192
+ const containerStyle = ss("container", D.container, sp);
193
+ const hoverExtra = hovered ? D.containerHover : void 0;
194
+ const hasHeader = ad.favicon || ad.brandName || showLabel;
195
+ return /* @__PURE__ */ jsx(WrapLink, { p, containerStyle, hoverStyle: hoverExtra, children: /* @__PURE__ */ jsxs("div", { style: ss("inner", D.inner, sp), className: sc("inner", sp), children: [
196
+ hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", sp), children: [
197
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", D.favicon, sp), className: sc("favicon", sp), onError: (e) => {
198
+ e.target.style.display = "none";
199
+ } }),
200
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", D.brand, sp), className: sc("brand", sp), children: ad.brandName }),
201
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", D.label, sp), className: sc("label", sp), children: labelText })
202
+ ] }),
203
+ /* @__PURE__ */ jsxs("div", { style: ss("body", D.body, sp), className: sc("body", sp), children: [
204
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", D.title, sp), className: sc("title", sp), children: ad.title }),
205
+ /* @__PURE__ */ jsx("p", { style: ss("text", D.text, sp), className: sc("text", sp), children: ad.adText })
206
+ ] }),
207
+ ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", D.cta, sp), className: sc("cta", sp), children: ad.cta })
208
+ ] }) });
209
+ }
210
+ function renderInline(p) {
211
+ const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
212
+ const containerStyle = ss("container", { ...D.container, overflow: "visible" }, sp);
213
+ const hasHeader = ad.favicon || ad.brandName || showLabel;
214
+ return /* @__PURE__ */ jsx(WrapLink, { p, containerStyle, hoverStyle: hovered ? D.containerHover : void 0, children: /* @__PURE__ */ jsxs("div", { style: ss("inner", { ...D.inner, flexDirection: "row", alignItems: "center", gap: 14, padding: "12px 16px", flexWrap: "wrap" }, sp), className: sc("inner", sp), children: [
215
+ /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 140px", minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
216
+ hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", sp), children: [
217
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", D.favicon, sp), className: sc("favicon", sp), onError: (e) => {
218
+ e.target.style.display = "none";
219
+ } }),
220
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", D.brand, sp), className: sc("brand", sp), children: ad.brandName }),
221
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...D.label, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
222
+ ] }),
223
+ /* @__PURE__ */ jsxs("div", { style: ss("body", { ...D.body, gap: 2 }, sp), className: sc("body", sp), children: [
224
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", D.title, sp), className: sc("title", sp), children: ad.title }),
225
+ /* @__PURE__ */ jsx("p", { style: ss("text", D.text, sp), className: sc("text", sp), children: ad.adText })
226
+ ] })
227
+ ] }),
228
+ ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", { ...D.cta, flexShrink: 0, marginTop: 0 }, sp), className: sc("cta", sp), children: ad.cta })
229
+ ] }) });
230
+ }
231
+ function renderMinimal(p) {
232
+ const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
233
+ const containerStyle = ss("container", {
234
+ ...D.container,
235
+ background: "transparent",
236
+ border: "none",
237
+ boxShadow: "none",
238
+ borderRadius: 0,
239
+ overflow: "visible",
240
+ borderLeft: "2px solid rgba(0,0,0,0.06)"
241
+ }, sp);
242
+ const hoverExtra = hovered ? { boxShadow: "none", transform: "none", borderLeftColor: "rgba(37,99,235,0.3)" } : void 0;
243
+ const hasHeader = ad.favicon || ad.brandName || showLabel;
244
+ return /* @__PURE__ */ jsx(WrapLink, { p, containerStyle, hoverStyle: hoverExtra, children: /* @__PURE__ */ jsxs("div", { style: ss("inner", { ...D.inner, padding: "6px 0 6px 16px", gap: 8 }, sp), className: sc("inner", sp), children: [
245
+ hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", sp), children: [
246
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 16, height: 16, borderRadius: 4 }, sp), className: sc("favicon", sp), onError: (e) => {
247
+ e.target.style.display = "none";
248
+ } }),
249
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 12, color: "rgba(0,0,0,0.5)" }, sp), className: sc("brand", sp), children: ad.brandName }),
250
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...D.label, fontSize: 9, border: "none", padding: 0, marginLeft: 0, color: "rgba(0,0,0,0.25)" }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
251
+ ] }),
252
+ /* @__PURE__ */ jsxs("div", { style: ss("body", D.body, sp), className: sc("body", sp), children: [
253
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { ...D.title, fontSize: 13.5 }, sp), className: sc("title", sp), children: ad.title }),
254
+ /* @__PURE__ */ jsx("p", { style: ss("text", { ...D.text, fontSize: 13 }, sp), className: sc("text", sp), children: ad.adText })
255
+ ] }),
256
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13 }, sp), className: sc("cta", sp), children: [
257
+ ad.cta,
258
+ " ",
259
+ /* @__PURE__ */ jsx(ArrowRight, {})
260
+ ] })
261
+ ] }) });
262
+ }
263
+ function renderBubble(p) {
264
+ const { ad, slotProps: sp, showLabel, labelText } = p;
265
+ const containerStyle = ss("container", {
266
+ ...D.container,
267
+ background: "transparent",
268
+ border: "none",
269
+ boxShadow: "none",
270
+ overflow: "visible",
271
+ borderRadius: 0
272
+ }, sp);
273
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
274
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, sp), className: sc("header", sp), children: [
275
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, borderRadius: 6 }, sp), className: sc("favicon", sp), onError: (e) => {
276
+ e.target.style.display = "none";
277
+ } }),
278
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, color: "rgba(0,0,0,0.6)" }, sp), className: sc("brand", sp), children: ad.brandName }),
279
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
280
+ fontSize: 9,
281
+ fontWeight: 600,
282
+ letterSpacing: "0.06em",
283
+ textTransform: "uppercase",
284
+ color: "rgba(0,0,0,0.25)",
285
+ background: "rgba(0,0,0,0.04)",
286
+ padding: "2px 5px",
287
+ borderRadius: 3,
288
+ border: "none",
289
+ lineHeight: 1
290
+ }, sp), className: sc("label", sp), children: labelText })
291
+ ] }),
292
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", {
293
+ background: "#F3F3F3",
294
+ borderRadius: "4px 16px 16px 16px",
295
+ padding: "14px 18px"
296
+ }, sp), className: sc("inner", sp), children: [
297
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { ...D.title, fontWeight: 600, color: "rgba(0,0,0,0.65)", margin: "0 0 4px" }, sp), className: sc("title", sp), children: ad.title }),
298
+ /* @__PURE__ */ jsx("p", { style: ss("text", { ...D.text, color: "rgba(0,0,0,0.45)", margin: "0 0 12px" }, sp), className: sc("text", sp), children: ad.adText }),
299
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, marginTop: 0 }, sp), className: sc("cta", sp), children: [
300
+ ad.cta,
301
+ " ",
302
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
303
+ ] })
304
+ ] })
305
+ ] });
306
+ }
307
+ function renderContextual(p) {
308
+ const { ad, slotProps: sp, showLabel, labelText } = p;
309
+ const wrapperStyle = {
310
+ fontFamily: FONT,
311
+ textDecoration: "none",
312
+ color: "#18181B",
313
+ lineHeight: 1.5
117
314
  };
118
- if (customStyles?.backgroundColor) {
119
- combined.backgroundColor = customStyles.backgroundColor;
120
- }
121
- if (customStyles?.textColor) {
122
- combined.color = customStyles.textColor;
123
- }
124
- if (customStyles?.borderRadius !== void 0) {
125
- combined.borderRadius = customStyles.borderRadius;
126
- }
127
- if (customStyles?.style) {
128
- Object.assign(combined, customStyles.style);
129
- }
130
- return combined;
315
+ const cardStyle = ss("container", {
316
+ background: "#FAFAFA",
317
+ border: "1px solid rgba(0,0,0,0.07)",
318
+ borderRadius: 12,
319
+ padding: "18px 22px",
320
+ display: "flex",
321
+ gap: 16,
322
+ alignItems: "flex-start"
323
+ }, sp);
324
+ const iconWrapperStyle = ss("iconWrapper", {
325
+ width: 40,
326
+ height: 40,
327
+ borderRadius: 10,
328
+ background: "rgba(0,0,0,0.04)",
329
+ display: "flex",
330
+ alignItems: "center",
331
+ justifyContent: "center",
332
+ flexShrink: 0
333
+ }, sp);
334
+ return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
335
+ /* @__PURE__ */ jsx("p", { style: ss("contextHeader", {
336
+ fontSize: 11,
337
+ fontWeight: 500,
338
+ color: "rgba(0,0,0,0.3)",
339
+ margin: "0 0 10px"
340
+ }, sp), className: sc("contextHeader", sp), children: "Relevant to this conversation" }),
341
+ /* @__PURE__ */ jsxs(
342
+ "a",
343
+ {
344
+ ...p.linkProps,
345
+ ref: p.containerRef,
346
+ style: cardStyle,
347
+ onClick: p.handleClick,
348
+ onMouseEnter: () => p.setHovered(true),
349
+ onMouseLeave: () => p.setHovered(false),
350
+ "data-gravity-ad": true,
351
+ children: [
352
+ /* @__PURE__ */ jsx("div", { style: iconWrapperStyle, className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", D.favicon, sp), className: sc("favicon", sp), onError: (e) => {
353
+ e.target.style.display = "none";
354
+ } }) }),
355
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
356
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, sp), className: sc("header", sp), children: [
357
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
358
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
359
+ ] }),
360
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.5)", margin: "0 0 12px", lineHeight: 1.5 }, sp), className: sc("text", sp), children: ad.adText }),
361
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", linkCta, sp), className: sc("cta", sp), children: [
362
+ ad.cta,
363
+ " ",
364
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
365
+ ] })
366
+ ] })
367
+ ]
368
+ }
369
+ ),
370
+ /* @__PURE__ */ jsx("p", { style: ss("footer", { fontSize: 10, color: "rgba(0,0,0,0.2)", margin: "8px 0 0", textAlign: "right" }, sp), className: sc("footer", sp), children: "partner" })
371
+ ] });
372
+ }
373
+ function renderNative(p) {
374
+ const { ad, slotProps: sp, showLabel, labelText } = p;
375
+ const containerStyle = ss("container", {
376
+ ...D.container,
377
+ background: "rgba(0,0,0,0.02)",
378
+ border: "none",
379
+ borderLeft: "2px solid rgba(0,0,0,0.12)",
380
+ borderRadius: 14,
381
+ boxShadow: "none",
382
+ padding: "20px 24px",
383
+ overflow: "visible"
384
+ }, sp);
385
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
386
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13.5, color: "rgba(0,0,0,0.65)", margin: "0 0 14px", lineHeight: 1.6 }, sp), className: sc("text", sp), children: ad.adText }),
387
+ /* @__PURE__ */ jsxs("div", { style: ss("footer", { display: "flex", alignItems: "center", justifyContent: "space-between" }, sp), className: sc("footer", sp), children: [
388
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
389
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 14, height: 14, borderRadius: 3 }, sp), className: sc("favicon", sp), onError: (e) => {
390
+ e.target.style.display = "none";
391
+ } }),
392
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 12, fontWeight: 600, color: "rgba(0,0,0,0.55)" }, sp), className: sc("brand", sp), children: ad.brandName }),
393
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 10, color: "rgba(0,0,0,0.3)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
394
+ ] }),
395
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5 }, sp), className: sc("cta", sp), children: [
396
+ ad.cta,
397
+ " ",
398
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
399
+ ] })
400
+ ] })
401
+ ] });
402
+ }
403
+ function renderFootnote(p) {
404
+ const { ad, slotProps: sp, showLabel, labelText } = p;
405
+ const containerStyle = ss("container", {
406
+ ...D.container,
407
+ background: "transparent",
408
+ border: "none",
409
+ boxShadow: "none",
410
+ borderRadius: 0,
411
+ overflow: "visible"
412
+ }, sp);
413
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
414
+ /* @__PURE__ */ jsx("div", { style: { height: 1, background: "currentColor", opacity: 0.08, marginBottom: 12 } }),
415
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { display: "flex", alignItems: "flex-start", gap: 10, padding: 0 }, sp), className: sc("inner", sp), children: [
416
+ /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, marginTop: 2, color: "rgba(0,0,0,0.3)" }, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 2V8H4L6 10V8H10V2H2Z", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
417
+ /* @__PURE__ */ jsxs("div", { children: [
418
+ /* @__PURE__ */ jsxs("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.5)", margin: 0, lineHeight: 1.55 }, sp), className: sc("text", sp), children: [
419
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontWeight: 600, color: "rgba(0,0,0,0.6)" }, sp), className: sc("brand", sp), children: ad.brandName }),
420
+ ad.brandName && " \u2014 ",
421
+ ad.adText,
422
+ " ",
423
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13, padding: 0, display: "inline" }, sp), className: sc("cta", sp), children: [
424
+ ad.cta,
425
+ " ",
426
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
427
+ ] })
428
+ ] }),
429
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.3)", border: "none", padding: 0, marginLeft: 0, marginTop: 6, display: "block" }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
430
+ ] })
431
+ ] })
432
+ ] });
433
+ }
434
+ function renderQuote(p) {
435
+ const { ad, slotProps: sp, showLabel, labelText } = p;
436
+ const containerStyle = ss("container", {
437
+ ...D.container,
438
+ background: "rgba(0,0,0,0.01)",
439
+ border: "none",
440
+ borderLeft: "3px solid #2563EB",
441
+ borderRadius: "0 10px 10px 0",
442
+ boxShadow: "none",
443
+ padding: "18px 22px",
444
+ overflow: "visible"
445
+ }, sp);
446
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
447
+ /* @__PURE__ */ jsxs("p", { style: ss("text", { fontSize: 14, color: "rgba(0,0,0,0.6)", margin: "0 0 12px", lineHeight: 1.6, fontStyle: "italic" }, sp), className: sc("text", sp), children: [
448
+ "\u201C",
449
+ ad.adText,
450
+ "\u201D"
451
+ ] }),
452
+ /* @__PURE__ */ jsxs("div", { style: ss("footer", { display: "flex", alignItems: "center", justifyContent: "space-between" }, sp), className: sc("footer", sp), children: [
453
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
454
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 16, height: 16 }, sp), className: sc("favicon", sp), onError: (e) => {
455
+ e.target.style.display = "none";
456
+ } }),
457
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "rgba(0,0,0,0.55)" }, sp), className: sc("brand", sp), children: ad.brandName }),
458
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.2)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
459
+ ] }),
460
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12, display: "inline-flex", alignItems: "center", gap: 4 }, sp), className: sc("cta", sp), children: [
461
+ ad.cta,
462
+ " ",
463
+ /* @__PURE__ */ jsx(ArrowRight, {})
464
+ ] })
465
+ ] })
466
+ ] });
467
+ }
468
+ function renderSuggestion(p) {
469
+ const { ad, slotProps: sp, showLabel, labelText } = p;
470
+ const wrapperStyle = {
471
+ fontFamily: FONT,
472
+ textDecoration: "none",
473
+ color: "#18181B",
474
+ lineHeight: 1.5
475
+ };
476
+ const pillStyle = ss("container", {
477
+ display: "inline-flex",
478
+ alignItems: "center",
479
+ gap: 14,
480
+ padding: "10px 18px 10px 12px",
481
+ background: "#FFFFFF",
482
+ border: "1px solid rgba(0,0,0,0.08)",
483
+ borderRadius: 100,
484
+ cursor: "pointer",
485
+ fontFamily: FONT,
486
+ textDecoration: "none",
487
+ boxSizing: "border-box",
488
+ transition: "border-color 150ms ease, box-shadow 150ms ease"
489
+ }, sp);
490
+ const iconWrapperStyle = ss("iconWrapper", {
491
+ width: 36,
492
+ height: 36,
493
+ borderRadius: 100,
494
+ background: "rgba(0,0,0,0.03)",
495
+ display: "flex",
496
+ alignItems: "center",
497
+ justifyContent: "center",
498
+ flexShrink: 0
499
+ }, sp);
500
+ return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
501
+ /* @__PURE__ */ jsx("p", { style: ss("contextHeader", { fontSize: 11, color: "rgba(0,0,0,0.3)", margin: "0 0 10px", fontWeight: 500 }, sp), className: sc("contextHeader", sp), children: "You might also want to try" }),
502
+ /* @__PURE__ */ jsxs(
503
+ "a",
504
+ {
505
+ ...p.linkProps,
506
+ ref: p.containerRef,
507
+ style: pillStyle,
508
+ onClick: p.handleClick,
509
+ onMouseEnter: () => p.setHovered(true),
510
+ onMouseLeave: () => p.setHovered(false),
511
+ "data-gravity-ad": true,
512
+ children: [
513
+ /* @__PURE__ */ jsx("div", { style: iconWrapperStyle, className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 18, height: 18, borderRadius: 5, objectFit: "contain" }, sp), className: sc("favicon", sp), onError: (e) => {
514
+ e.target.style.display = "none";
515
+ } }) }),
516
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
517
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
518
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 13.5, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
519
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.3)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
520
+ ] }),
521
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 12, color: "rgba(0,0,0,0.4)", margin: 0 }, sp), className: sc("brand", sp), children: ad.brandName })
522
+ ] }),
523
+ /* @__PURE__ */ jsx(ChevronRight, {})
524
+ ]
525
+ }
526
+ )
527
+ ] });
528
+ }
529
+ function renderAccent(p) {
530
+ const { ad, slotProps: sp, showLabel, labelText } = p;
531
+ const containerStyle = ss("container", {
532
+ ...D.container,
533
+ overflow: "hidden"
534
+ }, sp);
535
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
536
+ /* @__PURE__ */ jsx("div", { style: ss("accentBar", { height: 3, background: "#2563EB" }, sp), className: sc("accentBar", sp) }),
537
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { ...D.inner, padding: "18px 22px" }, sp), className: sc("inner", sp), children: [
538
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 2 }, sp), className: sc("header", sp), children: [
539
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
540
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 18, height: 18 }, sp), className: sc("favicon", sp), onError: (e) => {
541
+ e.target.style.display = "none";
542
+ } }),
543
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName })
544
+ ] }),
545
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
546
+ ] }),
547
+ /* @__PURE__ */ jsx("p", { style: ss("text", { ...D.text, fontSize: 14, color: "rgba(0,0,0,0.55)", margin: "0 0 16px", lineHeight: 1.55 }, sp), className: sc("text", sp), children: ad.adText }),
548
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta }, sp), className: sc("cta", sp), children: [
549
+ ad.cta,
550
+ " ",
551
+ /* @__PURE__ */ jsx(ArrowRight, {})
552
+ ] })
553
+ ] })
554
+ ] });
555
+ }
556
+ function renderSidePanel(p) {
557
+ const { ad, slotProps: sp, showLabel, labelText } = p;
558
+ const containerStyle = ss("container", {
559
+ ...D.container,
560
+ display: "flex",
561
+ flexDirection: "row",
562
+ alignItems: "stretch",
563
+ overflow: "hidden",
564
+ background: "#FAFAFA"
565
+ }, sp);
566
+ const iconWrapperStyle = ss("iconWrapper", {
567
+ width: 64,
568
+ background: "rgba(0,0,0,0.02)",
569
+ display: "flex",
570
+ alignItems: "center",
571
+ justifyContent: "center",
572
+ flexShrink: 0,
573
+ borderRight: "1px solid rgba(0,0,0,0.05)"
574
+ }, sp);
575
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
576
+ /* @__PURE__ */ jsx("div", { style: iconWrapperStyle, className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 26, height: 26, borderRadius: 7 }, sp), className: sc("favicon", sp), onError: (e) => {
577
+ e.target.style.display = "none";
578
+ } }) }),
579
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "16px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 6 }, sp), className: sc("inner", sp), children: [
580
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 0 }, sp), className: sc("header", sp), children: [
581
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
582
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
583
+ ] }),
584
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.5)", margin: "0 0 10px", lineHeight: 1.5 }, sp), className: sc("text", sp), children: ad.adText }),
585
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5 }, sp), className: sc("cta", sp), children: [
586
+ ad.cta,
587
+ " ",
588
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
589
+ ] })
590
+ ] })
591
+ ] });
592
+ }
593
+ function renderLabeled(p) {
594
+ const { ad, slotProps: sp, showLabel, labelText } = p;
595
+ const containerStyle = ss("container", {
596
+ ...D.container,
597
+ display: "flex",
598
+ flexDirection: "row",
599
+ overflow: "hidden",
600
+ background: "#FFFFFF"
601
+ }, sp);
602
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
603
+ showLabel && /* @__PURE__ */ jsx("div", { style: ss("footer", {
604
+ width: 32,
605
+ flexShrink: 0,
606
+ background: "rgba(0,0,0,0.025)",
607
+ display: "flex",
608
+ alignItems: "center",
609
+ justifyContent: "center",
610
+ borderRight: "1px solid rgba(0,0,0,0.06)",
611
+ writingMode: "vertical-rl",
612
+ textOrientation: "mixed"
613
+ }, sp), className: sc("footer", sp), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(0,0,0,0.4)", transform: "rotate(180deg)" }, children: labelText }) }),
614
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "16px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 10 }, sp), className: sc("inner", sp), children: [
615
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 10 }, sp), className: sc("header", sp), children: [
616
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, borderRadius: 5 }, sp), className: sc("favicon", sp), onError: (e) => {
617
+ e.target.style.display = "none";
618
+ } }),
619
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName })
620
+ ] }),
621
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#111", margin: 0, letterSpacing: "-0.01em" }, sp), className: sc("title", sp), children: ad.title }),
622
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.5)", margin: "0 0 4px", lineHeight: 1.5 }, sp), className: sc("text", sp), children: ad.adText }),
623
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13 }, sp), className: sc("cta", sp), children: [
624
+ ad.cta,
625
+ " ",
626
+ /* @__PURE__ */ jsx(ArrowRight, {})
627
+ ] })
628
+ ] })
629
+ ] });
630
+ }
631
+ function renderSpotlight(p) {
632
+ const { ad, slotProps: sp, showLabel, labelText } = p;
633
+ const containerStyle = ss("container", {
634
+ ...D.container,
635
+ textAlign: "center",
636
+ padding: "32px 28px",
637
+ borderRadius: 16
638
+ }, sp);
639
+ const iconWrapperStyle = ss("iconWrapper", {
640
+ width: 56,
641
+ height: 56,
642
+ borderRadius: 16,
643
+ margin: "0 auto 18px",
644
+ background: "rgba(0,0,0,0.03)",
645
+ display: "flex",
646
+ alignItems: "center",
647
+ justifyContent: "center",
648
+ boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
649
+ }, sp);
650
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
651
+ /* @__PURE__ */ jsx("div", { style: iconWrapperStyle, className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 28, height: 28, borderRadius: 7, objectFit: "contain" }, sp), className: sc("favicon", sp), onError: (e) => {
652
+ e.target.style.display = "none";
653
+ } }) }),
654
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { fontSize: 17, fontWeight: 700, color: "#111", margin: "0 0 8px", letterSpacing: "-0.02em" }, sp), className: sc("title", sp), children: ad.title }),
655
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13.5, color: "rgba(0,0,0,0.45)", margin: "0 0 22px", lineHeight: 1.55 }, sp), className: sc("text", sp), children: ad.adText }),
656
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", {
657
+ ...D.cta,
658
+ background: "#1A1A1A",
659
+ borderRadius: 10,
660
+ padding: "11px 28px",
661
+ fontSize: 14,
662
+ fontWeight: 600,
663
+ display: "inline-flex",
664
+ alignItems: "center",
665
+ gap: 7,
666
+ alignSelf: "center"
667
+ }, sp), className: sc("cta", sp), children: [
668
+ ad.cta,
669
+ " ",
670
+ /* @__PURE__ */ jsx(ArrowRight, {})
671
+ ] }),
672
+ showLabel && /* @__PURE__ */ jsx("p", { style: ss("label", { fontSize: 9, color: "rgba(0,0,0,0.2)", margin: "14px 0 0", letterSpacing: "0.06em", textTransform: "uppercase", border: "none", padding: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
673
+ ] });
674
+ }
675
+ function renderEmbed(p) {
676
+ const { ad, slotProps: sp, showLabel, labelText } = p;
677
+ const containerStyle = ss("container", {
678
+ ...D.container,
679
+ overflow: "hidden",
680
+ borderRadius: 12
681
+ }, sp);
682
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
683
+ /* @__PURE__ */ jsx("div", { style: ss("iconWrapper", {
684
+ height: 88,
685
+ background: "linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0.03) 60%, rgba(99,102,241,0.06) 100%)",
686
+ display: "flex",
687
+ alignItems: "center",
688
+ justifyContent: "center",
689
+ borderBottom: "1px solid rgba(0,0,0,0.04)"
690
+ }, sp), className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 36, height: 36, borderRadius: 10, objectFit: "contain", boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }, sp), className: sc("favicon", sp), onError: (e) => {
691
+ e.target.style.display = "none";
692
+ } }) }),
693
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "14px 18px 16px", display: "flex", flexDirection: "column", gap: 8 }, sp), className: sc("inner", sp), children: [
694
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
695
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 12, fontWeight: 600, color: "rgba(0,0,0,0.5)" }, sp), className: sc("brand", sp), children: ad.brandName }),
696
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.25)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
697
+ ] }),
698
+ ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
699
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.5)", margin: 0, lineHeight: 1.5 }, sp), className: sc("text", sp), children: ad.adText }),
700
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5, marginTop: 2 }, sp), className: sc("cta", sp), children: [
701
+ ad.cta,
702
+ " ",
703
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
704
+ ] })
705
+ ] })
706
+ ] });
707
+ }
708
+ function renderSplitAction(p) {
709
+ const { ad, slotProps: sp, showLabel, labelText } = p;
710
+ const containerStyle = ss("container", {
711
+ ...D.container,
712
+ overflow: "hidden"
713
+ }, sp);
714
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
715
+ /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "18px 22px", display: "flex", flexDirection: "column", gap: 10 }, sp), className: sc("inner", sp), children: [
716
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 10 }, sp), className: sc("header", sp), children: [
717
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, width: 18, height: 18 }, sp), className: sc("favicon", sp), onError: (e) => {
718
+ e.target.style.display = "none";
719
+ } }),
720
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName }),
721
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 10, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
722
+ ] }),
723
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13.5, color: "rgba(0,0,0,0.55)", margin: 0, lineHeight: 1.55 }, sp), className: sc("text", sp), children: ad.adText })
724
+ ] }),
725
+ /* @__PURE__ */ jsxs("div", { style: ss("footer", {
726
+ display: "flex",
727
+ borderTop: "1px solid rgba(0,0,0,0.06)"
728
+ }, sp), className: sc("footer", sp), children: [
729
+ /* @__PURE__ */ jsx("span", { style: ss("secondaryCta", {
730
+ flex: 1,
731
+ padding: "11px 16px",
732
+ background: "transparent",
733
+ border: "none",
734
+ borderRight: "1px solid rgba(0,0,0,0.06)",
735
+ color: "rgba(0,0,0,0.35)",
736
+ fontSize: 12.5,
737
+ fontWeight: 500,
738
+ cursor: "pointer",
739
+ textAlign: "center",
740
+ fontFamily: "inherit",
741
+ textDecoration: "none"
742
+ }, sp), className: sc("secondaryCta", sp), children: "Dismiss" }),
743
+ ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", {
744
+ flex: 1,
745
+ padding: "11px 16px",
746
+ background: "rgba(37,99,235,0.04)",
747
+ border: "none",
748
+ color: "#2563EB",
749
+ fontSize: 12.5,
750
+ fontWeight: 600,
751
+ cursor: "pointer",
752
+ textAlign: "center",
753
+ fontFamily: "inherit",
754
+ textDecoration: "none",
755
+ display: "inline-flex",
756
+ alignItems: "center",
757
+ justifyContent: "center",
758
+ gap: 5
759
+ }, sp), className: sc("cta", sp), children: [
760
+ ad.cta,
761
+ " ",
762
+ /* @__PURE__ */ jsx(ArrowRight, {})
763
+ ] })
764
+ ] })
765
+ ] });
131
766
  }
767
+ function renderPill(p) {
768
+ const { ad, slotProps: sp, showLabel, labelText } = p;
769
+ const containerStyle = ss("container", {
770
+ display: "inline-flex",
771
+ alignItems: "center",
772
+ gap: 10,
773
+ padding: "8px 16px 8px 10px",
774
+ background: "rgba(0,0,0,0.03)",
775
+ borderRadius: 100,
776
+ border: "1px solid rgba(0,0,0,0.06)",
777
+ fontFamily: FONT,
778
+ textDecoration: "none",
779
+ cursor: "pointer",
780
+ boxSizing: "border-box",
781
+ lineHeight: 1.5,
782
+ transition: "border-color 150ms ease, background 150ms ease"
783
+ }, sp);
784
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
785
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 16, height: 16, borderRadius: 4, objectFit: "contain", flexShrink: 0 }, sp), className: sc("favicon", sp), onError: (e) => {
786
+ e.target.style.display = "none";
787
+ } }),
788
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
789
+ /* @__PURE__ */ jsx("span", { style: { width: 1, height: 14, background: "currentColor", opacity: 0.15, flexShrink: 0 } }),
790
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 12.5, color: "rgba(0,0,0,0.5)", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
791
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.3)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() }),
792
+ /* @__PURE__ */ jsx(ChevronRight, {})
793
+ ] });
794
+ }
795
+ function renderBanner(p) {
796
+ const { ad, slotProps: sp, showLabel, labelText } = p;
797
+ const containerStyle = ss("container", {
798
+ display: "flex",
799
+ alignItems: "center",
800
+ justifyContent: "space-between",
801
+ width: "100%",
802
+ padding: "10px 18px",
803
+ background: "rgba(0,0,0,0.015)",
804
+ borderRadius: 8,
805
+ border: "1px solid rgba(0,0,0,0.04)",
806
+ fontFamily: FONT,
807
+ textDecoration: "none",
808
+ cursor: "pointer",
809
+ boxSizing: "border-box",
810
+ lineHeight: 1.5,
811
+ transition: "background 150ms ease"
812
+ }, sp);
813
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
814
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
815
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 16, height: 16, borderRadius: 3, objectFit: "contain", flexShrink: 0 }, sp), className: sc("favicon", sp), onError: (e) => {
816
+ e.target.style.display = "none";
817
+ } }),
818
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 13, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
819
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 10, color: "rgba(0,0,0,0.2)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
820
+ ] }),
821
+ ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
822
+ background: "#1A1A1A",
823
+ color: "#FFFFFF",
824
+ border: "none",
825
+ borderRadius: 6,
826
+ padding: "6px 14px",
827
+ fontSize: 12,
828
+ fontWeight: 600,
829
+ cursor: "pointer",
830
+ fontFamily: "inherit",
831
+ textDecoration: "none",
832
+ flexShrink: 0
833
+ }, sp), className: sc("cta", sp), children: ad.cta })
834
+ ] });
835
+ }
836
+ function renderDivider(p) {
837
+ const { ad, slotProps: sp, showLabel, labelText } = p;
838
+ const containerStyle = ss("container", {
839
+ display: "flex",
840
+ alignItems: "center",
841
+ gap: 16,
842
+ padding: "8px 0",
843
+ width: "100%",
844
+ background: "transparent",
845
+ border: "none",
846
+ boxShadow: "none",
847
+ borderRadius: 0,
848
+ fontFamily: FONT,
849
+ textDecoration: "none",
850
+ cursor: "pointer",
851
+ boxSizing: "border-box",
852
+ lineHeight: 1.5
853
+ }, sp);
854
+ const lineStyle = { flex: 1, height: 1, background: "currentColor", opacity: 0.08 };
855
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
856
+ /* @__PURE__ */ jsx("div", { style: lineStyle }),
857
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }, children: [
858
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 14, height: 14, borderRadius: 3, objectFit: "contain" }, sp), className: sc("favicon", sp), onError: (e) => {
859
+ e.target.style.display = "none";
860
+ } }),
861
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 12, fontWeight: 600, color: "rgba(0,0,0,0.45)" }, sp), className: sc("brand", sp), children: ad.brandName }),
862
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 10, color: "rgba(0,0,0,0.25)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() }),
863
+ ad.cta && /* @__PURE__ */ jsxs(Fragment, { children: [
864
+ /* @__PURE__ */ jsx("span", { style: { width: 1, height: 12, background: "currentColor", opacity: 0.12 } }),
865
+ /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12, padding: 0, marginTop: 0, display: "inline-flex", alignItems: "center", gap: 3 }, sp), className: sc("cta", sp), children: [
866
+ ad.cta,
867
+ " ",
868
+ /* @__PURE__ */ jsx(ArrowUpRight, {})
869
+ ] })
870
+ ] })
871
+ ] }),
872
+ /* @__PURE__ */ jsx("div", { style: lineStyle })
873
+ ] });
874
+ }
875
+ function renderToolbar(p) {
876
+ const { ad, slotProps: sp, showLabel, labelText } = p;
877
+ const containerStyle = ss("container", {
878
+ display: "flex",
879
+ alignItems: "center",
880
+ gap: 14,
881
+ padding: "12px 18px",
882
+ background: "#FFFFFF",
883
+ borderRadius: 12,
884
+ boxShadow: "0 2px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)",
885
+ fontFamily: FONT,
886
+ textDecoration: "none",
887
+ cursor: "pointer",
888
+ boxSizing: "border-box",
889
+ lineHeight: 1.5,
890
+ border: "none"
891
+ }, sp);
892
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
893
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { ...D.favicon, borderRadius: 5, flexShrink: 0 }, sp), className: sc("favicon", sp), onError: (e) => {
894
+ e.target.style.display = "none";
895
+ } }),
896
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
897
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
898
+ ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 12, color: "rgba(0,0,0,0.35)", margin: 0, marginLeft: 8 }, sp), className: sc("title", sp), children: ad.title })
899
+ ] }),
900
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }, children: [
901
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, color: "rgba(0,0,0,0.2)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() }),
902
+ ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
903
+ background: "#1A1A1A",
904
+ color: "#FFFFFF",
905
+ border: "none",
906
+ borderRadius: 7,
907
+ padding: "7px 14px",
908
+ fontSize: 12,
909
+ fontWeight: 600,
910
+ cursor: "pointer",
911
+ fontFamily: "inherit",
912
+ textDecoration: "none",
913
+ whiteSpace: "nowrap"
914
+ }, sp), className: sc("cta", sp), children: ad.cta })
915
+ ] })
916
+ ] });
917
+ }
918
+ function renderTooltip(p) {
919
+ const { ad, slotProps: sp, showLabel, labelText } = p;
920
+ const wrapperStyle = {
921
+ fontFamily: FONT,
922
+ textDecoration: "none",
923
+ color: "#18181B",
924
+ lineHeight: 1.5,
925
+ position: "relative"
926
+ };
927
+ const cardStyle = ss("container", {
928
+ display: "flex",
929
+ flexDirection: "column",
930
+ gap: 10,
931
+ background: "#FFFFFF",
932
+ border: "1px solid rgba(0,0,0,0.08)",
933
+ borderRadius: 12,
934
+ padding: "16px 18px",
935
+ boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
936
+ textDecoration: "none",
937
+ cursor: "pointer",
938
+ boxSizing: "border-box"
939
+ }, sp);
940
+ const arrowStyle = ss("arrow", {
941
+ position: "absolute",
942
+ bottom: -6,
943
+ left: 24,
944
+ width: 12,
945
+ height: 12,
946
+ transform: "rotate(45deg)",
947
+ background: "#FFFFFF",
948
+ border: "1px solid rgba(0,0,0,0.08)",
949
+ borderTop: "none",
950
+ borderLeft: "none"
951
+ }, sp);
952
+ return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
953
+ /* @__PURE__ */ jsxs(
954
+ "a",
955
+ {
956
+ ...p.linkProps,
957
+ ref: p.containerRef,
958
+ style: cardStyle,
959
+ onClick: p.handleClick,
960
+ onMouseEnter: () => p.setHovered(true),
961
+ onMouseLeave: () => p.setHovered(false),
962
+ "data-gravity-ad": true,
963
+ children: [
964
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8 }, sp), className: sc("header", sp), children: [
965
+ ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 16, height: 16, borderRadius: 4, objectFit: "contain" }, sp), className: sc("favicon", sp), onError: (e) => {
966
+ e.target.style.display = "none";
967
+ } }),
968
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
969
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, marginLeft: "auto", border: "none", padding: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
970
+ ] }),
971
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 12.5, color: "rgba(0,0,0,0.5)", margin: 0, lineHeight: 1.5 }, sp), className: sc("text", sp), children: ad.adText }),
972
+ ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
973
+ width: "100%",
974
+ background: "#2563EB",
975
+ color: "#FFFFFF",
976
+ border: "none",
977
+ borderRadius: 8,
978
+ padding: "8px 14px",
979
+ fontSize: 12,
980
+ fontWeight: 600,
981
+ cursor: "pointer",
982
+ textAlign: "center",
983
+ fontFamily: "inherit",
984
+ textDecoration: "none",
985
+ display: "block",
986
+ boxSizing: "border-box",
987
+ transition: "background 150ms ease"
988
+ }, sp), className: sc("cta", sp), children: ad.cta })
989
+ ]
990
+ }
991
+ ),
992
+ /* @__PURE__ */ jsx("div", { style: arrowStyle, className: sc("arrow", sp) })
993
+ ] });
994
+ }
995
+ function renderNotification(p) {
996
+ const { ad, slotProps: sp, showLabel, labelText } = p;
997
+ const containerStyle = ss("container", {
998
+ display: "flex",
999
+ alignItems: "flex-start",
1000
+ gap: 14,
1001
+ padding: "16px 20px",
1002
+ background: "#FFFFFF",
1003
+ borderRadius: 14,
1004
+ boxShadow: "0 4px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04)",
1005
+ fontFamily: FONT,
1006
+ textDecoration: "none",
1007
+ cursor: "pointer",
1008
+ boxSizing: "border-box",
1009
+ lineHeight: 1.5,
1010
+ border: "none"
1011
+ }, sp);
1012
+ const iconWrapperStyle = ss("iconWrapper", {
1013
+ width: 38,
1014
+ height: 38,
1015
+ borderRadius: 10,
1016
+ flexShrink: 0,
1017
+ background: "rgba(0,0,0,0.03)",
1018
+ display: "flex",
1019
+ alignItems: "center",
1020
+ justifyContent: "center"
1021
+ }, sp);
1022
+ return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
1023
+ /* @__PURE__ */ jsx("div", { style: iconWrapperStyle, className: sc("iconWrapper", sp), children: ad.favicon && /* @__PURE__ */ jsx("img", { src: ad.favicon, alt: "", loading: "lazy", style: ss("favicon", { width: 20, height: 20, borderRadius: 5, objectFit: "contain" }, sp), className: sc("favicon", sp), onError: (e) => {
1024
+ e.target.style.display = "none";
1025
+ } }) }),
1026
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1027
+ /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, sp), className: sc("header", sp), children: [
1028
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 700, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
1029
+ showLabel && /* @__PURE__ */ jsxs("span", { style: ss("label", { ...inlineLabel, fontSize: 10, color: "rgba(0,0,0,0.25)", border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: [
1030
+ labelText.toLowerCase(),
1031
+ " \xB7 now"
1032
+ ] })
1033
+ ] }),
1034
+ /* @__PURE__ */ jsx("p", { style: ss("text", { fontSize: 13, color: "rgba(0,0,0,0.55)", margin: 0, lineHeight: 1.45 }, sp), className: sc("text", sp), children: ad.title ? `${ad.title} \u2014 ${ad.adText}` : ad.adText })
1035
+ ] })
1036
+ ] });
1037
+ }
1038
+ function renderHyperlink(p) {
1039
+ const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
1040
+ const containerStyle = ss("container", {
1041
+ display: "inline",
1042
+ fontFamily: FONT,
1043
+ textDecoration: "none",
1044
+ color: "#2563EB",
1045
+ cursor: "pointer",
1046
+ lineHeight: 1.6,
1047
+ background: "none",
1048
+ border: "none",
1049
+ boxShadow: "none",
1050
+ borderRadius: 0,
1051
+ padding: 0,
1052
+ position: "relative"
1053
+ }, sp);
1054
+ return /* @__PURE__ */ jsxs(
1055
+ "a",
1056
+ {
1057
+ ...p.linkProps,
1058
+ ref: p.containerRef,
1059
+ className: p.className,
1060
+ style: m(containerStyle, p.style),
1061
+ onClick: p.handleClick,
1062
+ onMouseEnter: () => p.setHovered(true),
1063
+ onMouseLeave: () => p.setHovered(false),
1064
+ "data-gravity-ad": true,
1065
+ children: [
1066
+ /* @__PURE__ */ jsx("span", { style: ss("text", {
1067
+ fontSize: "inherit",
1068
+ color: "inherit",
1069
+ textDecoration: "underline",
1070
+ textUnderlineOffset: 2,
1071
+ textDecorationColor: hovered ? "currentColor" : "rgba(37,99,235,0.4)",
1072
+ transition: "text-decoration-color 150ms ease"
1073
+ }, sp), className: sc("text", sp), children: ad.adText }),
1074
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
1075
+ fontSize: "0.75em",
1076
+ fontWeight: 600,
1077
+ letterSpacing: "0.04em",
1078
+ textTransform: "uppercase",
1079
+ color: "rgba(37,99,235,0.5)",
1080
+ marginLeft: 5,
1081
+ textDecoration: "none",
1082
+ display: "inline",
1083
+ verticalAlign: "super",
1084
+ lineHeight: 1
1085
+ }, sp), className: sc("label", sp), children: labelText })
1086
+ ]
1087
+ }
1088
+ );
1089
+ }
1090
+ function renderTextLink(p) {
1091
+ const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
1092
+ const containerStyle = ss("container", {
1093
+ display: "inline",
1094
+ fontFamily: FONT,
1095
+ textDecoration: "none",
1096
+ color: "#2563EB",
1097
+ cursor: "pointer",
1098
+ lineHeight: 1.7,
1099
+ background: "none",
1100
+ border: "none",
1101
+ boxShadow: "none",
1102
+ borderRadius: 0,
1103
+ padding: 0,
1104
+ position: "relative",
1105
+ fontSize: "inherit"
1106
+ }, sp);
1107
+ return /* @__PURE__ */ jsxs(
1108
+ "a",
1109
+ {
1110
+ ...p.linkProps,
1111
+ ref: p.containerRef,
1112
+ className: p.className,
1113
+ style: m(containerStyle, p.style),
1114
+ onClick: p.handleClick,
1115
+ onMouseEnter: () => p.setHovered(true),
1116
+ onMouseLeave: () => p.setHovered(false),
1117
+ "data-gravity-ad": true,
1118
+ children: [
1119
+ ad.favicon && /* @__PURE__ */ jsx(
1120
+ "img",
1121
+ {
1122
+ src: ad.favicon,
1123
+ alt: "",
1124
+ loading: "lazy",
1125
+ style: ss("favicon", {
1126
+ width: "1em",
1127
+ height: "1em",
1128
+ borderRadius: 3,
1129
+ objectFit: "contain",
1130
+ verticalAlign: "-0.15em",
1131
+ marginRight: 5,
1132
+ display: "inline"
1133
+ }, sp),
1134
+ className: sc("favicon", sp),
1135
+ onError: (e) => {
1136
+ e.target.style.display = "none";
1137
+ }
1138
+ }
1139
+ ),
1140
+ ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", {
1141
+ fontWeight: 700,
1142
+ color: "#1A1A1A",
1143
+ textDecoration: "none"
1144
+ }, sp), className: sc("brand", sp), children: ad.brandName }),
1145
+ showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
1146
+ fontSize: "0.72em",
1147
+ fontWeight: 600,
1148
+ letterSpacing: "0.03em",
1149
+ color: "rgba(0,0,0,0.35)",
1150
+ background: "rgba(0,0,0,0.05)",
1151
+ padding: "2px 6px",
1152
+ borderRadius: 4,
1153
+ marginLeft: 6,
1154
+ marginRight: 4,
1155
+ textDecoration: "none",
1156
+ display: "inline-block",
1157
+ verticalAlign: "middle",
1158
+ lineHeight: 1.3,
1159
+ border: "none",
1160
+ textTransform: "capitalize"
1161
+ }, sp), className: sc("label", sp), children: labelText }),
1162
+ /* @__PURE__ */ jsx("span", { style: ss("text", {
1163
+ color: "inherit",
1164
+ textDecoration: "underline",
1165
+ textUnderlineOffset: 2,
1166
+ textDecorationColor: hovered ? "currentColor" : "rgba(37,99,235,0.4)",
1167
+ transition: "text-decoration-color 150ms ease"
1168
+ }, sp), className: sc("text", sp), children: ad.adText })
1169
+ ]
1170
+ }
1171
+ );
1172
+ }
1173
+ var renderers = {
1174
+ card: renderCard,
1175
+ inline: renderInline,
1176
+ minimal: renderMinimal,
1177
+ bubble: renderBubble,
1178
+ contextual: renderContextual,
1179
+ native: renderNative,
1180
+ footnote: renderFootnote,
1181
+ quote: renderQuote,
1182
+ suggestion: renderSuggestion,
1183
+ accent: renderAccent,
1184
+ "side-panel": renderSidePanel,
1185
+ labeled: renderLabeled,
1186
+ spotlight: renderSpotlight,
1187
+ embed: renderEmbed,
1188
+ "split-action": renderSplitAction,
1189
+ pill: renderPill,
1190
+ banner: renderBanner,
1191
+ divider: renderDivider,
1192
+ toolbar: renderToolbar,
1193
+ tooltip: renderTooltip,
1194
+ notification: renderNotification,
1195
+ hyperlink: renderHyperlink,
1196
+ "text-link": renderTextLink
1197
+ };
132
1198
 
133
- // src/components/AdBanner.tsx
134
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
135
- function AdBanner({
1199
+ // src/components/GravityAd.tsx
1200
+ import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
1201
+ var FOCUS_STYLE_KEY = "__gravity_ad_focus__";
1202
+ function injectFocusStyle() {
1203
+ if (typeof document === "undefined" || document[FOCUS_STYLE_KEY]) {
1204
+ return;
1205
+ }
1206
+ document[FOCUS_STYLE_KEY] = true;
1207
+ const s = document.createElement("style");
1208
+ s.textContent = "[data-gravity-ad]:focus-visible{outline:2px solid #2563EB;outline-offset:2px}";
1209
+ document.head.appendChild(s);
1210
+ }
1211
+ function GravityAd({
136
1212
  ad,
137
- theme = "light",
138
- size = "medium",
1213
+ variant = "card",
139
1214
  className,
140
1215
  style,
141
- textStyle,
142
- textClassName,
1216
+ slotProps,
143
1217
  showLabel = true,
144
1218
  labelText = "Sponsored",
145
- labelStyle,
146
1219
  onClick,
147
1220
  onImpression,
148
1221
  onClickTracked,
149
1222
  fallback = null,
150
1223
  disableImpressionTracking = false,
151
- openInNewTab = true,
152
- borderRadius,
153
- backgroundColor,
154
- textColor,
155
- accentColor
1224
+ openInNewTab = true
156
1225
  }) {
157
- const [isHovered, setIsHovered] = useState(false);
158
- const { handleClick } = useAdTracking({
1226
+ injectFocusStyle();
1227
+ const [hovered, setHovered] = useState(false);
1228
+ const { containerRef, handleClick } = useAdTracking({
159
1229
  ad,
160
1230
  disableImpressionTracking,
161
1231
  onImpression,
162
1232
  onClickTracked
163
1233
  });
164
1234
  if (!ad) {
165
- return /* @__PURE__ */ jsx(Fragment, { children: fallback });
166
- }
167
- const containerStyles = getAdBannerStyles(theme, size, {
168
- backgroundColor,
169
- textColor,
170
- borderRadius,
171
- style
172
- });
173
- if (isHovered && theme !== "minimal") {
174
- containerStyles.transform = "translateY(-1px)";
175
- containerStyles.boxShadow = theme === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.4)" : theme === "branded" ? "0 4px 16px rgba(99, 102, 241, 0.4)" : "0 4px 12px rgba(0, 0, 0, 0.12)";
1235
+ return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
176
1236
  }
177
- const labelStyles = {
178
- ...baseLabelStyle,
179
- color: accentColor || (theme === "branded" ? "rgba(255,255,255,0.8)" : void 0),
180
- ...labelStyle
181
- };
182
- const textStyles = {
183
- margin: 0,
184
- ...textStyle
185
- };
186
1237
  const handleClickInternal = (e) => {
187
1238
  handleClick();
188
1239
  onClick?.();
@@ -195,27 +1246,27 @@ function AdBanner({
195
1246
  target: openInNewTab ? "_blank" : void 0,
196
1247
  rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored"
197
1248
  } : {};
198
- return /* @__PURE__ */ jsxs(
199
- "a",
200
- {
201
- ...linkProps,
202
- className,
203
- style: containerStyles,
204
- onClick: handleClickInternal,
205
- onMouseEnter: () => setIsHovered(true),
206
- onMouseLeave: () => setIsHovered(false),
207
- "data-gravity-ad": true,
208
- children: [
209
- showLabel && /* @__PURE__ */ jsx("span", { style: labelStyles, children: labelText }),
210
- /* @__PURE__ */ jsx("p", { className: textClassName, style: textStyles, children: ad.adText })
211
- ]
212
- }
213
- );
1249
+ const renderProps = {
1250
+ ad,
1251
+ variant,
1252
+ slotProps,
1253
+ showLabel,
1254
+ labelText,
1255
+ hovered,
1256
+ setHovered,
1257
+ containerRef,
1258
+ handleClick: handleClickInternal,
1259
+ linkProps,
1260
+ className,
1261
+ style
1262
+ };
1263
+ const render = renderers[variant] || renderers.card;
1264
+ return render(renderProps);
214
1265
  }
215
- AdBanner.displayName = "GravityAdBanner";
1266
+ GravityAd.displayName = "GravityAd";
216
1267
 
217
1268
  // src/components/AdText.tsx
218
- import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
1269
+ import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
219
1270
  function AdText({
220
1271
  ad,
221
1272
  className,
@@ -227,14 +1278,14 @@ function AdText({
227
1278
  disableImpressionTracking = false,
228
1279
  openInNewTab = true
229
1280
  }) {
230
- const { handleClick } = useAdTracking({
1281
+ const { containerRef, handleClick } = useAdTracking({
231
1282
  ad,
232
1283
  disableImpressionTracking,
233
1284
  onImpression,
234
1285
  onClickTracked
235
1286
  });
236
1287
  if (!ad) {
237
- return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
1288
+ return /* @__PURE__ */ jsx3(Fragment3, { children: fallback });
238
1289
  }
239
1290
  const handleClickInternal = (e) => {
240
1291
  handleClick();
@@ -250,9 +1301,10 @@ function AdText({
250
1301
  ...style
251
1302
  };
252
1303
  if (ad.clickUrl) {
253
- return /* @__PURE__ */ jsx2(
1304
+ return /* @__PURE__ */ jsx3(
254
1305
  "a",
255
1306
  {
1307
+ ref: containerRef,
256
1308
  href: ad.clickUrl,
257
1309
  target: openInNewTab ? "_blank" : void 0,
258
1310
  rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored",
@@ -264,11 +1316,20 @@ function AdText({
264
1316
  }
265
1317
  );
266
1318
  }
267
- return /* @__PURE__ */ jsx2("span", { className, style: baseStyle, "data-gravity-ad": true, children: ad.adText });
1319
+ return /* @__PURE__ */ jsx3(
1320
+ "span",
1321
+ {
1322
+ ref: containerRef,
1323
+ className,
1324
+ style: baseStyle,
1325
+ "data-gravity-ad": true,
1326
+ children: ad.adText
1327
+ }
1328
+ );
268
1329
  }
269
1330
  AdText.displayName = "GravityAdText";
270
1331
  export {
271
- AdBanner,
272
1332
  AdText,
1333
+ GravityAd,
273
1334
  useAdTracking
274
1335
  };