@builder.io/sdk-react-nextjs 0.14.10 → 0.14.11

package/lib/node/{bundle-6a6e07b9.js → bundle-1a5c4f3c.js}

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "react";
 import { LRUCache } from "lru-cache";
-import { I as InteractiveElement, B as BlockWrapper, a as BlocksWrapper, D as DynamicRenderer, C as CustomCode, E as Embed, b as ImgComponent, V as Video, c as Button, F as FragmentComponent, d as Image, S as SectionComponent, e as EnableEditor } from "./USE_CLIENT_BUNDLE-1dd54b7e.js";
+import { I as InteractiveElement, B as BlockWrapper, a as BlocksWrapper, D as DynamicRenderer, C as CustomCode, E as Embed, b as ImgComponent, V as Video, c as Button, F as FragmentComponent, d as Image, S as SectionComponent, e as EnableEditor } from "./USE_CLIENT_BUNDLE-64c45aac.js";
 import "next/navigation";
 const EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), isEmptyElement = (e) => typeof e == "string" && EMPTY_HTML_ELEMENTS.has(e.toLowerCase()), TARGET = "rsc", getClassPropName = () => {
   switch (TARGET) {
@@ -220,7 +220,7 @@ output;
   const s = safeDynamicRequire("isolated-vm"), c = fastClone({
     ...a,
     ...r
-  }), d = getFunctionArguments({
+  }), u = getFunctionArguments({
     builder: t,
     context: n,
     event: o,
@@ -228,21 +228,21 @@ output;
   }), g = getIsolateContext(), l = g.global;
   l.setSync("global", l.derefInto()), l.setSync("log", function(...m) {
     console.log(...m);
-  }), l.setSync(BUILDER_SET_STATE_NAME, function(m, u) {
-    set(a, m, u), i == null || i(a);
-  }), d.forEach(([m, u]) => {
-    const y = typeof u == "object" ? new s.Reference(
+  }), l.setSync(BUILDER_SET_STATE_NAME, function(m, d) {
+    set(a, m, d), i == null || i(a);
+  }), u.forEach(([m, d]) => {
+    const b = typeof d == "object" ? new s.Reference(
       // workaround: methods with default values for arguments is not being cloned over
       m === "builder" ? {
-        ...u,
-        getUserAttributes: () => u.getUserAttributes()
-      } : u
+        ...d,
+        getUserAttributes: () => d.getUserAttributes()
+      } : d
     ) : null;
-    l.setSync(getSyncValName(m), y);
+    l.setSync(getSyncValName(m), b);
   }), l.setSync(INJECTED_IVM_GLOBAL, s);
   const f = processCode({
     code: e,
-    args: d
+    args: u
   }), p = g.evalSync(f);
   try {
     return JSON.parse(p);
@@ -307,19 +307,19 @@ function evaluate({
     localState: n
   };
   if (s) {
-    const d = EvalCache.getCacheKey(c), g = EvalCache.getCachedValue(d);
+    const u = EvalCache.getCacheKey(c), g = EvalCache.getCachedValue(u);
     if (g)
       return g.value;
   }
   try {
-    const d = chooseBrowserOrServerEval(c);
+    const u = chooseBrowserOrServerEval(c);
     if (s) {
       const g = EvalCache.getCacheKey(c);
-      EvalCache.setCachedValue(g, d);
+      EvalCache.setCachedValue(g, u);
     }
-    return d;
-  } catch (d) {
-    logger.error("Failed code evaluation: " + d.message, {
+    return u;
+  } catch (u) {
+    logger.error("Failed code evaluation: " + u.message, {
       code: e
     });
     return;
@@ -347,7 +347,7 @@ const evaluateBindings = ({
     }
   };
   for (const s in e.bindings) {
-    const c = e.bindings[s], d = evaluate({
+    const c = e.bindings[s], u = evaluate({
       code: c,
       localState: n,
       rootState: o,
@@ -355,7 +355,7 @@ const evaluateBindings = ({
       context: t,
       enableCache: !0
     });
-    set(a, s, d);
+    set(a, s, u);
   }
   return a;
 };
@@ -461,15 +461,15 @@ const getComponent = ({
   if (!Array.isArray(r))
     return;
   const i = n.collection.split(".").pop(), a = n.itemName || (i ? i + "Item" : "item");
-  return r.map((c, d) => ({
+  return r.map((c, u) => ({
     context: {
       ...t,
       localState: {
         ...t.localState,
-        $index: d,
+        $index: u,
         $item: c,
         [a]: c,
-        [`$${a}Index`]: d
+        [`$${a}Index`]: u
       }
     },
     block: o
@@ -518,7 +518,13 @@ const getComponent = ({
   }, n;
 };
 function InlinedStyles(e) {
-  return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: e.styles }, id: e.id });
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: { __html: e.styles },
+      "data-id": e.id
+    }
+  );
 }
 function BlockStyles(e) {
   const t = function() {
@@ -532,7 +538,7 @@ function BlockStyles(e) {
     });
     return checkIsDefined(r.hide) ? !r.hide : checkIsDefined(r.show) ? r.show : !0;
   }, n = function() {
-    var u;
+    var d;
     const r = getProcessedBlock({
       block: e.block,
       localState: e.context.localState,
@@ -541,16 +547,16 @@ function BlockStyles(e) {
       context: e.context.context,
       shouldEvaluateBindings: !0
     }), i = r.responsiveStyles, a = e.context.content, s = getSizesForBreakpoints(
-      ((u = a == null ? void 0 : a.meta) == null ? void 0 : u.breakpoints) || {}
-    ), c = i == null ? void 0 : i.large, d = i == null ? void 0 : i.medium, g = i == null ? void 0 : i.small, l = r.id;
+      ((d = a == null ? void 0 : a.meta) == null ? void 0 : d.breakpoints) || {}
+    ), c = i == null ? void 0 : i.large, u = i == null ? void 0 : i.medium, g = i == null ? void 0 : i.small, l = r.id;
     if (!l)
       return "";
     const f = c ? createCssClass({
       className: l,
       styles: c
-    }) : "", p = d ? createCssClass({
+    }) : "", p = u ? createCssClass({
       className: l,
-      styles: d,
+      styles: u,
       mediaQuery: getMaxWidthQueryForSize(
         "medium",
         s
@@ -565,7 +571,7 @@ function BlockStyles(e) {
     }) : "";
     return [f, p, m].join(" ");
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: n() && t() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: n() }) }) : null });
+  return /* @__PURE__ */ jsx(Fragment, { children: n() && t() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { id: "builderio-block", styles: n() }) }) : null });
 }
 function capitalizeFirstLetter(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
@@ -701,7 +707,7 @@ function RepeatedBlock(e) {
   );
 }
 function Block(e) {
-  var c, d, g;
+  var c, u, g;
   const t = function() {
     return getComponent({
       block: e.block,
@@ -727,23 +733,23 @@ function Block(e) {
     var p;
     return e.block.tagName === "a" || ((p = o().properties) == null ? void 0 : p.href) || o().href ? e.linkComponent || "a" : e.block.tagName || "div";
   }, i = function() {
-    var m, u;
+    var m, d;
     if ((m = e.block.repeat) != null && m.collection)
-      return !!((u = n()) != null && u.length);
+      return !!((d = n()) != null && d.length);
     const f = "hide" in o() ? o().hide : !1;
     return ("show" in o() ? o().show : !0) && !f;
   }, a = function() {
     var p;
     return !((p = t()) != null && p.component) && !n() ? o().children ?? [] : [];
   }, s = function() {
-    var f, p, m, u, y, h, S, k, b, C;
+    var f, p, m, d, b, h, S, k, y, C;
     return {
       blockChildren: o().children ?? [],
       componentRef: (f = t()) == null ? void 0 : f.component,
       componentOptions: {
         ...getBlockComponentOptions(o()),
         builderContext: e.context,
-        ...((p = t()) == null ? void 0 : p.name) === "Core:Button" || ((m = t()) == null ? void 0 : m.name) === "Symbol" || ((u = t()) == null ? void 0 : u.name) === "Columns" || ((y = t()) == null ? void 0 : y.name) === "Form:Form" ? {
+        ...((p = t()) == null ? void 0 : p.name) === "Core:Button" || ((m = t()) == null ? void 0 : m.name) === "Symbol" || ((d = t()) == null ? void 0 : d.name) === "Columns" || ((b = t()) == null ? void 0 : b.name) === "Form:Form" ? {
           builderLinkComponent: e.linkComponent
         } : {},
         ...((h = t()) == null ? void 0 : h.name) === "Symbol" || ((S = t()) == null ? void 0 : S.name) === "Columns" || ((k = t()) == null ? void 0 : k.name) === "Form:Form" ? {
@@ -754,7 +760,7 @@ function Block(e) {
       linkComponent: e.linkComponent,
       registeredComponents: e.registeredComponents,
       builderBlock: o(),
-      includeBlockProps: ((b = t()) == null ? void 0 : b.noWrap) === !0,
+      includeBlockProps: ((y = t()) == null ? void 0 : y.noWrap) === !0,
       isInteractive: !((C = t()) != null && C.isRSC)
     };
   };
@@ -804,7 +810,7 @@ function Block(e) {
               isInteractive: s().isInteractive
             }
           ),
-          (d = a()) == null ? void 0 : d.map((l) => /* @__PURE__ */ jsx(
+          (u = a()) == null ? void 0 : u.map((l) => /* @__PURE__ */ jsx(
             Block,
             {
               block: l,
@@ -845,23 +851,23 @@ function Blocks(e) {
 }
 function Columns(e) {
   var p;
-  const t = typeof e.space == "number" ? e.space || 0 : 20, n = e.columns || [], o = e.stackColumnsAt || "tablet", r = function(u) {
-    var y;
-    return ((y = n[u]) == null ? void 0 : y.width) || 100 / n.length;
-  }, i = function(u) {
-    const y = t * (n.length - 1) / n.length;
-    return `calc(${r(u)}% - ${y}px)`;
+  const t = typeof e.space == "number" ? e.space || 0 : 20, n = e.columns || [], o = e.stackColumnsAt || "tablet", r = function(d) {
+    var b;
+    return ((b = n[d]) == null ? void 0 : b.width) || 100 / n.length;
+  }, i = function(d) {
+    const b = t * (n.length - 1) / n.length;
+    return `calc(${r(d)}% - ${b}px)`;
   }, a = function({
-    stackedStyle: u,
-    desktopStyle: y
+    stackedStyle: d,
+    desktopStyle: b
   }) {
-    return o === "tablet" ? u : y;
+    return o === "tablet" ? d : b;
   }, s = function({
-    stackedStyle: u,
-    desktopStyle: y
+    stackedStyle: d,
+    desktopStyle: b
   }) {
-    return o === "never" ? y : u;
-  }, c = e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column", d = function() {
+    return o === "never" ? b : d;
+  }, c = e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column", u = function() {
     return {
       "--flex-dir": c,
       "--flex-dir-tablet": a({
@@ -869,8 +875,8 @@ function Columns(e) {
         desktopStyle: "row"
       })
     };
-  }, g = function(u) {
-    const y = u === 0 ? 0 : t, h = i(u), S = `${y}px`, k = "100%", b = 0;
+  }, g = function(d) {
+    const b = d === 0 ? 0 : t, h = i(d), S = `${b}px`, k = "100%", y = 0;
     return {
       ...{
         display: "flex",
@@ -884,7 +890,7 @@ function Columns(e) {
         desktopStyle: h
       }),
       "--column-margin-left-mobile": s({
-        stackedStyle: b,
+        stackedStyle: y,
         desktopStyle: S
       }),
       "--column-width-tablet": a({
@@ -892,15 +898,15 @@ function Columns(e) {
         desktopStyle: h
       }),
       "--column-margin-left-tablet": a({
-        stackedStyle: b,
+        stackedStyle: y,
         desktopStyle: S
       })
     };
-  }, l = function(u) {
+  }, l = function(d) {
     var h, S;
     return getSizesForBreakpoints(
       ((S = (h = e.builderContext.content) == null ? void 0 : h.meta) == null ? void 0 : S.breakpoints) || {}
-    )[u].max;
+    )[d].max;
   }, f = function() {
     return `
         @media (max-width: ${l("medium")}px) {
@@ -932,11 +938,11 @@ function Columns(e) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `builder-columns ${e.builderBlock.id}-breakpoints div-7e6263b2`,
-        style: d(),
+        className: `builder-columns ${e.builderBlock.id}-breakpoints div-664216e4`,
+        style: u(),
         children: [
-          /* @__PURE__ */ jsx(InlinedStyles, { styles: f() }),
-          (p = e.columns) == null ? void 0 : p.map((m, u) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(InlinedStyles, { id: "builderio-columns", styles: f() }),
+          (p = e.columns) == null ? void 0 : p.map((m, d) => /* @__PURE__ */ jsx(
             DynamicRenderer,
             {
               TagName: m.link ? e.builderLinkComponent || "a" : "div",
@@ -946,12 +952,12 @@ function Columns(e) {
                   href: m.link
                 } : {},
                 [getClassPropName()]: "builder-column",
-                style: mapStyleObjToStrIfNeeded(g(u))
+                style: mapStyleObjToStrIfNeeded(g(d))
               },
               children: /* @__PURE__ */ jsx(
                 Blocks,
                 {
-                  path: `component.options.columns.${u}.blocks`,
+                  path: `component.options.columns.${d}.blocks`,
                   parent: e.builderBlock.id,
                   styleProp: {
                     flexGrow: "1"
@@ -963,12 +969,12 @@ function Columns(e) {
                 }
               )
             },
-            u
+            d
           ))
         ]
       }
     ),
-    /* @__PURE__ */ jsx("style", { children: `.div-7e6263b2 {
+    /* @__PURE__ */ jsx("style", { children: `.div-664216e4 {
   display: flex;
   line-height: normal;
 }` })
@@ -1400,15 +1406,15 @@ const getTopLevelDomain = (e) => {
     onChange: (e) => {
       e.delete("srcset"), e.delete("noWebp");
       function n(a, s = 6e4) {
-        return new Promise((c, d) => {
+        return new Promise((c, u) => {
           const g = document.createElement("img");
           let l = !1;
           g.onload = () => {
             l = !0, c(g);
           }, g.addEventListener("error", (f) => {
-            console.warn("Image load failed", f.error), d(f.error);
+            console.warn("Image load failed", f.error), u(f.error);
           }), g.src = a, setTimeout(() => {
-            l || d(new Error("Image load timed out"));
+            l || u(new Error("Image load timed out"));
           }, s);
         });
       }
@@ -1910,7 +1916,7 @@ const componentInfo$3 = {
 })), checkShouldRenderVariants = ({
   canTrack: e,
   content: t
-}) => !(!(getVariants(t).length > 0) || !e || isBrowser()), getIsHydrationTarget = (e) => e === "react" || e === "reactNative", isHydrationTarget = getIsHydrationTarget(TARGET), getScriptString = () => `
+}) => !(!(getVariants(t).length > 0) || !e || isBrowser()), getIsHydrationTarget = (e) => e === "react" || e === "reactNative", isHydrationTarget = getIsHydrationTarget(TARGET), getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `, getUpdateCookieAndStylesScript = (e, t) => `
@@ -1927,7 +1933,7 @@ function InlinedScript(e) {
     "script",
     {
       dangerouslySetInnerHTML: { __html: e.scriptStr },
-      id: e.id || ""
+      "data-id": e.id
     }
   );
 }
@@ -1995,38 +2001,38 @@ const DEFAULT_API_VERSION = "v3", BUILDER_SEARCHPARAMS_PREFIX = "builder.", BUIL
     enrich: a,
     locale: s,
     apiVersion: c = DEFAULT_API_VERSION,
-    fields: d,
+    fields: u,
     omit: g,
     offset: l,
     cacheSeconds: f,
     staleCacheSeconds: p,
     sort: m,
-    includeUnpublished: u
+    includeUnpublished: d
   } = e;
   if (!i)
     throw new Error("Missing API key");
   if (!["v3"].includes(c))
     throw new Error(`Invalid apiVersion: expected 'v3', received '${c}'`);
-  const y = t !== 1, h = new URL(`https://cdn.builder.io/api/${c}/content/${r}`);
-  if (h.searchParams.set("apiKey", i), h.searchParams.set("limit", String(t)), h.searchParams.set("noTraverse", String(y)), h.searchParams.set("includeRefs", String(!0)), s && h.searchParams.set("locale", s), a && h.searchParams.set("enrich", String(a)), h.searchParams.set("omit", g || "meta.componentsUsed"), d && h.searchParams.set("fields", d), Number.isFinite(l) && l > -1 && h.searchParams.set("offset", String(Math.floor(l))), typeof u == "boolean" && h.searchParams.set("includeUnpublished", String(u)), f && isPositiveNumber(f) && h.searchParams.set("cacheSeconds", String(f)), p && isPositiveNumber(p) && h.searchParams.set("staleCacheSeconds", String(p)), m) {
-    const b = flatten({
+  const b = t !== 1, h = new URL(`https://cdn.builder.io/api/${c}/content/${r}`);
+  if (h.searchParams.set("apiKey", i), h.searchParams.set("limit", String(t)), h.searchParams.set("noTraverse", String(b)), h.searchParams.set("includeRefs", String(!0)), s && h.searchParams.set("locale", s), a && h.searchParams.set("enrich", String(a)), h.searchParams.set("omit", g || "meta.componentsUsed"), u && h.searchParams.set("fields", u), Number.isFinite(l) && l > -1 && h.searchParams.set("offset", String(Math.floor(l))), typeof d == "boolean" && h.searchParams.set("includeUnpublished", String(d)), f && isPositiveNumber(f) && h.searchParams.set("cacheSeconds", String(f)), p && isPositiveNumber(p) && h.searchParams.set("staleCacheSeconds", String(p)), m) {
+    const y = flatten({
       sort: m
     });
-    for (const C in b)
-      h.searchParams.set(C, JSON.stringify(b[C]));
+    for (const C in y)
+      h.searchParams.set(C, JSON.stringify(y[C]));
   }
   const S = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(e.options || {})
   }, k = flatten(S);
-  for (const b in k)
-    h.searchParams.set(b, String(k[b]));
+  for (const y in k)
+    h.searchParams.set(y, String(k[y]));
   if (n && h.searchParams.set("userAttributes", JSON.stringify(n)), o) {
-    const b = flatten({
+    const y = flatten({
       query: o
     });
-    for (const C in b)
-      h.searchParams.set(C, JSON.stringify(b[C]));
+    for (const C in y)
+      h.searchParams.set(C, JSON.stringify(y[C]));
   }
   return h;
 }, checkContentHasResults = (e) => "results" in e;
@@ -2272,7 +2278,7 @@ function isFromTrustedHost(e, t) {
   const n = new URL(t.origin), o = n.hostname;
   return (e || DEFAULT_TRUSTED_HOSTS).findIndex((r) => r.startsWith("*.") ? o.endsWith(r.slice(1)) : r === o) > -1;
 }
-const SDK_VERSION = "0.14.10", registry = {};
+const SDK_VERSION = "0.14.11", registry = {};
 function register(e, t) {
   let n = registry[e];
   if (n || (n = registry[e] = []), n.push(t), isBrowser()) {
@@ -2342,7 +2348,7 @@ const setupBrowserForEditing = (e = {}) => {
     if (r != null && r.type)
       switch (r.type) {
         case "builder.evaluate": {
-          const s = r.data.text, c = r.data.arguments || [], d = r.data.id, g = new Function(s);
+          const s = r.data.text, c = r.data.arguments || [], u = r.data.id, g = new Function(s);
           let l, f = null;
           try {
             l = g.apply(null, c);
@@ -2352,7 +2358,7 @@ const setupBrowserForEditing = (e = {}) => {
           f ? (i = window.parent) == null || i.postMessage({
             type: "builder.evaluateError",
             data: {
-              id: d,
+              id: u,
               error: f.message
             }
           }, "*") : l && typeof l.then == "function" ? l.then((p) => {
@@ -2360,7 +2366,7 @@ const setupBrowserForEditing = (e = {}) => {
             (m = window.parent) == null || m.postMessage({
               type: "builder.evaluateResult",
               data: {
-                id: d,
+                id: u,
                 result: p
               }
             }, "*");
@@ -2368,7 +2374,7 @@ const setupBrowserForEditing = (e = {}) => {
             type: "builder.evaluateResult",
             data: {
               result: l,
-              id: d
+              id: u
             }
           }, "*");
           break;
@@ -2525,7 +2531,7 @@ ${getFontCss({
   })}
 ${getDefaultStyles(e.isNestedRender)}
 `.trim();
-  return /* @__PURE__ */ jsx(InlinedStyles, { styles: t });
+  return /* @__PURE__ */ jsx(InlinedStyles, { id: "builderio-content", styles: t });
 }
 const getRootStateInitialValue = ({
   content: e,
@@ -2556,7 +2562,7 @@ const getRootStateInitialValue = ({
   meta: e == null ? void 0 : e.meta
 } : void 0;
 function ContentComponent(e) {
-  var r, i, a, s, c, d, g, l, f;
+  var r, i, a, s, c, u, g, l, f;
   const t = getUpdateVariantVisibilityScript({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     variationId: (r = e.content) == null ? void 0 : r.testVariationId,
@@ -2566,11 +2572,11 @@ function ContentComponent(e) {
     ...getDefaultRegisteredComponents(),
     ...e.customComponents || []
   ].reduce(
-    (p, { component: m, ...u }) => ({
+    (p, { component: m, ...d }) => ({
       ...p,
-      [u.name]: {
+      [d.name]: {
         component: m,
-        ...serializeComponentInfo(u)
+        ...serializeComponentInfo(d)
       }
     }),
     {}
@@ -2593,9 +2599,9 @@ function ContentComponent(e) {
       ...getDefaultRegisteredComponents(),
       ...e.customComponents || []
     ].reduce(
-      (p, { component: m, ...u }) => ({
+      (p, { component: m, ...d }) => ({
         ...p,
-        [u.name]: serializeComponentInfo(u)
+        [d.name]: serializeComponentInfo(d)
       }),
       {}
     ),
@@ -2621,14 +2627,20 @@ function ContentComponent(e) {
       linkComponent: e.linkComponent,
       trustedHosts: e.trustedHosts,
       children: [
-        e.isSsrAbTest ? /* @__PURE__ */ jsx(InlinedScript, { scriptStr: t }) : null,
+        e.isSsrAbTest ? /* @__PURE__ */ jsx(
+          InlinedScript,
+          {
+            id: "builderio-variant-visibility",
+            scriptStr: t
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           ContentStyles,
           {
             isNestedRender: e.isNestedRender,
             contentId: (a = o.content) == null ? void 0 : a.id,
             cssCode: (c = (s = o.content) == null ? void 0 : s.data) == null ? void 0 : c.cssCode,
-            customFonts: (g = (d = o.content) == null ? void 0 : d.data) == null ? void 0 : g.customFonts
+            customFonts: (g = (u = o.content) == null ? void 0 : u.data) == null ? void 0 : g.customFonts
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2645,47 +2657,59 @@ function ContentComponent(e) {
   );
 }
 function ContentVariants(e) {
-  var i, a;
+  var i;
   const t = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(e.canTrack),
     content: e.content
   }), n = function() {
-    var c;
+    var s;
     return getUpdateCookieAndStylesScript(
-      getVariants(e.content).map((d) => ({
-        id: d.testVariationId,
-        testRatio: d.testRatio
+      getVariants(e.content).map((c) => ({
+        id: c.testVariationId,
+        testRatio: c.testRatio
       })),
-      ((c = e.content) == null ? void 0 : c.id) || ""
+      ((s = e.content) == null ? void 0 : s.id) || ""
     );
   }, o = function() {
-    return getVariants(e.content).map((c) => `.variant-${c.testVariationId} { display: none; } `).join("");
+    return getVariants(e.content).map((s) => `.variant-${s.testVariationId} { display: none; } `).join("");
   }, r = function() {
-    var c;
+    var s;
     return t ? {
       ...e.content,
-      testVariationId: (c = e.content) == null ? void 0 : c.id
+      testVariationId: (s = e.content) == null ? void 0 : s.id
     } : handleABTestingSync({
       item: e.content,
       canTrack: getDefaultCanTrack(e.canTrack)
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !e.isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ jsx(InlinedScript, { scriptStr: getScriptString() }) : null,
+    !e.isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ jsx(
+      InlinedScript,
+      {
+        id: "builderio-init-variants-fns",
+        scriptStr: getInitVariantsFnsScriptString()
+      }
+    ) : null,
     t ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         InlinedStyles,
         {
-          id: `variants-styles-${(i = e.content) == null ? void 0 : i.id}`,
+          id: "builderio-variants",
           styles: o()
         }
       ),
-      /* @__PURE__ */ jsx(InlinedScript, { scriptStr: n() }),
-      (a = getVariants(e.content)) == null ? void 0 : a.map((s) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
+        InlinedScript,
+        {
+          id: "builderio-variants-visibility",
+          scriptStr: n()
+        }
+      ),
+      (i = getVariants(e.content)) == null ? void 0 : i.map((a) => /* @__PURE__ */ jsx(
         ContentComponent,
         {
           isNestedRender: e.isNestedRender,
-          content: s,
+          content: a,
           showContent: !1,
           model: e.model,
           data: e.data,
@@ -2704,7 +2728,7 @@ function ContentVariants(e) {
           contentWrapperProps: e.contentWrapperProps,
           trustedHosts: e.trustedHosts
         },
-        s.testVariationId
+        a.testVariationId
       ))
     ] }) : null,
     /* @__PURE__ */ jsx(
@@ -2755,11 +2779,11 @@ const fetchSymbolContent = async ({
 async function Symbol$1(e) {
   var o, r, i, a, s;
   const t = function() {
-    var d, g;
+    var u, g;
     return [
       e.attributes[getClassPropName()],
       "builder-symbol",
-      (d = e.symbol) != null && d.inline ? "builder-inline-symbol" : void 0,
+      (u = e.symbol) != null && u.inline ? "builder-inline-symbol" : void 0,
       (g = e.symbol) != null && g.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }, n = ((o = e.symbol) == null ? void 0 : o.content) || await fetchSymbolContent({