@gravity-ai/react 1.1.5 → 1.1.6

package/dist/index.mjs

@@ -62,20 +62,46 @@ function fireImpression(impUrl, firedRef, onImpression) {
   }
 }
 
-// src/components/GravityAd.tsx
+// src/components/renderers.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var FOCUS_STYLE_KEY = "__gravity_ad_focus__";
-function injectFocusStyle() {
-  if (typeof document === "undefined" || document[FOCUS_STYLE_KEY]) {
-    return;
-  }
-  document[FOCUS_STYLE_KEY] = true;
-  const s = document.createElement("style");
-  s.textContent = "[data-gravity-ad]:focus-visible{outline:2px solid #2563EB;outline-offset:2px}";
-  document.head.appendChild(s);
-}
 var FONT = 'Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
-var defaults = {
+function m(base, ...ov) {
+  let r = base;
+  for (const o of ov) if (o) r = { ...r, ...o };
+  return r;
+}
+function ss(slot, base, sp, extra) {
+  return m(base, sp?.[slot]?.style, extra);
+}
+function sc(slot, sp) {
+  return sp?.[slot]?.className;
+}
+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" }) });
+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" }) });
+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" }) });
+function WrapLink({
+  p,
+  containerStyle,
+  hoverStyle,
+  children
+}) {
+  const style = m(containerStyle, p.hovered && hoverStyle ? hoverStyle : void 0, p.style);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...p.linkProps,
+      ref: p.containerRef,
+      className: p.className,
+      style,
+      onClick: p.handleClick,
+      onMouseEnter: () => p.setHovered(true),
+      onMouseLeave: () => p.setHovered(false),
+      "data-gravity-ad": true,
+      children
+    }
+  );
+}
+var D = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -99,30 +125,10 @@ var defaults = {
     boxShadow: "0 4px 16px 0 rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06)",
     transform: "translateY(-1px)"
   },
-  inner: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 10,
-    padding: "14px 16px 16px"
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    gap: 8
-  },
-  favicon: {
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    objectFit: "contain",
-    flexShrink: 0
-  },
-  brand: {
-    fontSize: 13,
-    fontWeight: 600,
-    color: "#18181B",
-    lineHeight: 1
-  },
+  inner: { display: "flex", flexDirection: "column", gap: 10, padding: "14px 16px 16px" },
+  header: { display: "flex", alignItems: "center", gap: 8 },
+  favicon: { width: 20, height: 20, borderRadius: 4, objectFit: "contain", flexShrink: 0 },
+  brand: { fontSize: 13, fontWeight: 600, color: "#18181B", lineHeight: 1 },
   label: {
     fontSize: 10,
     fontWeight: 500,
@@ -135,24 +141,9 @@ var defaults = {
     border: "1px solid #E4E4E7",
     borderRadius: 4
   },
-  body: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 6
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: 500,
-    color: "#18181B",
-    margin: 0,
-    lineHeight: 1.4
-  },
-  text: {
-    fontSize: 13,
-    color: "#71717A",
-    margin: 0,
-    lineHeight: 1.5
-  },
+  body: { display: "flex", flexDirection: "column", gap: 6 },
+  title: { fontSize: 14, fontWeight: 500, color: "#18181B", margin: 0, lineHeight: 1.4 },
+  text: { fontSize: 13, color: "#71717A", margin: 0, lineHeight: 1.5 },
   cta: {
     display: "inline-flex",
     alignItems: "center",
@@ -172,51 +163,1050 @@ var defaults = {
     lineHeight: 1,
     fontFamily: "inherit",
     marginTop: 2
-  },
-  ctaHover: {
-    background: "#1E40AF"
   }
 };
