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