@builder.io/sdk-react 0.8.1 → 0.9.0

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.js";
-import { _ as W, h as O, f as U, g as H, e as K, d as z, s as q, t as Y } from "./server-entry-e4cd1e05.js";
+import { _ as U, h as H, f as K, g as z, e as q, d as Y, s as G, t as J } from "./server-entry-e4cd1e05.js";
 import { createRequire } from "node:module";
 function Button(e) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -39,7 +39,9 @@ const builderContext = createContext({
   apiKey: null,
   apiVersion: void 0,
   componentInfos: {},
-  inheritedStyles: {}
+  inheritedStyles: {},
+  BlocksWrapper: "div",
+  BlocksWrapperProps: {}
 }), ComponentsContext = createContext({ registeredComponents: {} });
 function getBlockComponentOptions(e) {
   var t;
@@ -182,28 +184,28 @@ output;
     event: i,
     state: l
   }), s = getIsolateContext(), d = s.global;
-  d.setSync("global", d.derefInto()), d.setSync("log", function(...y) {
-    console.log(...y);
-  }), d.setSync(BUILDER_SET_STATE_NAME, function(y, f) {
-    set(r, y, f), a == null || a(r);
-  }), c.forEach(([y, f]) => {
-    const S = typeof f == "object" ? new ivm.Reference(
+  d.setSync("global", d.derefInto()), d.setSync("log", function(...S) {
+    console.log(...S);
+  }), d.setSync(BUILDER_SET_STATE_NAME, function(S, f) {
+    set(r, S, f), a == null || a(r);
+  }), c.forEach(([S, f]) => {
+    const p = typeof f == "object" ? new ivm.Reference(
       // workaround: methods with default values for arguments is not being cloned over
-      y === "builder" ? {
+      S === "builder" ? {
         ...f,
         getUserAttributes: () => f.getUserAttributes()
       } : f
     ) : null;
-    d.setSync(getSyncValName(y), S);
+    d.setSync(getSyncValName(S), p);
   }), d.setSync(INJECTED_IVM_GLOBAL, ivm);
   const g = processCode({
     code: e,
     args: c
-  }), b = s.evalSync(g);
+  }), x = s.evalSync(g);
   try {
-    return JSON.parse(b);
+    return JSON.parse(x);
   } catch {
-    return b;
+    return x;
   }
 }, chooseBrowserOrServerEval = (e) => isBrowser() ? runInBrowser(e) : runInNode(e);
 function evaluate({
@@ -434,14 +436,14 @@ function BlockStyles(e) {
     const g = l ? createCssClass({
       className: d,
       styles: l
-    }) : "", b = c ? createCssClass({
+    }) : "", x = c ? createCssClass({
       className: d,
       styles: c,
       mediaQuery: getMaxWidthQueryForSize(
         "medium",
         r
       )
-    }) : "", y = s ? createCssClass({
+    }) : "", S = s ? createCssClass({
       className: d,
       styles: s,
       mediaQuery: getMaxWidthQueryForSize(
@@ -449,7 +451,7 @@ function BlockStyles(e) {
         r
       )
     }) : "";
-    return [g, b, y].join(" ");
+    return [g, x, S].join(" ");
   }
   return /* @__PURE__ */ jsx(Fragment, { children: n() && t() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: n() }) }) : null });
 }
@@ -486,7 +488,9 @@ function getBlockActions(e) {
   }
   return t;
 }