-var variantOverrides = {
-  inline: {
-    container: { overflow: "visible" },
-    inner: {
-      flexDirection: "row",
+var inlineLabel = {
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: "0.06em",
+  textTransform: "uppercase",
+  color: "rgba(0,0,0,0.3)",
+  lineHeight: 1
+};
+var linkCta = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: "#2563EB",
+  textDecoration: "none",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  padding: 0
+};
+function renderCard(p) {
+  const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
+  const containerStyle = ss("container", D.container, sp);
+  const hoverExtra = hovered ? D.containerHover : void 0;
+  const hasHeader = ad.favicon || ad.brandName || showLabel;
+  return /* @__PURE__ */ jsx(WrapLink, { p, containerStyle, hoverStyle: hoverExtra, children: /* @__PURE__ */ jsxs("div", { style: ss("inner", D.inner, sp), className: sc("inner", sp), children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", 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) => {
+        e.target.style.display = "none";
+      } }),
+      ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", D.brand, sp), className: sc("brand", sp), children: ad.brandName }),
+      showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", D.label, sp), className: sc("label", sp), children: labelText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: ss("body", D.body, sp), className: sc("body", sp), children: [
+      ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", D.title, sp), className: sc("title", sp), children: ad.title }),
+      /* @__PURE__ */ jsx("p", { style: ss("text", D.text, sp), className: sc("text", sp), children: ad.adText })
+    ] }),
+    ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", D.cta, sp), className: sc("cta", sp), children: ad.cta })
+  ] }) });
+}
+function renderInline(p) {
+  const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
+  const containerStyle = ss("container", { ...D.container, overflow: "visible" }, sp);
+  const hasHeader = ad.favicon || ad.brandName || showLabel;
+  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: [
+    /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 140px", minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
+      hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", 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) => {
+          e.target.style.display = "none";
+        } }),
+        ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", D.brand, sp), className: sc("brand", sp), children: ad.brandName }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...D.label, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: ss("body", { ...D.body, gap: 2 }, sp), className: sc("body", sp), children: [
+        ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", D.title, sp), className: sc("title", sp), children: ad.title }),
+        /* @__PURE__ */ jsx("p", { style: ss("text", D.text, sp), className: sc("text", sp), children: ad.adText })
+      ] })
+    ] }),
+    ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", { ...D.cta, flexShrink: 0, marginTop: 0 }, sp), className: sc("cta", sp), children: ad.cta })
+  ] }) });
+}
+function renderMinimal(p) {
+  const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    background: "transparent",
+    border: "none",
+    boxShadow: "none",
+    borderRadius: 0,
+    overflow: "visible",
+    borderLeft: "2px solid rgba(0,0,0,0.06)"
+  }, sp);
+  const hoverExtra = hovered ? { boxShadow: "none", transform: "none", borderLeftColor: "rgba(37,99,235,0.3)" } : void 0;
+  const hasHeader = ad.favicon || ad.brandName || showLabel;
+  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: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { style: ss("header", D.header, sp), className: sc("header", sp), children: [
+      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) => {
+        e.target.style.display = "none";
+      } }),
+      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 }),
+      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() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: ss("body", D.body, sp), className: sc("body", sp), children: [
+      ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { ...D.title, fontSize: 13.5 }, sp), className: sc("title", sp), children: ad.title }),
+      /* @__PURE__ */ jsx("p", { style: ss("text", { ...D.text, fontSize: 13 }, sp), className: sc("text", sp), children: ad.adText })
+    ] }),
+    ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13 }, sp), className: sc("cta", sp), children: [
+      ad.cta,
+      " ",
+      /* @__PURE__ */ jsx(ArrowRight, {})
+    ] })
+  ] }) });
+}
+function renderBubble(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    background: "transparent",
+    border: "none",
+    boxShadow: "none",
+    overflow: "visible",
+    borderRadius: 0
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, sp), className: sc("header", sp), children: [
+      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) => {
+        e.target.style.display = "none";
+      } }),
+      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 }),
+      showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
+        fontSize: 9,
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        color: "rgba(0,0,0,0.25)",
+        background: "rgba(0,0,0,0.04)",
+        padding: "2px 5px",
+        borderRadius: 3,
+        border: "none",
+        lineHeight: 1
+      }, sp), className: sc("label", sp), children: labelText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", {
+      background: "#F3F3F3",
+      borderRadius: "4px 16px 16px 16px",
+      padding: "14px 18px"
+    }, sp), className: sc("inner", sp), children: [
+      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 }),
+      /* @__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 }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, marginTop: 0 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowUpRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderContextual(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const wrapperStyle = {
+    fontFamily: FONT,
+    textDecoration: "none",
+    color: "#18181B",
+    lineHeight: 1.5
+  };
+  const cardStyle = ss("container", {
+    background: "#FAFAFA",
+    border: "1px solid rgba(0,0,0,0.07)",
+    borderRadius: 12,
+    padding: "18px 22px",
+    display: "flex",
+    gap: 16,
+    alignItems: "flex-start"
+  }, sp);
+  const iconWrapperStyle = ss("iconWrapper", {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    background: "rgba(0,0,0,0.04)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }, sp);
+  return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
+    /* @__PURE__ */ jsx("p", { style: ss("contextHeader", {
+      fontSize: 11,
+      fontWeight: 500,
+      color: "rgba(0,0,0,0.3)",
+      margin: "0 0 10px"
+    }, sp), className: sc("contextHeader", sp), children: "Relevant to this conversation" }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ...p.linkProps,
+        ref: p.containerRef,
+        style: cardStyle,
+        onClick: p.handleClick,
+        onMouseEnter: () => p.setHovered(true),
+        onMouseLeave: () => p.setHovered(false),
+        "data-gravity-ad": true,
+        children: [
+          /* @__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) => {
+            e.target.style.display = "none";
+          } }) }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, sp), className: sc("header", sp), children: [
+              ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
+              showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
+            ] }),
+            /* @__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 }),
+            ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", linkCta, sp), className: sc("cta", sp), children: [
+              ad.cta,
+              " ",
+              /* @__PURE__ */ jsx(ArrowUpRight, {})
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__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" })
+  ] });
+}
+function renderNative(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    background: "rgba(0,0,0,0.02)",
+    border: "none",
+    borderLeft: "2px solid rgba(0,0,0,0.12)",
+    borderRadius: 14,
+    boxShadow: "none",
+    padding: "20px 24px",
+    overflow: "visible"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__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 }),
+    /* @__PURE__ */ jsxs("div", { style: ss("footer", { display: "flex", alignItems: "center", justifyContent: "space-between" }, sp), className: sc("footer", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        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) => {
+          e.target.style.display = "none";
+        } }),
+        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 }),
+        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 })
+      ] }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowUpRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderFootnote(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    background: "transparent",
+    border: "none",
+    boxShadow: "none",
+    borderRadius: 0,
+    overflow: "visible"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: { height: 1, background: "currentColor", opacity: 0.08, marginBottom: 12 } }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { display: "flex", alignItems: "flex-start", gap: 10, padding: 0 }, sp), className: sc("inner", sp), children: [
+      /* @__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" }) }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__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: [
+          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 }),
+          ad.brandName && " \u2014 ",
+          ad.adText,
+          " ",
+          ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13, padding: 0, display: "inline" }, sp), className: sc("cta", sp), children: [
+            ad.cta,
+            " ",
+            /* @__PURE__ */ jsx(ArrowUpRight, {})
+          ] })
+        ] }),
+        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() })
+      ] })
+    ] })
+  ] });
+}
+function renderQuote(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    background: "rgba(0,0,0,0.01)",
+    border: "none",
+    borderLeft: "3px solid #2563EB",
+    borderRadius: "0 10px 10px 0",
+    boxShadow: "none",
+    padding: "18px 22px",
+    overflow: "visible"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__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: [
+      "\u201C",
+      ad.adText,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: ss("footer", { display: "flex", alignItems: "center", justifyContent: "space-between" }, sp), className: sc("footer", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        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) => {
+          e.target.style.display = "none";
+        } }),
+        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 }),
+        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() })
+      ] }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12, display: "inline-flex", alignItems: "center", gap: 4 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderSuggestion(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const wrapperStyle = {
+    fontFamily: FONT,
+    textDecoration: "none",
+    color: "#18181B",
+    lineHeight: 1.5
+  };
+  const pillStyle = ss("container", {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "10px 18px 10px 12px",
+    background: "#FFFFFF",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: 100,
+    cursor: "pointer",
+    fontFamily: FONT,
+    textDecoration: "none",
+    boxSizing: "border-box",
+    transition: "border-color 150ms ease, box-shadow 150ms ease"
+  }, sp);
+  const iconWrapperStyle = ss("iconWrapper", {
+    width: 36,
+    height: 36,
+    borderRadius: 100,
+    background: "rgba(0,0,0,0.03)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }, sp);
+  return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
+    /* @__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" }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ...p.linkProps,
+        ref: p.containerRef,
+        style: pillStyle,
+        onClick: p.handleClick,
+        onMouseEnter: () => p.setHovered(true),
+        onMouseLeave: () => p.setHovered(false),
+        "data-gravity-ad": true,
+        children: [
+          /* @__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) => {
+            e.target.style.display = "none";
+          } }) }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+              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 }),
+              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() })
+            ] }),
+            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 })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronRight, {})
+        ]
+      }
+    )
+  ] });
+}
+function renderAccent(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    overflow: "hidden"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    /* @__PURE__ */ jsx("div", { style: ss("accentBar", { height: 3, background: "#2563EB" }, sp), className: sc("accentBar", sp) }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { ...D.inner, padding: "18px 22px" }, sp), className: sc("inner", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 2 }, sp), className: sc("header", sp), children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+          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) => {
+            e.target.style.display = "none";
+          } }),
+          ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName })
+        ] }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
+      ] }),
+      /* @__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 }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderSidePanel(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    overflow: "hidden",
+    background: "#FAFAFA"
+  }, sp);
+  const iconWrapperStyle = ss("iconWrapper", {
+    width: 64,
+    background: "rgba(0,0,0,0.02)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    borderRight: "1px solid rgba(0,0,0,0.05)"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    /* @__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) => {
+      e.target.style.display = "none";
+    } }) }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "16px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 6 }, sp), className: sc("inner", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 0 }, sp), className: sc("header", sp), children: [
+        ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
+      ] }),
+      /* @__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 }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowUpRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderLabeled(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    display: "flex",
+    flexDirection: "row",
+    overflow: "hidden",
+    background: "#FFFFFF"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    showLabel && /* @__PURE__ */ jsx("div", { style: ss("footer", {
+      width: 32,
+      flexShrink: 0,
+      background: "rgba(0,0,0,0.025)",
+      display: "flex",
       alignItems: "center",
-      gap: 14,
-      padding: "12px 16px"
-    },
-    body: { gap: 2 },
-    cta: { flexShrink: 0, marginTop: 0 }
-  },
-  minimal: {
-    container: {
-      background: "transparent",
+      justifyContent: "center",
+      borderRight: "1px solid rgba(0,0,0,0.06)",
+      writingMode: "vertical-rl",
+      textOrientation: "mixed"
+    }, 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 }) }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "16px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 10 }, sp), className: sc("inner", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 10 }, sp), className: sc("header", sp), children: [
+        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) => {
+          e.target.style.display = "none";
+        } }),
+        ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName })
+      ] }),
+      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 }),
+      /* @__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 }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 13 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderSpotlight(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    textAlign: "center",
+    padding: "32px 28px",
+    borderRadius: 16
+  }, sp);
+  const iconWrapperStyle = ss("iconWrapper", {
+    width: 56,
+    height: 56,
+    borderRadius: 16,
+    margin: "0 auto 18px",
+    background: "rgba(0,0,0,0.03)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    /* @__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) => {
+      e.target.style.display = "none";
+    } }) }),
+    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 }),
+    /* @__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 }),
+    ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", {
+      ...D.cta,
+      background: "#1A1A1A",
+      borderRadius: 10,
+      padding: "11px 28px",
+      fontSize: 14,
+      fontWeight: 600,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 7,
+      alignSelf: "center"
+    }, sp), className: sc("cta", sp), children: [
+      ad.cta,
+      " ",
+      /* @__PURE__ */ jsx(ArrowRight, {})
+    ] }),
+    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() })
+  ] });
+}
+function renderEmbed(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    overflow: "hidden",
+    borderRadius: 12
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    /* @__PURE__ */ jsx("div", { style: ss("iconWrapper", {
+      height: 88,
+      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%)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderBottom: "1px solid rgba(0,0,0,0.04)"
+    }, 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) => {
+      e.target.style.display = "none";
+    } }) }),
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "14px 18px 16px", display: "flex", flexDirection: "column", gap: 8 }, sp), className: sc("inner", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        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 }),
+        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() })
+      ] }),
+      ad.title && /* @__PURE__ */ jsx("p", { style: ss("title", { fontSize: 14, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
+      /* @__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 }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", { ...linkCta, fontSize: 12.5, marginTop: 2 }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowUpRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderSplitAction(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    ...D.container,
+    overflow: "hidden"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, hoverStyle: p.hovered ? D.containerHover : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { style: ss("inner", { padding: "18px 22px", display: "flex", flexDirection: "column", gap: 10 }, sp), className: sc("inner", sp), children: [
+      /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 10 }, sp), className: sc("header", sp), children: [
+        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) => {
+          e.target.style.display = "none";
+        } }),
+        ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { ...D.brand, fontSize: 14 }, sp), className: sc("brand", sp), children: ad.brandName }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 10, border: "none", padding: 0, marginLeft: 0 }, sp), className: sc("label", sp), children: labelText })
+      ] }),
+      /* @__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 })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: ss("footer", {
+      display: "flex",
+      borderTop: "1px solid rgba(0,0,0,0.06)"
+    }, sp), className: sc("footer", sp), children: [
+      /* @__PURE__ */ jsx("span", { style: ss("secondaryCta", {
+        flex: 1,
+        padding: "11px 16px",
+        background: "transparent",
+        border: "none",
+        borderRight: "1px solid rgba(0,0,0,0.06)",
+        color: "rgba(0,0,0,0.35)",
+        fontSize: 12.5,
+        fontWeight: 500,
+        cursor: "pointer",
+        textAlign: "center",
+        fontFamily: "inherit",
+        textDecoration: "none"
+      }, sp), className: sc("secondaryCta", sp), children: "Dismiss" }),
+      ad.cta && /* @__PURE__ */ jsxs("span", { style: ss("cta", {
+        flex: 1,
+        padding: "11px 16px",
+        background: "rgba(37,99,235,0.04)",
+        border: "none",
+        color: "#2563EB",
+        fontSize: 12.5,
+        fontWeight: 600,
+        cursor: "pointer",
+        textAlign: "center",
+        fontFamily: "inherit",
+        textDecoration: "none",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 5
+      }, sp), className: sc("cta", sp), children: [
+        ad.cta,
+        " ",
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] })
+    ] })
+  ] });
+}
+function renderPill(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 16px 8px 10px",
+    background: "rgba(0,0,0,0.03)",
+    borderRadius: 100,
+    border: "1px solid rgba(0,0,0,0.06)",
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    lineHeight: 1.5,
+    transition: "border-color 150ms ease, background 150ms ease"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    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) => {
+      e.target.style.display = "none";
+    } }),
+    ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
+    /* @__PURE__ */ jsx("span", { style: { width: 1, height: 14, background: "currentColor", opacity: 0.15, flexShrink: 0 } }),
+    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 }),
+    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() }),
+    /* @__PURE__ */ jsx(ChevronRight, {})
+  ] });
+}
+function renderBanner(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "10px 18px",
+    background: "rgba(0,0,0,0.015)",
+    borderRadius: 8,
+    border: "1px solid rgba(0,0,0,0.04)",
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    lineHeight: 1.5,
+    transition: "background 150ms ease"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      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) => {
+        e.target.style.display = "none";
+      } }),
+      ad.title && /* @__PURE__ */ jsx("span", { style: ss("title", { fontSize: 13, fontWeight: 600, color: "#1A1A1A", margin: 0 }, sp), className: sc("title", sp), children: ad.title }),
+      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() })
+    ] }),
+    ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
+      background: "#1A1A1A",
+      color: "#FFFFFF",
       border: "none",
