@builder.io/sdk-react-nextjs 0.14.6 → 0.14.8

package/lib/node/{bundle-a8519a3b.js → bundle-001f0cdc.js}

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "react";
 import { LRUCache } from "lru-cache";
-import { I as InteractiveElement, B as BlockWrapper, a as BlocksWrapper, D as DynamicRenderer, C as CustomCode, E as Embed, b as ImgComponent, V as Video, c as Button, F as FragmentComponent, d as Image, S as SectionComponent, e as EnableEditor } from "./USE_CLIENT_BUNDLE-22e26b2f.js";
+import { I as InteractiveElement, B as BlockWrapper, a as BlocksWrapper, D as DynamicRenderer, C as CustomCode, E as Embed, b as ImgComponent, V as Video, c as Button, F as FragmentComponent, d as Image, S as SectionComponent, e as EnableEditor } from "./USE_CLIENT_BUNDLE-690f58c3.js";
 import "next/navigation";
 const EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), isEmptyElement = (e) => typeof e == "string" && EMPTY_HTML_ELEMENTS.has(e.toLowerCase()), TARGET = "rsc", getClassPropName = () => {
   switch (TARGET) {
@@ -130,7 +130,7 @@ function flattenState({
       if (t && r in t)
         return t[r];
       const i = o[r];
-      return typeof i == "object" ? flattenState({
+      return typeof i == "object" && i !== null ? flattenState({
         rootState: i,
         localState: void 0,
         rootSetState: n ? (a) => {
@@ -220,34 +220,34 @@ output;
   const s = safeDynamicRequire("isolated-vm"), c = fastClone({
     ...a,
     ...r
-  }), u = getFunctionArguments({
+  }), d = getFunctionArguments({
     builder: t,
     context: n,
     event: o,
     state: c
-  }), h = getIsolateContext(), m = h.global;
-  m.setSync("global", m.derefInto()), m.setSync("log", function(...l) {
-    console.log(...l);
-  }), m.setSync(BUILDER_SET_STATE_NAME, function(l, d) {
-    set(a, l, d), i == null || i(a);
-  }), u.forEach(([l, d]) => {
-    const b = typeof d == "object" ? new s.Reference(
+  }), g = getIsolateContext(), l = g.global;
+  l.setSync("global", l.derefInto()), l.setSync("log", function(...m) {
+    console.log(...m);
+  }), l.setSync(BUILDER_SET_STATE_NAME, function(m, u) {
+    set(a, m, u), i == null || i(a);
+  }), d.forEach(([m, u]) => {
+    const y = typeof u == "object" ? new s.Reference(
       // workaround: methods with default values for arguments is not being cloned over
-      l === "builder" ? {
-        ...d,
-        getUserAttributes: () => d.getUserAttributes()
-      } : d
+      m === "builder" ? {
+        ...u,
+        getUserAttributes: () => u.getUserAttributes()
+      } : u
     ) : null;
-    m.setSync(getSyncValName(l), b);
-  }), m.setSync(INJECTED_IVM_GLOBAL, s);
+    l.setSync(getSyncValName(m), y);
+  }), l.setSync(INJECTED_IVM_GLOBAL, s);
   const f = processCode({
     code: e,
-    args: u
-  }), g = h.evalSync(f);
+    args: d
+  }), p = g.evalSync(f);
   try {
-    return JSON.parse(g);
+    return JSON.parse(p);
   } catch {
-    return g;
+    return p;
   }
 }, checkIsDefined = (e) => e != null;
 function isNodeRuntime() {
@@ -260,7 +260,27 @@ const shouldForceBrowserRuntimeInNode = () => {
     return !1;
   const e = process.arch === "arm64", t = process.version.startsWith("v20"), n = (o = process.env.NODE_OPTIONS) == null ? void 0 : o.includes("--no-node-snapshot");
   return e && t && !n ? (logger.log("Skipping usage of `isolated-vm` to avoid crashes in Node v20 on an arm64 machine.\n    If you would like to use the `isolated-vm` package on this machine, please provide the `NODE_OPTIONS=--no-node-snapshot` config to your Node process.\n    See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.\n    "), !0) : !1;
-}, chooseBrowserOrServerEval = (e) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(e) : runInNode(e);
+}, chooseBrowserOrServerEval = (e) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(e) : runInNode(e), _EvalCache = class v {
+  static getCacheKey(t) {
+    return JSON.stringify({
+      ...t,
+      // replace the event with a random number to break cache
+      // thats because we can't serialize the event object due to circular refs in DOM node refs.
+      event: t.event ? Math.random() : void 0
+    });
+  }
+  static getCachedValue(t) {
+    return v.cache.get(t);
+  }
+  static setCachedValue(t, n) {
+    v.cache.size > 20 && v.cache.delete(v.cache.keys().next().value), v.cache.set(t, {
+      value: n
+    });
+  }
+};
+_EvalCache.cacheLimit = 20;
+_EvalCache.cache = /* @__PURE__ */ new Map();
+let EvalCache = _EvalCache;
 function evaluate({
   code: e,
   context: t,
@@ -268,13 +288,14 @@ function evaluate({
   rootState: o,
   rootSetState: r,
   event: i,
-  isExpression: a = !0
+  isExpression: a = !0,
+  enableCache: s
 }) {
   if (e === "") {
     logger.warn("Skipping evaluation of empty code block.");
     return;
   }
-  const s = {
+  const c = {
     code: parseCode(e, {
       isExpression: a
     }),
@@ -285,10 +306,20 @@ function evaluate({
     rootState: o,
     localState: n
   };
+  if (s) {
+    const d = EvalCache.getCacheKey(c), g = EvalCache.getCachedValue(d);
+    if (g)
+      return g.value;
+  }
   try {
-    return chooseBrowserOrServerEval(s);
-  } catch (c) {
-    logger.error("Failed code evaluation: " + c.message, {
+    const d = chooseBrowserOrServerEval(c);
+    if (s) {
+      const g = EvalCache.getCacheKey(c);
+      EvalCache.setCachedValue(g, d);
+    }
+    return d;
+  } catch (d) {
+    logger.error("Failed code evaluation: " + d.message, {
       code: e
     });
     return;
@@ -316,14 +347,15 @@ const evaluateBindings = ({
     }
   };
   for (const s in e.bindings) {
-    const c = e.bindings[s], u = evaluate({
+    const c = e.bindings[s], d = evaluate({
       code: c,
       localState: n,
       rootState: o,
       rootSetState: r,
-      context: t
+      context: t,
+      enableCache: !0
     });
-    set(a, s, u);
+    set(a, s, d);
   }
   return a;
 };
@@ -344,6 +376,48 @@ function getProcessedBlock({
     context: t
   }) : a;
 }
+const camelToKebabCase = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), convertStyleMapToCSSArray = (e) => Object.entries(e).map(([n, o]) => {
+  if (typeof o == "string")
+    return `${camelToKebabCase(n)}: ${o};`;
+}).filter(checkIsDefined), convertStyleMapToCSS = (e) => convertStyleMapToCSSArray(e).join(`
+`), createCssClass = ({
+  mediaQuery: e,
+  className: t,
+  styles: n
+}) => {
+  const o = `.${t} {
+    ${convertStyleMapToCSS(n)}
+  }`;
+  return e ? `${e} {
+      ${o}
+    }` : o;
+};
+function transformStyleProperty({
+  style: e
+}) {
+  return e;
+}
+const getStyle = ({
+  block: e,
+  context: t
+}) => mapStyleObjToStrIfNeeded(transformStyleProperty({
+  style: e.style || {},
+  context: t,
+  block: e
+}));
+function mapStyleObjToStrIfNeeded(e) {
+  switch (TARGET) {
+    case "svelte":
+    case "vue":
+    case "solid":
+      return convertStyleMapToCSSArray(e).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return e;
+  }
+}
 const getComponent = ({
   block: e,
   context: t,
@@ -381,20 +455,21 @@ const getComponent = ({
     localState: t.localState,
     rootState: t.rootState,
     rootSetState: t.rootSetState,
-    context: t.context
+    context: t.context,
+    enableCache: !0
   });
   if (!Array.isArray(r))
     return;
   const i = n.collection.split(".").pop(), a = n.itemName || (i ? i + "Item" : "item");
-  return r.map((c, u) => ({
+  return r.map((c, d) => ({
     context: {
       ...t,
       localState: {
         ...t.localState,
-        $index: u,
+        $index: d,
         $item: c,
         [a]: c,
-        [`$${a}Index`]: u
+        [`$${a}Index`]: d
       }
     },
     block: o
@@ -441,21 +516,6 @@ const getComponent = ({
     min: i,
     default: i + 1
   }, n;
-}, camelToKebabCase = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), convertStyleMapToCSSArray = (e) => Object.entries(e).map(([n, o]) => {
-  if (typeof o == "string")
-    return `${camelToKebabCase(n)}: ${o};`;
-}).filter(checkIsDefined), convertStyleMapToCSS = (e) => convertStyleMapToCSSArray(e).join(`
-`), createCssClass = ({
-  mediaQuery: e,
-  className: t,
-  styles: n
-}) => {
-  const o = `.${t} {
-    ${convertStyleMapToCSS(n)}
-  }`;
-  return e ? `${e} {
-      ${o}
-    }` : o;
 };
 function InlinedStyles(e) {
   return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: e.styles }, id: e.id });
@@ -472,7 +532,7 @@ function BlockStyles(e) {
     });
     return checkIsDefined(r.hide) ? !r.hide : checkIsDefined(r.show) ? r.show : !0;
   }, n = function() {
-    var d;
+    var u;
     const r = getProcessedBlock({
       block: e.block,
       localState: e.context.localState,
@@ -481,29 +541,29 @@ function BlockStyles(e) {
       context: e.context.context,
       shouldEvaluateBindings: !0
     }), i = r.responsiveStyles, a = e.context.content, s = getSizesForBreakpoints(
-      ((d = a == null ? void 0 : a.meta) == null ? void 0 : d.breakpoints) || {}
-    ), c = i == null ? void 0 : i.large, u = i == null ? void 0 : i.medium, h = i == null ? void 0 : i.small, m = r.id;
-    if (!m)
+      ((u = a == null ? void 0 : a.meta) == null ? void 0 : u.breakpoints) || {}
+    ), c = i == null ? void 0 : i.large, d = i == null ? void 0 : i.medium, g = i == null ? void 0 : i.small, l = r.id;
+    if (!l)
       return "";
     const f = c ? createCssClass({
-      className: m,
+      className: l,
       styles: c
-    }) : "", g = u ? createCssClass({
-      className: m,
-      styles: u,
+    }) : "", p = d ? createCssClass({
+      className: l,
+      styles: d,
       mediaQuery: getMaxWidthQueryForSize(
         "medium",
         s
       )
-    }) : "", l = h ? createCssClass({
-      className: m,
-      styles: h,
+    }) : "", m = g ? createCssClass({
+      className: l,
+      styles: g,
       mediaQuery: getMaxWidthQueryForSize(
         "small",
         s
       )
     }) : "";
-    return [f, g, l].join(" ");
+    return [f, p, m].join(" ");
   };
   return /* @__PURE__ */ jsx(Fragment, { children: n() && t() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: n() }) }) : null });
 }
@@ -517,7 +577,8 @@ const getEventHandlerName = (e) => `on${capitalizeFirstLetter(e)}`, createEventH
   rootState: t.rootState,
   rootSetState: t.rootSetState,
   event: n,
-  isExpression: !1
+  isExpression: !1,
+  enableCache: !0
 });
 function getBlockActions(e) {
   const t = {}, n = e.block.actions ?? {};
@@ -539,32 +600,6 @@ function getBlockActions(e) {
   }
   return t;
 }
-function transformStyleProperty({
-  style: e
-}) {
-  return e;
-}
-const getStyle = ({
-  block: e,
-  context: t
-}) => mapStyleObjToStrIfNeeded(transformStyleProperty({
-  style: e.style || {},
-  context: t,
-  block: e
-}));
-function mapStyleObjToStrIfNeeded(e) {
-  switch (TARGET) {
-    case "svelte":
-    case "vue":
-    case "solid":
-      return convertStyleMapToCSSArray(e).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-    case "rsc":
-      return e;
-  }
-}
 function transformBlockProperties({
   properties: e
 }) {
@@ -666,7 +701,7 @@ function RepeatedBlock(e) {
   );
 }
 function Block(e) {
-  var u, h, m;
+  var c, d, g;
   const t = function() {
     return getComponent({
       block: e.block,
@@ -679,8 +714,8 @@ function Block(e) {
       context: e.context
     });
   }, o = function() {
-    var g;
-    return (g = e.block.repeat) != null && g.collection ? e.block : getProcessedBlock({
+    var f;
+    return (f = e.block.repeat) != null && f.collection ? e.block : getProcessedBlock({
       block: e.block,
       localState: e.context.localState,
       rootState: e.context.rootState,
@@ -689,43 +724,43 @@ function Block(e) {
       shouldEvaluateBindings: !0
     });
   }, r = function() {
-    var l;
-    return e.block.tagName === "a" || ((l = o().properties) == null ? void 0 : l.href) || o().href ? e.linkComponent || "a" : e.block.tagName || "div";
+    var p;
+    return e.block.tagName === "a" || ((p = o().properties) == null ? void 0 : p.href) || o().href ? e.linkComponent || "a" : e.block.tagName || "div";
   }, i = function() {
-    var d, b;
-    if ((d = e.block.repeat) != null && d.collection)
-      return !!((b = n()) != null && b.length);
-    const g = "hide" in o() ? o().hide : !1;
-    return ("show" in o() ? o().show : !0) && !g;
+    var m, u;
+    if ((m = e.block.repeat) != null && m.collection)
+      return !!((u = n()) != null && u.length);
+    const f = "hide" in o() ? o().hide : !1;
+    return ("show" in o() ? o().show : !0) && !f;
   }, a = function() {
-    var l;
-    return !((l = t()) != null && l.component) && !n() ? o().children ?? [] : [];
+    var p;
+    return !((p = t()) != null && p.component) && !n() ? o().children ?? [] : [];
   }, s = function() {
-    var g, l, d, b, p, S, k, y, C, x;
+    var f, p, m, u, y, h, S, k, b, C;
     return {
       blockChildren: o().children ?? [],
-      componentRef: (g = t()) == null ? void 0 : g.component,
+      componentRef: (f = t()) == null ? void 0 : f.component,
       componentOptions: {
         ...getBlockComponentOptions(o()),
         builderContext: e.context,
-        ...((l = t()) == null ? void 0 : l.name) === "Core:Button" || ((d = t()) == null ? void 0 : d.name) === "Symbol" || ((b = t()) == null ? void 0 : b.name) === "Columns" || ((p = t()) == null ? void 0 : p.name) === "Form:Form" ? {
+        ...((p = t()) == null ? void 0 : p.name) === "Core:Button" || ((m = t()) == null ? void 0 : m.name) === "Symbol" || ((u = t()) == null ? void 0 : u.name) === "Columns" || ((y = t()) == null ? void 0 : y.name) === "Form:Form" ? {
           builderLinkComponent: e.linkComponent
         } : {},
-        ...((S = t()) == null ? void 0 : S.name) === "Symbol" || ((k = t()) == null ? void 0 : k.name) === "Columns" || ((y = t()) == null ? void 0 : y.name) === "Form:Form" ? {
+        ...((h = t()) == null ? void 0 : h.name) === "Symbol" || ((S = t()) == null ? void 0 : S.name) === "Columns" || ((k = t()) == null ? void 0 : k.name) === "Form:Form" ? {
           builderComponents: e.registeredComponents
         } : {}
       },
-      context: c,
+      context: e.context,
       linkComponent: e.linkComponent,
       registeredComponents: e.registeredComponents,
       builderBlock: o(),
-      includeBlockProps: ((C = t()) == null ? void 0 : C.noWrap) === !0,
-      isInteractive: !((x = t()) != null && x.isRSC)
+      includeBlockProps: ((b = t()) == null ? void 0 : b.noWrap) === !0,
+      isInteractive: !((C = t()) != null && C.isRSC)
     };
-  }, c = e.context;
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: i() ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(BlockStyles, { block: e.block, context: e.context }),
-    (u = t()) != null && u.noWrap ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    (c = t()) != null && c.noWrap ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       ComponentRef,
       {
         componentRef: s().componentRef,
@@ -738,16 +773,16 @@ function Block(e) {
         includeBlockProps: s().includeBlockProps,
         isInteractive: s().isInteractive
       }
-    ) }) : /* @__PURE__ */ jsx(Fragment, { children: n() ? /* @__PURE__ */ jsx(Fragment, { children: (m = n()) == null ? void 0 : m.map((f, g) => /* @__PURE__ */ jsx(
+    ) }) : /* @__PURE__ */ jsx(Fragment, { children: n() ? /* @__PURE__ */ jsx(Fragment, { children: (g = n()) == null ? void 0 : g.map((l, f) => /* @__PURE__ */ jsx(
       RepeatedBlock,
       {
-        repeatContext: f.context,
-        block: f.block,
+        repeatContext: l.context,
+        block: l.block,
         registeredComponents: e.registeredComponents,
         linkComponent: e.linkComponent
       },
-      g
-    )) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      f
+    )) }) : /* @__PURE__ */ jsxs(
       BlockWrapper,
       {
         Wrapper: r(),
@@ -769,19 +804,19 @@ function Block(e) {
               isInteractive: s().isInteractive
             }
           ),
-          (h = a()) == null ? void 0 : h.map((f) => /* @__PURE__ */ jsx(
+          (d = a()) == null ? void 0 : d.map((l) => /* @__PURE__ */ jsx(
             Block,
             {
-              block: f,
-              context: c,
+              block: l,
               registeredComponents: e.registeredComponents,
-              linkComponent: e.linkComponent
+              linkComponent: e.linkComponent,
+              context: e.context
             },
-            f.id
+            l.id
           ))
         ]
       }
-    ) }) })
+    ) })
   ] }) : null });
 }
 function Blocks(e) {
@@ -809,24 +844,24 @@ function Blocks(e) {
   );
 }
 function Columns(e) {
-  var g;
-  const t = typeof e.space == "number" ? e.space || 0 : 20, n = e.columns || [], o = e.stackColumnsAt || "tablet", r = function(d) {
-    var b;
-    return ((b = n[d]) == null ? void 0 : b.width) || 100 / n.length;
-  }, i = function(d) {
-    const b = t * (n.length - 1) / n.length;
-    return `calc(${r(d)}% - ${b}px)`;
+  var p;
+  const t = typeof e.space == "number" ? e.space || 0 : 20, n = e.columns || [], o = e.stackColumnsAt || "tablet", r = function(u) {
+    var y;
+    return ((y = n[u]) == null ? void 0 : y.width) || 100 / n.length;
+  }, i = function(u) {
+    const y = t * (n.length - 1) / n.length;
+    return `calc(${r(u)}% - ${y}px)`;
   }, a = function({
-    stackedStyle: d,
-    desktopStyle: b
+    stackedStyle: u,
+    desktopStyle: y
   }) {
-    return o === "tablet" ? d : b;
+    return o === "tablet" ? u : y;
   }, s = function({
-    stackedStyle: d,
-    desktopStyle: b
+    stackedStyle: u,
+    desktopStyle: y
   }) {
-    return o === "never" ? b : d;
-  }, c = e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column", u = function() {
+    return o === "never" ? y : u;
+  }, c = e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column", d = function() {
     return {
       "--flex-dir": c,
       "--flex-dir-tablet": a({
@@ -834,41 +869,41 @@ function Columns(e) {
         desktopStyle: "row"
       })
     };
-  }, h = function(d) {
-    const b = d === 0 ? 0 : t, p = i(d), S = `${b}px`, k = "100%", y = 0;
+  }, g = function(u) {
+    const y = u === 0 ? 0 : t, h = i(u), S = `${y}px`, k = "100%", b = 0;
     return {
       ...{
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch"
       },
-      width: p,
+      width: h,
       ["marginLeft"]: S,
       "--column-width-mobile": s({
         stackedStyle: k,
-        desktopStyle: p
+        desktopStyle: h
       }),
       "--column-margin-left-mobile": s({
-        stackedStyle: y,
+        stackedStyle: b,
         desktopStyle: S
       }),
       "--column-width-tablet": a({
         stackedStyle: k,
-        desktopStyle: p
+        desktopStyle: h
       }),
       "--column-margin-left-tablet": a({
-        stackedStyle: y,
+        stackedStyle: b,
         desktopStyle: S
       })
     };
-  }, m = function(d) {
-    var p, S;
+  }, l = function(u) {
+    var h, S;
     return getSizesForBreakpoints(
-      ((S = (p = e.builderContext.content) == null ? void 0 : p.meta) == null ? void 0 : S.breakpoints) || {}
-    )[d].max;
+      ((S = (h = e.builderContext.content) == null ? void 0 : h.meta) == null ? void 0 : S.breakpoints) || {}
+    )[u].max;
   }, f = function() {
     return `
-        @media (max-width: ${m("medium")}px) {
+        @media (max-width: ${l("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -880,7 +915,7 @@ function Columns(e) {
           }
         }
 
-        @media (max-width: ${m("small")}px) {
+        @media (max-width: ${l("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -897,26 +932,26 @@ function Columns(e) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `builder-columns ${e.builderBlock.id}-breakpoints div-1f78b21c`,
-        style: u(),
+        className: `builder-columns ${e.builderBlock.id}-breakpoints div-7e6263b2`,
+        style: d(),
         children: [
-          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedStyles, { styles: f() }) }),
-          (g = e.columns) == null ? void 0 : g.map((l, d) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(InlinedStyles, { styles: f() }),
+          (p = e.columns) == null ? void 0 : p.map((m, u) => /* @__PURE__ */ jsx(
             DynamicRenderer,
             {
-              TagName: l.link ? e.builderLinkComponent || "a" : "div",
+              TagName: m.link ? e.builderLinkComponent || "a" : "div",
               actionAttributes: {},
               attributes: {
-                ...l.link ? {
-                  href: l.link
+                ...m.link ? {
+                  href: m.link
                 } : {},
                 [getClassPropName()]: "builder-column",
-                style: mapStyleObjToStrIfNeeded(h(d))
+                style: mapStyleObjToStrIfNeeded(g(u))
               },
               children: /* @__PURE__ */ jsx(
                 Blocks,
                 {
-                  path: `component.options.columns.${d}.blocks`,
+                  path: `component.options.columns.${u}.blocks`,
                   parent: e.builderBlock.id,
                   styleProp: {
                     flexGrow: "1"
@@ -924,16 +959,16 @@ function Columns(e) {
                   context: e.builderContext,
                   registeredComponents: e.builderComponents,
                   linkComponent: e.builderLinkComponent,
-                  blocks: l.blocks
+                  blocks: m.blocks
                 }
               )
             },
-            d
+            u
           ))
         ]
       }
     ),
-    /* @__PURE__ */ jsx("style", { children: `.div-1f78b21c {
+    /* @__PURE__ */ jsx("style", { children: `.div-7e6263b2 {
   display: flex;
   line-height: normal;
 }` })
@@ -1365,15 +1400,15 @@ const getTopLevelDomain = (e) => {
     onChange: (e) => {
       e.delete("srcset"), e.delete("noWebp");
       function n(a, s = 6e4) {
-        return new Promise((c, u) => {
-          const h = document.createElement("img");
-          let m = !1;
-          h.onload = () => {
-            m = !0, c(h);
-          }, h.addEventListener("error", (f) => {
-            console.warn("Image load failed", f.error), u(f.error);
-          }), h.src = a, setTimeout(() => {
-            m || u(new Error("Image load timed out"));
+        return new Promise((c, d) => {
+          const g = document.createElement("img");
+          let l = !1;
+          g.onload = () => {
+            l = !0, c(g);
+          }, g.addEventListener("error", (f) => {
+            console.warn("Image load failed", f.error), d(f.error);
+          }), g.src = a, setTimeout(() => {
+            l || d(new Error("Image load timed out"));
           }, s);
         });
       }
@@ -1960,40 +1995,40 @@ const DEFAULT_API_VERSION = "v3", BUILDER_SEARCHPARAMS_PREFIX = "builder.", BUIL
     enrich: a,
     locale: s,
     apiVersion: c = DEFAULT_API_VERSION,
-    fields: u,
-    omit: h,
-    offset: m,
+    fields: d,
+    omit: g,
+    offset: l,
     cacheSeconds: f,
-    staleCacheSeconds: g,
-    sort: l,
-    includeUnpublished: d
+    staleCacheSeconds: p,
+    sort: m,
+    includeUnpublished: u
   } = e;
   if (!i)
     throw new Error("Missing API key");
   if (!["v3"].includes(c))
     throw new Error(`Invalid apiVersion: expected 'v3', received '${c}'`);
-  const b = t !== 1, p = new URL(`https://cdn.builder.io/api/${c}/content/${r}`);
-  if (p.searchParams.set("apiKey", i), p.searchParams.set("limit", String(t)), p.searchParams.set("noTraverse", String(b)), p.searchParams.set("includeRefs", String(!0)), s && p.searchParams.set("locale", s), a && p.searchParams.set("enrich", String(a)), p.searchParams.set("omit", h || "meta.componentsUsed"), u && p.searchParams.set("fields", u), Number.isFinite(m) && m > -1 && p.searchParams.set("offset", String(Math.floor(m))), typeof d == "boolean" && p.searchParams.set("includeUnpublished", String(d)), f && isPositiveNumber(f) && p.searchParams.set("cacheSeconds", String(f)), g && isPositiveNumber(g) && p.searchParams.set("staleCacheSeconds", String(g)), l) {
-    const y = flatten({
-      sort: l
+  const y = t !== 1, h = new URL(`https://cdn.builder.io/api/${c}/content/${r}`);
+  if (h.searchParams.set("apiKey", i), h.searchParams.set("limit", String(t)), h.searchParams.set("noTraverse", String(y)), h.searchParams.set("includeRefs", String(!0)), s && h.searchParams.set("locale", s), a && h.searchParams.set("enrich", String(a)), h.searchParams.set("omit", g || "meta.componentsUsed"), d && h.searchParams.set("fields", d), Number.isFinite(l) && l > -1 && h.searchParams.set("offset", String(Math.floor(l))), typeof u == "boolean" && h.searchParams.set("includeUnpublished", String(u)), f && isPositiveNumber(f) && h.searchParams.set("cacheSeconds", String(f)), p && isPositiveNumber(p) && h.searchParams.set("staleCacheSeconds", String(p)), m) {
+    const b = flatten({
+      sort: m
     });
-    for (const C in y)
-      p.searchParams.set(C, JSON.stringify(y[C]));
+    for (const C in b)
+      h.searchParams.set(C, JSON.stringify(b[C]));
   }
   const S = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(e.options || {})
   }, k = flatten(S);
-  for (const y in k)
-    p.searchParams.set(y, String(k[y]));
-  if (n && p.searchParams.set("userAttributes", JSON.stringify(n)), o) {
-    const y = flatten({
+  for (const b in k)
+    h.searchParams.set(b, String(k[b]));
+  if (n && h.searchParams.set("userAttributes", JSON.stringify(n)), o) {
+    const b = flatten({
       query: o
     });
-    for (const C in y)
-      p.searchParams.set(C, JSON.stringify(y[C]));
+    for (const C in b)
+      h.searchParams.set(C, JSON.stringify(b[C]));
   }
-  return p;
+  return h;
 }, checkContentHasResults = (e) => "results" in e;
 async function fetchOneEntry(e) {
   const t = await fetchEntries({
@@ -2237,7 +2272,7 @@ function isFromTrustedHost(e, t) {
   const n = new URL(t.origin), o = n.hostname;
   return (e || DEFAULT_TRUSTED_HOSTS).findIndex((r) => r.startsWith("*.") ? o.endsWith(r.slice(1)) : r === o) > -1;
 }
-const SDK_VERSION = "0.14.6", registry = {};
+const SDK_VERSION = "0.14.8", registry = {};
 function register(e, t) {
   let n = registry[e];
   if (n || (n = registry[e] = []), n.push(t), isBrowser()) {
@@ -2307,33 +2342,33 @@ const setupBrowserForEditing = (e = {}) => {
     if (r != null && r.type)
       switch (r.type) {
         case "builder.evaluate": {
-          const s = r.data.text, c = r.data.arguments || [], u = r.data.id, h = new Function(s);
-          let m, f = null;
+          const s = r.data.text, c = r.data.arguments || [], d = r.data.id, g = new Function(s);
+          let l, f = null;
           try {
-            m = h.apply(null, c);
-          } catch (g) {
-            f = g;
+            l = g.apply(null, c);
+          } catch (p) {
+            f = p;
           }
           f ? (i = window.parent) == null || i.postMessage({
             type: "builder.evaluateError",
             data: {
-              id: u,
+              id: d,
               error: f.message
             }
-          }, "*") : m && typeof m.then == "function" ? m.then((g) => {
-            var l;
-            (l = window.parent) == null || l.postMessage({
+          }, "*") : l && typeof l.then == "function" ? l.then((p) => {
+            var m;
+            (m = window.parent) == null || m.postMessage({
               type: "builder.evaluateResult",
               data: {
-                id: u,
-                result: g
+                id: d,
+                result: p
               }
             }, "*");
           }).catch(console.error) : (a = window.parent) == null || a.postMessage({
             type: "builder.evaluateResult",
             data: {
-              result: m,
-              id: u
+              result: l,
+              id: d
             }
           }, "*");
           break;
@@ -2461,17 +2496,7 @@ font-weight: ${a};
 }, getCss = ({
   cssCode: e,
   contentId: t
-}) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "";
-function ContentStyles(e) {
-  const t = `
-${getCss({
-    cssCode: e.cssCode,
-    contentId: e.contentId
-  })}
-${getFontCss({
-    customFonts: e.customFonts
-  })}
-
+}) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "", DEFAULT_STYLES = `
 .builder-button {
   all: unset;
 }
@@ -2488,6 +2513,17 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
+`, getDefaultStyles = (e) => e ? "" : DEFAULT_STYLES;
+function ContentStyles(e) {
+  const t = `
+${getCss({
+    cssCode: e.cssCode,
+    contentId: e.contentId
+  })}
+${getFontCss({
+    customFonts: e.customFonts
+  })}
+${getDefaultStyles(e.isNestedRender)}
 `.trim();
   return /* @__PURE__ */ jsx(InlinedStyles, { styles: t });
 }
@@ -2520,7 +2556,7 @@ const getRootStateInitialValue = ({
   meta: e == null ? void 0 : e.meta
 } : void 0;
 function ContentComponent(e) {
-  var r, i, a, s, c, u, h, m, f;
+  var r, i, a, s, c, d, g, l, f;
   const t = getUpdateVariantVisibilityScript({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     variationId: (r = e.content) == null ? void 0 : r.testVariationId,
@@ -2530,11 +2566,11 @@ function ContentComponent(e) {
     ...getDefaultRegisteredComponents(),
     ...e.customComponents || []
   ].reduce(
-    (g, { component: l, ...d }) => ({
-      ...g,
-      [d.name]: {
-        component: l,
-        ...serializeComponentInfo(d)
+    (p, { component: m, ...u }) => ({
+      ...p,
+      [u.name]: {
+        component: m,
+        ...serializeComponentInfo(u)
       }
     }),
     {}
@@ -2557,9 +2593,9 @@ function ContentComponent(e) {
       ...getDefaultRegisteredComponents(),
       ...e.customComponents || []
     ].reduce(
-      (g, { component: l, ...d }) => ({
-        ...g,
-        [d.name]: serializeComponentInfo(d)
+      (p, { component: m, ...u }) => ({
+        ...p,
+        [u.name]: serializeComponentInfo(u)
       }),
       {}
     ),
@@ -2585,19 +2621,20 @@ function ContentComponent(e) {
       linkComponent: e.linkComponent,
       trustedHosts: e.trustedHosts,
       children: [
-        e.isSsrAbTest ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedScript, { scriptStr: t }) }) : null,
-        /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        e.isSsrAbTest ? /* @__PURE__ */ jsx(InlinedScript, { scriptStr: t }) : null,
+        /* @__PURE__ */ jsx(
           ContentStyles,
           {
+            isNestedRender: e.isNestedRender,
             contentId: (a = o.content) == null ? void 0 : a.id,
             cssCode: (c = (s = o.content) == null ? void 0 : s.data) == null ? void 0 : c.cssCode,
-            customFonts: (h = (u = o.content) == null ? void 0 : u.data) == null ? void 0 : h.customFonts
+            customFonts: (g = (d = o.content) == null ? void 0 : d.data) == null ? void 0 : g.customFonts
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           Blocks,
           {
-            blocks: (f = (m = o.content) == null ? void 0 : m.data) == null ? void 0 : f.blocks,
+            blocks: (f = (l = o.content) == null ? void 0 : l.data) == null ? void 0 : f.blocks,
             context: o,
             registeredComponents: n,
             linkComponent: e.linkComponent
@@ -2615,9 +2652,9 @@ function ContentVariants(e) {
   }), n = function() {
     var c;
     return getUpdateCookieAndStylesScript(
-      getVariants(e.content).map((u) => ({
-        id: u.testVariationId,
-        testRatio: u.testRatio
+      getVariants(e.content).map((d) => ({
+        id: d.testVariationId,
+        testRatio: d.testRatio
       })),
       ((c = e.content) == null ? void 0 : c.id) || ""
     );
@@ -2634,7 +2671,7 @@ function ContentVariants(e) {
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !e.__isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InlinedScript, { scriptStr: getScriptString() }) }) : null,
+    !e.isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ jsx(InlinedScript, { scriptStr: getScriptString() }) : null,
     t ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         InlinedStyles,
@@ -2647,6 +2684,7 @@ function ContentVariants(e) {
       (a = getVariants(e.content)) == null ? void 0 : a.map((s) => /* @__PURE__ */ jsx(
         ContentComponent,
         {
+          isNestedRender: e.isNestedRender,
           content: s,
           showContent: !1,
           model: e.model,
@@ -2672,6 +2710,7 @@ function ContentVariants(e) {
     /* @__PURE__ */ jsx(
       ContentComponent,
       {
+        isNestedRender: e.isNestedRender,
         content: r(),
         showContent: !0,
         model: e.model,
@@ -2716,12 +2755,12 @@ const fetchSymbolContent = async ({
 async function Symbol$1(e) {
   var o, r, i, a, s;
   const t = function() {
-    var u, h;
+    var d, g;
     return [
       e.attributes[getClassPropName()],
       "builder-symbol",
-      (u = e.symbol) != null && u.inline ? "builder-inline-symbol" : void 0,
-      (h = e.symbol) != null && h.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
+      (d = e.symbol) != null && d.inline ? "builder-inline-symbol" : void 0,
+      (g = e.symbol) != null && g.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }, n = ((o = e.symbol) == null ? void 0 : o.content) || await fetchSymbolContent({
     symbol: e.symbol,
@@ -2730,7 +2769,7 @@ async function Symbol$1(e) {
   return /* @__PURE__ */ jsx("div", { ...e.attributes, className: t(), children: /* @__PURE__ */ jsx(
     ContentVariants,
     {
-      __isNestedRender: !0,
+      isNestedRender: !0,
       apiVersion: e.builderContext.apiVersion,
       apiKey: e.builderContext.apiKey,
       context: {