@builder.io/sdk-react 0.7.2 → 0.7.4

package/lib/node/index.mjs

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { createContext, useState, useContext, createElement, useRef, useEffect } from "react";
 import { i as isEditing, j as isBrowser, k as getUserAttributes, l as fastClone, m as logger, n as checkIsDefined, T as TARGET, r as register, o as getDefaultCanTrack, p as _track, a as isPreviewing, c as createRegisterComponentMessage, b as fetchOneEntry, q as fetch$1, u as components, v as serializeComponentInfo, w as handleABTestingSync } from "./server-entry-e4cd1e05.mjs";
-import { _ as M, h as W, f as L, g as O, e as U, d as D, s as H, t as K } from "./server-entry-e4cd1e05.mjs";
+import { _ as L, h as W, f as O, g as U, e as H, d as K, s as z, t as q } from "./server-entry-e4cd1e05.mjs";
 function Button(e) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     e.link ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
@@ -79,13 +79,13 @@ const getFunctionArguments = ({
   rootSetState: a,
   rootState: r
 }) => {
-  const s = getFunctionArguments({
+  const l = getFunctionArguments({
     builder: t,
     context: n,
     event: i,
     state: flattenState(r, o, a)
   });
-  return new Function(...s.map(([c]) => c), e)(...s.map(([, c]) => c));
+  return new Function(...l.map(([c]) => c), e)(...l.map(([, c]) => c));
 };
 function flattenState(e, t, n) {
   if (e === t)
@@ -167,37 +167,37 @@ output;
   rootSetState: a,
   rootState: r
 }) => {
-  const s = fastClone({
+  const l = fastClone({
     ...r,
     ...o
   }), c = getFunctionArguments({
     builder: t,
     context: n,
     event: i,
-    state: s
-  }), l = getIsolateContext(), u = l.global;
-  u.setSync("global", u.derefInto()), u.setSync("log", function(...b) {
-    console.log(...b);
-  }), u.setSync(BUILDER_SET_STATE_NAME, function(b, d) {
-    set(r, b, d), a == null || a(r);
-  }), c.forEach(([b, d]) => {
-    const x = typeof d == "object" ? new ivm.Reference(
+    state: l
+  }), s = getIsolateContext(), d = s.global;
+  d.setSync("global", d.derefInto()), d.setSync("log", function(...S) {
+    console.log(...S);
+  }), d.setSync(BUILDER_SET_STATE_NAME, function(S, g) {
+    set(r, S, g), a == null || a(r);
+  }), c.forEach(([S, g]) => {
+    const y = typeof g == "object" ? new ivm.Reference(
       // workaround: methods with default values for arguments is not being cloned over
-      b === "builder" ? {
-        ...d,
-        getUserAttributes: () => d.getUserAttributes()
-      } : d
+      S === "builder" ? {
+        ...g,
+        getUserAttributes: () => g.getUserAttributes()
+      } : g
     ) : null;
-    u.setSync(getSyncValName(b), x);
-  }), u.setSync(INJECTED_IVM_GLOBAL, ivm);
+    d.setSync(getSyncValName(S), y);
+  }), d.setSync(INJECTED_IVM_GLOBAL, ivm);
   const f = processCode({
     code: e,
     args: c
-  }), h = l.evalSync(f);
+  }), b = s.evalSync(f);
   try {
-    return JSON.parse(h);
+    return JSON.parse(b);
   } catch {
-    return h;
+    return b;
   }
 }, chooseBrowserOrServerEval = (e) => isBrowser() ? runInBrowser(e) : runInNode(e);
 function evaluate({
@@ -213,7 +213,7 @@ function evaluate({
     logger.warn("Skipping evaluation of empty code block.");
     return;
   }
-  const s = {
+  const l = {
     code: parseCode(e, {
       isExpression: r
     }),
@@ -225,7 +225,7 @@ function evaluate({
     localState: n
   };
   try {
-    return chooseBrowserOrServerEval(s);
+    return chooseBrowserOrServerEval(l);
   } catch (c) {
     logger.error("Failed code evaluation: " + c.message, {
       code: e
@@ -254,15 +254,15 @@ const evaluateBindings = ({
       ...a.actions
     }
   };
-  for (const s in e.bindings) {
-    const c = e.bindings[s], l = evaluate({
+  for (const l in e.bindings) {
+    const c = e.bindings[l], s = evaluate({
       code: c,
       localState: n,
       rootState: i,
       rootSetState: o,
       context: t
     });
-    set(r, s, l);
+    set(r, l, s);
   }
   return r;
 };
@@ -325,15 +325,15 @@ const EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img",
   if (!Array.isArray(o))
     return;
   const a = n.collection.split(".").pop(), r = n.itemName || (a ? a + "Item" : "item");
-  return o.map((c, l) => ({
+  return o.map((c, s) => ({
     context: {
       ...t,
       localState: {
         ...t.localState,
-        $index: l,
+        $index: s,
         $item: c,
         [r]: c,
-        [`$${r}Index`]: l
+        [`$${r}Index`]: s
       }
     },
     block: i
@@ -412,7 +412,7 @@ function BlockStyles(e) {
     return checkIsDefined(i.hide) ? !i.hide : checkIsDefined(i.show) ? i.show : !0;
   }
   function n() {
-    var d;
+    var g;
     const i = getProcessedBlock({
       block: e.block,
       localState: e.context.localState,
@@ -421,29 +421,29 @@ function BlockStyles(e) {
       context: e.context.context,
       shouldEvaluateBindings: !0
     }), o = i.responsiveStyles, a = e.context.content, r = getSizesForBreakpoints(
-      ((d = a == null ? void 0 : a.meta) == null ? void 0 : d.breakpoints) || {}
-    ), s = o == null ? void 0 : o.large, c = o == null ? void 0 : o.medium, l = o == null ? void 0 : o.small, u = i.id;
-    if (!u)
+      ((g = a == null ? void 0 : a.meta) == null ? void 0 : g.breakpoints) || {}
+    ), l = o == null ? void 0 : o.large, c = o == null ? void 0 : o.medium, s = o == null ? void 0 : o.small, d = i.id;
+    if (!d)
       return "";
-    const f = s ? createCssClass({
-      className: u,
-      styles: s
-    }) : "", h = c ? createCssClass({
-      className: u,
+    const f = l ? createCssClass({
+      className: d,
+      styles: l
+    }) : "", b = c ? createCssClass({
+      className: d,
       styles: c,
       mediaQuery: getMaxWidthQueryForSize(
         "medium",
         r
       )
-    }) : "", b = l ? createCssClass({
-      className: u,
-      styles: l,
+    }) : "", S = s ? createCssClass({
+      className: d,
+      styles: s,
       mediaQuery: getMaxWidthQueryForSize(
         "small",
         r
       )
     }) : "";
-    return [f, h, b].join(" ");
+    return [f, b, S].join(" ");
   }
   return /* @__PURE__ */ jsx(Fragment, { children: n() && t() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: n() }) }) : null });
 }
@@ -657,7 +657,7 @@ function RepeatedBlock(e) {
   ) });
 }
 function Block(e) {
-  var u, f, h, b;
+  var d, f, b, S;
   function t() {
     return getComponent({
       block: e.block,
@@ -688,40 +688,40 @@ function Block(e) {
     return "hide" in i() ? !i().hide : "show" in i() ? i().show : !0;
   }
   function r() {
-    var x;
-    return !((x = t == null ? void 0 : t()) != null && x.component) && !n() ? i().children ?? [] : [];
+    var y;
+    return !((y = t == null ? void 0 : t()) != null && y.component) && !n() ? i().children ?? [] : [];
   }
-  function s() {
-    var d, x, v, C, S;
+  function l() {
+    var g, y, E, I, v;
     return {
       blockChildren: i().children ?? [],
-      componentRef: (d = t == null ? void 0 : t()) == null ? void 0 : d.component,
+      componentRef: (g = t == null ? void 0 : t()) == null ? void 0 : g.component,
       componentOptions: {
         ...getBlockComponentOptions(i()),
         builderContext: e.context,
-        ...((x = t == null ? void 0 : t()) == null ? void 0 : x.name) === "Symbol" || ((v = t == null ? void 0 : t()) == null ? void 0 : v.name) === "Columns" ? {
+        ...((y = t == null ? void 0 : t()) == null ? void 0 : y.name) === "Symbol" || ((E = t == null ? void 0 : t()) == null ? void 0 : E.name) === "Columns" ? {
           builderComponents: e.registeredComponents
         } : {}
       },
       context: c,
       registeredComponents: e.registeredComponents,
       builderBlock: i(),
-      includeBlockProps: ((C = t == null ? void 0 : t()) == null ? void 0 : C.noWrap) === !0,
-      isInteractive: !((S = t == null ? void 0 : t()) != null && S.isRSC)
+      includeBlockProps: ((I = t == null ? void 0 : t()) == null ? void 0 : I.noWrap) === !0,
+      isInteractive: !((v = t == null ? void 0 : t()) != null && v.isRSC)
     };
   }
-  const [c, l] = useState(() => e.context);
-  return /* @__PURE__ */ jsx(Fragment, { children: a() ? /* @__PURE__ */ jsx(Fragment, { children: (u = t == null ? void 0 : t()) != null && u.noWrap ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  const [c, s] = useState(() => e.context);
+  return /* @__PURE__ */ jsx(Fragment, { children: a() ? /* @__PURE__ */ jsx(Fragment, { children: (d = t == null ? void 0 : t()) != null && d.noWrap ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ComponentRef,
     {
-      componentRef: s().componentRef,
-      componentOptions: s().componentOptions,
-      blockChildren: s().blockChildren,
-      context: s().context,
-      registeredComponents: s().registeredComponents,
-      builderBlock: s().builderBlock,
-      includeBlockProps: s().includeBlockProps,
-      isInteractive: s().isInteractive
+      componentRef: l().componentRef,
+      componentOptions: l().componentOptions,
+      blockChildren: l().blockChildren,
+      context: l().context,
+      registeredComponents: l().registeredComponents,
+      builderBlock: l().builderBlock,
+      includeBlockProps: l().includeBlockProps,
+      isInteractive: l().isInteractive
     }
   ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     isEmptyHtmlElement(o()) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
@@ -733,14 +733,14 @@ function Block(e) {
         hasChildren: !1
       }
     ) }) : null,
-    !isEmptyHtmlElement(o()) && n() ? /* @__PURE__ */ jsx(Fragment, { children: (f = n()) == null ? void 0 : f.map((d, x) => /* @__PURE__ */ jsx(
+    !isEmptyHtmlElement(o()) && n() ? /* @__PURE__ */ jsx(Fragment, { children: (f = n()) == null ? void 0 : f.map((g, y) => /* @__PURE__ */ jsx(
       RepeatedBlock,
       {
-        repeatContext: d.context,
-        block: d.block,
+        repeatContext: g.context,
+        block: g.block,
         registeredComponents: e.registeredComponents
       },
-      x
+      y
     )) }) : null,
     !isEmptyHtmlElement(o()) && !n() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       BlockWrapper,
@@ -753,32 +753,32 @@ function Block(e) {
           /* @__PURE__ */ jsx(
             ComponentRef,
             {
-              componentRef: s().componentRef,
-              componentOptions: s().componentOptions,
-              blockChildren: s().blockChildren,
-              context: s().context,
-              registeredComponents: s().registeredComponents,
-              builderBlock: s().builderBlock,
-              includeBlockProps: s().includeBlockProps,
-              isInteractive: s().isInteractive
+              componentRef: l().componentRef,
+              componentOptions: l().componentOptions,
+              blockChildren: l().blockChildren,
+              context: l().context,
+              registeredComponents: l().registeredComponents,
+              builderBlock: l().builderBlock,
+              includeBlockProps: l().includeBlockProps,
+              isInteractive: l().isInteractive
             }
           ),
-          (h = r()) == null ? void 0 : h.map((d) => /* @__PURE__ */ jsx(
+          (b = r()) == null ? void 0 : b.map((g) => /* @__PURE__ */ jsx(
             Block,
             {
-              block: d,
+              block: g,
               context: c,
               registeredComponents: e.registeredComponents
             },
-            "block-" + d.id
+            "block-" + g.id
           )),
-          (b = r()) == null ? void 0 : b.map((d) => /* @__PURE__ */ jsx(
+          (S = r()) == null ? void 0 : S.map((g) => /* @__PURE__ */ jsx(
             BlockStyles,
             {
-              block: d,
+              block: g,
               context: c
             },
-            "block-style-" + d.id
+            "block-style-" + g.id
           ))
         ]
       }
@@ -870,76 +870,76 @@ function Blocks(e) {
   );
 }
 function Columns(e) {
-  var C;
+  var I;
   const [t, n] = useState(
     () => typeof e.space == "number" ? e.space || 0 : 20
   ), [i, o] = useState(() => e.columns || []), [a, r] = useState(
     () => e.stackColumnsAt || "tablet"
   );
-  function s(S) {
-    var E;
-    return ((E = i[S]) == null ? void 0 : E.width) || 100 / i.length;
+  function l(v) {
+    var C;
+    return ((C = i[v]) == null ? void 0 : C.width) || 100 / i.length;
   }
-  function c(S) {
-    const E = t * (i.length - 1) / i.length;
-    return `calc(${s(S)}% - ${E}px)`;
+  function c(v) {
+    const C = t * (i.length - 1) / i.length;
+    return `calc(${l(v)}% - ${C}px)`;
   }
-  function l({
-    stackedStyle: S,
-    desktopStyle: E
+  function s({
+    stackedStyle: v,
+    desktopStyle: C
   }) {
-    return a === "tablet" ? S : E;
+    return a === "tablet" ? v : C;
   }
-  function u({
-    stackedStyle: S,
-    desktopStyle: E
+  function d({
+    stackedStyle: v,
+    desktopStyle: C
   }) {
-    return a === "never" ? E : S;
+    return a === "never" ? C : v;
   }
-  const [f, h] = useState(
+  const [f, b] = useState(
     () => e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column"
   );
-  function b() {
+  function S() {
     return {
       "--flex-dir": f,
-      "--flex-dir-tablet": l({
+      "--flex-dir-tablet": s({
         stackedStyle: f,
         desktopStyle: "row"
       })
     };
   }
-  function d(S) {
-    const E = S === 0 ? 0 : t, w = c(S), T = `${E}px`, R = "100%", j = 0;
+  function g(v) {
+    const C = v === 0 ? 0 : t, T = c(v), w = `${C}px`, R = "100%", j = 0;
     return {
-      width: w,
-      ["marginLeft"]: T,
-      "--column-width-mobile": u({
+      width: T,
+      ["marginLeft"]: w,
+      "--column-width-mobile": d({
         stackedStyle: R,
-        desktopStyle: w
+        desktopStyle: T
       }),
-      "--column-margin-left-mobile": u({
+      "--column-margin-left-mobile": d({
         stackedStyle: j,
-        desktopStyle: T
+        desktopStyle: w
       }),
-      "--column-width-tablet": l({
+      "--column-width-tablet": s({
         stackedStyle: R,
-        desktopStyle: w
+        desktopStyle: T
       }),
-      "--column-margin-left-tablet": l({
+      "--column-margin-left-tablet": s({
         stackedStyle: j,
-        desktopStyle: T
+        desktopStyle: w
       })
     };
   }
-  function x(S) {
-    var w, T;
+  function y(v) {
+    var T, w;
     return getSizesForBreakpoints(
-      ((T = (w = e.builderContext.content) == null ? void 0 : w.meta) == null ? void 0 : T.breakpoints) || {}
-    )[S].max;
+      ((w = (T = e.builderContext.content) == null ? void 0 : T.meta) == null ? void 0 : w.breakpoints) || {}
+    )[v].max;
   }
-  function v() {
+  function E() {
     return `
-        @media (max-width: ${x("medium")}px) {
+        @media (max-width: ${y("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -951,7 +951,7 @@ function Columns(e) {
           }
         }
 
-        @media (max-width: ${x("small")}px) {
+        @media (max-width: ${y("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -969,27 +969,27 @@ function Columns(e) {
       "div",
       {
         className: `builder-columns ${e.builderBlock.id}-breakpoints div-53636e90`,
-        style: b(),
+        style: S(),
         children: [
-          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: v() }) }),
-          (C = e.columns) == null ? void 0 : C.map((S, E) => /* @__PURE__ */ createElement(
+          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: E() }) }),
+          (I = e.columns) == null ? void 0 : I.map((v, C) => /* @__PURE__ */ createElement(
             "div",
             {
               className: "builder-column div-53636e90-2",
-              style: d(E),
-              key: E
+              style: g(C),
+              key: C
             },
             /* @__PURE__ */ jsx(
               Blocks,
               {
-                path: `component.options.columns.${E}.blocks`,
+                path: `component.options.columns.${C}.blocks`,
                 parent: e.builderBlock.id,
                 styleProp: {
                   flexGrow: "1"
                 },
                 context: e.builderContext,
                 registeredComponents: e.builderComponents,
-                blocks: S.blocks
+                blocks: v.blocks
               }
             )
           ))
@@ -1040,20 +1040,20 @@ function getSrcSet(e) {
   return e.match(/cdn\.shopify\.com/) ? t.map((n) => [getShopifyImageUrl(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, i]) => `${n} ${i}w`).concat([e]).join(", ") : e;
 }
 function Image(e) {
-  var o, a, r, s;
+  var o, a, r, l;
   function t() {
-    var u;
-    const l = e.image || e.src;
-    if (!l || // We can auto add srcset for cdn.builder.io and shopify
+    var d;
+    const s = e.image || e.src;
+    if (!s || // We can auto add srcset for cdn.builder.io and shopify
     // images, otherwise you can supply this prop manually
-    !(l.match(/builder\.io/) || l.match(/cdn\.shopify\.com/)))
+    !(s.match(/builder\.io/) || s.match(/cdn\.shopify\.com/)))
       return e.srcset;
-    if (e.srcset && ((u = e.image) != null && u.includes("builder.io/api/v1/image"))) {
+    if (e.srcset && ((d = e.image) != null && d.includes("builder.io/api/v1/image"))) {
       if (!e.srcset.includes(e.image.split("?")[0]))
-        return console.debug("Removed given srcset"), getSrcSet(l);
+        return console.debug("Removed given srcset"), getSrcSet(s);
     } else if (e.image && !e.srcset)
-      return getSrcSet(l);
-    return getSrcSet(l);
+      return getSrcSet(s);
+    return getSrcSet(s);
   }
   function n() {
     var c;
@@ -1100,7 +1100,7 @@ function Image(e) {
           }
         }
       ) }) : null,
-      (s = (r = e.builderBlock) == null ? void 0 : r.children) != null && s.length && e.fitContent ? /* @__PURE__ */ jsx(Fragment, { children: e.children }) : null,
+      (l = (r = e.builderBlock) == null ? void 0 : r.children) != null && l.length && e.fitContent ? /* @__PURE__ */ jsx(Fragment, { children: e.children }) : null,
       !e.fitContent && e.children ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "div-dbab4030-2", children: e.children }) }) : null
     ] }),
     /* @__PURE__ */ jsx("style", { children: `.img-dbab4030 {
@@ -1355,7 +1355,7 @@ const componentInfo$a = {
         });
       }
       const n = e.get("columns");
-      Array.isArray(n) && n.find((o) => o.get("width")) && (n.find((a) => !a.get("width")) || n.reduce((s, c) => s + c.get("width"), 0) !== 100) && t();
+      Array.isArray(n) && n.find((o) => o.get("width")) && (n.find((a) => !a.get("width")) || n.reduce((l, c) => l + c.get("width"), 0) !== 100) && t();
     }
   }, {
     name: "space",
@@ -1403,29 +1403,29 @@ const componentInfo$a = {
 function CustomCode(e) {
   const t = useRef(null), [n, i] = useState(() => []), [o, a] = useState(() => []);
   return useEffect(() => {
-    var s;
-    if (!((s = t.current) != null && s.getElementsByTagName) || typeof window > "u")
+    var l;
+    if (!((l = t.current) != null && l.getElementsByTagName) || typeof window > "u")
       return;
     const r = t.current.getElementsByTagName("script");
     for (let c = 0; c < r.length; c++) {
-      const l = r[c];
-      if (l.src) {
-        if (n.includes(l.src))
+      const s = r[c];
+      if (s.src) {
+        if (n.includes(s.src))
           continue;
-        n.push(l.src);
-        const u = document.createElement("script");
-        u.async = !0, u.src = l.src, document.head.appendChild(u);
-      } else if (!l.type || [
+        n.push(s.src);
+        const d = document.createElement("script");
+        d.async = !0, d.src = s.src, document.head.appendChild(d);
+      } else if (!s.type || [
         "text/javascript",
         "application/javascript",
         "application/ecmascript"
-      ].includes(l.type)) {
-        if (o.includes(l.innerText))
+      ].includes(s.type)) {
+        if (o.includes(s.innerText))
           continue;
         try {
-          o.push(l.innerText), new Function(l.innerText)();
-        } catch (u) {
-          console.warn("`CustomCode`: Error running script:", u);
+          o.push(s.innerText), new Function(s.innerText)();
+        } catch (d) {
+          console.warn("`CustomCode`: Error running script:", d);
         }
       }
     }
@@ -1465,27 +1465,27 @@ const componentInfo$7 = {
   }]
 }, SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"], isJsScript = (e) => SCRIPT_MIME_TYPES.includes(e.type);
 function Embed(e) {
-  const t = useRef(null), [n, i] = useState(() => []), [o, a] = useState(() => []), [r, s] = useState(() => !1);
+  const t = useRef(null), [n, i] = useState(() => []), [o, a] = useState(() => []), [r, l] = useState(() => !1);
   function c() {
     if (!t.current || !t.current.getElementsByTagName)
       return;
-    const l = t.current.getElementsByTagName("script");
-    for (let u = 0; u < l.length; u++) {
-      const f = l[u];
+    const s = t.current.getElementsByTagName("script");
+    for (let d = 0; d < s.length; d++) {
+      const f = s[d];
       if (f.src && !n.includes(f.src)) {
         n.push(f.src);
-        const h = document.createElement("script");
-        h.async = !0, h.src = f.src, document.head.appendChild(h);
+        const b = document.createElement("script");
+        b.async = !0, b.src = f.src, document.head.appendChild(b);
       } else if (isJsScript(f) && !o.includes(f.innerText))
         try {
           o.push(f.innerText), new Function(f.innerText)();
-        } catch (h) {
-          console.warn("`Embed`: Error running script:", h);
+        } catch (b) {
+          console.warn("`Embed`: Error running script:", b);
         }
     }
   }
   return useEffect(() => {
-    t.current && !r && (s(!0), c());
+    t.current && !r && (l(!0), c());
   }, [t.current, r]), /* @__PURE__ */ jsx(
     "div",
     {
@@ -1521,17 +1521,17 @@ const componentInfo$6 = {
     defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
     onChange: (e) => {
       e.delete("srcset"), e.delete("noWebp");
-      function n(r, s = 6e4) {
-        return new Promise((c, l) => {
-          const u = document.createElement("img");
+      function n(r, l = 6e4) {
+        return new Promise((c, s) => {
+          const d = document.createElement("img");
           let f = !1;
-          u.onload = () => {
-            f = !0, c(u);
-          }, u.addEventListener("error", (h) => {
-            console.warn("Image load failed", h.error), l(h.error);
-          }), u.src = r, setTimeout(() => {
-            f || l(new Error("Image load timed out"));
-          }, s);
+          d.onload = () => {
+            f = !0, c(d);
+          }, d.addEventListener("error", (b) => {
+            console.warn("Image load failed", b.error), s(b.error);
+          }), d.src = r, setTimeout(() => {
+            f || s(new Error("Image load timed out"));
+          }, l);
         });
       }
       function i(r) {
@@ -1542,8 +1542,8 @@ const componentInfo$6 = {
         r.type.includes("svg") && e.set("noWebp", !0);
       }), o && (!a || a === 0.7041))
         return n(o).then((r) => {
-          const s = e.get("aspectRatio");
-          e.get("image") === o && (!s || s === 0.7041) && r.width && r.height && (e.set("aspectRatio", i(r.height / r.width)), e.set("height", r.height), e.set("width", r.width));
+          const l = e.get("aspectRatio");
+          e.get("image") === o && (!l || l === 0.7041) && r.width && r.height && (e.set("aspectRatio", i(r.height / r.width)), e.set("height", r.height), e.set("width", r.width));
         });
     }
   }, {
@@ -1818,7 +1818,7 @@ const componentInfo = {
   }]
 };
 function Video(e) {
-  var i;
+  var i, o, a, r, l, c, s;
   function t() {
     return {
       ...e.autoPlay === !0 ? {
@@ -1840,27 +1840,81 @@ function Video(e) {
   }
   function n() {
     return {
-      ...e.attributes,
       ...t()
     };
   }
-  return /* @__PURE__ */ jsx(
-    "video",
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      ...n(),
-      preload: e.preload || "metadata",
       style: {
-        width: "100%",
-        height: "100%",
-        ...(i = e.attributes) == null ? void 0 : i.style,
-        objectFit: e.fit,
-        objectPosition: e.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        borderRadius: 1
+        position: "relative"
       },
-      src: e.video || "no-src",
-      poster: e.posterImage
+      children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            className: "builder-video",
+            ...n(),
+            preload: e.preload || "metadata",
+            style: {
+              width: "100%",
+              height: "100%",
+              ...(i = e.attributes) == null ? void 0 : i.style,
+              objectFit: e.fit,
+              objectPosition: e.position,
+              // Hack to get object fit to work as expected and
+              // not have the video overflow
+              zIndex: 2,
+              borderRadius: "1px",
+              ...e.aspectRatio ? {
+                position: "absolute"
+              } : null
+            },
+            src: e.video || "no-src",
+            poster: e.posterImage,
+            children: e.lazyLoad ? null : /* @__PURE__ */ jsx("source", { type: "video/mp4", src: e.video })
+          }
+        ),
+        e.aspectRatio && !(e.fitContent && ((a = (o = e.builderBlock) == null ? void 0 : o.children) != null && a.length)) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              paddingTop: e.aspectRatio * 100 + "%",
+              pointerEvents: "none",
+              fontSize: "0px"
+            }
+          }
+        ) }) : null,
+        (l = (r = e.builderBlock) == null ? void 0 : r.children) != null && l.length && e.fitContent ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "stretch"
+            },
+            children: e.children
+          }
+        ) }) : null,
+        (s = (c = e.builderBlock) == null ? void 0 : c.children) != null && s.length && !e.fitContent ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              pointerEvents: "none",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "stretch",
+              position: "absolute",
+              top: "0",
+              left: "0",
+              width: "100%",
+              height: "100%"
+            },
+            children: e.children
+          }
+        ) }) : null
+      ]
     }
   );
 }
@@ -1897,104 +1951,121 @@ const getDefaultRegisteredComponents = () => [{
 }, {
   component: Video,
   ...componentInfo
-}], getVariants = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
-  ...t,
-  testVariationId: t.id,
-  id: e == null ? void 0 : e.id
-})), checkShouldRunVariants = ({
-  canTrack: e,
-  content: t
-}) => !(!(getVariants(t).length > 0) || !e || isBrowser());
-function bldrAbTest(e, t, n) {
-  var r;
-  function i() {
-    function s(d, x, v) {
-      let C = "";
-      if (v) {
-        const S = /* @__PURE__ */ new Date();
-        S.setTime(S.getTime() + v * 24 * 60 * 60 * 1e3), C = "; expires=" + S.toUTCString();
+}], UPDATE_COOKIES_AND_STYLES_SCRIPT = `function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {
+  function getAndSetVariantId() {
+    function setCookie(name, value, days) {
+      let expires = '';
+      if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = '; expires=' + date.toUTCString();
       }
-      document.cookie = d + "=" + (x || "") + C + "; path=/; Secure; SameSite=None";
+      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
     }
-    function c(d) {
-      const x = d + "=", v = document.cookie.split(";");
-      for (let C = 0; C < v.length; C++) {
-        let S = v[C];
-        for (; S.charAt(0) === " "; )
-          S = S.substring(1, S.length);
-        if (S.indexOf(x) === 0)
-          return S.substring(x.length, S.length);
+    function getCookie(name) {
+      const nameEQ = name + '=';
+      const ca = document.cookie.split(';');
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
       }
       return null;
     }
-    const l = `builder.tests.${e}`, u = c(l), f = t.map((d) => d.id).concat(e);
-    if (u && f.includes(u))
-      return u;
-    let h = 0;
-    const b = Math.random();
-    for (let d = 0; d < t.length; d++) {
-      const x = t[d], v = x.testRatio;
-      if (h += v, b < h)
-        return s(l, x.id), x.id;
+    const cookieName = \`builder.tests.\${contentId}\`;
+    const variantInCookie = getCookie(cookieName);
+    const availableIDs = variants.map(vr => vr.id).concat(contentId);
+    if (variantInCookie && availableIDs.includes(variantInCookie)) {
+      return variantInCookie;
+    }
+    let n = 0;
+    const random = Math.random();
+    for (let i = 0; i < variants.length; i++) {
+      const variant = variants[i];
+      const testRatio = variant.testRatio;
+      n += testRatio;
+      if (random < n) {
+        setCookie(cookieName, variant.id);
+        return variant.id;
+      }
     }
-    return s(l, e), e;
+    setCookie(cookieName, contentId);
+    return contentId;
   }
-  const o = i(), a = (r = document.currentScript) == null ? void 0 : r.previousElementSibling;
-  if (n) {
-    a.remove();
-    const s = document.currentScript;
-    s == null || s.remove();
+  const winningVariantId = getAndSetVariantId();
+  const styleEl = document.currentScript?.previousElementSibling;
+  if (isHydrationTarget) {
+    styleEl.remove();
+    const thisScriptEl = document.currentScript;
+    thisScriptEl?.remove();
   } else {
-    const s = t.concat({
-      id: e
-    }).filter((c) => c.id !== o).map((c) => `.variant-${c.id} {  display: none; }
-        `).join("");
-    a.innerHTML = s;
+    const newStyleStr = variants.concat({
+      id: contentId
+    }).filter(variant => variant.id !== winningVariantId).map(value => {
+      return \`.variant-\${value.id} {  display: none; }
+        \`;
+    }).join('');
+    styleEl.innerHTML = newStyleStr;
   }
-}
-function bldrCntntScrpt(e, t, n) {
-  var c;
-  if (!navigator.cookieEnabled)
+}`, UPDATE_VARIANT_VISIBILITY_SCRIPT = `function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {
+  if (!navigator.cookieEnabled) {
     return;
-  function i(l) {
-    const u = l + "=", f = document.cookie.split(";");
-    for (let h = 0; h < f.length; h++) {
-      let b = f[h];
-      for (; b.charAt(0) === " "; )
-        b = b.substring(1, b.length);
-      if (b.indexOf(u) === 0)
-        return b.substring(u.length, b.length);
+  }
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
     }
     return null;
   }
-  const o = `builder.tests.${t}`, a = i(o), r = (c = document.currentScript) == null ? void 0 : c.parentElement, s = e === t;
-  if (a === e) {
-    if (s)
-      return;
-    r == null || r.removeAttribute("hidden"), r == null || r.removeAttribute("aria-hidden");
-  } else {
-    s && (n ? r == null || r.remove() : (r == null || r.setAttribute("hidden", "true"), r == null || r.setAttribute("aria-hidden", "true")));
-    return;
+  const cookieName = \`builder.tests.\${defaultContentId}\`;
+  const winningVariant = getCookie(cookieName);
+  const parentDiv = document.currentScript?.parentElement;
+  const isDefaultContent = variantContentId === defaultContentId;
+  const isWinningVariant = winningVariant === variantContentId;
+  if (isWinningVariant && !isDefaultContent) {
+    parentDiv?.removeAttribute('hidden');
+    parentDiv?.removeAttribute('aria-hidden');
+  } else if (!isWinningVariant && isDefaultContent) {
+    parentDiv?.setAttribute('hidden', 'true');
+    parentDiv?.setAttribute('aria-hidden', 'true');
   }
-}
-const getIsHydrationTarget = (e) => e === "react" || e === "reactNative", isHydrationTarget = getIsHydrationTarget(TARGET), AB_TEST_FN_NAME = "builderIoAbTest", CONTENT_FN_NAME = "builderIoRenderContent", getScriptString = () => {
-  const e = bldrAbTest.toString().replace(/\s+/g, " "), t = bldrCntntScrpt.toString().replace(/\s+/g, " ");
-  return `
-  window.${AB_TEST_FN_NAME} = ${e}
-  window.${CONTENT_FN_NAME} = ${t}
-  `;
-}, getVariantsScriptString = (e, t) => `
-  window.${AB_TEST_FN_NAME}("${t}",${JSON.stringify(e)}, ${isHydrationTarget})`, getRenderContentScriptString = ({
+  if (isHydrationTarget) {
+    if (!isWinningVariant) {
+      parentDiv?.remove();
+    }
+    const thisScriptEl = document.currentScript;
+    thisScriptEl?.remove();
+  }
+  return;
+}`, UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = "builderIoAbTest", UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "builderIoRenderContent", getVariants = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
+  ...t,
+  testVariationId: t.id,
+  id: e == null ? void 0 : e.id
+})), checkShouldRenderVariants = ({
+  canTrack: e,
+  content: t
+}) => !(!(getVariants(t).length > 0) || !e || isBrowser()), getIsHydrationTarget = (e) => e === "react" || e === "reactNative", isHydrationTarget = getIsHydrationTarget(TARGET), getScriptString = () => `
+  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) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${t}",${JSON.stringify(e)}, ${isHydrationTarget}
+  )`, getUpdateVariantVisibilityScript = ({
   contentId: e,
   variationId: t
-}) => `
-  window.${CONTENT_FN_NAME}("${t}", "${e}", ${isHydrationTarget})`;
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${t}", "${e}", ${isHydrationTarget}
+  )`;
 function InlinedScript(e) {
   return /* @__PURE__ */ jsx(
     "script",
     {
       dangerouslySetInnerHTML: { __html: e.scriptStr },
-      id: e.id
+      id: e.id || ""
     }
   );
 }
@@ -2040,7 +2111,7 @@ const findParentElement = (e, t, n = !0) => {
       builderElementIndex: n && i ? [].slice.call(document.getElementsByClassName(i)).indexOf(n) : void 0
     }
   };
-}, SDK_VERSION = "0.7.2", registerInsertMenu = () => {
+}, SDK_VERSION = "0.7.4", registerInsertMenu = () => {
   register("insertMenu", {
     name: "_default",
     default: !0,
@@ -2089,12 +2160,12 @@ const setupBrowserForEditing = (e = {}) => {
     if (i != null && i.type)
       switch (i.type) {
         case "builder.evaluate": {
-          const r = i.data.text, s = i.data.arguments || [], c = i.data.id, l = new Function(r);
-          let u, f = null;
+          const r = i.data.text, l = i.data.arguments || [], c = i.data.id, s = new Function(r);
+          let d, f = null;
           try {
-            u = l.apply(null, s);
-          } catch (h) {
-            f = h;
+            d = s.apply(null, l);
+          } catch (b) {
+            f = b;
           }
           f ? (o = window.parent) == null || o.postMessage({
             type: "builder.evaluateError",
@@ -2102,19 +2173,19 @@ const setupBrowserForEditing = (e = {}) => {
               id: c,
               error: f.message
             }
-          }, "*") : u && typeof u.then == "function" ? u.then((h) => {
-            var b;
-            (b = window.parent) == null || b.postMessage({
+          }, "*") : d && typeof d.then == "function" ? d.then((b) => {
+            var S;
+            (S = window.parent) == null || S.postMessage({
               type: "builder.evaluateResult",
               data: {
                 id: c,
-                result: h
+                result: b
               }
             }, "*");
           }).catch(console.error) : (a = window.parent) == null || a.postMessage({
             type: "builder.evaluateResult",
             data: {
-              result: u,
+              result: d,
               id: c
             }
           }, "*");
@@ -2124,88 +2195,88 @@ const setupBrowserForEditing = (e = {}) => {
   })));
 };
 function EnableEditor(e) {
-  var w, T, R, j, B;
+  var T, w, R, j, B, A, P;
   const t = useRef(null), [n, i] = useState(() => 0);
-  function o(m) {
-    var y, p, k, I, F;
-    const g = {
+  function o(u) {
+    var h, x, p, k, F;
+    const m = {
       ...e.builderContextSignal.content,
-      ...m,
+      ...u,
       data: {
-        ...(y = e.builderContextSignal.content) == null ? void 0 : y.data,
-        ...m == null ? void 0 : m.data
+        ...(h = e.builderContextSignal.content) == null ? void 0 : h.data,
+        ...u == null ? void 0 : u.data
       },
       meta: {
-        ...(p = e.builderContextSignal.content) == null ? void 0 : p.meta,
-        ...m == null ? void 0 : m.meta,
-        breakpoints: ((k = m == null ? void 0 : m.meta) == null ? void 0 : k.breakpoints) || ((F = (I = e.builderContextSignal.content) == null ? void 0 : I.meta) == null ? void 0 : F.breakpoints)
+        ...(x = e.builderContextSignal.content) == null ? void 0 : x.meta,
+        ...u == null ? void 0 : u.meta,
+        breakpoints: ((p = u == null ? void 0 : u.meta) == null ? void 0 : p.breakpoints) || ((F = (k = e.builderContextSignal.content) == null ? void 0 : k.meta) == null ? void 0 : F.breakpoints)
       }
     };
-    e.setBuilderContextSignal((P) => ({
-      ...P,
-      content: g
+    e.setBuilderContextSignal((_) => ({
+      ..._,
+      content: m
     }));
   }
   useState(() => 0);
   const [a, r] = useState(
     () => !1
   );
-  function s(m) {
-    var y;
-    const { data: g } = m;
-    if (g)
-      switch (g.type) {
+  function l(u) {
+    var h;
+    const { data: m } = u;
+    if (m)
+      switch (m.type) {
         case "builder.configureSdk": {
-          const p = g.data, { breakpoints: k, contentId: I } = p;
-          if (!I || I !== ((y = e.builderContextSignal.content) == null ? void 0 : y.id))
+          const x = m.data, { breakpoints: p, contentId: k } = x;
+          if (!k || k !== ((h = e.builderContextSignal.content) == null ? void 0 : h.id))
             return;
-          k && o({
+          p && o({
             meta: {
-              breakpoints: k
+              breakpoints: p
             }
           }), i(n + 1);
           break;
         }
         case "builder.contentUpdate": {
-          const p = g.data, k = p.key || p.alias || p.entry || p.modelName, I = p.data;
-          k === e.model && (o(I), i(n + 1));
+          const x = m.data, p = x.key || x.alias || x.entry || x.modelName, k = x.data;
+          p === e.model && (o(k), i(n + 1));
           break;
         }
       }
   }
   function c() {
-    var g, y;
-    const m = (y = (g = e.builderContextSignal.content) == null ? void 0 : g.data) == null ? void 0 : y.jsCode;
-    m && evaluate({
-      code: m,
+    var m, h;
+    const u = (h = (m = e.builderContextSignal.content) == null ? void 0 : m.data) == null ? void 0 : h.jsCode;
+    u && evaluate({
+      code: u,
       context: e.context || {},
       localState: void 0,
       rootState: e.builderContextSignal.rootState,
       rootSetState: e.builderContextSignal.rootSetState
     });
   }
-  const [l, u] = useState(() => ({})), [f, h] = useState(() => !1);
-  function b(m) {
-    var g, y;
+  const [s, d] = useState(() => ({})), [f, b] = useState(() => !1);
+  function S(u) {
+    var m, h;
     if (e.builderContextSignal.content) {
-      const p = (g = e.builderContextSignal.content) == null ? void 0 : g.testVariationId, k = (y = e.builderContextSignal.content) == null ? void 0 : y.id;
+      const x = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, p = (h = e.builderContextSignal.content) == null ? void 0 : h.id;
       _track({
         type: "click",
         canTrack: getDefaultCanTrack(e.canTrack),
-        contentId: k,
+        contentId: p,
         apiKey: e.apiKey,
-        variationId: p !== k ? p : void 0,
-        ...getInteractionPropertiesForEvent(m),
+        variationId: x !== p ? x : void 0,
+        ...getInteractionPropertiesForEvent(u),
         unique: !f
       });
     }
-    f || h(!0);
+    f || b(!0);
   }
-  function d(m) {
-    return m.replace(
+  function g(u) {
+    return u.replace(
       /{{([^}]+)}}/g,
-      (g, y) => evaluate({
-        code: y,
+      (m, h) => evaluate({
+        code: h,
         context: e.context || {},
         localState: void 0,
         rootState: e.builderContextSignal.rootState,
@@ -2213,32 +2284,32 @@ function EnableEditor(e) {
       })
     );
   }
-  function x({ url: m, key: g }) {
-    fetch$1(m).then((y) => y.json()).then((y) => {
-      var k, I;
-      const p = {
+  function y({ url: u, key: m }) {
+    fetch$1(u).then((h) => h.json()).then((h) => {
+      var p, k;
+      const x = {
         ...e.builderContextSignal.rootState,
-        [g]: y
+        [m]: h
       };
-      (I = (k = e.builderContextSignal).rootSetState) == null || I.call(k, p), l[g] = !0;
-    }).catch((y) => {
-      console.error("error fetching dynamic data", m, y);
+      (k = (p = e.builderContextSignal).rootSetState) == null || k.call(p, x), s[m] = !0;
+    }).catch((h) => {
+      console.error("error fetching dynamic data", u, h);
     });
   }
-  function v() {
-    var g, y;
-    const m = ((y = (g = e.builderContextSignal.content) == null ? void 0 : g.data) == null ? void 0 : y.httpRequests) ?? {};
-    Object.entries(m).forEach(([p, k]) => {
-      if (k && (!l[p] || isEditing())) {
-        const I = d(k);
-        x({
-          url: I,
-          key: p
+  function E() {
+    var m, h;
+    const u = ((h = (m = e.builderContextSignal.content) == null ? void 0 : m.data) == null ? void 0 : h.httpRequests) ?? {};
+    Object.entries(u).forEach(([x, p]) => {
+      if (p && (!s[x] || isEditing())) {
+        const k = g(p);
+        y({
+          url: k,
+          key: x
         });
       }
     });
   }
-  function C() {
+  function I() {
     isEditing() && window.dispatchEvent(
       new CustomEvent(
         "builder:component:stateChange",
@@ -2253,8 +2324,8 @@ function EnableEditor(e) {
       )
     );
   }
-  function S(m) {
-    i(n + 1), window.addEventListener("message", s), registerInsertMenu(), setupBrowserForEditing({
+  function v(u) {
+    i(n + 1), window.addEventListener("message", l), registerInsertMenu(), setupBrowserForEditing({
       ...e.locale ? {
         locale: e.locale
       } : {},
@@ -2266,62 +2337,62 @@ function EnableEditor(e) {
       } : {}
     }), Object.values(
       e.builderContextSignal.componentInfos
-    ).forEach((g) => {
-      var p;
-      const y = createRegisterComponentMessage(g);
-      (p = window.parent) == null || p.postMessage(y, "*");
+    ).forEach((m) => {
+      var x;
+      const h = createRegisterComponentMessage(m);
+      (x = window.parent) == null || x.postMessage(h, "*");
     }), window.addEventListener(
       "builder:component:stateChangeListenerActivated",
-      C
+      I
     );
   }
-  function E(m) {
-    const g = new URL(location.href).searchParams, y = g.get("builder.preview"), p = g.get(
-      `builder.preview.${y}`
-    ), k = g.get("apiKey") || g.get("builder.space");
-    y === e.model && k === e.apiKey && (!e.content || p === e.content.id) && fetchOneEntry({
+  function C(u) {
+    const m = new URL(location.href).searchParams, h = m.get("builder.preview"), x = m.get(
+      `builder.preview.${h}`
+    ), p = m.get("apiKey") || m.get("builder.space");
+    h === e.model && p === e.apiKey && (!e.content || x === e.content.id) && fetchOneEntry({
       model: e.model,
       apiKey: e.apiKey,
       apiVersion: e.builderContextSignal.apiVersion
-    }).then((I) => {
-      I && o(I);
+    }).then((k) => {
+      k && o(k);
     });
   }
   return useEffect(() => {
-    var m;
-    return (m = t.current) == null || m.addEventListener(
+    var u;
+    return (u = t.current) == null || u.addEventListener(
       "initeditingbldr",
-      S
+      v
     ), () => {
-      var g;
-      return (g = t.current) == null ? void 0 : g.removeEventListener(
+      var m;
+      return (m = t.current) == null ? void 0 : m.removeEventListener(
         "initeditingbldr",
-        S
+        v
       );
     };
   }, []), useEffect(() => {
-    var m;
-    return (m = t.current) == null || m.addEventListener(
+    var u;
+    return (u = t.current) == null || u.addEventListener(
       "initpreviewingbldr",
-      E
+      C
     ), () => {
-      var g;
-      return (g = t.current) == null ? void 0 : g.removeEventListener(
+      var m;
+      return (m = t.current) == null ? void 0 : m.removeEventListener(
         "initpreviewingbldr",
-        E
+        C
       );
     };
   }, []), useEffect(() => {
-    var m, g;
+    var u, m;
     if (isBrowser()) {
       if (isEditing() && t.current && t.current.dispatchEvent(new CustomEvent("initeditingbldr")), e.builderContextSignal.content && getDefaultCanTrack(e.canTrack)) {
-        const p = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, k = (g = e.builderContextSignal.content) == null ? void 0 : g.id, I = e.apiKey;
+        const x = (u = e.builderContextSignal.content) == null ? void 0 : u.testVariationId, p = (m = e.builderContextSignal.content) == null ? void 0 : m.id, k = e.apiKey;
         _track({
           type: "impression",
           canTrack: !0,
-          contentId: k,
-          apiKey: I,
-          variationId: p !== k ? p : void 0
+          contentId: p,
+          apiKey: k,
+          variationId: x !== p ? x : void 0
         });
       }
       isPreviewing() && t.current && t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"));
@@ -2329,37 +2400,37 @@ function EnableEditor(e) {
   }, []), useEffect(() => {
     e.apiKey || logger.error(
       "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-    ), c(), v(), C();
+    ), c(), E(), I();
   }, []), useEffect(() => {
     e.content && o(e.content);
   }, [e.content]), useEffect(() => {
   }, [a]), useEffect(() => {
     c();
   }, [
-    (T = (w = e.builderContextSignal.content) == null ? void 0 : w.data) == null ? void 0 : T.jsCode,
+    (w = (T = e.builderContextSignal.content) == null ? void 0 : T.data) == null ? void 0 : w.jsCode,
     e.builderContextSignal.rootState
   ]), useEffect(() => {
-    v();
+    E();
   }, [(j = (R = e.builderContextSignal.content) == null ? void 0 : R.data) == null ? void 0 : j.httpRequests]), useEffect(() => {
-    C();
+    I();
   }, [e.builderContextSignal.rootState]), useEffect(() => () => {
-    isBrowser() && (window.removeEventListener("message", s), window.removeEventListener(
+    isBrowser() && (window.removeEventListener("message", l), window.removeEventListener(
       "builder:component:stateChangeListenerActivated",
-      C
+      I
     ));
   }, []), /* @__PURE__ */ jsx(builderContext.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createElement(
     "div",
     {
       key: n,
       ref: t,
-      onClick: (m) => b(m),
+      onClick: (u) => S(u),
       "builder-content-id": (B = e.builderContextSignal.content) == null ? void 0 : B.id,
       "builder-model": e.model,
       ...e.showContent ? {} : {
         hidden: !0,
         "aria-hidden": !0
       },
-      className: e.classNameProp
+      className: `variant-${((A = e.content) == null ? void 0 : A.testVariationId) || ((P = e.content) == null ? void 0 : P.id)}`
     },
     e.children
   ) }) : null });
@@ -2431,14 +2502,14 @@ const getContextStateInitialValue = ({
   data: t,
   locale: n
 }) => {
-  var a, r, s;
+  var a, r, l;
   const i = {};
   (r = (a = e == null ? void 0 : e.data) == null ? void 0 : a.inputs) == null || r.forEach((c) => {
-    var l;
-    c.name && c.defaultValue !== void 0 && ((l = e == null ? void 0 : e.data) != null && l.state) && e.data.state[c.name] === void 0 && (i[c.name] = c.defaultValue);
+    var s;
+    c.name && c.defaultValue !== void 0 && ((s = e == null ? void 0 : e.data) != null && s.state) && e.data.state[c.name] === void 0 && (i[c.name] = c.defaultValue);
   });
   const o = {
-    ...(s = e == null ? void 0 : e.data) == null ? void 0 : s.state,
+    ...(l = e == null ? void 0 : e.data) == null ? void 0 : l.state,
     ...t,
     ...n ? {
       locale: n
@@ -2460,22 +2531,22 @@ const getContextStateInitialValue = ({
   meta: e == null ? void 0 : e.meta
 } : void 0;
 function ContentComponent(e) {
-  var c, l, u, f, h, b, d;
+  var c, s, d, f, b, S, g;
   const [t, n] = useState(
     () => {
-      var x, v;
-      return getRenderContentScriptString({
+      var y, E;
+      return getUpdateVariantVisibilityScript({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        variationId: (x = e.content) == null ? void 0 : x.testVariationId,
+        variationId: (y = e.content) == null ? void 0 : y.testVariationId,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        contentId: (v = e.content) == null ? void 0 : v.id
+        contentId: (E = e.content) == null ? void 0 : E.id
       });
     }
   );
-  function i(x) {
-    s((v) => ({
-      ...v,
-      rootState: x
+  function i(y) {
+    l((E) => ({
+      ...E,
+      rootState: y
     }));
   }
   const [o, a] = useState(
@@ -2489,16 +2560,16 @@ function ContentComponent(e) {
       ...components,
       ...e.customComponents || []
     ].reduce(
-      (x, { component: v, ...C }) => ({
-        ...x,
-        [C.name]: {
-          component: v,
-          ...serializeComponentInfo(C)
+      (y, { component: E, ...I }) => ({
+        ...y,
+        [I.name]: {
+          component: E,
+          ...serializeComponentInfo(I)
         }
       }),
       {}
     )
-  ), [r, s] = useState(() => ({
+  ), [r, l] = useState(() => ({
     content: getContentInitialValue({
       content: e.content,
       data: e.data
@@ -2523,9 +2594,9 @@ function ContentComponent(e) {
       ...components,
       ...e.customComponents || []
     ].reduce(
-      (x, { component: v, ...C }) => ({
-        ...x,
-        [C.name]: serializeComponentInfo(C)
+      (y, { component: E, ...I }) => ({
+        ...y,
+        [I.name]: serializeComponentInfo(I)
       }),
       {}
     ),
@@ -2548,24 +2619,23 @@ function ContentComponent(e) {
           locale: e.locale,
           includeRefs: e.includeRefs,
           enrich: e.enrich,
-          classNameProp: e.classNameProp,
           showContent: e.showContent,
           builderContextSignal: r,
-          setBuilderContextSignal: s,
+          setBuilderContextSignal: l,
           children: [
             e.isSsrAbTest ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedScript, { scriptStr: t }) }) : null,
             /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
               ContentStyles,
               {
                 contentId: (c = r.content) == null ? void 0 : c.id,
-                cssCode: (u = (l = r.content) == null ? void 0 : l.data) == null ? void 0 : u.cssCode,
-                customFonts: (h = (f = r.content) == null ? void 0 : f.data) == null ? void 0 : h.customFonts
+                cssCode: (d = (s = r.content) == null ? void 0 : s.data) == null ? void 0 : d.cssCode,
+                customFonts: (b = (f = r.content) == null ? void 0 : f.data) == null ? void 0 : b.customFonts
               }
             ) }),
             /* @__PURE__ */ jsx(
               Blocks,
               {
-                blocks: (d = (b = r.content) == null ? void 0 : b.data) == null ? void 0 : d.blocks,
+                blocks: (g = (S = r.content) == null ? void 0 : S.data) == null ? void 0 : g.blocks,
                 context: r,
                 registeredComponents: o
               }
@@ -2577,31 +2647,31 @@ function ContentComponent(e) {
   );
 }
 function ContentVariants(e) {
-  var r, s, c;
+  var r, l;
   const [t, n] = useState(
-    () => checkShouldRunVariants({
+    () => checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(e.canTrack),
       content: e.content
     })
   );
   function i() {
-    var l;
-    return getVariantsScriptString(
-      getVariants(e.content).map((u) => ({
-        id: u.testVariationId,
-        testRatio: u.testRatio
+    var c;
+    return getUpdateCookieAndStylesScript(
+      getVariants(e.content).map((s) => ({
+        id: s.testVariationId,
+        testRatio: s.testRatio
       })),
-      ((l = e.content) == null ? void 0 : l.id) || ""
+      ((c = e.content) == null ? void 0 : c.id) || ""
     );
   }
   function o() {
-    return getVariants(e.content).map((l) => `.variant-${l.testVariationId} { display: none; } `).join("");
+    return getVariants(e.content).map((c) => `.variant-${c.testVariationId} { display: none; } `).join("");
   }
   function a() {
-    var l;
+    var c;
     return t ? {
       ...e.content,
-      testVariationId: (l = e.content) == null ? void 0 : l.id
+      testVariationId: (c = e.content) == null ? void 0 : c.id
     } : handleABTestingSync({
       item: e.content,
       canTrack: getDefaultCanTrack(e.canTrack)
@@ -2619,12 +2689,11 @@ function ContentVariants(e) {
         }
       ),
       /* @__PURE__ */ jsx(InlinedScript, { scriptStr: i() }),
-      (s = getVariants(e.content)) == null ? void 0 : s.map((l) => /* @__PURE__ */ jsx(
+      (l = getVariants(e.content)) == null ? void 0 : l.map((c) => /* @__PURE__ */ jsx(
         ContentComponent,
         {
-          content: l,
+          content: c,
           showContent: !1,
-          classNameProp: void 0,
           model: e.model,
           data: e.data,
           context: e.context,
@@ -2637,14 +2706,13 @@ function ContentVariants(e) {
           enrich: e.enrich,
           isSsrAbTest: t
         },
-        l.testVariationId
+        c.testVariationId
       ))
     ] }) : null,
     /* @__PURE__ */ jsx(
       ContentComponent,
       {
         content: a(),
-        classNameProp: `variant-${(c = e.content) == null ? void 0 : c.id}`,
         showContent: !0,
         model: e.model,
         data: e.data,
@@ -2681,14 +2749,14 @@ const fetchSymbolContent = async ({
     });
 };
 function Symbol$1(e) {
-  var a, r, s;
+  var a, r, l;
   function t() {
-    var c, l;
+    var c, s;
     return [
       e.attributes.className,
       "builder-symbol",
       (c = e.symbol) != null && c.inline ? "builder-inline-symbol" : void 0,
-      (l = e.symbol) != null && l.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
+      (s = e.symbol) != null && s.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }
   const [n, i] = useState(() => {
@@ -2719,7 +2787,7 @@ function Symbol$1(e) {
         ...e.builderContext.localState,
         ...(r = n == null ? void 0 : n.data) == null ? void 0 : r.state
       },
-      model: (s = e.symbol) == null ? void 0 : s.model,
+      model: (l = e.symbol) == null ? void 0 : l.model,
       content: n
     }
   ) });
@@ -2738,17 +2806,17 @@ export {
   Symbol$1 as Symbol,
   Text,
   Video,
-  M as _processContentResult,
+  L as _processContentResult,
   createRegisterComponentMessage,
   W as fetchBuilderProps,
-  L as fetchEntries,
+  O as fetchEntries,
   fetchOneEntry,
-  O as getAllContent,
-  U as getBuilderSearchParams,
-  D as getContent,
+  U as getAllContent,
+  H as getBuilderSearchParams,
+  K as getContent,
   isEditing,
   isPreviewing,
   register,
-  H as setEditorSettings,
-  K as track
+  z as setEditorSettings,
+  q as track
 };