-      boxShadow: "none",
-      borderRadius: 0,
-      overflow: "visible"
-    },
-    containerHover: {
-      boxShadow: "none",
-      transform: "none"
-    },
-    inner: { padding: "8px 0" }
-  }
-};
-function merge(base, ...overrides) {
-  let result = base;
-  for (const o of overrides) {
-    if (o) result = { ...result, ...o };
-  }
-  return result;
+      borderRadius: 6,
+      padding: "6px 14px",
+      fontSize: 12,
+      fontWeight: 600,
+      cursor: "pointer",
+      fontFamily: "inherit",
+      textDecoration: "none",
+      flexShrink: 0
+    }, sp), className: sc("cta", sp), children: ad.cta })
+  ] });
 }
-function slotStyle(slot, base, variant, slotProps, extra) {
-  const vo = variant !== "card" ? variantOverrides[variant]?.[slot] : void 0;
-  return merge(base, vo, slotProps?.[slot]?.style, extra);
+function renderDivider(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    padding: "8px 0",
+    width: "100%",
+    background: "transparent",
+    border: "none",
+    boxShadow: "none",
+    borderRadius: 0,
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    lineHeight: 1.5
+  }, sp);
+  const lineStyle = { flex: 1, height: 1, background: "currentColor", opacity: 0.08 };
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: lineStyle }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }, children: [
+      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) => {
+        e.target.style.display = "none";
+      } }),
+      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 }),
+      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() }),
+      ad.cta && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { style: { width: 1, height: 12, background: "currentColor", opacity: 0.12 } }),
+        /* @__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: [
+          ad.cta,
+          " ",
+          /* @__PURE__ */ jsx(ArrowUpRight, {})
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: lineStyle })
+  ] });
 }
