@builder.io/sdk-react 0.8.0 → 0.9.0

package/lib/browser/index.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as E, Fragment as f, jsx as r } from "react/jsx-runtime";
-import { createContext as pe, useState as v, useContext as le, createElement as ke, useRef as Z, useEffect as P } from "react";
-import { i as $, j as N, k as $e, l as M, m as ee, n as G, T as L, r as Ne, o as U, p as ce, a as Fe, c as We, b as Ce, q as _e, u as se, v as de, w as Le } from "./server-entry-0aebe4be.mjs";
-import { _ as sn, h as dn, f as un, g as mn, e as fn, d as hn, s as gn, t as bn } from "./server-entry-0aebe4be.mjs";
-function je(e) {
-  return /* @__PURE__ */ E(f, { children: [
+import { jsxs as R, Fragment as f, jsx as r } from "react/jsx-runtime";
+import { createContext as Ce, useState as S, useContext as se, createElement as we, useRef as Z, useEffect as W } from "react";
+import { i as A, j as $, k as Ne, l as M, m as ee, n as G, T as L, r as Fe, o as U, p as de, a as _e, c as Le, b as Ie, q as je, u as ue, v as me, w as Me } from "./server-entry-0aebe4be.js";
+import { _ as un, h as mn, f as fn, g as hn, e as gn, d as bn, s as xn, t as yn } from "./server-entry-0aebe4be.js";
+function Ue(e) {
+  return /* @__PURE__ */ R(f, { children: [
     e.link ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
       "a",
       {
@@ -28,7 +28,7 @@ function je(e) {
 }` })
   ] });
 }
-const te = pe({
+const te = Ce({
   content: null,
   context: {},
   localState: void 0,
@@ -38,9 +38,11 @@ const te = pe({
   apiKey: null,
   apiVersion: void 0,
   componentInfos: {},
-  inheritedStyles: {}
-}), we = pe({ registeredComponents: {} });
-function Me(e) {
+  inheritedStyles: {},
+  BlocksWrapper: "div",
+  BlocksWrapperProps: {}
+}), Te = Ce({ registeredComponents: {} });
+function De(e) {
   var t;
   return {
     ...(t = e.component) == null ? void 0 : t.options,
@@ -51,7 +53,7 @@ function Me(e) {
     builderBlock: e
   };
 }
-const Ue = ({
+const Oe = ({
   builder: e,
   context: t,
   event: n,
@@ -63,14 +65,14 @@ const Ue = ({
   builder: e,
   context: t,
   event: n
-}), De = () => ({
-  isEditing: $(),
-  isBrowser: N(),
-  isServer: !N(),
-  getUserAttributes: () => $e()
-}), Oe = (e, {
+}), Ke = () => ({
+  isEditing: A(),
+  isBrowser: $(),
+  isServer: !$(),
+  getUserAttributes: () => Ne()
+}), He = (e, {
   isExpression: t = !0
-}) => /* we disable this for cases where we definitely don't want a return */ t && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e, ue = ({
+}) => /* we disable this for cases where we definitely don't want a return */ t && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e, fe = ({
   code: e,
   builder: t,
   context: n,
@@ -79,15 +81,15 @@ const Ue = ({
   rootSetState: o,
   rootState: l
 }) => {
-  const s = Ue({
+  const s = Oe({
     builder: t,
     context: n,
     event: i,
-    state: Ke(l, a, o)
+    state: ze(l, a, o)
   });
   return new Function(...s.map(([c]) => c), e)(...s.map(([, c]) => c));
 };
-function Ke(e, t, n) {
+function ze(e, t, n) {
   if (e === t)
     throw new Error("rootState === localState");
   return new Proxy(e, {
@@ -99,7 +101,7 @@ function Ke(e, t, n) {
     }
   });
 }
-const He = (e) => (N(), ue(e));
+const qe = (e) => ($(), fe(e));
 function _({
   code: e,
   context: t,
@@ -114,10 +116,10 @@ function _({
     return;
   }
   const s = {
-    code: Oe(e, {
+    code: He(e, {
       isExpression: l
     }),
-    builder: De(),
+    builder: Ke(),
     context: t,
     event: o,
     rootSetState: a,
@@ -125,7 +127,7 @@ function _({
     localState: n
   };
   try {
-    return He(s);
+    return qe(s);
   } catch (c) {
     M.error("Failed code evaluation: " + c.message, {
       code: e
@@ -133,13 +135,13 @@ function _({
     return;
   }
 }
-const ze = (e, t, n) => {
+const Ye = (e, t, n) => {
   if (Object(e) !== e)
     return e;
   const i = Array.isArray(t) ? t : t.toString().match(/[^.[\]]+/g);
   return i.slice(0, -1).reduce((a, o, l) => Object(a[o]) === a[o] ? a[o] : a[o] = Math.abs(Number(i[l + 1])) >> 0 === +i[l + 1] ? [] : {}, e)[i[i.length - 1]] = n, e;
 };
-const qe = ({
+const Qe = ({
   block: e,
   context: t,
   localState: n,
@@ -165,7 +167,7 @@ const qe = ({
       rootSetState: a,
       context: t
     });
-    ze(l, s, d);
+    Ye(l, s, d);
   }
   return l;
 };
@@ -178,7 +180,7 @@ function D({
   rootSetState: o
 }) {
   const l = e;
-  return n ? qe({
+  return n ? Qe({
     block: l,
     localState: i,
     rootState: a,
@@ -186,7 +188,7 @@ function D({
     context: t
   }) : l;
 }
-const Ye = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"], q = (e) => typeof e == "string" && Ye.includes(e.toLowerCase()), Qe = ({
+const Ge = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"], q = (e) => typeof e == "string" && Ge.includes(e.toLowerCase()), Je = ({
   block: e,
   context: t,
   registeredComponents: n
@@ -208,7 +210,7 @@ const Ye = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen"
   console.warn(`
       Could not find a registered component named "${i}". 
       If you registered it, is the file that registered it imported by the file that needs to render it?`);
-}, Ge = ({
+}, Xe = ({
   block: e,
   context: t
 }) => {
@@ -241,7 +243,7 @@ const Ye = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen"
     },
     block: i
   }));
-}, Ie = {
+}, Re = {
   small: {
     min: 320,
     default: 321,
@@ -257,11 +259,11 @@ const Ye = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen"
     default: 991,
     max: 1200
   }
-}, me = (e, t = Ie) => `@media (max-width: ${t[e].max}px)`, Te = ({
+}, he = (e, t = Re) => `@media (max-width: ${t[e].max}px)`, Ee = ({
   small: e,
   medium: t
 }) => {
-  const n = ee(Ie);
+  const n = ee(Re);
   if (!e || !t)
     return n;
   const i = Math.floor(e / 2);
@@ -283,17 +285,17 @@ const Ye = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen"
     min: o,
     default: o + 1
   }, n;
-}, Je = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), Re = (e) => Object.entries(e).map(([n, i]) => {
+}, Ze = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), Pe = (e) => Object.entries(e).map(([n, i]) => {
   if (typeof i == "string")
-    return `${Je(n)}: ${i};`;
-}).filter(G), Xe = (e) => Re(e).join(`
+    return `${Ze(n)}: ${i};`;
+}).filter(G), et = (e) => Pe(e).join(`
 `), Y = ({
   mediaQuery: e,
   className: t,
   styles: n
 }) => {
   const i = `.${t} {
-    ${Xe(n)}
+    ${et(n)}
   }`;
   return e ? `${e} {
       ${i}
@@ -323,7 +325,7 @@ function ne(e) {
       rootSetState: e.context.rootSetState,
       context: e.context.context,
       shouldEvaluateBindings: !0
-    }), a = i.responsiveStyles, o = e.context.content, l = Te(
+    }), a = i.responsiveStyles, o = e.context.content, l = Ee(
       ((x = o == null ? void 0 : o.meta) == null ? void 0 : x.breakpoints) || {}
     ), s = a == null ? void 0 : a.large, c = a == null ? void 0 : a.medium, d = a == null ? void 0 : a.small, u = i.id;
     if (!u)
@@ -331,29 +333,29 @@ function ne(e) {
     const g = s ? Y({
       className: u,
       styles: s
-    }) : "", S = c ? Y({
+    }) : "", p = c ? Y({
       className: u,
       styles: c,
-      mediaQuery: me(
+      mediaQuery: he(
         "medium",
         l
       )
-    }) : "", V = d ? Y({
+    }) : "", P = d ? Y({
       className: u,
       styles: d,
-      mediaQuery: me(
+      mediaQuery: he(
         "small",
         l
       )
     }) : "";
-    return [g, S, V].join(" ");
+    return [g, p, P].join(" ");
   }
   return /* @__PURE__ */ r(f, { children: n() && t() ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(K, { styles: n() }) }) : null });
 }
-function Ze(e) {
+function tt(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
 }
-const et = (e) => `on${Ze(e)}`, tt = (e, t) => (n) => _({
+const nt = (e) => `on${tt(e)}`, it = (e, t) => (n) => _({
   code: e,
   context: t.context,
   localState: t.localState,
@@ -368,7 +370,7 @@ function J(e) {
     if (!n.hasOwnProperty(i))
       continue;
     const a = n[i];
-    let o = et(i);
+    let o = nt(i);
     if (e.stripPrefix)
       switch (L) {
         case "vue2":
@@ -379,14 +381,16 @@ function J(e) {
           o = o.replace("on:", "");
           break;
       }
-    t[o] = tt(a, e);
+    t[o] = it(a, e);
   }
   return t;
 }
-function nt(e) {
+function at({
+  properties: e
+}) {
   return e.className = e.class, delete e.class, e;
 }
-const it = (e) => ({
+const ot = (e) => ({
   href: e.href
 });
 function O({
@@ -395,21 +399,25 @@ function O({
 }) {
   var i;
   const n = {
-    ...it(e),
+    ...ot(e),
     ...e.properties,
     "builder-id": e.id,
-    style: e.style ? at(e.style) : void 0,
+    style: e.style ? rt(e.style) : void 0,
     class: [e.id, "builder-block", e.class, (i = e.properties) == null ? void 0 : i.class].filter(Boolean).join(" ")
   };
-  return nt(n);
+  return at({
+    properties: n,
+    context: t,
+    block: e
+  });
 }
-function at(e) {
+function rt(e) {
   switch (L) {
     case "svelte":
     case "vue2":
     case "vue3":
     case "solid":
-      return Re(e).join(" ");
+      return Pe(e).join(" ");
     case "qwik":
     case "reactNative":
     case "react":
@@ -417,10 +425,10 @@ function at(e) {
       return e;
   }
 }
-function fe(e) {
-  return /* @__PURE__ */ E(f, { children: [
+function ge(e) {
+  return /* @__PURE__ */ R(f, { children: [
     " ",
-    e.hasChildren ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ E(
+    e.hasChildren ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ R(
       e.Wrapper,
       {
         ...O({
@@ -461,7 +469,7 @@ function fe(e) {
     " "
   ] });
 }
-function ot(e) {
+function lt(e) {
   return /* @__PURE__ */ r(
     e.Wrapper,
     {
@@ -483,7 +491,7 @@ function ot(e) {
     }
   );
 }
-const rt = ({
+const ct = ({
   componentOptions: e,
   builderBlock: t,
   context: n,
@@ -509,15 +517,15 @@ const rt = ({
     })
   } : {}
 };
-function he(e) {
+function be(e) {
   var i, a;
-  const [t, n] = v(
-    () => e.isInteractive ? ot : e.componentRef
+  const [t, n] = S(
+    () => e.isInteractive ? lt : e.componentRef
   );
-  return /* @__PURE__ */ r(f, { children: e.componentRef ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ E(
+  return /* @__PURE__ */ r(f, { children: e.componentRef ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ R(
     t,
     {
-      ...rt({
+      ...ct({
         componentOptions: e.componentOptions,
         builderBlock: e.builderBlock,
         context: e.context,
@@ -548,8 +556,8 @@ function he(e) {
     }
   ) }) : null });
 }
-function lt(e) {
-  const [t, n] = v(() => e.repeatContext);
+function st(e) {
+  const [t, n] = S(() => e.repeatContext);
   return /* @__PURE__ */ r(te.Provider, { value: t, children: /* @__PURE__ */ r(
     H,
     {
@@ -560,16 +568,16 @@ function lt(e) {
   ) });
 }
 function H(e) {
-  var u, g, S, V;
+  var u, g, p, P;
   function t() {
-    return Qe({
+    return Je({
       block: e.block,
       context: e.context,
       registeredComponents: e.registeredComponents
     });
   }
   function n() {
-    return Ge({
+    return Xe({
       block: e.block,
       context: e.context
     });
@@ -589,38 +597,38 @@ function H(e) {
     return e.block.tagName || "div";
   }
   function o() {
-    var I, w;
+    var I, E;
     if ((I = e.block.repeat) != null && I.collection)
-      return !!((w = n == null ? void 0 : n()) != null && w.length);
+      return !!((E = n == null ? void 0 : n()) != null && E.length);
     const x = "hide" in i() ? i().hide : !1;
     return ("show" in i() ? i().show : !0) && !x;
   }
   function l() {
-    var p;
-    return !((p = t == null ? void 0 : t()) != null && p.component) && !n() ? i().children ?? [] : [];
+    var v;
+    return !((v = t == null ? void 0 : t()) != null && v.component) && !n() ? i().children ?? [] : [];
   }
   function s() {
-    var x, p, I, w, C;
+    var x, v, I, E, C;
     return {
       blockChildren: i().children ?? [],
       componentRef: (x = t == null ? void 0 : t()) == null ? void 0 : x.component,
       componentOptions: {
-        ...Me(i()),
+        ...De(i()),
         builderContext: e.context,
-        ...((p = t == null ? void 0 : t()) == null ? void 0 : p.name) === "Symbol" || ((I = t == null ? void 0 : t()) == null ? void 0 : I.name) === "Columns" ? {
+        ...((v = t == null ? void 0 : t()) == null ? void 0 : v.name) === "Symbol" || ((I = t == null ? void 0 : t()) == null ? void 0 : I.name) === "Columns" ? {
           builderComponents: e.registeredComponents
         } : {}
       },
       context: c,
       registeredComponents: e.registeredComponents,
       builderBlock: i(),
-      includeBlockProps: ((w = t == null ? void 0 : t()) == null ? void 0 : w.noWrap) === !0,
+      includeBlockProps: ((E = t == null ? void 0 : t()) == null ? void 0 : E.noWrap) === !0,
       isInteractive: !((C = t == null ? void 0 : t()) != null && C.isRSC)
     };
   }
-  const [c, d] = v(() => e.context);
+  const [c, d] = S(() => e.context);
   return /* @__PURE__ */ r(f, { children: o() ? /* @__PURE__ */ r(f, { children: (u = t == null ? void 0 : t()) != null && u.noWrap ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
-    he,
+    be,
     {
       componentRef: s().componentRef,
       componentOptions: s().componentOptions,
@@ -631,9 +639,9 @@ function H(e) {
       includeBlockProps: s().includeBlockProps,
       isInteractive: s().isInteractive
     }
-  ) }) : /* @__PURE__ */ E(f, { children: [
+  ) }) : /* @__PURE__ */ R(f, { children: [
     q(a()) ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
-      fe,
+      ge,
       {
         Wrapper: a(),
         block: i(),
@@ -641,17 +649,17 @@ function H(e) {
         hasChildren: !1
       }
     ) }) : null,
-    !q(a()) && n() ? /* @__PURE__ */ r(f, { children: (g = n()) == null ? void 0 : g.map((x, p) => /* @__PURE__ */ r(
-      lt,
+    !q(a()) && n() ? /* @__PURE__ */ r(f, { children: (g = n()) == null ? void 0 : g.map((x, v) => /* @__PURE__ */ r(
+      st,
       {
         repeatContext: x.context,
         block: x.block,
         registeredComponents: e.registeredComponents
       },
-      p
+      v
     )) }) : null,
-    !q(a()) && !n() ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ E(
-      fe,
+    !q(a()) && !n() ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ R(
+      ge,
       {
         Wrapper: a(),
         block: i(),
@@ -659,7 +667,7 @@ function H(e) {
         hasChildren: !0,
         children: [
           /* @__PURE__ */ r(
-            he,
+            be,
             {
               componentRef: s().componentRef,
               componentOptions: s().componentOptions,
@@ -671,7 +679,7 @@ function H(e) {
               isInteractive: s().isInteractive
             }
           ),
-          (S = l()) == null ? void 0 : S.map((x) => /* @__PURE__ */ r(
+          (p = l()) == null ? void 0 : p.map((x) => /* @__PURE__ */ r(
             H,
             {
               block: x,
@@ -680,7 +688,7 @@ function H(e) {
             },
             "block-" + x.id
           )),
-          (V = l()) == null ? void 0 : V.map((x) => /* @__PURE__ */ r(
+          (P = l()) == null ? void 0 : P.map((x) => /* @__PURE__ */ r(
             ne,
             {
               block: x,
@@ -693,14 +701,14 @@ function H(e) {
     ) }) : null
   ] }) }) : null });
 }
-function ct(e) {
+function dt(e) {
   function t() {
     var a;
     return "builder-blocks" + ((a = e.blocks) != null && a.length ? "" : " no-blocks");
   }
   function n() {
     var a, o;
-    $() && !((a = e.blocks) != null && a.length) && ((o = window.parent) == null || o.postMessage(
+    A() && !((a = e.blocks) != null && a.length) && ((o = window.parent) == null || o.postMessage(
       {
         type: "builder.clickEmptyBlocks",
         data: {
@@ -713,7 +721,7 @@ function ct(e) {
   }
   function i() {
     var a, o;
-    $() && !((a = e.blocks) != null && a.length) && ((o = window.parent) == null || o.postMessage(
+    A() && !((a = e.blocks) != null && a.length) && ((o = window.parent) == null || o.postMessage(
       {
         type: "builder.hoverEmptyBlocks",
         data: {
@@ -724,21 +732,22 @@ function ct(e) {
       "*"
     ));
   }
-  return /* @__PURE__ */ E(f, { children: [
+  return /* @__PURE__ */ R(f, { children: [
     /* @__PURE__ */ r(
-      "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: (a) => n(),
         onMouseEnter: (a) => i(),
         onKeyPress: (a) => n(),
+        ...e.BlocksWrapperProps,
         children: e.children
       }
     ),
-    /* @__PURE__ */ r("style", { children: `.div-02c7a115 {
+    /* @__PURE__ */ r("style", { children: `.props-blocks-wrapper-4f2c12d8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -746,68 +755,70 @@ function ct(e) {
   ] });
 }
 function ie(e) {
-  var i, a;
-  const t = le(te), n = le(we);
-  return /* @__PURE__ */ E(
-    ct,
+  var i, a, o, l;
+  const t = se(te), n = se(Te);
+  return /* @__PURE__ */ R(
+    dt,
     {
       blocks: e.blocks,
       parent: e.parent,
       path: e.path,
       styleProp: e.styleProp,
+      BlocksWrapper: (i = e.context) == null ? void 0 : i.BlocksWrapper,
+      BlocksWrapperProps: (a = e.context) == null ? void 0 : a.BlocksWrapperProps,
       children: [
-        e.blocks ? /* @__PURE__ */ r(f, { children: (i = e.blocks) == null ? void 0 : i.map((o) => /* @__PURE__ */ r(
+        e.blocks ? /* @__PURE__ */ r(f, { children: (o = e.blocks) == null ? void 0 : o.map((s) => /* @__PURE__ */ r(
           H,
           {
-            block: o,
+            block: s,
             context: e.context || t,
             registeredComponents: e.registeredComponents || n.registeredComponents
           },
-          "render-block-" + o.id
+          "render-block-" + s.id
         )) }) : null,
-        e.blocks ? /* @__PURE__ */ r(f, { children: (a = e.blocks) == null ? void 0 : a.map((o) => /* @__PURE__ */ r(
+        e.blocks ? /* @__PURE__ */ r(f, { children: (l = e.blocks) == null ? void 0 : l.map((s) => /* @__PURE__ */ r(
           ne,
           {
-            block: o,
+            block: s,
             context: e.context || t
           },
-          "block-style-" + o.id
+          "block-style-" + s.id
         )) }) : null
       ]
     }
   );
 }
-function st(e) {
-  var w;
-  const [t, n] = v(
+function ut(e) {
+  var E;
+  const [t, n] = S(
     () => typeof e.space == "number" ? e.space || 0 : 20
-  ), [i, a] = v(() => e.columns || []), [o, l] = v(
+  ), [i, a] = S(() => e.columns || []), [o, l] = S(
     () => e.stackColumnsAt || "tablet"
   );
   function s(C) {
-    var T;
-    return ((T = i[C]) == null ? void 0 : T.width) || 100 / i.length;
+    var w;
+    return ((w = i[C]) == null ? void 0 : w.width) || 100 / i.length;
   }
   function c(C) {
-    const T = t * (i.length - 1) / i.length;
-    return `calc(${s(C)}% - ${T}px)`;
+    const w = t * (i.length - 1) / i.length;
+    return `calc(${s(C)}% - ${w}px)`;
   }
   function d({
     stackedStyle: C,
-    desktopStyle: T
+    desktopStyle: w
   }) {
-    return o === "tablet" ? C : T;
+    return o === "tablet" ? C : w;
   }
   function u({
     stackedStyle: C,
-    desktopStyle: T
+    desktopStyle: w
   }) {
-    return o === "never" ? T : C;
+    return o === "never" ? w : C;
   }
-  const [g, S] = v(
+  const [g, p] = S(
     () => e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column"
   );
-  function V() {
+  function P() {
     return {
       "--flex-dir": g,
       "--flex-dir-tablet": d({
@@ -817,37 +828,37 @@ function st(e) {
     };
   }
   function x(C) {
-    const T = C === 0 ? 0 : t, A = c(C), B = `${T}px`, F = "100%", W = 0;
+    const w = C === 0 ? 0 : t, B = c(C), V = `${w}px`, N = "100%", F = 0;
     return {
-      width: A,
-      ["marginLeft"]: B,
+      width: B,
+      ["marginLeft"]: V,
       "--column-width-mobile": u({
-        stackedStyle: F,
-        desktopStyle: A
+        stackedStyle: N,
+        desktopStyle: B
       }),
       "--column-margin-left-mobile": u({
-        stackedStyle: W,
-        desktopStyle: B
+        stackedStyle: F,
+        desktopStyle: V
       }),
       "--column-width-tablet": d({
-        stackedStyle: F,
-        desktopStyle: A
+        stackedStyle: N,
+        desktopStyle: B
       }),
       "--column-margin-left-tablet": d({
-        stackedStyle: W,
-        desktopStyle: B
+        stackedStyle: F,
+        desktopStyle: V
       })
     };
   }
-  function p(C) {
-    var A, B;
-    return Te(
-      ((B = (A = e.builderContext.content) == null ? void 0 : A.meta) == null ? void 0 : B.breakpoints) || {}
+  function v(C) {
+    var B, V;
+    return Ee(
+      ((V = (B = e.builderContext.content) == null ? void 0 : B.meta) == null ? void 0 : V.breakpoints) || {}
     )[C].max;
   }
   function I() {
     return `
-        @media (max-width: ${p("medium")}px) {
+        @media (max-width: ${v("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -859,7 +870,7 @@ function st(e) {
           }
         }
 
-        @media (max-width: ${p("small")}px) {
+        @media (max-width: ${v("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -872,25 +883,25 @@ function st(e) {
         },
       `;
   }
-  return /* @__PURE__ */ E(f, { children: [
-    /* @__PURE__ */ E(
+  return /* @__PURE__ */ R(f, { children: [
+    /* @__PURE__ */ R(
       "div",
       {
         className: `builder-columns ${e.builderBlock.id}-breakpoints div-53636e90`,
-        style: V(),
+        style: P(),
         children: [
           /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(K, { styles: I() }) }),
-          (w = e.columns) == null ? void 0 : w.map((C, T) => /* @__PURE__ */ ke(
+          (E = e.columns) == null ? void 0 : E.map((C, w) => /* @__PURE__ */ we(
             "div",
             {
               className: "builder-column div-53636e90-2",
-              style: x(T),
-              key: T
+              style: x(w),
+              key: w
             },
             /* @__PURE__ */ r(
               ie,
               {
-                path: `component.options.columns.${T}.blocks`,
+                path: `component.options.columns.${w}.blocks`,
                 parent: e.builderBlock.id,
                 styleProp: {
                   flexGrow: "1"
@@ -914,25 +925,25 @@ function st(e) {
 }` })
   ] });
 }
-function dt(e) {
+function mt(e) {
   return /* @__PURE__ */ r("span", { children: e.children });
 }
-function ge(e) {
+function xe(e) {
   return e.replace(/http(s)?:/, "");
 }
-function ut(e = "", t, n) {
+function ft(e = "", t, n) {
   const i = new RegExp("([?&])" + t + "=.*?(&|$)", "i"), a = e.indexOf("?") !== -1 ? "&" : "?";
   return e.match(i) ? e.replace(i, "$1" + t + "=" + encodeURIComponent(n) + "$2") : e + a + t + "=" + encodeURIComponent(n);
 }
-function mt(e, t) {
+function ht(e, t) {
   if (!e || !(e != null && e.match(/cdn\.shopify\.com/)) || !t)
     return e;
   if (t === "master")
-    return ge(e);
+    return xe(e);
   const n = e.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
   if (n) {
     const i = e.split(n[0]), a = n[3], o = t.match("x") ? t : `${t}x`;
-    return ge(`${i[0]}_${o}${a}`);
+    return xe(`${i[0]}_${o}${a}`);
   }
   return null;
 }
@@ -943,11 +954,11 @@ function Q(e) {
   if (e.match(/builder\.io/)) {
     let n = e;
     const i = Number(e.split("?width=")[1]);
-    return isNaN(i) || (n = `${n} ${i}w`), t.filter((a) => a !== i).map((a) => `${ut(e, "width", a)} ${a}w`).concat([n]).join(", ");
+    return isNaN(i) || (n = `${n} ${i}w`), t.filter((a) => a !== i).map((a) => `${ft(e, "width", a)} ${a}w`).concat([n]).join(", ");
   }
-  return e.match(/cdn\.shopify\.com/) ? t.map((n) => [mt(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, i]) => `${n} ${i}w`).concat([e]).join(", ") : e;
+  return e.match(/cdn\.shopify\.com/) ? t.map((n) => [ht(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, i]) => `${n} ${i}w`).concat([e]).join(", ") : e;
 }
-function ft(e) {
+function gt(e) {
   var a, o, l, s;
   function t() {
     var u;
@@ -977,9 +988,9 @@ function ft(e) {
     };
     return e.aspectRatio ? c : void 0;
   }
-  return /* @__PURE__ */ E(f, { children: [
-    /* @__PURE__ */ E(f, { children: [
-      /* @__PURE__ */ E("picture", { children: [
+  return /* @__PURE__ */ R(f, { children: [
+    /* @__PURE__ */ R(f, { children: [
+      /* @__PURE__ */ R("picture", { children: [
         n() ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("source", { type: "image/webp", srcSet: n() }) }) : null,
         /* @__PURE__ */ r(
           "img",
@@ -1030,7 +1041,7 @@ function ft(e) {
 }` })
   ] });
 }
-function ht(e) {
+function bt(e) {
   return /* @__PURE__ */ r(
     "section",
     {
@@ -1051,7 +1062,7 @@ function ht(e) {
     }
   );
 }
-const gt = {
+const xt = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -1084,7 +1095,7 @@ const gt = {
   }],
   static: !0,
   noWrap: !0
-}, bt = {
+}, yt = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: !0,
@@ -1285,7 +1296,7 @@ const gt = {
     helperText: "When stacking columns for mobile devices, reverse the ordering",
     advanced: !0
   }]
-}, xt = {
+}, St = {
   name: "Custom Code",
   static: !0,
   requiredPermissions: ["editCode"],
@@ -1308,9 +1319,9 @@ const gt = {
     advanced: !0
   }]
 };
-function yt(e) {
-  const t = Z(null), [n, i] = v(() => []), [a, o] = v(() => []);
-  return P(() => {
+function pt(e) {
+  const t = Z(null), [n, i] = S(() => []), [a, o] = S(() => []);
+  return W(() => {
     var s;
     if (!((s = t.current) != null && s.getElementsByTagName) || typeof window > "u")
       return;
@@ -1346,7 +1357,7 @@ function yt(e) {
     }
   );
 }
-const St = {
+const vt = {
   name: "Embed",
   static: !0,
   inputs: [{
@@ -1371,9 +1382,9 @@ const St = {
     defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
     hideFromUI: !0
   }]
-}, vt = ["text/javascript", "application/javascript", "application/ecmascript"], pt = (e) => vt.includes(e.type);
-function kt(e) {
-  const t = Z(null), [n, i] = v(() => []), [a, o] = v(() => []), [l, s] = v(() => !1);
+}, kt = ["text/javascript", "application/javascript", "application/ecmascript"], Ct = (e) => kt.includes(e.type);
+function wt(e) {
+  const t = Z(null), [n, i] = S(() => []), [a, o] = S(() => []), [l, s] = S(() => !1);
   function c() {
     if (!t.current || !t.current.getElementsByTagName)
       return;
@@ -1382,17 +1393,17 @@ function kt(e) {
       const g = d[u];
       if (g.src && !n.includes(g.src)) {
         n.push(g.src);
-        const S = document.createElement("script");
-        S.async = !0, S.src = g.src, document.head.appendChild(S);
-      } else if (pt(g) && !a.includes(g.innerText))
+        const p = document.createElement("script");
+        p.async = !0, p.src = g.src, document.head.appendChild(p);
+      } else if (Ct(g) && !a.includes(g.innerText))
         try {
           a.push(g.innerText), new Function(g.innerText)();
-        } catch (S) {
-          console.warn("`Embed`: Error running script:", S);
+        } catch (p) {
+          console.warn("`Embed`: Error running script:", p);
         }
     }
   }
-  return P(() => {
+  return W(() => {
     t.current && !l && (s(!0), c());
   }, [t.current, l]), /* @__PURE__ */ r(
     "div",
@@ -1403,13 +1414,13 @@ function kt(e) {
     }
   );
 }
-const Ct = {
+const It = {
   name: "Fragment",
   static: !0,
   hidden: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, wt = {
+}, Tt = {
   name: "Image",
   static: !0,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
@@ -1435,8 +1446,8 @@ const Ct = {
           let g = !1;
           u.onload = () => {
             g = !0, c(u);
-          }, u.addEventListener("error", (S) => {
-            console.warn("Image load failed", S.error), d(S.error);
+          }, u.addEventListener("error", (p) => {
+            console.warn("Image load failed", p.error), d(p.error);
           }), u.src = l, setTimeout(() => {
             g || d(new Error("Image load timed out"));
           }, s);
@@ -1509,7 +1520,7 @@ const Ct = {
     advanced: !0,
     defaultValue: 0.7041
   }]
-}, It = {
+}, Rt = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: !0,
@@ -1524,7 +1535,7 @@ const Ct = {
   noWrap: !0,
   static: !0
 };
-function Tt(e) {
+function Et(e) {
   return /* @__PURE__ */ r(
     "img",
     {
@@ -1536,10 +1547,10 @@ function Tt(e) {
       src: e.imgSrc || e.image,
       ...e.attributes
     },
-    $() && e.imgSrc || "default-key"
+    A() && e.imgSrc || "default-key"
   );
 }
-const Rt = {
+const Pt = {
   name: "Core:Section",
   static: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -1578,7 +1589,7 @@ const Rt = {
       }
     }
   }]
-}, Et = {
+}, Wt = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -1611,7 +1622,7 @@ const Rt = {
     hideFromUI: !0,
     type: "boolean"
   }]
-}, Pt = {
+}, Bt = {
   name: "Text",
   static: !0,
   isRSC: !0,
@@ -1725,7 +1736,7 @@ const At = {
     advanced: !0
   }]
 };
-function Bt(e) {
+function $t(e) {
   var i, a, o, l, s, c, d;
   function t() {
     return {
@@ -1751,7 +1762,7 @@ function Bt(e) {
       ...t()
     };
   }
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ R(
     "div",
     {
       style: {
@@ -1826,40 +1837,40 @@ function Bt(e) {
     }
   );
 }
-const be = () => [{
-  component: je,
-  ...gt
-}, {
-  component: st,
-  ...bt
-}, {
-  component: yt,
+const ye = () => [{
+  component: Ue,
   ...xt
 }, {
-  component: kt,
-  ...St
+  component: ut,
+  ...yt
 }, {
-  component: dt,
-  ...Ct
+  component: pt,
+  ...St
 }, {
-  component: ft,
-  ...wt
+  component: wt,
+  ...vt
 }, {
-  component: Tt,
+  component: mt,
   ...It
 }, {
-  component: ht,
+  component: gt,
+  ...Tt
+}, {
+  component: Et,
   ...Rt
 }, {
-  component: en,
-  ...Et
+  component: bt,
+  ...Pt
+}, {
+  component: nn,
+  ...Wt
 }, {
   component: Vt,
-  ...Pt
+  ...Bt
 }, {
-  component: Bt,
+  component: $t,
   ...At
-}], $t = `function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {
+}], Nt = `function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {
   function getAndSetVariantId() {
     function setCookie(name, value, days) {
       let expires = '';
@@ -1915,7 +1926,7 @@ const be = () => [{
     }).join('');
     styleEl.innerHTML = newStyleStr;
   }
-}`, Nt = `function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {
+}`, Ft = `function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {
   if (!navigator.cookieEnabled) {
     return;
   }
@@ -1949,23 +1960,23 @@ const be = () => [{
     thisScriptEl?.remove();
   }
   return;
-}`, Ee = "builderIoAbTest", Pe = "builderIoRenderContent", j = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
+}`, We = "builderIoAbTest", Be = "builderIoRenderContent", j = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
   ...t,
   testVariationId: t.id,
   id: e == null ? void 0 : e.id
-})), Ft = ({
+})), _t = ({
   canTrack: e,
   content: t
-}) => !(!(j(t).length > 0) || !e || N()), Wt = (e) => e === "react" || e === "reactNative", Ve = Wt(L), _t = () => `
-  window.${Ee} = ${$t}
-  window.${Pe} = ${Nt}
-  `, Lt = (e, t) => `
-  window.${Ee}(
+}) => !(!(j(t).length > 0) || !e || $()), Lt = (e) => e === "react" || e === "reactNative", Ve = Lt(L), jt = () => `
+  window.${We} = ${Nt}
+  window.${Be} = ${Ft}
+  `, Mt = (e, t) => `
+  window.${We}(
     "${t}",${JSON.stringify(e)}, ${Ve}
-  )`, jt = ({
+  )`, Ut = ({
   contentId: e,
   variationId: t
-}) => `window.${Pe}(
+}) => `window.${Be}(
     "${t}", "${e}", ${Ve}
   )`;
 function X(e) {
@@ -1977,10 +1988,10 @@ function X(e) {
     }
   );
 }
-function xe(e) {
+function Se(e) {
   return Math.round(e * 1e3) / 1e3;
 }
-const Mt = (e, t, n = !0) => {
+const Dt = (e, t, n = !0) => {
   if (!(e instanceof HTMLElement))
     return null;
   let i = n ? e : e.parentElement;
@@ -1991,36 +2002,36 @@ const Mt = (e, t, n = !0) => {
       return i;
   } while (i = i.parentElement);
   return null;
-}, Ut = (e) => Mt(e, (t) => {
+}, Ot = (e) => Dt(e, (t) => {
   const n = t.getAttribute("builder-id") || t.id;
   return (n == null ? void 0 : n.indexOf("builder-")) === 0;
-}), ye = ({
+}), pe = ({
   event: e,
   target: t
 }) => {
-  const n = t.getBoundingClientRect(), i = e.clientX - n.left, a = e.clientY - n.top, o = xe(i / n.width), l = xe(a / n.height);
+  const n = t.getBoundingClientRect(), i = e.clientX - n.left, a = e.clientY - n.top, o = Se(i / n.width), l = Se(a / n.height);
   return {
     x: o,
     y: l
   };
-}, Dt = (e) => {
-  const t = e.target, n = t && Ut(t), i = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
+}, Kt = (e) => {
+  const t = e.target, n = t && Ot(t), i = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
   return {
     targetBuilderElement: i || void 0,
     metadata: {
-      targetOffset: t ? ye({
+      targetOffset: t ? pe({
         event: e,
         target: t
       }) : void 0,
-      builderTargetOffset: n ? ye({
+      builderTargetOffset: n ? pe({
         event: e,
         target: n
       }) : void 0,
       builderElementIndex: n && i ? [].slice.call(document.getElementsByClassName(i)).indexOf(n) : void 0
     }
   };
-}, Ot = "0.8.0", Kt = () => {
-  Ne("insertMenu", {
+}, Ht = "0.9.0", zt = () => {
+  Fe("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -2042,14 +2053,14 @@ const Mt = (e, t, n = !0) => {
     }]
   });
 };
-let Se = !1;
-const Ht = (e = {}) => {
+let ve = !1;
+const qt = (e = {}) => {
   var t, n;
-  Se || (Se = !0, N() && ((t = window.parent) == null || t.postMessage({
+  ve || (ve = !0, $() && ((t = window.parent) == null || t.postMessage({
     type: "builder.sdkInfo",
     data: {
       target: L,
-      version: Ot,
+      version: Ht,
       supportsPatchUpdates: !1,
       // Supports builder-model="..." attribute which is needed to
       // scope our '+ add block' button styling
@@ -2072,8 +2083,8 @@ const Ht = (e = {}) => {
           let u, g = null;
           try {
             u = d.apply(null, s);
-          } catch (S) {
-            g = S;
+          } catch (p) {
+            g = p;
           }
           g ? (a = window.parent) == null || a.postMessage({
             type: "builder.evaluateError",
@@ -2081,13 +2092,13 @@ const Ht = (e = {}) => {
               id: c,
               error: g.message
             }
-          }, "*") : u && typeof u.then == "function" ? u.then((S) => {
-            var V;
-            (V = window.parent) == null || V.postMessage({
+          }, "*") : u && typeof u.then == "function" ? u.then((p) => {
+            var P;
+            (P = window.parent) == null || P.postMessage({
               type: "builder.evaluateResult",
               data: {
                 id: c,
-                result: S
+                result: p
               }
             }, "*");
           }).catch(console.error) : (o = window.parent) == null || o.postMessage({
@@ -2102,11 +2113,11 @@ const Ht = (e = {}) => {
       }
   })));
 };
-function zt(e) {
-  var A, B, F, W, z, ae, oe;
-  const t = Z(null), [n, i] = v(() => 0);
+function Yt(e) {
+  var N, F, z, ae, oe, re, le;
+  const t = Z(null), [n, i] = S(() => 0);
   function a(m) {
-    var b, y, k, R, re;
+    var b, y, k, T, ce;
     const h = {
       ...e.builderContextSignal.content,
       ...m,
@@ -2117,26 +2128,28 @@ function zt(e) {
       meta: {
         ...(y = e.builderContextSignal.content) == null ? void 0 : y.meta,
         ...m == null ? void 0 : m.meta,
-        breakpoints: ((k = m == null ? void 0 : m.meta) == null ? void 0 : k.breakpoints) || ((re = (R = e.builderContextSignal.content) == null ? void 0 : R.meta) == null ? void 0 : re.breakpoints)
+        breakpoints: ((k = m == null ? void 0 : m.meta) == null ? void 0 : k.breakpoints) || ((ce = (T = e.builderContextSignal.content) == null ? void 0 : T.meta) == null ? void 0 : ce.breakpoints)
       }
     };
-    e.setBuilderContextSignal((Be) => ({
-      ...Be,
+    e.setBuilderContextSignal(($e) => ({
+      ...$e,
       content: h
     }));
   }
-  v(() => 0);
-  const [o, l] = v(
+  S(() => 0);
+  const [o, l] = S(
     () => !1
+  ), [s, c] = S(
+    () => e.contentWrapper || "div"
   );
-  function s(m) {
+  function d(m) {
     var b;
     const { data: h } = m;
     if (h)
       switch (h.type) {
         case "builder.configureSdk": {
-          const y = h.data, { breakpoints: k, contentId: R } = y;
-          if (!R || R !== ((b = e.builderContextSignal.content) == null ? void 0 : b.id))
+          const y = h.data, { breakpoints: k, contentId: T } = y;
+          if (!T || T !== ((b = e.builderContextSignal.content) == null ? void 0 : b.id))
             return;
           k && a({
             meta: {
@@ -2146,13 +2159,13 @@ function zt(e) {
           break;
         }
         case "builder.contentUpdate": {
-          const y = h.data, k = y.key || y.alias || y.entry || y.modelName, R = y.data;
-          k === e.model && (a(R), i(n + 1));
+          const y = h.data, k = y.key || y.alias || y.entry || y.modelName, T = y.data;
+          k === e.model && (a(T), i(n + 1));
           break;
         }
       }
   }
-  function c() {
+  function u() {
     var h, b;
     const m = (b = (h = e.builderContextSignal.content) == null ? void 0 : h.data) == null ? void 0 : b.jsCode;
     m && _({
@@ -2163,24 +2176,24 @@ function zt(e) {
       rootSetState: e.builderContextSignal.rootSetState
     });
   }
-  const [d, u] = v(() => ({})), [g, S] = v(() => !1);
-  function V(m) {
+  const [g, p] = S(() => ({})), [P, x] = S(() => !1);
+  function v(m) {
     var h, b;
     if (e.builderContextSignal.content) {
       const y = (h = e.builderContextSignal.content) == null ? void 0 : h.testVariationId, k = (b = e.builderContextSignal.content) == null ? void 0 : b.id;
-      ce({
+      de({
         type: "click",
         canTrack: U(e.canTrack),
         contentId: k,
         apiKey: e.apiKey,
         variationId: y !== k ? y : void 0,
-        ...Dt(m),
-        unique: !g
+        ...Kt(m),
+        unique: !P
       });
     }
-    g || S(!0);
+    P || x(!0);
   }
-  function x(m) {
+  function I(m) {
     return m.replace(
       /{{([^}]+)}}/g,
       (h, b) => _({
@@ -2192,33 +2205,33 @@ function zt(e) {
       })
     );
   }
-  function p({ url: m, key: h }) {
-    _e(m).then((b) => b.json()).then((b) => {
-      var k, R;
+  function E({ url: m, key: h }) {
+    je(m).then((b) => b.json()).then((b) => {
+      var k, T;
       const y = {
         ...e.builderContextSignal.rootState,
         [h]: b
       };
-      (R = (k = e.builderContextSignal).rootSetState) == null || R.call(k, y), d[h] = !0;
+      (T = (k = e.builderContextSignal).rootSetState) == null || T.call(k, y), g[h] = !0;
     }).catch((b) => {
       console.error("error fetching dynamic data", m, b);
     });
   }
-  function I() {
+  function C() {
     var h, b;
     const m = ((b = (h = e.builderContextSignal.content) == null ? void 0 : h.data) == null ? void 0 : b.httpRequests) ?? {};
     Object.entries(m).forEach(([y, k]) => {
-      if (k && (!d[y] || $())) {
-        const R = x(k);
-        p({
-          url: R,
+      if (k && (!g[y] || A())) {
+        const T = I(k);
+        E({
+          url: T,
           key: y
         });
       }
     });
   }
   function w() {
-    $() && window.dispatchEvent(
+    A() && window.dispatchEvent(
       new CustomEvent(
         "builder:component:stateChange",
         {
@@ -2232,8 +2245,8 @@ function zt(e) {
       )
     );
   }
-  function C(m) {
-    i(n + 1), window.addEventListener("message", s), Kt(), Ht({
+  function B(m) {
+    i(n + 1), window.addEventListener("message", d), zt(), qt({
       ...e.locale ? {
         locale: e.locale
       } : {},
@@ -2247,103 +2260,104 @@ function zt(e) {
       e.builderContextSignal.componentInfos
     ).forEach((h) => {
       var y;
-      const b = We(h);
+      const b = Le(h);
       (y = window.parent) == null || y.postMessage(b, "*");
     }), window.addEventListener(
       "builder:component:stateChangeListenerActivated",
       w
     );
   }
-  function T(m) {
+  function V(m) {
     const h = new URL(location.href).searchParams, b = h.get("builder.preview"), y = h.get(
       `builder.preview.${b}`
     ), k = h.get("apiKey") || h.get("builder.space");
-    b === e.model && k === e.apiKey && (!e.content || y === e.content.id) && Ce({
+    b === e.model && k === e.apiKey && (!e.content || y === e.content.id) && Ie({
       model: e.model,
       apiKey: e.apiKey,
       apiVersion: e.builderContextSignal.apiVersion
-    }).then((R) => {
-      R && a(R);
+    }).then((T) => {
+      T && a(T);
     });
   }
-  return P(() => {
+  return W(() => {
     var m;
     return (m = t.current) == null || m.addEventListener(
       "initeditingbldr",
-      C
+      B
     ), () => {
       var h;
       return (h = t.current) == null ? void 0 : h.removeEventListener(
         "initeditingbldr",
-        C
+        B
       );
     };
-  }, []), P(() => {
+  }, []), W(() => {
     var m;
     return (m = t.current) == null || m.addEventListener(
       "initpreviewingbldr",
-      T
+      V
     ), () => {
       var h;
       return (h = t.current) == null ? void 0 : h.removeEventListener(
         "initpreviewingbldr",
-        T
+        V
       );
     };
-  }, []), P(() => {
+  }, []), W(() => {
     var m, h;
-    if (N()) {
-      if ($() && t.current && t.current.dispatchEvent(new CustomEvent("initeditingbldr")), e.builderContextSignal.content && U(e.canTrack)) {
-        const y = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, k = (h = e.builderContextSignal.content) == null ? void 0 : h.id, R = e.apiKey;
-        ce({
+    if ($()) {
+      if (A() && t.current && t.current.dispatchEvent(new CustomEvent("initeditingbldr")), e.builderContextSignal.content && U(e.canTrack)) {
+        const y = (m = e.builderContextSignal.content) == null ? void 0 : m.testVariationId, k = (h = e.builderContextSignal.content) == null ? void 0 : h.id, T = e.apiKey;
+        de({
           type: "impression",
           canTrack: !0,
           contentId: k,
-          apiKey: R,
+          apiKey: T,
           variationId: y !== k ? y : void 0
         });
       }
-      Fe() && t.current && t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"));
+      _e() && t.current && t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"));
     }
-  }, []), P(() => {
+  }, []), W(() => {
     e.apiKey || M.error(
       "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-    ), c(), I(), w();
-  }, []), P(() => {
+    ), u(), C(), w();
+  }, []), W(() => {
     e.content && a(e.content);
-  }, [e.content]), P(() => {
-  }, [o]), P(() => {
-    c();
+  }, [e.content]), W(() => {
+  }, [o]), W(() => {
+    u();
   }, [
-    (B = (A = e.builderContextSignal.content) == null ? void 0 : A.data) == null ? void 0 : B.jsCode,
+    (F = (N = e.builderContextSignal.content) == null ? void 0 : N.data) == null ? void 0 : F.jsCode,
     e.builderContextSignal.rootState
-  ]), P(() => {
-    I();
-  }, [(W = (F = e.builderContextSignal.content) == null ? void 0 : F.data) == null ? void 0 : W.httpRequests]), P(() => {
+  ]), W(() => {
+    C();
+  }, [(ae = (z = e.builderContextSignal.content) == null ? void 0 : z.data) == null ? void 0 : ae.httpRequests]), W(() => {
     w();
-  }, [e.builderContextSignal.rootState]), P(() => () => {
-    N() && (window.removeEventListener("message", s), window.removeEventListener(
+  }, [e.builderContextSignal.rootState]), W(() => () => {
+    $() && (window.removeEventListener("message", d), window.removeEventListener(
       "builder:component:stateChangeListenerActivated",
       w
     ));
-  }, []), /* @__PURE__ */ r(te.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ ke(
-    "div",
+  }, []), /* @__PURE__ */ r(te.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ we(
+    s,
     {
       key: n,
       ref: t,
-      onClick: (m) => V(m),
-      "builder-content-id": (z = e.builderContextSignal.content) == null ? void 0 : z.id,
+      onClick: (m) => v(m),
+      "builder-content-id": (oe = e.builderContextSignal.content) == null ? void 0 : oe.id,
       "builder-model": e.model,
       ...e.showContent ? {} : {
         hidden: !0,
         "aria-hidden": !0
       },
-      className: `variant-${((ae = e.content) == null ? void 0 : ae.testVariationId) || ((oe = e.content) == null ? void 0 : oe.id)}`
+      ...e.contentWrapperProps,
+      className: `variant-${((re = e.content) == null ? void 0 : re.testVariationId) || ((le = e.content) == null ? void 0 : le.id)}`
     },
     e.children
   ) }) : null });
 }
-const qt = (e) => {
+const Qt = (e) => {
   var o;
   const t = e.family + (e.kind && !e.kind.includes("#") ? ", " + e.kind : ""), n = t.split(",")[0], i = e.fileUrl ?? ((o = e == null ? void 0 : e.files) == null ? void 0 : o.regular);
   let a = "";
@@ -2369,23 +2383,23 @@ font-weight: ${l};
         `.trim());
     }
   return a;
-}, Yt = ({
+}, Gt = ({
   customFonts: e
 }) => {
   var t;
-  return ((t = e == null ? void 0 : e.map((n) => qt(n))) == null ? void 0 : t.join(" ")) || "";
-}, Qt = ({
+  return ((t = e == null ? void 0 : e.map((n) => Qt(n))) == null ? void 0 : t.join(" ")) || "";
+}, Jt = ({
   cssCode: e,
   contentId: t
 }) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "";
-function Gt(e) {
-  const [t, n] = v(
+function Xt(e) {
+  const [t, n] = S(
     () => `
-${Qt({
+${Jt({
       cssCode: e.cssCode,
       contentId: e.contentId
     })}
-${Yt({
+${Gt({
       customFonts: e.customFonts
     })}
 
@@ -2405,7 +2419,7 @@ ${Yt({
   );
   return /* @__PURE__ */ r(K, { styles: t });
 }
-const Jt = ({
+const Zt = ({
   content: e,
   data: t,
   locale: n
@@ -2422,7 +2436,7 @@ const Jt = ({
       locale: n
     } : {}
   };
-}, Xt = ({
+}, en = ({
   content: e,
   data: t
 }) => e ? {
@@ -2433,52 +2447,52 @@ const Jt = ({
   },
   meta: e == null ? void 0 : e.meta
 } : void 0;
-function ve(e) {
-  var c, d, u, g, S, V, x;
-  const [t, n] = v(
+function ke(e) {
+  var c, d, u, g, p, P, x;
+  const [t, n] = S(
     () => {
-      var p, I;
-      return jt({
+      var v, I;
+      return Ut({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        variationId: (p = e.content) == null ? void 0 : p.testVariationId,
+        variationId: (v = e.content) == null ? void 0 : v.testVariationId,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
         contentId: (I = e.content) == null ? void 0 : I.id
       });
     }
   );
-  function i(p) {
+  function i(v) {
     s((I) => ({
       ...I,
-      rootState: p
+      rootState: v
     }));
   }
-  const [a, o] = v(
+  const [a, o] = S(
     () => [
-      ...be(),
+      ...ye(),
       // While this `components` object is deprecated, we must maintain support for it.
       // Since users are able to override our default components, we need to make sure that we do not break such
       // existing usage.
       // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
       // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...se,
+      ...ue,
       ...e.customComponents || []
     ].reduce(
-      (p, { component: I, ...w }) => ({
-        ...p,
-        [w.name]: {
+      (v, { component: I, ...E }) => ({
+        ...v,
+        [E.name]: {
           component: I,
-          ...de(w)
+          ...me(E)
         }
       }),
       {}
     )
-  ), [l, s] = v(() => ({
-    content: Xt({
+  ), [l, s] = S(() => ({
+    content: en({
       content: e.content,
       data: e.data
     }),
     localState: void 0,
-    rootState: Jt({
+    rootState: Zt({
       content: e.content,
       data: e.data,
       locale: e.locale
@@ -2488,31 +2502,33 @@ function ve(e) {
     apiKey: e.apiKey,
     apiVersion: e.apiVersion,
     componentInfos: [
-      ...be(),
+      ...ye(),
       // While this `components` object is deprecated, we must maintain support for it.
       // Since users are able to override our default components, we need to make sure that we do not break such
       // existing usage.
       // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
       // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...se,
+      ...ue,
       ...e.customComponents || []
     ].reduce(
-      (p, { component: I, ...w }) => ({
-        ...p,
-        [w.name]: de(w)
+      (v, { component: I, ...E }) => ({
+        ...v,
+        [E.name]: me(E)
       }),
       {}
     ),
-    inheritedStyles: {}
+    inheritedStyles: {},
+    BlocksWrapper: e.blocksWrapper || "div",
+    BlocksWrapperProps: e.blocksWrapperProps || {}
   }));
   return /* @__PURE__ */ r(
-    we.Provider,
+    Te.Provider,
     {
       value: {
         registeredComponents: a
       },
-      children: /* @__PURE__ */ E(
-        zt,
+      children: /* @__PURE__ */ R(
+        Yt,
         {
           content: e.content,
           model: e.model,
@@ -2524,21 +2540,23 @@ function ve(e) {
           enrich: e.enrich,
           showContent: e.showContent,
           builderContextSignal: l,
+          contentWrapper: e.contentWrapper,
+          contentWrapperProps: e.contentWrapperProps,
           setBuilderContextSignal: s,
           children: [
             e.isSsrAbTest ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(X, { scriptStr: t }) }) : null,
             /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
-              Gt,
+              Xt,
               {
                 contentId: (c = l.content) == null ? void 0 : c.id,
                 cssCode: (u = (d = l.content) == null ? void 0 : d.data) == null ? void 0 : u.cssCode,
-                customFonts: (S = (g = l.content) == null ? void 0 : g.data) == null ? void 0 : S.customFonts
+                customFonts: (p = (g = l.content) == null ? void 0 : g.data) == null ? void 0 : p.customFonts
               }
             ) }),
             /* @__PURE__ */ r(
               ie,
               {
-                blocks: (x = (V = l.content) == null ? void 0 : V.data) == null ? void 0 : x.blocks,
+                blocks: (x = (P = l.content) == null ? void 0 : P.data) == null ? void 0 : x.blocks,
                 context: l,
                 registeredComponents: a
               }
@@ -2551,15 +2569,15 @@ function ve(e) {
 }
 function Ae(e) {
   var l, s;
-  const [t, n] = v(
-    () => Ft({
+  const [t, n] = S(
+    () => _t({
       canTrack: U(e.canTrack),
       content: e.content
     })
   );
   function i() {
     var c;
-    return Lt(
+    return Mt(
       j(e.content).map((d) => ({
         id: d.testVariationId,
         testRatio: d.testRatio
@@ -2575,15 +2593,15 @@ function Ae(e) {
     return t ? {
       ...e.content,
       testVariationId: (c = e.content) == null ? void 0 : c.id
-    } : Le({
+    } : Me({
       item: e.content,
       canTrack: U(e.canTrack)
     });
   }
-  return P(() => {
-  }, []), /* @__PURE__ */ E(f, { children: [
-    !e.__isNestedRender && L !== "reactNative" ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(X, { scriptStr: _t() }) }) : null,
-    t ? /* @__PURE__ */ E(f, { children: [
+  return W(() => {
+  }, []), /* @__PURE__ */ R(f, { children: [
+    !e.__isNestedRender && L !== "reactNative" ? /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(X, { scriptStr: jt() }) }) : null,
+    t ? /* @__PURE__ */ R(f, { children: [
       /* @__PURE__ */ r(
         K,
         {
@@ -2593,7 +2611,7 @@ function Ae(e) {
       ),
       /* @__PURE__ */ r(X, { scriptStr: i() }),
       (s = j(e.content)) == null ? void 0 : s.map((c) => /* @__PURE__ */ r(
-        ve,
+        ke,
         {
           content: c,
           showContent: !1,
@@ -2607,13 +2625,17 @@ function Ae(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
       ))
     ] }) : null,
     /* @__PURE__ */ r(
-      ve,
+      ke,
       {
         content: o(),
         showContent: !0,
@@ -2627,18 +2649,22 @@ function Ae(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
       }
     )
   ] });
 }
-const Zt = async ({
+const tn = async ({
   builderContextValue: e,
   symbol: t
 }) => {
   if (t != null && t.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
   (e != null && e.apiKey))
-    return Ce({
+    return Ie({
       model: t.model,
       apiKey: e.apiKey,
       apiVersion: e.apiVersion,
@@ -2651,7 +2677,7 @@ const Zt = async ({
       M.error("Could not fetch symbol content: ", n);
     });
 };
-function en(e) {
+function nn(e) {
   var o, l, s;
   function t() {
     var c, d;
@@ -2662,20 +2688,20 @@ function en(e) {
       (d = e.symbol) != null && d.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }
-  const [n, i] = v(() => {
+  const [n, i] = S(() => {
     var c;
     return (c = e.symbol) == null ? void 0 : c.content;
   });
   function a() {
-    n || Zt({
+    n || tn({
       symbol: e.symbol,
       builderContextValue: e.builderContext
     }).then((c) => {
       c && i(c);
     });
   }
-  return P(() => {
-  }, []), P(() => {
+  return W(() => {
+  }, []), W(() => {
     a();
   }, [e.symbol]), /* @__PURE__ */ r("div", { ...e.attributes, className: t(), children: /* @__PURE__ */ r(
     Ae,
@@ -2695,31 +2721,31 @@ function en(e) {
     }
   ) });
 }
-const on = ie, rn = Ae;
+const ln = ie, cn = Ae;
 export {
   ie as Blocks,
-  je as Button,
-  st as Columns,
+  Ue as Button,
+  ut as Columns,
   Ae as Content,
-  dt as Fragment,
-  ft as Image,
-  on as RenderBlocks,
-  rn as RenderContent,
-  ht as Section,
-  en as Symbol,
+  mt as Fragment,
+  gt as Image,
+  ln as RenderBlocks,
+  cn as RenderContent,
+  bt as Section,
+  nn as Symbol,
   Vt as Text,
-  Bt as Video,
-  sn as _processContentResult,
-  We as createRegisterComponentMessage,
-  dn as fetchBuilderProps,
-  un as fetchEntries,
-  Ce as fetchOneEntry,
-  mn as getAllContent,
-  fn as getBuilderSearchParams,
-  hn as getContent,
-  $ as isEditing,
-  Fe as isPreviewing,
-  Ne as register,
-  gn as setEditorSettings,
-  bn as track
+  $t as Video,
+  un as _processContentResult,
+  Le as createRegisterComponentMessage,
+  mn as fetchBuilderProps,
+  fn as fetchEntries,
+  Ie as fetchOneEntry,
+  hn as getAllContent,
+  gn as getBuilderSearchParams,
+  bn as getContent,
+  A as isEditing,
+  _e as isPreviewing,
+  Fe as register,
+  xn as setEditorSettings,
+  yn as track
 };