@builder.io/sdk-react 5.2.3 → 5.2.4-dev.0

package/lib/browser/blocks-exports.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { TARGET as O, isEditing as _, isBrowser as J, getUserAttributes as ut, _track as ye, checkIsDefined as ae, logger as Q, isPreviewing as le, userAttributesService as Ie, getDefaultCanTrack as ee, logFetch as Le, setupBrowserForEditing as dt, createRegisterComponentMessage as mt, getCookieSync as ft, fetchOneEntry as _e, createEditorListener as ht, serializeIncludingFunctions as we, handleABTestingSync as bt } from "./server-entry-a6f43f98.js";
-import { setClientUserAttributes as Mi } from "./server-entry-a6f43f98.js";
+import { TARGET as O, isEditing as _, isBrowser as J, getUserAttributes as ut, _track as ye, checkIsDefined as ae, logger as Q, isPreviewing as le, userAttributesService as Re, getDefaultCanTrack as ee, logFetch as He, setupBrowserForEditing as dt, createRegisterComponentMessage as mt, getCookieSync as ft, fetchOneEntry as Me, createEditorListener as ht, serializeIncludingFunctions as Pe, handleABTestingSync as bt } from "./server-entry-3a0f3268.js";
+import { setClientUserAttributes as Mi } from "./server-entry-3a0f3268.js";
 import { jsx as s, Fragment as w, jsxs as D } from "react/jsx-runtime";
 import * as gt from "react";
-import { createContext as Ue, useEffect as B, useState as k, useContext as pe, useRef as z, createElement as He } from "react";
+import { createContext as qe, useEffect as B, useState as k, useContext as pe, useRef as z, createElement as je } from "react";
 const yt = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), pt = (e) => typeof e == "string" && yt.has(e.toLowerCase());
-function xe(e) {
+function ke(e) {
   return /* @__PURE__ */ s(w, { children: pt(e.TagName) ? /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes }) }) : /* @__PURE__ */ s(w, { children: typeof e.TagName == "string" ? /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes, children: e.children }) : /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes, children: e.children }) }) });
 }
 const K = () => {
@@ -37,7 +37,7 @@ function vt(e) {
     };
   }
   return /* @__PURE__ */ s(
-    xe,
+    ke,
     {
       attributes: t(),
       TagName: e.link ? e.builderLinkComponent || "a" : "button",
@@ -46,7 +46,7 @@ function vt(e) {
     }
   );
 }