-function slotClass(slot, slotProps) {
-  return slotProps?.[slot]?.className;
+function renderToolbar(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "12px 18px",
+    background: "#FFFFFF",
+    borderRadius: 12,
+    boxShadow: "0 2px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)",
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    lineHeight: 1.5,
+    border: "none"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    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) => {
+      e.target.style.display = "none";
+    } }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
+      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 })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }, children: [
+      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() }),
+      ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
+        background: "#1A1A1A",
+        color: "#FFFFFF",
+        border: "none",
+        borderRadius: 7,
+        padding: "7px 14px",
+        fontSize: 12,
+        fontWeight: 600,
+        cursor: "pointer",
+        fontFamily: "inherit",
+        textDecoration: "none",
+        whiteSpace: "nowrap"
+      }, sp), className: sc("cta", sp), children: ad.cta })
+    ] })
+  ] });
+}
+function renderTooltip(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const wrapperStyle = {
+    fontFamily: FONT,
+    textDecoration: "none",
+    color: "#18181B",
+    lineHeight: 1.5,
+    position: "relative"
+  };
+  const cardStyle = ss("container", {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    background: "#FFFFFF",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: 12,
+    padding: "16px 18px",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box"
+  }, sp);
+  const arrowStyle = ss("arrow", {
+    position: "absolute",
+    bottom: -6,
+    left: 24,
+    width: 12,
+    height: 12,
+    transform: "rotate(45deg)",
+    background: "#FFFFFF",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderTop: "none",
+    borderLeft: "none"
+  }, sp);
+  return /* @__PURE__ */ jsxs("div", { style: m(wrapperStyle, p.style), className: p.className, children: [
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ...p.linkProps,
+        ref: p.containerRef,
+        style: cardStyle,
+        onClick: p.handleClick,
+        onMouseEnter: () => p.setHovered(true),
+        onMouseLeave: () => p.setHovered(false),
+        "data-gravity-ad": true,
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", gap: 8 }, sp), className: sc("header", sp), children: [
+            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) => {
+              e.target.style.display = "none";
+            } }),
+            ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 600, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
+            showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", { ...inlineLabel, fontSize: 9, marginLeft: "auto", border: "none", padding: 0 }, sp), className: sc("label", sp), children: labelText.toLowerCase() })
+          ] }),
+          /* @__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 }),
+          ad.cta && /* @__PURE__ */ jsx("span", { style: ss("cta", {
+            width: "100%",
+            background: "#2563EB",
+            color: "#FFFFFF",
+            border: "none",
+            borderRadius: 8,
+            padding: "8px 14px",
+            fontSize: 12,
+            fontWeight: 600,
+            cursor: "pointer",
+            textAlign: "center",
+            fontFamily: "inherit",
+            textDecoration: "none",
+            display: "block",
+            boxSizing: "border-box",
+            transition: "background 150ms ease"
+          }, sp), className: sc("cta", sp), children: ad.cta })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: arrowStyle, className: sc("arrow", sp) })
+  ] });
+}
+function renderNotification(p) {
+  const { ad, slotProps: sp, showLabel, labelText } = p;
+  const containerStyle = ss("container", {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 14,
+    padding: "16px 20px",
+    background: "#FFFFFF",
+    borderRadius: 14,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04)",
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    lineHeight: 1.5,
+    border: "none"
+  }, sp);
+  const iconWrapperStyle = ss("iconWrapper", {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    flexShrink: 0,
+    background: "rgba(0,0,0,0.03)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, sp);
+  return /* @__PURE__ */ jsxs(WrapLink, { p, containerStyle, children: [
+    /* @__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) => {
+      e.target.style.display = "none";
+    } }) }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: ss("header", { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, sp), className: sc("header", sp), children: [
+        ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", { fontSize: 13, fontWeight: 700, color: "#1A1A1A" }, sp), className: sc("brand", sp), children: ad.brandName }),
+        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: [
+          labelText.toLowerCase(),
+          " \xB7 now"
+        ] })
+      ] }),
+      /* @__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 })
+    ] })
+  ] });
+}
+function renderHyperlink(p) {
+  const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
+  const containerStyle = ss("container", {
+    display: "inline",
+    fontFamily: FONT,
+    textDecoration: "none",
+    color: "#2563EB",
+    cursor: "pointer",
+    lineHeight: 1.6,
+    background: "none",
+    border: "none",
+    boxShadow: "none",
+    borderRadius: 0,
+    padding: 0,
+    position: "relative"
+  }, sp);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...p.linkProps,
+      ref: p.containerRef,
+      className: p.className,
+      style: m(containerStyle, p.style),
+      onClick: p.handleClick,
+      onMouseEnter: () => p.setHovered(true),
+      onMouseLeave: () => p.setHovered(false),
+      "data-gravity-ad": true,
+      children: [
+        /* @__PURE__ */ jsx("span", { style: ss("text", {
+          fontSize: "inherit",
+          color: "inherit",
+          textDecoration: "underline",
+          textUnderlineOffset: 2,
+          textDecorationColor: hovered ? "currentColor" : "rgba(37,99,235,0.4)",
+          transition: "text-decoration-color 150ms ease"
+        }, sp), className: sc("text", sp), children: ad.adText }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
+          fontSize: "0.75em",
+          fontWeight: 600,
+          letterSpacing: "0.04em",
+          textTransform: "uppercase",
+          color: "rgba(37,99,235,0.5)",
+          marginLeft: 5,
+          textDecoration: "none",
+          display: "inline",
+          verticalAlign: "super",
+          lineHeight: 1
+        }, sp), className: sc("label", sp), children: labelText })
+      ]
+    }
+  );
+}
+function renderTextLink(p) {
+  const { ad, slotProps: sp, showLabel, labelText, hovered } = p;
+  const containerStyle = ss("container", {
+    display: "inline",
+    fontFamily: FONT,
+    textDecoration: "none",
+    color: "#2563EB",
+    cursor: "pointer",
+    lineHeight: 1.7,
+    background: "none",
+    border: "none",
+    boxShadow: "none",
+    borderRadius: 0,
+    padding: 0,
+    position: "relative",
+    fontSize: "inherit"
+  }, sp);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...p.linkProps,
+      ref: p.containerRef,
+      className: p.className,
+      style: m(containerStyle, p.style),
+      onClick: p.handleClick,
+      onMouseEnter: () => p.setHovered(true),
+      onMouseLeave: () => p.setHovered(false),
+      "data-gravity-ad": true,
+      children: [
+        ad.favicon && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: ad.favicon,
+            alt: "",
+            loading: "lazy",
+            style: ss("favicon", {
+              width: "1em",
+              height: "1em",
+              borderRadius: 3,
+              objectFit: "contain",
+              verticalAlign: "-0.15em",
+              marginRight: 5,
+              display: "inline"
+            }, sp),
+            className: sc("favicon", sp),
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          }
+        ),
+        ad.brandName && /* @__PURE__ */ jsx("span", { style: ss("brand", {
+          fontWeight: 700,
+          color: "#1A1A1A",
+          textDecoration: "none"
+        }, sp), className: sc("brand", sp), children: ad.brandName }),
+        showLabel && /* @__PURE__ */ jsx("span", { style: ss("label", {
+          fontSize: "0.72em",
+          fontWeight: 600,
+          letterSpacing: "0.03em",
+          color: "rgba(0,0,0,0.35)",
+          background: "rgba(0,0,0,0.05)",
+          padding: "2px 6px",
+          borderRadius: 4,
+          marginLeft: 6,
+          marginRight: 4,
+          textDecoration: "none",
+          display: "inline-block",
+          verticalAlign: "middle",
+          lineHeight: 1.3,
+          border: "none",
+          textTransform: "capitalize"
+        }, sp), className: sc("label", sp), children: labelText }),
+        /* @__PURE__ */ jsx("span", { style: ss("text", {
+          color: "inherit",
+          textDecoration: "underline",
+          textUnderlineOffset: 2,
+          textDecorationColor: hovered ? "currentColor" : "rgba(37,99,235,0.4)",
+          transition: "text-decoration-color 150ms ease"
+        }, sp), className: sc("text", sp), children: ad.adText })
+      ]
+    }
+  );
+}
+var renderers = {
+  card: renderCard,
+  inline: renderInline,
+  minimal: renderMinimal,
+  bubble: renderBubble,
+  contextual: renderContextual,
+  native: renderNative,
+  footnote: renderFootnote,
+  quote: renderQuote,
+  suggestion: renderSuggestion,
+  accent: renderAccent,
+  "side-panel": renderSidePanel,
+  labeled: renderLabeled,
+  spotlight: renderSpotlight,
+  embed: renderEmbed,
+  "split-action": renderSplitAction,
+  pill: renderPill,
+  banner: renderBanner,
+  divider: renderDivider,
+  toolbar: renderToolbar,
+  tooltip: renderTooltip,
+  notification: renderNotification,
+  hyperlink: renderHyperlink,
+  "text-link": renderTextLink
+};
+
+// src/components/GravityAd.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var FOCUS_STYLE_KEY = "__gravity_ad_focus__";
+function injectFocusStyle() {
+  if (typeof document === "undefined" || document[FOCUS_STYLE_KEY]) {
+    return;
+  }
+  document[FOCUS_STYLE_KEY] = true;
+  const s = document.createElement("style");
+  s.textContent = "[data-gravity-ad]:focus-visible{outline:2px solid #2563EB;outline-offset:2px}";
+  document.head.appendChild(s);
 }
 function GravityAd({
   ad,
@@ -242,7 +1232,7 @@ function GravityAd({
     onClickTracked
   });
   if (!ad) {
-    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
   }
   const handleClickInternal = (e) => {
     handleClick();
@@ -256,134 +1246,27 @@ function GravityAd({
     target: openInNewTab ? "_blank" : void 0,
     rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored"
   } : {};
-  const hoverExtra = hovered ? merge(
-    defaults.containerHover,
-    variant !== "card" ? variantOverrides[variant]?.containerHover : void 0
-  ) : void 0;
-  const containerStyle = slotStyle(
-    "container",
-    defaults.container,
+  const renderProps = {
+    ad,
     variant,
     slotProps,
-    { ...hoverExtra, ...style }
-  );
-  const ctaHoverExtra = hovered ? defaults.ctaHover : void 0;
-  const hasHeader = ad.favicon || ad.brandName || showLabel;
-  const headerEl = hasHeader ? /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: slotStyle("header", defaults.header, variant, slotProps),
-      className: slotClass("header", slotProps),
-      children: [
-        ad.favicon && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: ad.favicon,
-            alt: "",
-            loading: "lazy",
-            style: slotStyle("favicon", defaults.favicon, variant, slotProps),
-            className: slotClass("favicon", slotProps),
-            onError: (e) => {
-              e.target.style.display = "none";
-            }
-          }
-        ),
-        ad.brandName && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: slotStyle("brand", defaults.brand, variant, slotProps),
-            className: slotClass("brand", slotProps),
-            children: ad.brandName
-          }
-        ),
-        showLabel && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: slotStyle("label", defaults.label, variant, slotProps),
-            className: slotClass("label", slotProps),
-            children: labelText
-          }
-        )
-      ]
-    }
-  ) : null;
-  const bodyEl = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: slotStyle("body", defaults.body, variant, slotProps),
-      className: slotClass("body", slotProps),
-      children: [
-        ad.title && /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: slotStyle("title", defaults.title, variant, slotProps),
-            className: slotClass("title", slotProps),
-            children: ad.title
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: slotStyle("text", defaults.text, variant, slotProps),
-            className: slotClass("text", slotProps),
-            children: ad.adText
-          }
-        )
-      ]
-    }
-  );
-  const ctaEl = ad.cta ? /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: slotStyle("cta", defaults.cta, variant, slotProps, ctaHoverExtra),
-      className: slotClass("cta", slotProps),
-      children: ad.cta
-    }
-  ) : null;
-  const content = variant === "inline" ? /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: slotStyle("inner", defaults.inner, variant, slotProps),
-      className: slotClass("inner", slotProps),
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
-          headerEl,
-          bodyEl
-        ] }),
-        ctaEl
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: slotStyle("inner", defaults.inner, variant, slotProps),
-      className: slotClass("inner", slotProps),
-      children: [
-        headerEl,
-        bodyEl,
-        ctaEl
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      ...linkProps,
-      ref: containerRef,
-      className,
-      style: containerStyle,
-      onClick: handleClickInternal,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      "data-gravity-ad": true,
-      children: content
-    }
-  );
+    showLabel,
+    labelText,
+    hovered,
+    setHovered,
+    containerRef,
+    handleClick: handleClickInternal,
+    linkProps,
+    className,
+    style
+  };
+  const render = renderers[variant] || renderers.card;
+  return render(renderProps);
 }
 GravityAd.displayName = "GravityAd";
 
 // src/components/AdText.tsx
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
 function AdText({
   ad,
   className,
@@ -402,7 +1285,7 @@ function AdText({
     onClickTracked
   });
   if (!ad) {
-    return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
+    return /* @__PURE__ */ jsx3(Fragment3, { children: fallback });
   }
   const handleClickInternal = (e) => {
     handleClick();
@@ -418,7 +1301,7 @@ function AdText({
     ...style
   };
   if (ad.clickUrl) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "a",
       {
         ref: containerRef,
@@ -433,7 +1316,7 @@ function AdText({
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ref: containerRef,