-function transformBlockProperties(e) {
+function transformBlockProperties({
+  properties: e
+}) {
   return e.className = e.class, delete e.class, e;
 }
 const extractRelevantRootBlockProperties = (e) => ({
@@ -504,7 +508,11 @@ function getBlockProperties({
     style: e.style ? getStyleAttribute(e.style) : void 0,
     class: [e.id, "builder-block", e.class, (i = e.properties) == null ? void 0 : i.class].filter(Boolean).join(" ")
   };
-  return transformBlockProperties(n);
+  return transformBlockProperties({
+    properties: n,
+    context: t,
+    block: e
+  });
 }
 function getStyleAttribute(e) {
   switch (TARGET) {
@@ -663,7 +671,7 @@ function RepeatedBlock(e) {
   ) });
 }
 function Block(e) {
-  var d, g, b, y;
+  var d, g, x, S;
   function t() {
     return getComponent({
       block: e.block,
@@ -692,32 +700,32 @@ function Block(e) {
     return e.block.tagName || "div";
   }
   function a() {
-    var k, C;
-    if ((k = e.block.repeat) != null && k.collection)
-      return !!((C = n == null ? void 0 : n()) != null && C.length);
+    var C, E;
+    if ((C = e.block.repeat) != null && C.collection)
+      return !!((E = n == null ? void 0 : n()) != null && E.length);
     const f = "hide" in i() ? i().hide : !1;
     return ("show" in i() ? i().show : !0) && !f;
   }
   function r() {
-    var S;
-    return !((S = t == null ? void 0 : t()) != null && S.component) && !n() ? i().children ?? [] : [];
+    var p;
+    return !((p = t == null ? void 0 : t()) != null && p.component) && !n() ? i().children ?? [] : [];
   }
   function l() {
-    var f, S, k, C, v;
+    var f, p, C, E, v;
     return {
       blockChildren: i().children ?? [],
       componentRef: (f = t == null ? void 0 : t()) == null ? void 0 : f.component,
       componentOptions: {
         ...getBlockComponentOptions(i()),
         builderContext: e.context,
-        ...((S = t == null ? void 0 : t()) == null ? void 0 : S.name) === "Symbol" || ((k = t == null ? void 0 : t()) == null ? void 0 : k.name) === "Columns" ? {
+        ...((p = t == null ? void 0 : t()) == null ? void 0 : p.name) === "Symbol" || ((C = t == null ? void 0 : t()) == null ? void 0 : C.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,
+      includeBlockProps: ((E = t == null ? void 0 : t()) == null ? void 0 : E.noWrap) === !0,
       isInteractive: !((v = t == null ? void 0 : t()) != null && v.isRSC)
     };
   }
@@ -744,14 +752,14 @@ function Block(e) {
         hasChildren: !1
       }
     ) }) : null,
-    !isEmptyHtmlElement(o()) && n() ? /* @__PURE__ */ jsx(Fragment, { children: (g = n()) == null ? void 0 : g.map((f, S) => /* @__PURE__ */ jsx(
+    !isEmptyHtmlElement(o()) && n() ? /* @__PURE__ */ jsx(Fragment, { children: (g = n()) == null ? void 0 : g.map((f, p) => /* @__PURE__ */ jsx(
       RepeatedBlock,
       {
         repeatContext: f.context,
         block: f.block,
         registeredComponents: e.registeredComponents
       },
-      S
+      p
     )) }) : null,
     !isEmptyHtmlElement(o()) && !n() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       BlockWrapper,
@@ -774,7 +782,7 @@ function Block(e) {
               isInteractive: l().isInteractive
             }
           ),
-          (b = r()) == null ? void 0 : b.map((f) => /* @__PURE__ */ jsx(
+          (x = r()) == null ? void 0 : x.map((f) => /* @__PURE__ */ jsx(
             Block,
             {
               block: f,
@@ -783,7 +791,7 @@ function Block(e) {
             },
             "block-" + f.id
           )),
-          (y = r()) == null ? void 0 : y.map((f) => /* @__PURE__ */ jsx(
+          (S = r()) == null ? void 0 : S.map((f) => /* @__PURE__ */ jsx(
             BlockStyles,
             {
               block: f,
@@ -829,19 +837,20 @@ function BlocksWrapper(e) {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "div",
+      e.BlocksWrapper,
       {
-        className: t() + " div-02c7a115",
+        className: t() + " props-blocks-wrapper-4f2c12d8",
         "builder-path": e.path,
         "builder-parent-id": e.parent,
         style: e.styleProp,
         onClick: (o) => n(),
         onMouseEnter: (o) => i(),
         onKeyPress: (o) => n(),
+        ...e.BlocksWrapperProps,
         children: e.children
       }
     ),
-    /* @__PURE__ */ jsx("style", { children: `.div-02c7a115 {
+    /* @__PURE__ */ jsx("style", { children: `.props-blocks-wrapper-4f2c12d8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -849,7 +858,7 @@ function BlocksWrapper(e) {
   ] });
 }
 function Blocks(e) {
-  var i, o;
+  var i, o, a, r;
   const t = useContext(builderContext), n = useContext(ComponentsContext);
   return /* @__PURE__ */ jsxs(
     BlocksWrapper,
@@ -858,59 +867,61 @@ function Blocks(e) {
       parent: e.parent,
       path: e.path,
       styleProp: e.styleProp,
+      BlocksWrapper: (i = e.context) == null ? void 0 : i.BlocksWrapper,
+      BlocksWrapperProps: (o = e.context) == null ? void 0 : o.BlocksWrapperProps,
       children: [
-        e.blocks ? /* @__PURE__ */ jsx(Fragment, { children: (i = e.blocks) == null ? void 0 : i.map((a) => /* @__PURE__ */ jsx(
+        e.blocks ? /* @__PURE__ */ jsx(Fragment, { children: (a = e.blocks) == null ? void 0 : a.map((l) => /* @__PURE__ */ jsx(
           Block,
           {
-            block: a,
+            block: l,
             context: e.context || t,
             registeredComponents: e.registeredComponents || n.registeredComponents
           },
-          "render-block-" + a.id
+          "render-block-" + l.id
         )) }) : null,
-        e.blocks ? /* @__PURE__ */ jsx(Fragment, { children: (o = e.blocks) == null ? void 0 : o.map((a) => /* @__PURE__ */ jsx(
+        e.blocks ? /* @__PURE__ */ jsx(Fragment, { children: (r = e.blocks) == null ? void 0 : r.map((l) => /* @__PURE__ */ jsx(
           BlockStyles,
           {
-            block: a,
+            block: l,
             context: e.context || t
           },
-          "block-style-" + a.id
+          "block-style-" + l.id
         )) }) : null
       ]
     }
   );
 }
 function Columns(e) {
-  var C;
+  var E;
   const [t, n] = useState(
     () => typeof e.space == "number" ? e.space || 0 : 20
   ), [i, o] = useState(() => e.columns || []), [a, r] = useState(
     () => e.stackColumnsAt || "tablet"
   );
   function l(v) {
-    var I;
-    return ((I = i[v]) == null ? void 0 : I.width) || 100 / i.length;
+    var k;
+    return ((k = i[v]) == null ? void 0 : k.width) || 100 / i.length;
   }
   function c(v) {
-    const I = t * (i.length - 1) / i.length;
-    return `calc(${l(v)}% - ${I}px)`;
+    const k = t * (i.length - 1) / i.length;
+    return `calc(${l(v)}% - ${k}px)`;
   }
   function s({
     stackedStyle: v,
-    desktopStyle: I
+    desktopStyle: k
   }) {
-    return a === "tablet" ? v : I;
+    return a === "tablet" ? v : k;
   }
   function d({
     stackedStyle: v,
-    desktopStyle: I
+    desktopStyle: k
   }) {
-    return a === "never" ? I : v;
+    return a === "never" ? k : v;
   }
-  const [g, b] = useState(
+  const [g, x] = useState(
     () => e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column"
   );
-  function y() {
+  function S() {
     return {
       "--flex-dir": g,
       "--flex-dir-tablet": s({
@@ -920,7 +931,7 @@ function Columns(e) {
     };
   }
   function f(v) {
-    const I = v === 0 ? 0 : t, T = c(v), w = `${I}px`, R = "100%", j = 0;
+    const k = v === 0 ? 0 : t, T = c(v), w = `${k}px`, R = "100%", j = 0;
     return {
       width: T,
       ["marginLeft"]: w,
@@ -942,15 +953,15 @@ function Columns(e) {
       })
     };
   }
-  function S(v) {
+  function p(v) {
     var T, w;
     return getSizesForBreakpoints(
       ((w = (T = e.builderContext.content) == null ? void 0 : T.meta) == null ? void 0 : w.breakpoints) || {}
     )[v].max;
   }
-  function k() {
+  function C() {
     return `
-        @media (max-width: ${S("medium")}px) {
+        @media (max-width: ${p("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -962,7 +973,7 @@ function Columns(e) {
           }
         }
 
-        @media (max-width: ${S("small")}px) {
+        @media (max-width: ${p("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -980,20 +991,20 @@ function Columns(e) {
       "div",
       {
         className: `builder-columns ${e.builderBlock.id}-breakpoints div-53636e90`,
-        style: y(),
+        style: S(),
         children: [
-          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: k() }) }),
-          (C = e.columns) == null ? void 0 : C.map((v, I) => /* @__PURE__ */ createElement(
+          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: C() }) }),
+          (E = e.columns) == null ? void 0 : E.map((v, k) => /* @__PURE__ */ createElement(
             "div",
             {
               className: "builder-column div-53636e90-2",
-              style: f(I),
-              key: I
+              style: f(k),
+              key: k
             },
             /* @__PURE__ */ jsx(
               Blocks,
               {
-                path: `component.options.columns.${I}.blocks`,
+                path: `component.options.columns.${k}.blocks`,
                 parent: e.builderBlock.id,
                 styleProp: {
                   flexGrow: "1"
@@ -1485,13 +1496,13 @@ function Embed(e) {
       const g = s[d];
       if (g.src && !n.includes(g.src)) {
         n.push(g.src);
-        const b = document.createElement("script");
-        b.async = !0, b.src = g.src, document.head.appendChild(b);
+        const x = document.createElement("script");
+        x.async = !0, x.src = g.src, document.head.appendChild(x);
       } else if (isJsScript(g) && !o.includes(g.innerText))
         try {
           o.push(g.innerText), new Function(g.innerText)();
-        } catch (b) {
-          console.warn("`Embed`: Error running script:", b);
+        } catch (x) {
+          console.warn("`Embed`: Error running script:", x);
         }
     }
   }
@@ -1538,8 +1549,8 @@ const componentInfo$6 = {
           let g = !1;
           d.onload = () => {
             g = !0, c(d);
-          }, d.addEventListener("error", (b) => {
-            console.warn("Image load failed", b.error), s(b.error);
+          }, d.addEventListener("error", (x) => {
+            console.warn("Image load failed", x.error), s(x.error);
           }), d.src = r, setTimeout(() => {
             g || s(new Error("Image load timed out"));
           }, l);
@@ -2122,7 +2133,7 @@ const findParentElement = (e, t, n = !0) => {
       builderElementIndex: n && i ? [].slice.call(document.getElementsByClassName(i)).indexOf(n) : void 0
     }
   };
-}, SDK_VERSION = "0.8.1", registerInsertMenu = () => {
+}, SDK_VERSION = "0.9.0", registerInsertMenu = () => {
   register("insertMenu", {
     name: "_default",
     default: !0,
@@ -2175,8 +2186,8 @@ const setupBrowserForEditing = (e = {}) => {
           let d, g = null;
           try {
             d = s.apply(null, l);
-          } catch (b) {
-            g = b;
+          } catch (x) {
+            g = x;
           }
           g ? (o = window.parent) == null || o.postMessage({
             type: "builder.evaluateError",
@@ -2184,13 +2195,13 @@ const setupBrowserForEditing = (e = {}) => {
               id: c,
               error: g.message
             }
-          }, "*") : d && typeof d.then == "function" ? d.then((b) => {
-            var y;
-            (y = window.parent) == null || y.postMessage({
+          }, "*") : d && typeof d.then == "function" ? d.then((x) => {
+            var S;
+            (S = window.parent) == null || S.postMessage({
               type: "builder.evaluateResult",
               data: {
                 id: c,
-                result: b
+                result: x
               }
             }, "*");
           }).catch(console.error) : (a = window.parent) == null || a.postMessage({
@@ -2206,10 +2217,10 @@ const setupBrowserForEditing = (e = {}) => {
   })));
 };
 function EnableEditor(e) {
-  var T, w, R, j, B, A, P;
+  var R, j, B, P, A, F, _;
   const t = useRef(null), [n, i] = useState(() => 0);
   function o(u) {
-    var h, x, p, E, F;
+    var h, b, y, I, V;
     const m = {
       ...e.builderContextSignal.content,
       ...u,
@@ -2218,44 +2229,46 @@ function EnableEditor(e) {
         ...u == null ? void 0 : u.data
       },
       meta: {
-        ...(x = e.builderContextSignal.content) == null ? void 0 : x.meta,
+        ...(b = e.builderContextSignal.content) == null ? void 0 : b.meta,
         ...u == null ? void 0 : u.meta,
-        breakpoints: ((p = u == null ? void 0 : u.meta) == null ? void 0 : p.breakpoints) || ((F = (E = e.builderContextSignal.content) == null ? void 0 : E.meta) == null ? void 0 : F.breakpoints)
+        breakpoints: ((y = u == null ? void 0 : u.meta) == null ? void 0 : y.breakpoints) || ((V = (I = e.builderContextSignal.content) == null ? void 0 : I.meta) == null ? void 0 : V.breakpoints)
       }
     };
-    e.setBuilderContextSignal((_) => ({
-      ..._,
+    e.setBuilderContextSignal((W) => ({
+      ...W,
       content: m
     }));
   }
   useState(() => 0);
   const [a, r] = useState(
     () => !1
+  ), [l, c] = useState(
+    () => e.contentWrapper || "div"
   );
-  function l(u) {
+  function s(u) {
     var h;
     const { data: m } = u;
     if (m)
       switch (m.type) {
         case "builder.configureSdk": {
-          const x = m.data, { breakpoints: p, contentId: E } = x;
-          if (!E || E !== ((h = e.builderContextSignal.content) == null ? void 0 : h.id))
+          const b = m.data, { breakpoints: y, contentId: I } = b;
+          if (!I || I !== ((h = e.builderContextSignal.content) == null ? void 0 : h.id))
             return;
-          p && o({
+          y && o({
             meta: {
-              breakpoints: p
+              breakpoints: y
             }
           }), i(n + 1);
           break;
         }
         case "builder.contentUpdate": {
-          const x = m.data, p = x.key || x.alias || x.entry || x.modelName, E = x.data;
-          p === e.model && (o(E), i(n + 1));
+          const b = m.data, y = b.key || b.alias || b.entry || b.modelName, I = b.data;
+          y === e.model && (o(I), i(n + 1));
           break;
         }
       }
   }
-  function c() {
+  function d() {
     var m, h;
     const u = (h = (m = e.builderContextSignal.content) == null ? void 0 : m.data) == null ? void 0 : h.jsCode;
     u && evaluate({
@@ -2266,24 +2279,24 @@ function EnableEditor(e) {
       rootSetState: e.builderContextSignal.rootSetState
     });
   }
-  const [s, d] = useState(() => ({})), [g, b] = useState(() => !1);
-  function y(u) {
+  const [g, x] = useState(() => ({})), [S, f] = useState(() => !1);
+  function p(u) {
     var m, h;
     if (e.builderContextSignal.content) {
-      const x = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, p = (h = e.builderContextSignal.content) == null ? void 0 : h.id;
+      const b = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, y = (h = e.builderContextSignal.content) == null ? void 0 : h.id;
       _track({
         type: "click",
         canTrack: getDefaultCanTrack(e.canTrack),
-        contentId: p,
+        contentId: y,
         apiKey: e.apiKey,
-        variationId: x !== p ? x : void 0,
+        variationId: b !== y ? b : void 0,
         ...getInteractionPropertiesForEvent(u),
-        unique: !g
+        unique: !S
       });
     }
-    g || b(!0);
+    S || f(!0);
   }
-  function f(u) {
+  function C(u) {
     return u.replace(
       /{{([^}]+)}}/g,
       (m, h) => evaluate({
@@ -2295,32 +2308,32 @@ function EnableEditor(e) {
       })
     );
   }
-  function S({ url: u, key: m }) {
+  function E({ url: u, key: m }) {
     fetch$1(u).then((h) => h.json()).then((h) => {
-      var p, E;
-      const x = {
+      var y, I;
+      const b = {
         ...e.builderContextSignal.rootState,
         [m]: h
       };
-      (E = (p = e.builderContextSignal).rootSetState) == null || E.call(p, x), s[m] = !0;
+      (I = (y = e.builderContextSignal).rootSetState) == null || I.call(y, b), g[m] = !0;
     }).catch((h) => {
       console.error("error fetching dynamic data", u, h);
     });
   }
-  function k() {
+  function v() {
     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 E = f(p);
-        S({
-          url: E,
-          key: x
+    Object.entries(u).forEach(([b, y]) => {
+      if (y && (!g[b] || isEditing())) {
+        const I = C(y);
+        E({
+          url: I,
+          key: b
         });
       }
     });
   }
-  function C() {
+  function k() {
     isEditing() && window.dispatchEvent(
       new CustomEvent(
         "builder:component:stateChange",
@@ -2335,8 +2348,8 @@ function EnableEditor(e) {
       )
     );
   }
-  function v(u) {
-    i(n + 1), window.addEventListener("message", l), registerInsertMenu(), setupBrowserForEditing({
+  function T(u) {
+    i(n + 1), window.addEventListener("message", s), registerInsertMenu(), setupBrowserForEditing({
       ...e.locale ? {
         locale: e.locale
       } : {},
@@ -2349,61 +2362,61 @@ function EnableEditor(e) {
     }), Object.values(
       e.builderContextSignal.componentInfos
     ).forEach((m) => {
-      var x;
+      var b;
       const h = createRegisterComponentMessage(m);
-      (x = window.parent) == null || x.postMessage(h, "*");
+      (b = window.parent) == null || b.postMessage(h, "*");
     }), window.addEventListener(
       "builder:component:stateChangeListenerActivated",
-      C
+      k
     );
   }
-  function I(u) {
-    const m = new URL(location.href).searchParams, h = m.get("builder.preview"), x = m.get(
+  function w(u) {
+    const m = new URL(location.href).searchParams, h = m.get("builder.preview"), b = 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({
+    ), y = m.get("apiKey") || m.get("builder.space");
+    h === e.model && y === e.apiKey && (!e.content || b === e.content.id) && fetchOneEntry({
       model: e.model,
       apiKey: e.apiKey,
       apiVersion: e.builderContextSignal.apiVersion
-    }).then((E) => {
-      E && o(E);
+    }).then((I) => {
+      I && o(I);
     });
   }
   return useEffect(() => {
     var u;
     return (u = t.current) == null || u.addEventListener(
       "initeditingbldr",
-      v
+      T
     ), () => {
       var m;
       return (m = t.current) == null ? void 0 : m.removeEventListener(
         "initeditingbldr",
-        v
+        T
       );
     };
   }, []), useEffect(() => {
     var u;
     return (u = t.current) == null || u.addEventListener(
       "initpreviewingbldr",
-      I
+      w
     ), () => {
       var m;
       return (m = t.current) == null ? void 0 : m.removeEventListener(
         "initpreviewingbldr",
-        I
+        w
       );
     };
   }, []), useEffect(() => {
     var u, m;
     if (isBrowser()) {
       if (isEditing() && t.current && t.current.dispatchEvent(new CustomEvent("initeditingbldr")), e.builderContextSignal.content && getDefaultCanTrack(e.canTrack)) {
-        const x = (u = e.builderContextSignal.content) == null ? void 0 : u.testVariationId, p = (m = e.builderContextSignal.content) == null ? void 0 : m.id, E = e.apiKey;
+        const b = (u = e.builderContextSignal.content) == null ? void 0 : u.testVariationId, y = (m = e.builderContextSignal.content) == null ? void 0 : m.id, I = e.apiKey;
         _track({
           type: "impression",
           canTrack: !0,
-          contentId: p,
-          apiKey: E,
-          variationId: x !== p ? x : void 0
+          contentId: y,
+          apiKey: I,
+          variationId: b !== y ? b : void 0
         });
       }
       isPreviewing() && t.current && t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"));
@@ -2411,37 +2424,38 @@ 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(), k(), C();
+    ), d(), v(), k();
   }, []), useEffect(() => {
     e.content && o(e.content);
   }, [e.content]), useEffect(() => {
   }, [a]), useEffect(() => {
-    c();
+    d();
   }, [
-    (w = (T = e.builderContextSignal.content) == null ? void 0 : T.data) == null ? void 0 : w.jsCode,
+    (j = (R = e.builderContextSignal.content) == null ? void 0 : R.data) == null ? void 0 : j.jsCode,
     e.builderContextSignal.rootState
   ]), useEffect(() => {
+    v();
+  }, [(P = (B = e.builderContextSignal.content) == null ? void 0 : B.data) == null ? void 0 : P.httpRequests]), useEffect(() => {
     k();
-  }, [(j = (R = e.builderContextSignal.content) == null ? void 0 : R.data) == null ? void 0 : j.httpRequests]), useEffect(() => {
-    C();
   }, [e.builderContextSignal.rootState]), useEffect(() => () => {
-    isBrowser() && (window.removeEventListener("message", l), window.removeEventListener(
+    isBrowser() && (window.removeEventListener("message", s), window.removeEventListener(
       "builder:component:stateChangeListenerActivated",
-      C
+      k
     ));
   }, []), /* @__PURE__ */ jsx(builderContext.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createElement(
-    "div",
+    l,
     {
       key: n,
       ref: t,
-      onClick: (u) => y(u),
-      "builder-content-id": (B = e.builderContextSignal.content) == null ? void 0 : B.id,
+      onClick: (u) => p(u),
+      "builder-content-id": (A = e.builderContextSignal.content) == null ? void 0 : A.id,
       "builder-model": e.model,
       ...e.showContent ? {} : {
         hidden: !0,
         "aria-hidden": !0
       },
-      className: `variant-${((A = e.content) == null ? void 0 : A.testVariationId) || ((P = e.content) == null ? void 0 : P.id)}`
+      ...e.contentWrapperProps,
+      className: `variant-${((F = e.content) == null ? void 0 : F.testVariationId) || ((_ = e.content) == null ? void 0 : _.id)}`
     },
     e.children
   ) }) : null });
@@ -2537,22 +2551,22 @@ const getContextStateInitialValue = ({
   meta: e == null ? void 0 : e.meta
 } : void 0;
 function ContentComponent(e) {
-  var c, s, d, g, b, y, f;
+  var c, s, d, g, x, S, f;
   const [t, n] = useState(
     () => {
-      var S, k;
+      var p, C;
       return getUpdateVariantVisibilityScript({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        variationId: (S = e.content) == null ? void 0 : S.testVariationId,
+        variationId: (p = e.content) == null ? void 0 : p.testVariationId,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        contentId: (k = e.content) == null ? void 0 : k.id
+        contentId: (C = e.content) == null ? void 0 : C.id
       });
     }
   );
-  function i(S) {
-    l((k) => ({
-      ...k,
-      rootState: S
+  function i(p) {
+    l((C) => ({
+      ...C,
+      rootState: p
     }));
   }
   const [o, a] = useState(
@@ -2566,11 +2580,11 @@ function ContentComponent(e) {
       ...components,
       ...e.customComponents || []
     ].reduce(
-      (S, { component: k, ...C }) => ({
-        ...S,
-        [C.name]: {
-          component: k,
-          ...serializeComponentInfo(C)
+      (p, { component: C, ...E }) => ({
+        ...p,
+        [E.name]: {
+          component: C,
+          ...serializeComponentInfo(E)
         }
       }),
       {}
@@ -2600,13 +2614,15 @@ function ContentComponent(e) {
       ...components,
       ...e.customComponents || []
     ].reduce(
-      (S, { component: k, ...C }) => ({
-        ...S,
-        [C.name]: serializeComponentInfo(C)
+      (p, { component: C, ...E }) => ({
+        ...p,
+        [E.name]: serializeComponentInfo(E)
       }),
       {}
     ),
-    inheritedStyles: {}
+    inheritedStyles: {},
+    BlocksWrapper: e.blocksWrapper || "div",
+    BlocksWrapperProps: e.blocksWrapperProps || {}
   }));
   return /* @__PURE__ */ jsx(
     ComponentsContext.Provider,
@@ -2627,6 +2643,8 @@ function ContentComponent(e) {
           enrich: e.enrich,
           showContent: e.showContent,
           builderContextSignal: r,
+          contentWrapper: e.contentWrapper,
+          contentWrapperProps: e.contentWrapperProps,
           setBuilderContextSignal: l,
           children: [
             e.isSsrAbTest ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedScript, { scriptStr: t }) }) : null,
@@ -2635,13 +2653,13 @@ function ContentComponent(e) {
               {
                 contentId: (c = r.content) == null ? void 0 : c.id,
                 cssCode: (d = (s = r.content) == null ? void 0 : s.data) == null ? void 0 : d.cssCode,
-                customFonts: (b = (g = r.content) == null ? void 0 : g.data) == null ? void 0 : b.customFonts
+                customFonts: (x = (g = r.content) == null ? void 0 : g.data) == null ? void 0 : x.customFonts
               }
             ) }),
             /* @__PURE__ */ jsx(
               Blocks,
               {
-                blocks: (f = (y = r.content) == null ? void 0 : y.data) == null ? void 0 : f.blocks,
+                blocks: (f = (S = r.content) == null ? void 0 : S.data) == null ? void 0 : f.blocks,
                 context: r,
                 registeredComponents: o
               }
@@ -2710,7 +2728,11 @@ function ContentVariants(e) {
           locale: e.locale,
           includeRefs: e.includeRefs,
           enrich: e.enrich,
-          isSsrAbTest: t
+          isSsrAbTest: t,
+          blocksWrapper: e.blocksWrapper,
+          blocksWrapperProps: e.blocksWrapperProps,
+          contentWrapper: e.contentWrapper,
+          contentWrapperProps: e.contentWrapperProps
         },
         c.testVariationId
       ))
@@ -2730,7 +2752,11 @@ function ContentVariants(e) {
         locale: e.locale,
         includeRefs: e.includeRefs,
         enrich: e.enrich,
-        isSsrAbTest: t
+        isSsrAbTest: t,
+        blocksWrapper: e.blocksWrapper,
+        blocksWrapperProps: e.blocksWrapperProps,
+        contentWrapper: e.contentWrapper,
+        contentWrapperProps: e.contentWrapperProps
       }
     )
   ] });
@@ -2812,17 +2838,17 @@ export {
   Symbol$1 as Symbol,
   Text,
   Video,
-  W as _processContentResult,
+  U as _processContentResult,
   createRegisterComponentMessage,
-  O as fetchBuilderProps,
-  U as fetchEntries,
+  H as fetchBuilderProps,
+  K as fetchEntries,
   fetchOneEntry,
-  H as getAllContent,
-  K as getBuilderSearchParams,
-  z as getContent,
+  z as getAllContent,
+  q as getBuilderSearchParams,
+  Y as getContent,
   isEditing,
   isPreviewing,
   register,
-  q as setEditorSettings,
-  Y as track
+  G as setEditorSettings,
+  J as track
 };