-const se = Ue({
+const se = qe({
   content: null,
   context: {},
   localState: void 0,
@@ -61,7 +61,7 @@ const se = Ue({
   BlocksWrapperProps: {},
   nonce: "",
   model: ""
-}), Me = Ue({ registeredComponents: {} }), qe = (e, t, n) => {
+}), ze = qe({ registeredComponents: {} }), Ke = (e, t, n) => {
   const i = String.prototype.split.call(t, /[,[\].]+?/).filter(Boolean).reduce((r, a) => r != null ? r[a] : r, e);
   return i === void 0 || i === e ? n : i;
 }, xt = ({
@@ -100,7 +100,7 @@ const se = Ue({
 }), kt = (e, {
   isExpression: t = !0
 }) => /* we disable this for cases where we definitely don't want a return */ t && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e;
-function je({
+function Je({
   rootState: e,
   localState: t,
   rootSetState: n
@@ -110,7 +110,7 @@ function je({
       if (t && r in t)
         return t[r];
       const a = i[r];
-      return typeof a == "object" && a !== null ? je({
+      return typeof a == "object" && a !== null ? Je({
         rootState: a,
         localState: void 0,
         rootSetState: n ? (o) => {
@@ -125,7 +125,7 @@ function je({
     }
   });
 }
-const Ee = ({
+const Ve = ({
   code: e,
   builder: t,
   context: n,
@@ -138,7 +138,7 @@ const Ee = ({
     builder: t,
     context: n,
     event: i,
-    state: je({
+    state: Je({
       rootState: o,
       localState: r,
       rootSetState: a
@@ -160,7 +160,7 @@ const Tt = ({
   return t && n && !i ? (e && Q.log("Skipping usage of `isolated-vm` to avoid crashes in Node v20 on an arm64 machine.\n    If you would like to use the `isolated-vm` package on this machine, please provide the `NODE_OPTIONS=--no-node-snapshot` config to your Node process.\n    See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.\n    "), !0) : !1;
 }, It = (e) => (J() || Tt({
   shouldLogWarning: !0
-}), Ee(e)), wt = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/, Et = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/, Rt = (e) => {
+}), Ve(e)), wt = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/, Et = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/, Rt = (e) => {
   var t, n, i, r, a, o;
   return ((i = (n = (t = wt.exec(e.trim())) == null ? void 0 : t.groups) == null ? void 0 : n.getPath) == null ? void 0 : i.slice(1)) || ((o = (a = (r = Et.exec(e.trim())) == null ? void 0 : r.groups) == null ? void 0 : a.getPath) == null ? void 0 : o.slice(1));
 };
@@ -178,7 +178,7 @@ function Y({
     return;
   const c = Rt(e.trim());
   if (c)
-    return qe({
+    return Ke({
       ...i,
       ...n
     }, c);
@@ -247,7 +247,7 @@ function oe(e, t, n = null, i = null, r = /* @__PURE__ */ new WeakSet()) {
     }), oe(o, t, e, a, r);
   }));
 }
-function ze(e) {
+function Ge(e) {
   return e && typeof e == "object" && e["@type"] === "@builder.io/core:LocalizedValue";
 }
 function Bt(e) {
@@ -255,7 +255,7 @@ function Bt(e) {
     return !1;
   let t = !1;
   return oe(e, (n) => {
-    if (ze(n)) {
+    if (Ge(n)) {
       t = !0;
       return;
     }
@@ -264,14 +264,14 @@ function Bt(e) {
 function Nt(e, t) {
   return !e || !Object.getOwnPropertyNames(e).length ? {} : (oe(e, (n, i) => {
     var r;
-    ze(n) && i((r = n[t]) != null ? r : void 0);
+    Ge(n) && i((r = n[t]) != null ? r : void 0);
   }), e);
 }
-function Wt(e, t) {
+function $t(e, t) {
   var n, i;
   return (n = e.component) != null && n.options && Bt((i = e.component) == null ? void 0 : i.options) && (t || console.warn("[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization"), e.component.options = Nt(e.component.options, t != null ? t : "Default")), e;
 }
-const Se = (e) => JSON.parse(JSON.stringify(e)), Ke = (e, t, n) => {
+const Ce = (e) => JSON.parse(JSON.stringify(e)), Qe = (e, t, n) => {
   if (Object(e) !== e)
     return e;
   const i = Array.isArray(t) ? t : t.toString().match(/[^.[\]]+/g);
@@ -289,9 +289,9 @@ function ve(e) {
     n !== "meta" && Object.prototype.hasOwnProperty.call(e, n) && (t[n] = ve(e[n]));
   return t;
 }
-const $t = ["svelte", "vue", "angular", "qwik", "solid"].includes(O), Dt = (e) => {
-  if ($t) {
-    const t = Se(e);
+const Wt = ["svelte", "vue", "angular", "qwik", "solid"].includes(O), Dt = (e) => {
+  if (Wt) {
+    const t = Ce(e);
     return {
       ...t,
       properties: {
@@ -333,7 +333,7 @@ const $t = ["svelte", "vue", "angular", "qwik", "solid"].includes(O), Dt = (e) =
       rootSetState: r,
       context: t
     });
-    Ke(a, o, c);
+    Qe(a, o, c);
   }
   return a;
 };
@@ -351,7 +351,7 @@ function Ft({
     rootState: i,
     rootSetState: r,
     context: t
-  }), a = Wt(a, i.locale), a;
+  }), a = $t(a, i.locale), a;
 }
 const ce = (e) => e ? e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase() : "";
 function Lt(e, t, n = {}) {
@@ -380,17 +380,17 @@ function _t(e) {
   for (const t of e)
     switch (t.trigger) {
       case "pageLoad":
-        Qe(t);
+        Ze(t);
         break;
       case "scrollInView":
         Ht(t);
         break;
     }
 }
-function Je(e) {
+function Ye(e) {
   console.warn(`Cannot animate element: element with ID ${e} not found!`);
 }
-function Ge(e, t) {
+function Xe(e, t) {
   const n = Ut(e), i = getComputedStyle(t), r = e.steps[0].styles, a = e.steps[e.steps.length - 1].styles, o = [r, a];
   for (const l of o)
     for (const c of n)
@@ -403,14 +403,14 @@ function Ut(e) {
       t.indexOf(i) === -1 && t.push(i);
   return t;
 }
-function Qe(e) {
+function Ze(e) {
   const t = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
   if (!t.length) {
-    Je(e.elementId || e.id || "");
+    Ye(e.elementId || e.id || "");
     return;
   }
   Array.from(t).forEach((n) => {
-    Ge(e, n), n.style.transition = "none", n.style.transitionDelay = "0", Z(n.style, e.steps[0].styles), setTimeout(() => {
+    Xe(e, n), n.style.transition = "none", n.style.transitionDelay = "0", Z(n.style, e.steps[0].styles), setTimeout(() => {
       n.style.transition = `all ${e.duration}s ${ce(e.easing)}`, e.delay && (n.style.transitionDelay = e.delay + "s"), Z(n.style, e.steps[1].styles), setTimeout(() => {
         n.style.transition = "", n.style.transitionDelay = "";
       }, (e.delay || 0) * 1e3 + e.duration * 1e3 + 100);
@@ -420,11 +420,11 @@ function Qe(e) {
 function Ht(e) {
   const t = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
   if (!t.length) {
-    Je(e.elementId || e.id || "");
+    Ye(e.elementId || e.id || "");
     return;
   }
   Array.from(t).forEach((n) => {
-    Ge(e, n);
+    Xe(e, n);
     let i = !1, r = !1;
     function a() {
       !i && l(n) ? (i = !0, r = !0, setTimeout(() => {
@@ -452,10 +452,10 @@ function Ht(e) {
     }), a();
   });
 }
-const Ye = (e) => Object.entries(e).map(([n, i]) => {
+const et = (e) => Object.entries(e).map(([n, i]) => {
   if (typeof i == "string")
     return `${ce(n)}: ${i};`;
-}).filter(ae), Mt = (e) => Ye(e).join(`
+}).filter(ae), Mt = (e) => et(e).join(`
 `), X = ({
   mediaQuery: e,
   className: t,
@@ -476,18 +476,18 @@ function qt({
 const jt = ({
   block: e,
   context: t
-}) => Xe(qt({
+}) => tt(qt({
   style: e.style || {},
   context: t,
   block: e
 }));
-function Xe(e) {
+function tt(e) {
   switch (O) {
     case "svelte":
     case "vue":
     case "solid":
     case "angular":
-      return Ye(e).join(" ");
+      return et(e).join(" ");
     case "qwik":
     case "reactNative":
     case "react":
@@ -495,7 +495,7 @@ function Xe(e) {
       return e;
   }
 }
-const Ze = (e, t) => e ? t ? e.models && e.models.length > 0 && !e.models.includes(t) : !1 : !0, zt = ({
+const nt = (e, t) => e ? t ? e.models && e.models.length > 0 && !e.models.includes(t) : !1 : !0, zt = ({
   block: e,
   registeredComponents: t,
   model: n
@@ -505,7 +505,7 @@ const Ze = (e, t) => e ? t ? e.models && e.models.length > 0 && !e.models.includ
   if (!i)
     return null;
   const r = t[i];
-  if (!r || Ze(r, n)) {
+  if (!r || nt(r, n)) {
     console.warn(`
       Could not find a registered component named "${i}". 
       If you registered it, is the file that registered it imported by the file that needs to render it?`);
@@ -553,7 +553,7 @@ const Ze = (e, t) => e ? t ? e.models && e.models.length > 0 && !e.models.includ
 }, Gt = (e, t, n) => {
   var i;
   return (i = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && i.builderComponents ? {
-    builderComponents: Object.fromEntries(Object.entries(t).filter(([a, o]) => !Ze(o, n)))
+    builderComponents: Object.fromEntries(Object.entries(t).filter(([a, o]) => !nt(o, n)))
   } : {};
 }, Qt = (e, t) => {
   var n;
@@ -565,7 +565,7 @@ const Ze = (e, t) => e ? t ? e.models && e.models.length > 0 && !e.models.includ
   return (n = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && n.builderContext ? {
     builderContext: t
   } : {};
-}, Re = (e) => e.toString();
+}, Ae = (e) => e.toString();
 function Xt(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
 }
@@ -579,7 +579,7 @@ const Zt = (e) => `on${Xt(e)}`, en = (e, t) => (n) => Y({
   isExpression: !1,
   trackingContext: t.trackingContext
 });
-function et(e) {
+function it(e) {
   var i;
   const t = {}, n = (i = e.block.actions) != null ? i : {};
   for (const r in n) {
@@ -608,7 +608,7 @@ function tn({
 const nn = (e) => ({
   href: e.href
 });
-function ke({
+function Te({
   block: e,
   context: t
 }) {
@@ -632,14 +632,14 @@ function ke({
 function rn(e) {
   var t, n, i;
   return /* @__PURE__ */ s(
-    xe,
+    ke,
     {
       TagName: e.Wrapper,
-      attributes: ke({
+      attributes: Te({
         block: e.block,
         context: e.context
       }),
-      actionAttributes: et({
+      actionAttributes: it({
         block: e.block,
         rootState: e.context.rootState,
         rootSetState: e.context.rootSetState,
@@ -667,11 +667,11 @@ function on(e) {
   function t() {
     var a, o, l;
     return e.includeBlockProps ? {
-      ...ke({
+      ...Te({
         block: e.block,
         context: e.context
       }),
-      ...et({
+      ...it({
         block: e.block,
         rootState: e.context.rootState,
         rootSetState: e.context.rootSetState,
@@ -717,7 +717,7 @@ const ln = ({
      * component itself directly. Otherwise, they are provided to the wrapper element.
      */
     ...r ? {
-      attributes: ke({
+      attributes: Te({
         block: t,
         context: o
       })
@@ -731,7 +731,7 @@ const ln = ({
     includeBlockProps: r
   } : l;
 };
-function Pe(e) {
+function Be(e) {
   var r;
   k(() => !1);
   const [t, n] = k(
@@ -766,7 +766,7 @@ function Pe(e) {
     }
   ) }) : null });
 }
-function Ve(e) {
+function Ne(e) {
   const [t, n] = k(() => e.repeatContext);
   return B(() => {
     n(e.repeatContext);
@@ -780,7 +780,7 @@ function Ve(e) {
     }
   ) });
 }
-const tt = {
+const rt = {
   xsmall: {
     min: 0,
     default: 160,
@@ -801,8 +801,8 @@ const tt = {
     default: 991,
     max: 1200
   }
-}, de = (e, t = tt) => `@media (max-width: ${t[e].max}px)`, nt = (e) => {
-  const t = Se(tt);
+}, de = (e, t = rt) => `@media (max-width: ${t[e].max}px)`, at = (e) => {
+  const t = Ce(rt);
   if (!e)
     return t;
   const {
@@ -850,14 +850,14 @@ function te(e) {
     }
   );
 }
-function Ae(e) {
+function $e(e) {
   function t() {
     const i = e.block;
     return ae(i.hide) ? !i.hide : ae(i.show) ? i.show : !0;
   }
   function n() {
     var T, E, U, H, q;
-    const i = e.block, r = i.responsiveStyles, a = e.context.content, o = nt(
+    const i = e.block, r = i.responsiveStyles, a = e.context.content, o = at(
       ((T = a == null ? void 0 : a.meta) == null ? void 0 : T.breakpoints) || {}
     ), l = !!((U = (E = a == null ? void 0 : a.meta) == null ? void 0 : E.breakpoints) != null && U.xsmall), c = r == null ? void 0 : r.large, d = r == null ? void 0 : r.medium, h = r == null ? void 0 : r.small, g = r == null ? void 0 : r.xsmall, u = i.id;
     if (!u)
@@ -922,7 +922,7 @@ function sn(e) {
   k(() => !1);
   const [t, n] = k(() => !1);
   return pe(se), B(() => {
-  }, []), /* @__PURE__ */ s(w, { children: t ? /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(Ae, { block: e.block, context: e.context }) }) }) : /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(Ae, { block: e.block, context: e.context }) }) });
+  }, []), /* @__PURE__ */ s(w, { children: t ? /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s($e, { block: e.block, context: e.context }) }) }) : /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s($e, { block: e.block, context: e.context }) }) });
 }
 function ue(e) {
   var h, g, u, S;
@@ -1015,16 +1015,16 @@ function ue(e) {
       }
     ),
     (h = a == null ? void 0 : a()) != null && h.noWrap ? t() ? /* @__PURE__ */ s(w, { children: (S = t()) == null ? void 0 : S.map((m, b) => /* @__PURE__ */ s(
-      Ve,
+      Ne,
       {
         repeatContext: m.context,
         block: m.block,
         registeredComponents: e.registeredComponents,
         linkComponent: e.linkComponent
       },
-      Re(b)
+      Ae(b)
     )) }) : /* @__PURE__ */ s(
-      Pe,
+      Be,
       {
         componentRef: d().componentRef,
         componentOptions: d().componentOptions,
@@ -1037,14 +1037,14 @@ function ue(e) {
         isInteractive: d().isInteractive
       }
     ) : /* @__PURE__ */ s(w, { children: t() ? /* @__PURE__ */ s(w, { children: (u = t()) == null ? void 0 : u.map((m, b) => /* @__PURE__ */ s(
-      Ve,
+      Ne,
       {
         repeatContext: m.context,
         block: m.block,
         registeredComponents: e.registeredComponents,
         linkComponent: e.linkComponent
       },
-      Re(b)
+      Ae(b)
     )) }) : /* @__PURE__ */ D(
       rn,
       {
@@ -1053,7 +1053,7 @@ function ue(e) {
         context: e.context,
         children: [
           /* @__PURE__ */ s(
-            Pe,
+            Be,
             {
               componentRef: d().componentRef,
               componentOptions: d().componentOptions,
@@ -1151,7 +1151,7 @@ function cn(e) {
 }
 function M(e) {
   var i, r, a;
-  const t = pe(se), n = pe(Me);
+  const t = pe(se), n = pe(ze);
   return /* @__PURE__ */ D(
     cn,
     {
@@ -1255,7 +1255,7 @@ function dn(e) {
   }
   function u(f) {
     var T, E;
-    return nt(
+    return at(
       ((E = (T = e.builderContext.content) == null ? void 0 : T.meta) == null ? void 0 : E.breakpoints) || {}
     )[f].max;
   }
@@ -1293,7 +1293,7 @@ function dn(e) {
         href: f.link
       } : {},
       [K()]: "builder-column",
-      style: Xe(g(v))
+      style: tt(g(v))
     };
   }
   return /* @__PURE__ */ D(w, { children: [
@@ -1317,7 +1317,7 @@ function dn(e) {
             }
           ),
           (p = e.columns) == null ? void 0 : p.map((f, v) => /* @__PURE__ */ s(
-            xe,
+            ke,
             {
               TagName: r(f),
               actionAttributes: {},
@@ -1347,7 +1347,7 @@ function dn(e) {
 function mn(e) {
   return /* @__PURE__ */ s("span", { children: e.children });
 }
-function Be(e) {
+function We(e) {
   return e.replace(/http(s)?:/, "");
 }
 function fn(e = "", t, n) {
@@ -1358,11 +1358,11 @@ function hn(e, t) {
   if (!e || !(e != null && e.match(/cdn\.shopify\.com/)) || !t)
     return e;
   if (t === "master")
-    return Be(e);
+    return We(e);
   const n = e.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
   if (n) {
     const i = e.split(n[0]), r = n[3], a = t.match("x") ? t : `${t}x`;
-    return Be(`${i[0]}_${a}${r}`);
+    return We(`${i[0]}_${a}${r}`);
   }
   return null;
 }
@@ -1704,7 +1704,7 @@ const pn = `function getPersonalizedVariant(variants, blockId, isHydrationTarget
       visibilityStylesEl.innerHTML = newStyleStr;
     }
   }
-}`, ne = "default", Sn = "filterWithCustomTargeting", it = "builderIoPersonalization", rt = "updateVisibilityStylesScript", at = ["react", "vue", "svelte", "qwik"], ie = ["vue", "svelte", "qwik"];
+}`, ne = "default", Sn = "filterWithCustomTargeting", ot = "builderIoPersonalization", lt = "updateVisibilityStylesScript", st = ["react", "vue", "svelte", "qwik"], ie = ["vue", "svelte", "qwik"];
 function kn(e, t) {
   return !(e && e.length > 0) || !t ? !1 : ie.includes(O) ? !0 : !J();
 }
@@ -1749,9 +1749,9 @@ function Cn({
 }
 const Tn = () => `
   window.${Sn} = ${vn}
-  window.${it} = ${pn}
-  window.${rt} = ${xn}
-  `, ot = O === "react", In = (e, t, n) => `window.${it}(${JSON.stringify(e)}, "${t}", ${ot}${n ? `, "${n}"` : ""})`, wn = (e, t, n) => `window.${rt}(${JSON.stringify(e)}, "${t}", ${ot}${n ? `, "${n}"` : ""})`, fe = {
+  window.${ot} = ${pn}
+  window.${lt} = ${xn}
+  `, ct = O === "react", In = (e, t, n) => `window.${ot}(${JSON.stringify(e)}, "${t}", ${ct}${n ? `, "${n}"` : ""})`, wn = (e, t, n) => `window.${lt}(${JSON.stringify(e)}, "${t}", ${ct}${n ? `, "${n}"` : ""})`, fe = {
   "@type": "@builder.io/sdk:Element",
   layerName: "Accordion item title",
   responsiveStyles: {
@@ -1875,7 +1875,7 @@ const Tn = () => `
     builderComponents: !0,
     builderLinkComponent: !0
   }
-}, Ne = (e) => e.toString();
+}, De = (e) => e.toString();
 function Rn(e) {
   var g;
   const [t, n] = k(() => []);
@@ -1963,7 +1963,7 @@ function Rn(e) {
           ...a(),
           ...e.grid && {
             width: e.gridRowWidth,
-            order: c() !== null ? Ne(S) : Ne(S + 1)
+            order: c() !== null ? De(S) : De(S + 1)
           }
         },
         "data-index": S,
@@ -2250,7 +2250,7 @@ const Pn = {
   hidden: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, Ce = ["jpeg", "jpg", "png", "svg", "webp", "gif", "jfif", "pjpeg", "pjp", "apng", "avif", "tif", "tiff", "heif", "bmp", "eps", "raw", "cr2", "nef", "orf", "sr2", "psd", "heic", "dib", "ai"], Bn = ["mp4", "webm", "mkv", "flv", "vob", "ogv", "ogg", "drc", "gif", "gifv", "mng", "avi", "mov", "qt", "mts", "m2ts", "ts", "wmv", "yuv", "rm", "rmvb", "viv", "asf", "amv", "m4p", "mpeg", "mpe", "m2v", "m4v", "svi", "3gp", "3g2", "mxf", "roq", "nsv", "f4v", "f4p", "f4a", "f4b"], Nn = {
+}, Ie = ["jpeg", "jpg", "png", "svg", "webp", "gif", "jfif", "pjpeg", "pjp", "apng", "avif", "tif", "tiff", "heif", "bmp", "eps", "raw", "cr2", "nef", "orf", "sr2", "psd", "heic", "dib", "ai"], Bn = ["mp4", "webm", "mkv", "flv", "vob", "ogv", "ogg", "drc", "gif", "gifv", "mng", "avi", "mov", "qt", "mts", "m2ts", "ts", "wmv", "yuv", "rm", "rmvb", "viv", "asf", "amv", "m4p", "mpeg", "mpe", "m2v", "m4v", "svi", "3gp", "3g2", "mxf", "roq", "nsv", "f4v", "f4p", "f4a", "f4b"], Nn = {
   name: "Image",
   static: !0,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
@@ -2265,7 +2265,7 @@ const Pn = {
     name: "image",
     type: "file",
     bubble: !0,
-    allowedFileTypes: Ce,
+    allowedFileTypes: Ie,
     required: !0,
     defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
     onChange: (e) => {
@@ -2362,7 +2362,7 @@ const Pn = {
   shouldReceiveBuilderProps: {
     builderBlock: !0
   }
-}, Wn = {
+}, $n = {
   name: "PersonalizationContainer",
   shouldReceiveBuilderProps: {
     builderBlock: !0,
@@ -2409,10 +2409,10 @@ function G(e) {
     }
   );
 }
-function $n(e) {
-  var v, T, E, U, H, q, y, x, V, A, W, R, P;
+function Wn(e) {
+  var v, T, E, U, H, q, y, x, V, A, $, R, P;
   const t = z(null), [n, i] = k(
-    () => Ie.getUserAttributes()
+    () => Re.getUserAttributes()
   ), [r, a] = k(
     () => {
       var I, N, C;
@@ -2448,11 +2448,11 @@ function $n(e) {
   }
   function b() {
     return (e.variants || []).filter((I) => {
-      var N, C, $, F;
+      var N, C, W, F;
       return yn(
         {
           ...(C = (N = e.builderContext) == null ? void 0 : N.rootState) != null && C.locale ? {
-            locale: (F = ($ = e.builderContext) == null ? void 0 : $.rootState) == null ? void 0 : F.locale
+            locale: (F = (W = e.builderContext) == null ? void 0 : W.rootState) == null ? void 0 : F.locale
           } : {},
           ...n
         },
@@ -2483,7 +2483,7 @@ function $n(e) {
   return B(() => {
     var N;
     S(!0);
-    const I = Ie.subscribeOnUserAttributesChange(
+    const I = Re.subscribeOnUserAttributesChange(
       (C) => {
         i(C);
       },
@@ -2553,7 +2553,7 @@ function $n(e) {
           }
         ),
         (x = e.variants) == null ? void 0 : x.map((I, N) => {
-          var C, $, F, L, j, Te;
+          var C, W, F, L, j, Ee;
           return /* @__PURE__ */ s(
             M,
             {
@@ -2561,7 +2561,7 @@ function $n(e) {
                 ...(C = e.builderContext) == null ? void 0 : C.BlocksWrapperProps,
                 "aria-hidden": !0,
                 hidden: !0,
-                "data-variant-id": `${($ = e.builderBlock) == null ? void 0 : $.id}-${N}`
+                "data-variant-id": `${(W = e.builderBlock) == null ? void 0 : W.id}-${N}`
               },
               blocks: I.blocks,
               parent: (F = e.builderBlock) == null ? void 0 : F.id,
@@ -2577,7 +2577,7 @@ function $n(e) {
                 }
               )
             },
-            `${(Te = e.builderBlock) == null ? void 0 : Te.id}-${N}`
+            `${(Ee = e.builderBlock) == null ? void 0 : Ee.id}-${N}`
           );
         })
       ] }) : null,
@@ -2591,7 +2591,7 @@ function $n(e) {
           registeredComponents: e.builderComponents,
           BlocksWrapperProps: {
             ...(A = e.builderContext) == null ? void 0 : A.BlocksWrapperProps,
-            "data-variant-id": `${(W = e.builderBlock) == null ? void 0 : W.id}-${p().index}`
+            "data-variant-id": `${($ = e.builderBlock) == null ? void 0 : $.id}-${p().index}`
           },
           children: h ? /* @__PURE__ */ s(
             G,
@@ -3380,7 +3380,7 @@ function Zn(e) {
       else {
         const y = {};
         Array.from(T).forEach(({ value: x, key: V }) => {
-          Ke(y, V, x);
+          Qe(y, V, x);
         }), f = JSON.stringify(y);
       }
       E && E !== "multipart/form-data" && (S && ((m = e.action) != null && m.includes("zapier.com")) || (p["content-type"] = E));
@@ -3395,19 +3395,19 @@ function Zn(e) {
       const H = `${Xn() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${e.builderContext.apiKey}&to=${btoa(
         e.sendSubmissionsToEmail || ""
       )}&name=${encodeURIComponent(e.name || "")}`, q = e.sendSubmissionsTo === "email" ? H : e.action;
-      Le(q), fetch(q, { body: f, headers: p, method: e.method || "post" }).then(
+      He(q), fetch(q, { body: f, headers: p, method: e.method || "post" }).then(
         async (y) => {
-          var A, W;
+          var A, $;
           let x;
           const V = y.headers.get("content-type");
           if (V && V.indexOf("application/json") !== -1 ? x = await y.json() : x = await y.text(), !y.ok) {
             const R = new CustomEvent("submit:error", {
               detail: { error: x, status: y.status }
             });
-            if ((A = t.current) != null && A.nativeElement && ((W = t.current) == null || W.nativeElement.dispatchEvent(R), R.defaultPrevented))
+            if ((A = t.current) != null && A.nativeElement && (($ = t.current) == null || $.nativeElement.dispatchEvent(R), R.defaultPrevented))
               return;
             a(x), i("error");
-            let P = e.errorMessagePath ? qe(x, e.errorMessagePath) : x.message || x.error || x;
+            let P = e.errorMessagePath ? Ke(x, e.errorMessagePath) : x.message || x.error || x;
             typeof P != "string" && (P = JSON.stringify(P)), l(P), c({ formErrorMessage: P });
             return;
           }
@@ -3539,7 +3539,7 @@ const ei = {
   }
 };
 function ti(e) {
-  return /* @__PURE__ */ He(
+  return /* @__PURE__ */ je(
     "input",
     {
       ...e.attributes,
@@ -3598,7 +3598,7 @@ const ni = {
 };
 function ii(e) {
   var t;
-  return /* @__PURE__ */ He(
+  return /* @__PURE__ */ je(
     "select",
     {
       ...e.attributes,
@@ -3698,7 +3698,7 @@ const si = {
     name: "image",
     bubble: !0,
     type: "file",
-    allowedFileTypes: Ce,
+    allowedFileTypes: Ie,
     required: !0
   }, {
     name: "backgroundSize",
@@ -3780,7 +3780,7 @@ const ui = {
   }, {
     name: "posterImage",
     type: "file",
-    allowedFileTypes: Ce,
+    allowedFileTypes: Ie,
     helperText: "Image to show before the video plays"
   }, {
     name: "autoPlay",
@@ -4010,7 +4010,7 @@ const mi = () => [{
 }, {
   component: di,
   ...ui
-}], We = () => [{
+}], Oe = () => [{
   component: vt,
   ...Pn
 }, {
@@ -4034,9 +4034,9 @@ const mi = () => [{
 }, {
   component: Mn,
   ...Hn
-}, ...at.includes(O) ? [{
-  component: $n,
-  ...Wn
+}, ...st.includes(O) ? [{
+  component: Wn,
+  ...$n
 }] : [], {
   component: Un,
   ..._n
@@ -4136,26 +4136,34 @@ const mi = () => [{
     thisScriptEl?.remove();
   }
   return;
-}`, lt = "builderIoAbTest", st = "builderIoRenderContent", re = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
+}`, xe = "builderIoAbTest", Se = "builderIoRenderContent", re = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
   ...t,
   testVariationId: t.id,
   id: e == null ? void 0 : e.id
 })), bi = ({
   canTrack: e,
   content: t
-}) => !(!(re(t).length > 0) || !e || J()), gi = (e) => e === "react" || e === "reactNative", yi = O === "angular", ct = gi(O), pi = () => `
-  window.${lt} = ${fi}
-  window.${st} = ${hi}
+}) => !(!(re(t).length > 0) || !e || J()), gi = (e) => e === "react" || e === "reactNative", yi = O === "angular", we = gi(O), pi = () => `
+  (function() {
+    if (!window.${xe}) {
+      window.${xe} = ${fi};
+    }
+    if (!window.${Se}) {
+      window.${Se} = ${hi};
+    }${we ? `
+    var thisScriptEl = document.currentScript;
+    if (thisScriptEl) { thisScriptEl.remove(); }` : ""}
+  })();
   `, vi = (e, t) => `
-  window.${lt}(
-    "${t}",${JSON.stringify(e)}, ${ct}, ${yi}
+  window.${xe}(
+    "${t}",${JSON.stringify(e)}, ${we}, ${yi}
   )`, xi = ({
   contentId: e,
   variationId: t
-}) => `window.${st}(
-    "${t}", "${e}", ${ct}
+}) => `window.${Se}(
+    "${t}", "${e}", ${we}
   )`;
-function $e(e) {
+function Fe(e) {
   return Math.round(e * 1e3) / 1e3;
 }
 const Si = (e, t, n = !0) => {
@@ -4172,11 +4180,11 @@ const Si = (e, t, n = !0) => {
 }, ki = (e) => Si(e, (t) => {
   const n = t.getAttribute("builder-id") || t.id;
   return (n == null ? void 0 : n.indexOf("builder-")) === 0;
-}), De = ({
+}), Le = ({
   event: e,
   target: t
 }) => {
-  const n = t.getBoundingClientRect(), i = e.clientX - n.left, r = e.clientY - n.top, a = $e(i / n.width), o = $e(r / n.height);
+  const n = t.getBoundingClientRect(), i = e.clientX - n.left, r = e.clientY - n.top, a = Fe(i / n.width), o = Fe(r / n.height);
   return {
     x: a,
     y: o
@@ -4186,18 +4194,18 @@ const Si = (e, t, n = !0) => {
   return {
     targetBuilderElement: i || void 0,
     metadata: {
-      targetOffset: t ? De({
+      targetOffset: t ? Le({
         event: e,
         target: t
       }) : void 0,
-      builderTargetOffset: n ? De({
+      builderTargetOffset: n ? Le({
         event: e,
         target: n
       }) : void 0,
       builderElementIndex: n && i ? [].slice.call(document.getElementsByClassName(i)).indexOf(n) : void 0
     }
   };
-}, Ti = ["svelte", "qwik", "vue"], Oe = () => Ti.includes(O) && (_() || le()), Ii = (e) => {
+}, Ti = ["svelte", "qwik", "vue"], _e = () => Ti.includes(O) && (_() || le()), Ii = (e) => {
   var a, o;
   const t = e.family + (e.kind && !e.kind.includes("#") ? ", " + e.kind : ""), n = t.split(",")[0], i = (o = e.fileUrl) != null ? o : (a = e == null ? void 0 : e.files) == null ? void 0 : a.regular;
   let r = "";
@@ -4257,12 +4265,12 @@ function Ai(e) {
   );
   const [n, i] = k(() => null), [r, a] = k(() => "");
   function o(x, V) {
-    var W, R;
+    var $, R;
     const A = {
       ...e.builderContextSignal.rootState,
       ...x
     };
-    e.builderContextSignal.rootSetState ? (R = (W = e.builderContextSignal).rootSetState) == null || R.call(W, A) : e.setBuilderContextSignal((P) => ({
+    e.builderContextSignal.rootSetState ? (R = ($ = e.builderContextSignal).rootSetState) == null || R.call($, A) : e.setBuilderContextSignal((P) => ({
       ...P,
       rootState: A
     })), e.builderContextSignal.rootSetState ? e.builderContextSignal.rootSetState(A) : e.setBuilderContextSignal((P) => ({
@@ -4271,12 +4279,12 @@ function Ai(e) {
     }));
   }
   function l(x, V) {
-    var W, R, P, I, N;
+    var $, R, P, I, N;
     const A = {
       ...e.builderContextSignal.content,
       ...x,
       data: {
-        ...(W = e.builderContextSignal.content) == null ? void 0 : W.data,
+        ...($ = e.builderContextSignal.content) == null ? void 0 : $.data,
         ...x == null ? void 0 : x.data
       },
       meta: {
@@ -4306,15 +4314,15 @@ function Ai(e) {
       callbacks: {
         configureSdk: (V) => {
           var R;
-          const { breakpoints: A, contentId: W } = V;
-          !W || W !== ((R = e.builderContextSignal.content) == null ? void 0 : R.id) || A && l({
+          const { breakpoints: A, contentId: $ } = V;
+          !$ || $ !== ((R = e.builderContextSignal.content) == null ? void 0 : R.id) || A && l({
             meta: {
               breakpoints: A
             }
           });
         },
         animation: (V) => {
-          Qe(V);
+          Ze(V);
         },
         contentUpdate: (V, A) => {
           l(V);
@@ -4329,14 +4337,14 @@ function Ai(e) {
   function v(x) {
     var V, A;
     if (e.builderContextSignal.content) {
-      const W = (V = e.builderContextSignal.content) == null ? void 0 : V.testVariationId, R = (A = e.builderContextSignal.content) == null ? void 0 : A.id;
+      const $ = (V = e.builderContextSignal.content) == null ? void 0 : V.testVariationId, R = (A = e.builderContextSignal.content) == null ? void 0 : A.id;
       ye({
         apiHost: e.apiHost,
         type: "click",
         canTrack: ee(e.canTrack),
         contentId: R,
         apiKey: e.apiKey,
-        variationId: W !== R ? W : void 0,
+        variationId: $ !== R ? $ : void 0,
         ...Ci(x),
         unique: !p
       });
@@ -4344,8 +4352,8 @@ function Ai(e) {
     p || f(!0);
   }
   function T() {
-    var V, A, W;
-    const x = (W = (A = (V = e.builderContextSignal.content) == null ? void 0 : V.data) == null ? void 0 : A.httpRequests) != null ? W : {};
+    var V, A, $;
+    const x = ($ = (A = (V = e.builderContextSignal.content) == null ? void 0 : V.data) == null ? void 0 : A.httpRequests) != null ? $ : {};
     Object.entries(x).forEach(
       ([R, P]) => {
         if (!P)
@@ -4366,7 +4374,7 @@ function Ai(e) {
               rootSetState: e.builderContextSignal.rootSetState
             })
           )
-        ), $ = I ? {
+        ), W = I ? {
           url: C,
           method: P.request.method,
           headers: P.request.headers,
@@ -4375,13 +4383,13 @@ function Ai(e) {
           url: C,
           method: "GET"
         };
-        Le(JSON.stringify($));
+        He(JSON.stringify(W));
         const F = {
-          method: $.method,
-          headers: $.headers,
-          body: $.body
+          method: W.method,
+          headers: W.headers,
+          body: W.body
         };
-        $.method === "GET" && delete F.body, fetch($.url, F).then((L) => L.json()).then((L) => {
+        W.method === "GET" && delete F.body, fetch(W.url, F).then((L) => L.json()).then((L) => {
           o({
             [R]: L
           }), u[R] = !0;
@@ -4403,7 +4411,7 @@ function Ai(e) {
         "builder:component:stateChange",
         {
           detail: {
-            state: Se(e.builderContextSignal.rootState),
+            state: Ce(e.builderContextSignal.rootState),
             ref: {
               name: e.model
             }
@@ -4414,7 +4422,7 @@ function Ai(e) {
   }
   const U = z(!1);
   return U.current || (T(), E(), U.current = !0), B(() => {
-    var x, V, A, W, R;
+    var x, V, A, $, R;
     if (J()) {
       _() && !e.isNestedRender && (window.addEventListener("message", g), dt({
         ...e.locale ? {
@@ -4431,8 +4439,8 @@ function Ai(e) {
       }), Object.values(
         e.builderContextSignal.componentInfos
       ).forEach((C) => {
-        var $, F;
-        if (!(($ = C.models) != null && $.length) || C.models.includes(e.model)) {
+        var W, F;
+        if (!((W = C.models) != null && W.length) || C.models.includes(e.model)) {
           const L = mt(C);
           (F = window.parent) == null || F.postMessage(L, "*");
         }
@@ -4445,25 +4453,25 @@ function Ai(e) {
         canTrack: !0
       }), N = (A = e.builderContextSignal.content) == null ? void 0 : A.testVariationId;
       if (P && N === I) {
-        const C = (W = e.builderContextSignal.content) == null ? void 0 : W.id, $ = e.apiKey;
+        const C = ($ = e.builderContextSignal.content) == null ? void 0 : $.id, W = e.apiKey;
         ye({
           apiHost: e.apiHost,
           type: "impression",
           canTrack: !0,
           contentId: C,
-          apiKey: $,
+          apiKey: W,
           variationId: I !== C ? I : void 0
         });
       }
       if (le() && !_()) {
-        const C = new URL(location.href).searchParams, $ = C.get("builder.preview"), F = C.get(
-          `builder.overrides.${$}`
+        const C = new URL(location.href).searchParams, W = C.get("builder.preview"), F = C.get(
+          `builder.overrides.${W}`
         ), L = C.get("apiKey") || C.get("builder.space");
-        ($ === "BUILDER_STUDIO" || $ === e.model && L === e.apiKey && (!e.content || F === e.content.id)) && _e({
+        (W === "BUILDER_STUDIO" || W === e.model && L === e.apiKey && (!e.content || F === e.content.id)) && Me({
           model: e.model,
           apiKey: e.apiKey,
           apiVersion: e.builderContextSignal.apiVersion,
-          ...$ === "BUILDER_STUDIO" && ((R = e.context) != null && R.symbolId) ? {
+          ...W === "BUILDER_STUDIO" && ((R = e.context) != null && R.symbolId) ? {
             query: {
               id: e.context.symbolId
             }
@@ -4496,7 +4504,7 @@ function Ai(e) {
       "builder:component:stateChangeListenerActivated",
       E
     ));
-  }, []), /* @__PURE__ */ s(se.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content || Oe() ? /* @__PURE__ */ s(
+  }, []), /* @__PURE__ */ s(se.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content || _e() ? /* @__PURE__ */ s(
     d,
     {
       ref: t,
@@ -4507,7 +4515,7 @@ function Ai(e) {
         ((q = e.content) == null ? void 0 : q.testVariationId) || ((y = e.content) == null ? void 0 : y.id)
       ),
       style: {
-        display: !e.builderContextSignal.content && Oe() ? "none" : void 0
+        display: !e.builderContextSignal.content && _e() ? "none" : void 0
       },
       ...c(),
       ...e.contentWrapperProps,
@@ -4554,7 +4562,7 @@ const Ni = ({
       locale: n
     } : {}
   };
-}, Wi = ({
+}, $i = ({
   content: e,
   data: t
 }) => e ? {
@@ -4565,7 +4573,7 @@ const Ni = ({
   },
   meta: e == null ? void 0 : e.meta
 } : void 0;
-function Fe(e) {
+function Ue(e) {
   var d, h, g, u, S, m, b, p, f;
   const [t, n] = k(
     () => {
@@ -4586,20 +4594,20 @@ function Fe(e) {
   }
   const [r, a] = k(
     () => [
-      ...We(),
+      ...Oe(),
       ...e.customComponents || []
     ].reduce(
       (v, { component: T, ...E }) => ({
         ...v,
         [E.name]: {
           component: T,
-          ...we(E)
+          ...Pe(E)
         }
       }),
       {}
     )
   ), [o, l] = k(() => ({
-    content: Wi({
+    content: $i({
       content: e.content,
       data: e.data
     }),
@@ -4615,12 +4623,12 @@ function Fe(e) {
     apiKey: e.apiKey,
     apiVersion: e.apiVersion,
     componentInfos: [
-      ...We(),
+      ...Oe(),
       ...e.customComponents || []
     ].reduce(
       (v, { component: T, ...E }) => ({
         ...v,
-        [E.name]: we(E)
+        [E.name]: Pe(E)
       }),
       {}
     ),
@@ -4648,7 +4656,7 @@ function Fe(e) {
   }
   return B(() => {
   }, [e.content, e.data, e.locale]), /* @__PURE__ */ s(
-    Me.Provider,
+    ze.Provider,
     {
       value: {
         registeredComponents: r
@@ -4707,7 +4715,7 @@ function Fe(e) {
     }
   );
 }
-function $i(e) {
+function Wi(e) {
   var o;
   const [t, n] = k(
     () => bi({
@@ -4740,7 +4748,15 @@ function $i(e) {
   }
   return B(() => {
   }, []), /* @__PURE__ */ D(w, { children: [
-    !e.isNestedRender && O !== "reactNative" ? /* @__PURE__ */ D(w, { children: [
+    !e.isNestedRender && O !== "reactNative" ? /* @__PURE__ */ s(w, { children: st.includes(O) ? /* @__PURE__ */ s(
+      G,
+      {
+        id: "builderio-init-personalization-variants-fns",
+        nonce: e.nonce || "",
+        scriptStr: Tn()
+      }
+    ) : null }) : null,
+    t ? /* @__PURE__ */ D(w, { children: [
       /* @__PURE__ */ s(
         G,
         {
@@ -4749,16 +4765,6 @@ function $i(e) {
           nonce: e.nonce || ""
         }
       ),
-      at.includes(O) ? /* @__PURE__ */ s(
-        G,
-        {
-          id: "builderio-init-personalization-variants-fns",
-          nonce: e.nonce || "",
-          scriptStr: Tn()
-        }
-      ) : null
-    ] }) : null,
-    t ? /* @__PURE__ */ D(w, { children: [
       /* @__PURE__ */ s(
         te,
         {
@@ -4776,7 +4782,7 @@ function $i(e) {
         }
       ),
       (o = re(e.content)) == null ? void 0 : o.map((l) => /* @__PURE__ */ s(
-        Fe,
+        Ue,
         {
           apiHost: e.apiHost,
           isNestedRender: e.isNestedRender,
@@ -4804,7 +4810,7 @@ function $i(e) {
       ))
     ] }) : null,
     /* @__PURE__ */ s(
-      Fe,
+      Ue,
       {
         apiHost: e.apiHost,
         nonce: e.nonce,
@@ -4837,7 +4843,7 @@ const Di = async ({
 }) => {
   if (t != null && t.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
   (e != null && e.apiKey))
-    return _e({
+    return Me({
       model: t.model,
       apiKey: t.global && t.ownerId ? t.ownerId : e.apiKey,
       apiVersion: e.apiVersion,
@@ -4891,7 +4897,7 @@ function Oi(e) {
   }, []), B(() => {
     d();
   }, [e.symbol]), /* @__PURE__ */ s("div", { ...e.attributes, className: r(), children: /* @__PURE__ */ s(
-    $i,
+    Wi,
     {
       nonce: e.builderContext.nonce,
       isNestedRender: !0,
@@ -4921,7 +4927,7 @@ export {
   se as BuilderContext,
   vt as Button,
   dn as Columns,
-  $i as Content,
+  Wi as Content,
   mn as Fragment,
   bn as Image,
   gn as Section,