@builder.io/sdk-vue 0.2.2 → 0.3.1

package/packages/_vue2/dist/{index.eb91dc82.js → index.36f3710d.js}

@@ -1,4 +1,5 @@
-const X = {
+import { defineComponent as f } from "vue";
+const Y = f({
   name: "builder-button",
   props: ["attributes", "text", "link", "openLinkInNewTab"],
   methods: {
@@ -27,50 +28,50 @@ const X = {
       return e;
     }
   }
-};
-function h(t, e, n, o, s, r, i, l) {
+});
+function h(t, e, n, o, s, r, i, c) {
   var a = typeof t == "function" ? t.options : t;
   e && (a.render = e, a.staticRenderFns = n, a._compiled = !0), o && (a.functional = !0), r && (a._scopeId = "data-v-" + r);
-  var c;
-  if (i ? (c = function(u) {
+  var l;
+  if (i ? (l = function(u) {
     u = u || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !u && typeof __VUE_SSR_CONTEXT__ < "u" && (u = __VUE_SSR_CONTEXT__), s && s.call(this, u), u && u._registeredComponents && u._registeredComponents.add(i);
-  }, a._ssrRegister = c) : s && (c = l ? function() {
+  }, a._ssrRegister = l) : s && (l = c ? function() {
     s.call(
       this,
       (a.functional ? this.parent : this).$root.$options.shadowRoot
     );
-  } : s), c)
+  } : s), l)
     if (a.functional) {
-      a._injectStyles = c;
+      a._injectStyles = l;
       var d = a.render;
-      a.render = function(f, v) {
-        return c.call(v), d(f, v);
+      a.render = function(g, _) {
+        return l.call(_), d(g, _);
       };
     } else {
       var m = a.beforeCreate;
-      a.beforeCreate = m ? [].concat(m, c) : [c];
+      a.beforeCreate = m ? [].concat(m, l) : [l];
     }
   return {
     exports: t,
     options: a
   };
 }
-var Y = function() {
+var Q = function() {
   var e = this, n = e._self._c;
-  return e.link ? n("a", e._g(e._b({ attrs: { role: "button", href: e.link, target: e.openLinkInNewTab ? "_blank" : void 0 } }, "a", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._v(" " + e._s(e.text) + " ")]) : n("button", e._g(e._b({ class: e._classStringToObject(
+  return e._self._setupProxy, e.link ? n("a", e._g(e._b({ attrs: { role: "button", href: e.link, target: e.openLinkInNewTab ? "_blank" : void 0 } }, "a", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._v(" " + e._s(e.text) + " ")]) : n("button", e._g(e._b({ class: e._classStringToObject(
     e.attributes.class + " button-2fnk003dqad"
   ) }, "button", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._v(" " + e._s(e.text) + " ")]);
-}, Q = [], Z = /* @__PURE__ */ h(
-  X,
+}, Z = [], ee = /* @__PURE__ */ h(
   Y,
   Q,
+  Z,
   !1,
   null,
-  "a8305dd0",
+  "5f197ca9",
   null,
   null
 );
-const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
+const te = ee.exports, T = (t) => JSON.parse(JSON.stringify(t)), B = {
   small: {
     min: 320,
     default: 321,
@@ -86,8 +87,8 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
     default: 991,
     max: 1200
   }
-}, Rn = (t, e = U) => `@media (max-width: ${e[t].max}px)`, te = ({ small: t, medium: e }) => {
-  const n = R(U);
+}, Pn = (t, e = B) => `@media (max-width: ${e[t].max}px)`, ne = ({ small: t, medium: e }) => {
+  const n = T(B);
   if (!t || !e)
     return n;
   const o = Math.floor(t / 2);
@@ -108,34 +109,35 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
     min: r,
     default: r + 1
   }, n;
-}, _ = "vue2", ne = Symbol(), x = {
+}, x = "vue2", oe = Symbol(), k = {
   Builder: {
     content: null,
     context: {},
-    state: {},
-    setState() {
+    localState: void 0,
+    rootSetState() {
     },
+    rootState: {},
     apiKey: null,
     apiVersion: void 0,
     registeredComponents: {},
     inheritedStyles: {}
   },
-  key: ne
-}, oe = () => Promise.resolve().then(() => B).then((t) => t.default).catch((t) => {
+  key: oe
+}, se = () => Promise.resolve().then(() => W).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
     t
   ), t;
-}), se = () => import("./render-inlined-styles.942eb38d.js").then((t) => t.default).catch((t) => {
+}), re = () => import("./render-inlined-styles.04d09a3c.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderInlinedStyles at ../../components/render-inlined-styles.vue",
     t
   ), t;
-}), re = {
+}), ie = f({
   name: "builder-columns",
   components: {
-    RenderInlinedStyles: se,
-    RenderBlocks: oe
+    RenderInlinedStyles: re,
+    RenderBlocks: se
   },
   props: [
     "space",
@@ -150,11 +152,11 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
       cols: this.columns || [],
       stackAt: this.stackColumnsAt || "tablet",
       flexDir: this.stackColumnsAt === "never" ? "row" : this.reverseColumnsWhenStacked ? "column-reverse" : "column",
-      TARGET: _
+      TARGET: x
     };
   },
   inject: {
-    builderContext: x.key
+    builderContext: k.key
   },
   computed: {
     columnsCssVars() {
@@ -168,30 +170,30 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
     },
     columnsStyles() {
       return `
-      @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
-        .${this.builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
-        }
+        @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
 
-        .${this.builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
-      }
 
-      @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
-        .${this.builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
+        @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
 
-        .${this.builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
     }
   },
   methods: {
@@ -216,32 +218,31 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
       return this.stackAt === "never" ? e : t;
     },
     columnCssVars(t) {
-      t === 0 || this.gutterSize;
-      const e = this.getColumnCssWidth(t), n = `${this.gutterSize}px`, o = "100%", s = 0;
+      const e = t === 0 ? 0 : this.gutterSize, n = this.getColumnCssWidth(t), o = `${e}px`, s = "100%", r = 0;
       return {
-        width: e,
-        "margin-left": n,
+        width: n,
+        "margin-left": o,
         "--column-width-mobile": this.getMobileStyle({
-          stackedStyle: o,
-          desktopStyle: e
-        }),
-        "--column-margin-left-mobile": this.getMobileStyle({
           stackedStyle: s,
           desktopStyle: n
         }),
-        "--column-width-tablet": this.getTabletStyle({
-          stackedStyle: o,
-          desktopStyle: e
+        "--column-margin-left-mobile": this.getMobileStyle({
+          stackedStyle: r,
+          desktopStyle: o
         }),
-        "--column-margin-left-tablet": this.getTabletStyle({
+        "--column-width-tablet": this.getTabletStyle({
           stackedStyle: s,
           desktopStyle: n
+        }),
+        "--column-margin-left-tablet": this.getTabletStyle({
+          stackedStyle: r,
+          desktopStyle: o
         })
       };
     },
     getWidthForBreakpointSize(t) {
       var n, o;
-      return te(
+      return ne(
         ((o = (n = this.builderContext.content) == null ? void 0 : n.meta) == null ? void 0 : o.breakpoints) || {}
       )[t].max;
     },
@@ -255,10 +256,10 @@ const ee = Z.exports, R = (t) => JSON.parse(JSON.stringify(t)), U = {
       return e;
     }
   }
-};
-var ie = function() {
+});
+var ae = function() {
   var e = this, n = e._self._c;
-  return n("div", { class: e._classStringToObject(
+  return e._self._setupProxy, n("div", { class: e._classStringToObject(
     `builder-columns ${e.builderBlock.id}-breakpoints div-t9spj7joih`
   ), style: e.columnsCssVars, attrs: { dataSet: {
     "builder-block-name": "builder-columns"
@@ -269,67 +270,67 @@ var ie = function() {
       flexGrow: "1"
     } } })], 1);
   })], 2);
-}, ae = [], le = /* @__PURE__ */ h(
-  re,
+}, le = [], ce = /* @__PURE__ */ h(
   ie,
   ae,
+  le,
   !1,
   null,
-  "2bb878ea",
+  "1cba7386",
   null,
   null
 );
-const ce = le.exports, de = {
+const de = ce.exports, ue = f({
   name: "builder-fragment-component",
   props: []
-};
-var ue = function() {
+});
+var pe = function() {
   var e = this, n = e._self._c;
-  return n("span", [e._t("default")], 2);
-}, pe = [], me = /* @__PURE__ */ h(
-  de,
+  return e._self._setupProxy, n("span", [e._t("default")], 2);
+}, me = [], fe = /* @__PURE__ */ h(
   ue,
   pe,
+  me,
   !1,
   null,
   null,
   null,
   null
 );
-const he = me.exports;
-function T(t) {
+const he = fe.exports;
+function $(t) {
   return t.replace(/http(s)?:/, "");
 }
-function fe(t = "", e, n) {
+function ge(t = "", e, n) {
   const o = new RegExp("([?&])" + e + "=.*?(&|$)", "i"), s = t.indexOf("?") !== -1 ? "&" : "?";
   return t.match(o) ? t.replace(o, "$1" + e + "=" + encodeURIComponent(n) + "$2") : t + s + e + "=" + encodeURIComponent(n);
 }
-function ge(t, e) {
+function be(t, e) {
   if (!t || !(t != null && t.match(/cdn\.shopify\.com/)) || !e)
     return t;
   if (e === "master")
-    return T(t);
+    return $(t);
   const n = t.match(
     /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
   );
   if (n) {
     const o = t.split(n[0]), s = n[3], r = e.match("x") ? e : `${e}x`;
-    return T(`${o[0]}_${r}${s}`);
+    return $(`${o[0]}_${r}${s}`);
   }
   return null;
 }
-function S(t) {
+function w(t) {
   if (!t)
     return t;
   const e = [100, 200, 400, 800, 1200, 1600, 2e3];
   if (t.match(/builder\.io/)) {
     let n = t;
     const o = Number(t.split("?width=")[1]);
-    return isNaN(o) || (n = `${n} ${o}w`), e.filter((s) => s !== o).map((s) => `${fe(t, "width", s)} ${s}w`).concat([n]).join(", ");
+    return isNaN(o) || (n = `${n} ${o}w`), e.filter((s) => s !== o).map((s) => `${ge(t, "width", s)} ${s}w`).concat([n]).join(", ");
   }
-  return t.match(/cdn\.shopify\.com/) ? e.map((n) => [ge(t, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([t]).join(", ") : t;
+  return t.match(/cdn\.shopify\.com/) ? e.map((n) => [be(t, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([t]).join(", ") : t;
 }
-const be = {
+const ye = f({
   name: "builder-image",
   props: [
     "image",
@@ -353,10 +354,10 @@ const be = {
         return this.srcset;
       if (this.srcset && ((n = this.image) == null ? void 0 : n.includes("builder.io/api/v1/image"))) {
         if (!this.srcset.includes(this.image.split("?")[0]))
-          return console.debug("Removed given srcset"), S(e);
+          return console.debug("Removed given srcset"), w(e);
       } else if (this.image && !this.srcset)
-        return S(e);
-      return S(e);
+        return w(e);
+      return w(e);
     },
     webpSrcSet() {
       var t;
@@ -384,11 +385,11 @@ const be = {
       return e;
     }
   }
-};
-var ye = function() {
+});
+var ve = function() {
   var o, s, r, i;
   var e = this, n = e._self._c;
-  return n("div", [n("picture", [e.webpSrcSet ? [n("source", { attrs: { type: "image/webp", srcset: e.webpSrcSet } })] : e._e(), n("img", { class: e._classStringToObject(
+  return e._self._setupProxy, n("div", [n("picture", [e.webpSrcSet ? [n("source", { attrs: { type: "image/webp", srcset: e.webpSrcSet } })] : e._e(), n("img", { class: e._classStringToObject(
     "builder-image" + (e.className ? " " + e.className : "") + " img-1pl23ac79ld"
   ), style: {
     objectPosition: e.backgroundPosition || "center",
@@ -397,42 +398,42 @@ var ye = function() {
   }, attrs: { loading: "lazy", alt: e.altText, role: e.altText ? "presentation" : void 0, src: e.image, srcset: e.srcSetToUse, sizes: e.sizes } })], 2), e.aspectRatio && !(((s = (o = e.builderBlock) == null ? void 0 : o.children) == null ? void 0 : s.length) && e.fitContent) ? [n("div", { staticClass: "builder-image-sizer div-1pl23ac79ld", style: {
     paddingTop: e.aspectRatio * 100 + "%"
   } })] : e._e(), ((i = (r = e.builderBlock) == null ? void 0 : r.children) == null ? void 0 : i.length) && e.fitContent ? [e._t("default")] : e._e(), !e.fitContent && e.children ? [n("div", { staticClass: "div-1pl23ac79ld-2" }, [e._t("default")], 2)] : e._e()], 2);
-}, ve = [], _e = /* @__PURE__ */ h(
-  be,
+}, _e = [], xe = /* @__PURE__ */ h(
   ye,
   ve,
+  _e,
   !1,
   null,
-  "b5206874",
+  "0d553173",
   null,
   null
 );
-const xe = _e.exports;
+const ke = xe.exports;
 function p() {
   return typeof window < "u" && typeof document < "u";
 }
-function ke() {
+function Se() {
   return p() && window.self !== window.top;
 }
-function g() {
-  return ke() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+function b() {
+  return Se() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
-const Se = () => import("./block-styles.4667431d.js").then((t) => t.default).catch((t) => {
+const we = () => import("./block-styles.b09f50da.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
     t
   ), t;
-}), we = () => import("./render-block.6f9a607a.js").then((t) => t.default).catch((t) => {
+}), Ce = () => import("./render-block.c14ab4be.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
     t
   ), t;
-}), Ce = {
+}), Ie = f({
   name: "render-blocks",
-  components: { RenderBlock: we, BlockStyles: Se },
+  components: { RenderBlock: Ce, BlockStyles: we },
   props: ["blocks", "parent", "path", "styleProp"],
   inject: {
-    builderContext: x.key
+    builderContext: k.key
   },
   computed: {
     className() {
@@ -443,7 +444,7 @@ const Se = () => import("./block-styles.4667431d.js").then((t) => t.default).cat
   methods: {
     onClick() {
       var t, e;
-      g() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
+      b() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
         {
           type: "builder.clickEmptyBlocks",
           data: {
@@ -456,7 +457,7 @@ const Se = () => import("./block-styles.4667431d.js").then((t) => t.default).cat
     },
     onMouseEnter() {
       var t, e;
-      g() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
+      b() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
         {
           type: "builder.hoverEmptyBlocks",
           data: {
@@ -477,10 +478,10 @@ const Se = () => import("./block-styles.4667431d.js").then((t) => t.default).cat
       return e;
     }
   }
-};
-var Ie = function() {
+});
+var Re = function() {
   var e = this, n = e._self._c;
-  return n("div", { class: e._classStringToObject(e.className + " div-21azgz5avex"), style: e.styleProp, attrs: { "builder-path": e.path, "builder-parent-id": e.parent, dataSet: {
+  return e._self._setupProxy, n("div", { class: e._classStringToObject(e.className + " div-21azgz5avex"), style: e.styleProp, attrs: { "builder-path": e.path, "builder-parent-id": e.parent, dataSet: {
     class: e.className
   } }, on: { click: function(o) {
     return e.onClick();
@@ -491,20 +492,20 @@ var Ie = function() {
   }) : e._e(), e.blocks ? e._l(e.blocks, function(o, s) {
     return n("block-styles", { key: "block-style-" + o.id, attrs: { block: o, context: e.builderContext } });
   }) : e._e()], 2);
-}, Re = [], Te = /* @__PURE__ */ h(
-  Ce,
+}, Te = [], $e = /* @__PURE__ */ h(
   Ie,
   Re,
+  Te,
   !1,
   null,
-  "57df98d3",
+  "e4c3b2b6",
   null,
   null
 );
-const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ee = $e.exports, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: $e
-}, Symbol.toStringTag, { value: "Module" })), Ee = {
+  default: Ee
+}, Symbol.toStringTag, { value: "Module" })), Pe = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -540,7 +541,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   ],
   static: !0,
   noWrap: !0
-}, k = (t) => {
+}, S = (t) => {
   const e = t.toString().trim();
   return `return (${!e.startsWith("function") && !e.startsWith("(") ? "function " : ""}${e}).apply(this, arguments)`;
 }, Ae = {
@@ -730,7 +731,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
           ]
         }
       ],
-      onChange: k((t) => {
+      onChange: S((t) => {
         function e() {
           n.forEach((o) => {
             o.delete("width");
@@ -741,7 +742,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
           (s) => s.get("width")
         ) && (!!n.find(
           (r) => !r.get("width")
-        ) || n.reduce((l, a) => l + a.get("width"), 0) !== 100) && e();
+        ) || n.reduce((c, a) => c + a.get("width"), 0) !== 100) && e();
       })
     },
     {
@@ -773,7 +774,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   hidden: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, Pe = {
+}, je = {
   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",
@@ -792,20 +793,20 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: !0,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
-      onChange: k(
+      onChange: S(
         (t) => {
           t.delete("srcset"), t.delete("noWebp");
-          function n(i, l = 6e4) {
-            return new Promise((a, c) => {
+          function n(i, c = 6e4) {
+            return new Promise((a, l) => {
               const d = document.createElement("img");
               let m = !1;
               d.onload = () => {
                 m = !0, a(d);
               }, d.addEventListener("error", (u) => {
-                console.warn("Image load failed", u.error), c(u.error);
+                console.warn("Image load failed", u.error), l(u.error);
               }), d.src = i, setTimeout(() => {
-                m || c(new Error("Image load timed out"));
-              }, l);
+                m || l(new Error("Image load timed out"));
+              }, c);
             });
           }
           function o(i) {
@@ -816,8 +817,8 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
             i.type.includes("svg") && t.set("noWebp", !0);
           }), s && (!r || r === 0.7041))
             return n(s).then((i) => {
-              const l = t.get("aspectRatio");
-              t.get("image") === s && (!l || l === 0.7041) && i.width && i.height && (t.set("aspectRatio", o(i.height / i.width)), t.set("height", i.height), t.set("width", i.width));
+              const c = t.get("aspectRatio");
+              t.get("image") === s && (!c || c === 0.7041) && i.width && i.height && (t.set("aspectRatio", o(i.height / i.width)), t.set("height", i.height), t.set("width", i.width));
             });
         }
       )
@@ -900,7 +901,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       defaultValue: 0.7041
     }
   ]
-}, je = {
+}, Ve = {
   name: "Core:Section",
   static: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -944,7 +945,7 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       }
     }
   ]
-}, Ve = {
+}, Oe = f({
   name: "builder-section-component",
   props: ["maxWidth", "attributes"],
   methods: {
@@ -964,10 +965,10 @@ const $e = Te.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       );
     }
   }
-};
-var Oe = function() {
+});
+var Ue = function() {
   var e = this, n = e._self._c;
-  return n("section", e._g(e._b({ style: {
+  return e._self._setupProxy, n("section", e._g(e._b({ style: {
     width: "100%",
     alignSelf: "stretch",
     flexGrow: 1,
@@ -979,17 +980,17 @@ var Oe = function() {
     marginLeft: "auto",
     marginRight: "auto"
   } }, "section", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._t("default")], 2);
-}, Ue = [], Be = /* @__PURE__ */ h(
-  Ve,
+}, Be = [], We = /* @__PURE__ */ h(
   Oe,
   Ue,
+  Be,
   !1,
   null,
   null,
   null,
   null
 );
-const We = Be.exports, Me = {
+const Me = We.exports, Ne = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -1027,16 +1028,16 @@ const We = Be.exports, Me = {
       type: "boolean"
     }
   ]
-}, w = "[Builder.io]: ", b = {
-  log: (...t) => console.log(w, ...t),
-  error: (...t) => console.error(w, ...t),
-  warn: (...t) => console.warn(w, ...t)
+}, C = "[Builder.io]: ", y = {
+  log: (...t) => console.log(C, ...t),
+  error: (...t) => console.error(C, ...t),
+  warn: (...t) => console.warn(C, ...t)
 };
-function Ne() {
+function Le() {
   return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
 }
-function Le() {
-  const t = Ne().fetch;
+function Ke() {
+  const t = Le().fetch;
   if (typeof t > "u")
     throw console.warn(
       `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
@@ -1044,12 +1045,12 @@ function Le() {
     ), new Error("Builder SDK could not find a global `fetch` function");
   return t;
 }
-const W = Le(), y = (t) => t != null, ze = (t) => {
+const M = Ke(), v = (t) => t != null, ze = (t) => {
   if (t === "localhost" || t === "127.0.0.1")
     return t;
   const e = t.split(".");
   return e.length > 2 ? e.slice(1).join(".") : t;
-}, M = async ({
+}, N = async ({
   name: t,
   canTrack: e
 }) => {
@@ -1060,10 +1061,10 @@ const W = Le(), y = (t) => t != null, ze = (t) => {
     console.debug("[COOKIE] GET error: ", o);
     return;
   }
-}, Ke = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).filter(y).join("; "), He = [
+}, De = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).filter(v).join("; "), He = [
   ["secure", ""],
   ["SameSite", "None"]
-], De = ({
+], qe = ({
   name: t,
   value: e,
   expires: n
@@ -1075,8 +1076,8 @@ const W = Le(), y = (t) => t != null, ze = (t) => {
     ["domain", ze(window.location.hostname)],
     ...s
   ];
-  return Ke(i);
-}, N = async ({
+  return De(i);
+}, L = async ({
   name: t,
   value: e,
   expires: n,
@@ -1085,19 +1086,19 @@ const W = Le(), y = (t) => t != null, ze = (t) => {
   try {
     if (!o)
       return;
-    const s = De({ name: t, value: e, expires: n });
+    const s = qe({ name: t, value: e, expires: n });
     document.cookie = s;
   } catch (s) {
     console.warn("[COOKIE] SET error: ", s);
   }
-}, qe = "builderio.variations", L = (t) => `${qe}.${t}`, Ge = ({
+}, Ge = "builderio.variations", K = (t) => `${Ge}.${t}`, Je = ({
   contentId: t,
   canTrack: e
-}) => M({ name: L(t), canTrack: e }), Je = ({
+}) => N({ name: K(t), canTrack: e }), Xe = ({
   contentId: t,
   canTrack: e,
   value: n
-}) => N({ name: L(t), value: n, canTrack: e }), Xe = (t) => y(t.id) && y(t.variations) && Object.keys(t.variations).length > 0, Ye = ({
+}) => L({ name: K(t), value: n, canTrack: e }), Ye = (t) => v(t.id) && v(t.variations) && Object.keys(t.variations).length > 0, Qe = ({
   id: t,
   variations: e
 }) => {
@@ -1110,7 +1111,7 @@ const W = Le(), y = (t) => t != null, ze = (t) => {
       return r;
   }
   return t;
-}, $ = ({
+}, E = ({
   item: t,
   testGroupId: e
 }) => {
@@ -1123,69 +1124,69 @@ const W = Le(), y = (t) => t != null, ze = (t) => {
     testVariationId: n.id,
     testVariationName: n.name || (n.id === t.id ? "Default" : "")
   };
-}, Qe = async ({
+}, Ze = async ({
   item: t,
   canTrack: e
 }) => {
-  const n = await Ge({
+  const n = await Je({
     canTrack: e,
     contentId: t.id
-  }), o = n ? $({ item: t, testGroupId: n }) : void 0;
+  }), o = n ? E({ item: t, testGroupId: n }) : void 0;
   if (o)
     return o;
   {
-    const s = Ye({
+    const s = Qe({
       variations: t.variations,
       id: t.id
     });
-    return Je({
+    return Xe({
       contentId: t.id,
       value: s,
       canTrack: e
     }).catch((r) => {
       console.error("could not store A/B test variation: ", r);
-    }), $({ item: t, testGroupId: s });
+    }), E({ item: t, testGroupId: s });
   }
-}, Ze = async ({
+}, et = async ({
   item: t,
   canTrack: e
 }) => {
-  if (!Xe(t))
+  if (!Ye(t))
     return;
-  const n = await Qe({ item: t, canTrack: e });
+  const n = await Ze({ item: t, canTrack: e });
   Object.assign(t, n);
 };
-function C(t, e = null, n = ".") {
+function I(t, e = null, n = ".") {
   return Object.keys(t).reduce((o, s) => {
     const r = t[s], i = [e, s].filter(Boolean).join(n);
     return [
       typeof r == "object",
       r !== null,
       !(Array.isArray(r) && r.length === 0)
-    ].every(Boolean) ? { ...o, ...C(r, i, n) } : { ...o, [i]: r };
+    ].every(Boolean) ? { ...o, ...I(r, i, n) } : { ...o, [i]: r };
   }, {});
 }
-const E = "builder.", et = "options.", tt = (t) => {
+const P = "builder.", tt = "options.", nt = (t) => {
   const e = {};
   return t.forEach((n, o) => {
     e[o] = n;
   }), e;
-}, nt = (t) => {
+}, ot = (t) => {
   if (!t)
     return {};
   const e = z(t), n = {};
   return Object.keys(e).forEach((o) => {
-    if (o.startsWith(E)) {
-      const s = o.replace(E, "").replace(et, "");
+    if (o.startsWith(P)) {
+      const s = o.replace(P, "").replace(tt, "");
       n[s] = e[o];
     }
   }), n;
-}, ot = () => {
+}, st = () => {
   if (!p())
     return {};
   const t = new URLSearchParams(window.location.search);
-  return nt(t);
-}, z = (t) => t instanceof URLSearchParams ? tt(t) : t, st = "v3", rt = (t) => {
+  return ot(t);
+}, z = (t) => t instanceof URLSearchParams ? nt(t) : t, rt = "v3", it = (t) => {
   const {
     limit: e = 30,
     userAttributes: n,
@@ -1193,61 +1194,61 @@ const E = "builder.", et = "options.", tt = (t) => {
     noTraverse: s = !1,
     model: r,
     apiKey: i,
-    includeRefs: l = !0,
+    includeRefs: c = !0,
     locale: a,
-    apiVersion: c = st
+    apiVersion: l = rt
   } = t;
   if (!i)
     throw new Error("Missing API key");
-  if (!["v2", "v3"].includes(c))
+  if (!["v2", "v3"].includes(l))
     throw new Error(
-      `Invalid apiVersion: expected 'v2' or 'v3', received '${c}'`
+      `Invalid apiVersion: expected 'v2' or 'v3', received '${l}'`
     );
   const d = new URL(
-    `https://cdn.builder.io/api/${c}/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${l}${a ? `&locale=${a}` : ""}`
+    `https://cdn.builder.io/api/${l}/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${c}${a ? `&locale=${a}` : ""}`
   ), m = {
-    ...ot(),
+    ...st(),
     ...z(t.options || {})
-  }, u = C(m);
-  for (const f in u)
-    d.searchParams.set(f, String(u[f]));
+  }, u = I(m);
+  for (const g in u)
+    d.searchParams.set(g, String(u[g]));
   if (n && d.searchParams.set("userAttributes", JSON.stringify(n)), o) {
-    const f = C({ query: o });
-    for (const v in f)
-      d.searchParams.set(v, JSON.stringify(f[v]));
+    const g = I({ query: o });
+    for (const _ in g)
+      d.searchParams.set(_, JSON.stringify(g[_]));
   }
   return d;
 };
-async function K(t) {
-  const e = await it({ ...t, limit: 1 });
+async function D(t) {
+  const e = await at({ ...t, limit: 1 });
   return e && "results" in e && (e == null ? void 0 : e.results[0]) || null;
 }
-async function it(t) {
+async function at(t) {
   try {
-    const e = rt(t), o = await (await W(e.href)).json();
+    const e = it(t), o = await (await M(e.href)).json();
     if ("status" in o && !("results" in o))
-      return b.error("Error fetching data. ", o, t), o;
+      return y.error("Error fetching data. ", { url: e, content: o, options: t }), o;
     const s = t.canTrack !== !1;
     try {
       if (s && Array.isArray(o.results))
         for (const r of o.results)
-          await Ze({ item: r, canTrack: s });
+          await et({ item: r, canTrack: s });
     } catch (r) {
-      b.error("Could not setup A/B testing. ", r);
+      y.error("Could not setup A/B testing. ", r);
     }
     return o;
   } catch (e) {
-    return b.error("Error fetching data. ", e), null;
+    return y.error("Error fetching data. ", e), null;
   }
 }
-const at = () => Promise.resolve().then(() => In).then((t) => t.default).catch((t) => {
+const lt = () => Promise.resolve().then(() => $n).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContent at ../../components/render-content/render-content.vue",
     t
   ), t;
-}), lt = {
+}), ct = f({
   name: "builder-symbol",
-  components: { RenderContent: at },
+  components: { RenderContent: lt },
   props: ["attributes", "symbol", "dynamic"],
   data() {
     var t, e, n;
@@ -1262,7 +1263,7 @@ const at = () => Promise.resolve().then(() => In).then((t) => t.default).catch((
     };
   },
   inject: {
-    builderContext: x.key
+    builderContext: k.key
   },
   mounted() {
     this.fetchContent();
@@ -1285,7 +1286,7 @@ const at = () => Promise.resolve().then(() => In).then((t) => t.default).catch((
   methods: {
     fetchContent() {
       var t, e;
-      !this.contentToUse && ((t = this.symbol) == null ? void 0 : t.model) && ((e = this.builderContext) == null ? void 0 : e.apiKey) && K({
+      !this.contentToUse && ((t = this.symbol) == null ? void 0 : t.model) && ((e = this.builderContext) == null ? void 0 : e.apiKey) && D({
         model: this.symbol.model,
         apiKey: this.builderContext.apiKey,
         apiVersion: this.builderContext.apiVersion,
@@ -1295,7 +1296,7 @@ const at = () => Promise.resolve().then(() => In).then((t) => t.default).catch((
       }).then((n) => {
         n && (this.contentToUse = n);
       }).catch((n) => {
-        b.error("Could not fetch symbol content: ", n);
+        y.error("Could not fetch symbol content: ", n);
       });
     },
     filterAttrs: function(e = {}, n) {
@@ -1323,28 +1324,28 @@ const at = () => Promise.resolve().then(() => In).then((t) => t.default).catch((
       return e;
     }
   }
-};
-var ct = function() {
+});
+var dt = function() {
   var o, s, r, i;
   var e = this, n = e._self._c;
-  return n("div", e._g(e._b({ class: e._classStringToObject(e.className), attrs: { dataSet: {
+  return e._self._setupProxy, n("div", e._g(e._b({ class: e._classStringToObject(e.className), attrs: { dataSet: {
     class: e.className
   } } }, "div", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [n("render-content", { attrs: { apiVersion: e.builderContext.apiVersion, apiKey: e.builderContext.apiKey, context: e.builderContext.context, customComponents: Object.values(e.builderContext.registeredComponents), data: {
     ...(o = e.symbol) == null ? void 0 : o.data,
-    ...e.builderContext.state,
+    ...e.builderContext.localState,
     ...(r = (s = e.contentToUse) == null ? void 0 : s.data) == null ? void 0 : r.state
   }, model: (i = e.symbol) == null ? void 0 : i.model, content: e.contentToUse } })], 1);
-}, dt = [], ut = /* @__PURE__ */ h(
-  lt,
+}, ut = [], pt = /* @__PURE__ */ h(
   ct,
   dt,
+  ut,
   !1,
   null,
   null,
   null,
   null
 );
-const pt = ut.exports, mt = {
+const mt = pt.exports, ft = {
   name: "Text",
   static: !0,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
@@ -1363,26 +1364,26 @@ const pt = ut.exports, mt = {
     height: "auto",
     textAlign: "center"
   }
-}, ht = {
+}, ht = f({
   name: "builder-text",
   props: ["text"]
-};
-var ft = function() {
+});
+var gt = function() {
   var e = this, n = e._self._c;
-  return n("span", { staticClass: "builder-text", style: {
+  return e._self._setupProxy, n("span", { staticClass: "builder-text", style: {
     outline: "none"
   }, domProps: { innerHTML: e._s(e.text) } });
-}, gt = [], bt = /* @__PURE__ */ h(
+}, bt = [], yt = /* @__PURE__ */ h(
   ht,
-  ft,
   gt,
+  bt,
   !1,
   null,
   null,
   null,
   null
 );
-const yt = bt.exports, vt = {
+const vt = yt.exports, _t = {
   name: "Video",
   canHaveChildren: !0,
   defaultStyles: {
@@ -1483,7 +1484,7 @@ const yt = bt.exports, vt = {
       advanced: !0
     }
   ]
-}, _t = {
+}, xt = f({
   name: "builder-video",
   props: [
     "autoPlay",
@@ -1524,11 +1525,11 @@ const yt = bt.exports, vt = {
       };
     }
   }
-};
-var xt = function() {
+});
+var kt = function() {
   var o;
   var e = this, n = e._self._c;
-  return n("video", e._b({ style: {
+  return e._self._setupProxy, n("video", e._b({ style: {
     width: "100%",
     height: "100%",
     ...(o = e.attributes) == null ? void 0 : o.style,
@@ -1536,17 +1537,17 @@ var xt = function() {
     objectPosition: e.position,
     borderRadius: 1
   }, attrs: { src: e.video || "no-src", poster: e.posterImage } }, "video", e.spreadProps, !1));
-}, kt = [], St = /* @__PURE__ */ h(
-  _t,
+}, St = [], wt = /* @__PURE__ */ h(
   xt,
   kt,
+  St,
   !1,
   null,
   null,
   null,
   null
 );
-const wt = St.exports, Ct = {
+const Ct = wt.exports, It = {
   name: "Embed",
   static: !0,
   inputs: [
@@ -1556,7 +1557,7 @@ const wt = St.exports, Ct = {
       required: !0,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: k(
+      onChange: S(
         (t) => {
           const e = t.get("url");
           if (e)
@@ -1581,11 +1582,11 @@ const wt = St.exports, Ct = {
       hideFromUI: !0
     }
   ]
-}, It = [
+}, Rt = [
   "text/javascript",
   "application/javascript",
   "application/ecmascript"
-], Rt = (t) => It.includes(t.type), Tt = {
+], Tt = (t) => Rt.includes(t.type), $t = f({
   name: "builder-embed",
   props: ["content"],
   data() {
@@ -1618,7 +1619,7 @@ const wt = St.exports, Ct = {
           this.scriptsInserted.push(n.src);
           const o = document.createElement("script");
           o.async = !0, o.src = n.src, document.head.appendChild(o);
-        } else if (Rt(n) && !this.scriptsRun.includes(n.innerText))
+        } else if (Tt(n) && !this.scriptsRun.includes(n.innerText))
           try {
             this.scriptsRun.push(n.innerText), new Function(n.innerText)();
           } catch (o) {
@@ -1627,21 +1628,21 @@ const wt = St.exports, Ct = {
       }
     }
   }
-};
-var $t = function() {
+});
+var Et = function() {
   var e = this, n = e._self._c;
-  return n("div", { ref: "elem", staticClass: "builder-embed", domProps: { innerHTML: e._s(e.content) } });
-}, Et = [], At = /* @__PURE__ */ h(
-  Tt,
+  return e._self._setupProxy, n("div", { ref: "elem", staticClass: "builder-embed", domProps: { innerHTML: e._s(e.content) } });
+}, Pt = [], At = /* @__PURE__ */ h(
   $t,
   Et,
+  Pt,
   !1,
   null,
   null,
   null,
   null
 );
-const Ft = At.exports, Pt = {
+const Ft = At.exports, jt = f({
   name: "builder-img-component",
   props: [
     "backgroundSize",
@@ -1652,7 +1653,7 @@ const Ft = At.exports, Pt = {
     "attributes"
   ],
   data() {
-    return { isEditing: g };
+    return { isEditing: b };
   },
   methods: {
     filterAttrs: function(e = {}, n) {
@@ -1671,24 +1672,24 @@ const Ft = At.exports, Pt = {
       );
     }
   }
-};
-var jt = function() {
+});
+var Vt = function() {
   var e = this, n = e._self._c;
-  return n("img", e._g(e._b({ key: e.isEditing() && e.imgSrc || "default-key", style: {
+  return e._self._setupProxy, n("img", e._g(e._b({ key: e.isEditing() && e.imgSrc || "default-key", style: {
     objectFit: e.backgroundSize || "cover",
     objectPosition: e.backgroundPosition || "center"
   }, attrs: { alt: e.altText, src: e.imgSrc || e.image } }, "img", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)));
-}, Vt = [], Ot = /* @__PURE__ */ h(
-  Pt,
+}, Ot = [], Ut = /* @__PURE__ */ h(
   jt,
   Vt,
+  Ot,
   !1,
   null,
   null,
   null,
   null
 );
-const Ut = Ot.exports, Bt = {
+const Bt = Ut.exports, Wt = {
   name: "Raw:Img",
   hideFromInsertMenu: !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",
@@ -1703,7 +1704,7 @@ const Ut = Ot.exports, Bt = {
   ],
   noWrap: !0,
   static: !0
-}, Wt = {
+}, Mt = f({
   name: "builder-custom-code",
   props: ["replaceNodes", "code"],
   data() {
@@ -1750,23 +1751,23 @@ const Ut = Ot.exports, Bt = {
       return e;
     }
   }
-};
-var Mt = function() {
+});
+var Nt = function() {
   var e = this, n = e._self._c;
-  return n("div", { ref: "elem", class: e._classStringToObject(
+  return e._self._setupProxy, n("div", { ref: "elem", class: e._classStringToObject(
     "builder-custom-code" + (e.replaceNodes ? " replace-nodes" : "")
   ), domProps: { innerHTML: e._s(e.code) } });
-}, Nt = [], Lt = /* @__PURE__ */ h(
-  Wt,
+}, Lt = [], Kt = /* @__PURE__ */ h(
   Mt,
   Nt,
+  Lt,
   !1,
   null,
   null,
   null,
   null
 );
-const zt = Lt.exports, Kt = {
+const zt = Kt.exports, Dt = {
   name: "Custom Code",
   static: !0,
   requiredPermissions: ["editCode"],
@@ -1793,34 +1794,36 @@ const zt = Lt.exports, Kt = {
     }
   ]
 }, Ht = () => [
-  { component: ee, ...Ee },
-  { component: ce, ...Ae },
-  { component: zt, ...Kt },
-  { component: Ft, ...Ct },
+  { component: te, ...Pe },
+  { component: de, ...Ae },
+  { component: zt, ...Dt },
+  { component: Ft, ...It },
   { component: he, ...Fe },
-  { component: xe, ...Pe },
-  { component: Ut, ...Bt },
-  { component: We, ...je },
-  { component: pt, ...Me },
-  { component: yt, ...mt },
-  { component: wt, ...vt }
+  { component: ke, ...je },
+  { component: Bt, ...Wt },
+  { component: Me, ...Ve },
+  { component: mt, ...Ne },
+  { component: vt, ...ft },
+  { component: Ct, ..._t }
 ];
 function A({
   code: t,
   context: e,
-  state: n,
-  event: o,
-  isExpression: s = !0
+  localState: n,
+  rootState: o,
+  rootSetState: s,
+  event: r,
+  isExpression: i = !0
 }) {
   if (t === "") {
     console.warn("Skipping evaluation of empty code block.");
     return;
   }
-  const r = {
-    isEditing: g(),
+  const c = {
+    isEditing: b(),
     isBrowser: p(),
     isServer: !p()
-  }, l = s && !(t.includes(";") || t.includes(" return ") || t.trim().startsWith("return ")) ? `return (${t});` : t;
+  }, l = i && !(t.includes(";") || t.includes(" return ") || t.trim().startsWith("return ")) ? `return (${t});` : t;
   try {
     return new Function(
       "builder",
@@ -1829,8 +1832,14 @@ function A({
       "context",
       "event",
       l
-    )(r, r, n, e, o);
-  } catch (a) {
+    )(
+      c,
+      c,
+      qt(o, n, s),
+      e,
+      r
+    );
+  } catch (d) {
     console.warn(
       `Builder custom code error: 
  While Evaluating: 
@@ -1838,117 +1847,131 @@ function A({
       l,
       `
 `,
-      a
+      d
     );
   }
 }
-function Dt() {
-  return !p() || g() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+function qt(t, e, n) {
+  if (t === e)
+    throw new Error("rootState === localState");
+  return new Proxy(t, {
+    get: (o, s) => e && s in e ? e[s] : t[s],
+    set: (o, s, r) => {
+      if (e && s in e)
+        throw new Error(
+          "Writing to local state is not allowed as it is read-only."
+        );
+      return t[s] = r, n == null || n(t), !0;
+    }
+  });
+}
+function Gt() {
+  return !p() || b() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
 const H = [];
-function Tn(t, e) {
+function An(t, e) {
   return H.push({ component: t, ...e }), console.warn(
     "registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK."
   ), t;
 }
-const qt = ({
+const Jt = ({
   component: t,
   ...e
 }) => ({
   type: "builder.registerComponent",
-  data: Jt(e)
-}), Gt = (t) => typeof t == "function" ? k(t) : R(t), Jt = ({
+  data: Yt(e)
+}), Xt = (t) => typeof t == "function" ? S(t) : T(t), Yt = ({
   inputs: t,
   ...e
 }) => ({
-  ...R(e),
+  ...T(e),
   inputs: t == null ? void 0 : t.map(
     (n) => Object.entries(n).reduce(
       (o, [s, r]) => ({
         ...o,
-        [s]: Gt(r)
+        [s]: Xt(r)
       }),
       {}
     )
   )
 });
-function Xt() {
+function Qt() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
     const e = Math.random() * 16 | 0;
     return (t == "x" ? e : e & 3 | 8).toString(16);
   });
 }
-function D() {
-  return Xt().replace(/-/g, "");
+function q() {
+  return Qt().replace(/-/g, "");
 }
-const q = "builderSessionId", Yt = async ({
+const G = "builderSessionId", Zt = async ({
   canTrack: t
 }) => {
   if (!t)
     return;
-  const e = await M({
-    name: q,
+  const e = await N({
+    name: G,
     canTrack: t
   });
-  if (y(e))
+  if (v(e))
     return e;
   {
-    const n = Qt();
-    return Zt({ id: n, canTrack: t }), n;
+    const n = en();
+    return tn({ id: n, canTrack: t }), n;
   }
-}, Qt = () => D(), Zt = ({
+}, en = () => q(), tn = ({
   id: t,
   canTrack: e
-}) => N({ name: q, value: t, canTrack: e }), G = () => p() && typeof localStorage < "u" ? localStorage : void 0, en = ({
+}) => L({ name: G, value: t, canTrack: e }), J = () => p() && typeof localStorage < "u" ? localStorage : void 0, nn = ({
   key: t,
   canTrack: e
 }) => {
   var n;
   try {
-    return e ? (n = G()) == null ? void 0 : n.getItem(t) : void 0;
+    return e ? (n = J()) == null ? void 0 : n.getItem(t) : void 0;
   } catch (o) {
     console.debug("[LocalStorage] GET error: ", o);
     return;
   }
-}, tn = ({
+}, on = ({
   key: t,
   canTrack: e,
   value: n
 }) => {
   var o;
   try {
-    e && ((o = G()) == null || o.setItem(t, n));
+    e && ((o = J()) == null || o.setItem(t, n));
   } catch (s) {
     console.debug("[LocalStorage] SET error: ", s);
   }
-}, J = "builderVisitorId", nn = ({ canTrack: t }) => {
+}, X = "builderVisitorId", sn = ({ canTrack: t }) => {
   if (!t)
     return;
-  const e = en({
-    key: J,
+  const e = nn({
+    key: X,
     canTrack: t
   });
-  if (y(e))
+  if (v(e))
     return e;
   {
-    const n = on();
-    return sn({ id: n, canTrack: t }), n;
+    const n = rn();
+    return an({ id: n, canTrack: t }), n;
   }
-}, on = () => D(), sn = ({
+}, rn = () => q(), an = ({
   id: t,
   canTrack: e
-}) => tn({
-  key: J,
+}) => on({
+  key: X,
   value: t,
   canTrack: e
-}), rn = () => {
+}), ln = () => {
   if (p()) {
     const t = new URL(location.href);
     return t.pathname === "" && (t.pathname = "/"), t;
   } else
     return console.warn("Cannot get location for tracking in non-browser environment"), null;
-}, an = () => typeof navigator == "object" && navigator.userAgent || "", ln = () => {
-  const t = an(), e = {
+}, cn = () => typeof navigator == "object" && navigator.userAgent || "", dn = () => {
+  const t = cn(), e = {
     Android() {
       return t.match(/Android/i);
     },
@@ -1965,25 +1988,25 @@ const q = "builderSessionId", Yt = async ({
       return t.match(/IEMobile/i) || t.match(/WPDesktop/i);
     },
     any() {
-      return e.Android() || e.BlackBerry() || e.iOS() || e.Opera() || e.Windows() || _ === "reactNative";
+      return e.Android() || e.BlackBerry() || e.iOS() || e.Opera() || e.Windows() || x === "reactNative";
     }
-  }, n = t.match(/Tablet|iPad/i), o = rn();
+  }, n = t.match(/Tablet|iPad/i), o = ln();
   return {
     urlPath: o == null ? void 0 : o.pathname,
     host: (o == null ? void 0 : o.host) || (o == null ? void 0 : o.hostname),
     device: n ? "tablet" : e.any() ? "mobile" : "desktop"
   };
-}, cn = async ({
+}, un = async ({
   canTrack: t
 }) => {
   if (!t)
     return { visitorId: void 0, sessionId: void 0 };
-  const e = await Yt({ canTrack: t }), n = nn({ canTrack: t });
+  const e = await Zt({ canTrack: t }), n = sn({ canTrack: t });
   return {
     sessionId: e,
     visitorId: n
   };
-}, dn = async ({
+}, pn = async ({
   type: t,
   canTrack: e,
   apiKey: n,
@@ -1997,23 +2020,23 @@ const q = "builderSessionId", Yt = async ({
       url: location.href,
       ...o
     },
-    ...await cn({ canTrack: e }),
-    userAttributes: ln(),
+    ...await un({ canTrack: e }),
+    userAttributes: dn(),
     ownerId: n
   }
 });
-async function I(t) {
+async function R(t) {
   if (!t.apiKey) {
-    b.error(
+    y.error(
       "Missing API key for track call. Please provide your API key."
     );
     return;
   }
-  if (!!t.canTrack && !g() && !!(p() || _ === "reactNative"))
+  if (!!t.canTrack && !b() && !!(p() || x === "reactNative"))
     return fetch("https://builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await dn(t)]
+        events: [await pn(t)]
       }),
       headers: {
         "content-type": "application/json"
@@ -2023,8 +2046,8 @@ async function I(t) {
       console.error("Failed to track: ", e);
     });
 }
-const $n = (t) => I({ ...t, canTrack: !0 }), F = {};
-function un(t, e) {
+const Fn = (t) => R({ ...t, canTrack: !0 }), mn = "0.3.1", F = {};
+function fn(t, e) {
   let n = F[t];
   if (n || (n = F[t] = []), n.push(e), p()) {
     const o = {
@@ -2041,8 +2064,8 @@ function un(t, e) {
     }
   }
 }
-const pn = () => {
-  un("insertMenu", {
+const hn = () => {
+  fn("insertMenu", {
     name: "_default",
     default: !0,
     items: [
@@ -2057,14 +2080,15 @@ const pn = () => {
     ]
   });
 };
-let P = !1;
-const mn = (t = {}) => {
+let j = !1;
+const gn = (t = {}) => {
   var e, n;
-  P || (P = !0, p() && ((e = window.parent) == null || e.postMessage(
+  j || (j = !0, p() && ((e = window.parent) == null || e.postMessage(
     {
       type: "builder.sdkInfo",
       data: {
-        target: _,
+        target: x,
+        version: mn,
         supportsPatchUpdates: !1,
         supportsAddBlockScoping: !0,
         supportsCustomBreakpoints: !0
@@ -2084,10 +2108,10 @@ const mn = (t = {}) => {
     if (!!(o != null && o.type))
       switch (o.type) {
         case "builder.evaluate": {
-          const i = o.data.text, l = o.data.arguments || [], a = o.data.id, c = new Function(i);
+          const i = o.data.text, c = o.data.arguments || [], a = o.data.id, l = new Function(i);
           let d, m = null;
           try {
-            d = c.apply(null, l);
+            d = l.apply(null, c);
           } catch (u) {
             m = u;
           }
@@ -2098,8 +2122,8 @@ const mn = (t = {}) => {
             },
             "*"
           ) : d && typeof d.then == "function" ? d.then((u) => {
-            var f;
-            (f = window.parent) == null || f.postMessage(
+            var g;
+            (g = window.parent) == null || g.postMessage(
               {
                 type: "builder.evaluateResult",
                 data: { id: a, result: u }
@@ -2118,10 +2142,10 @@ const mn = (t = {}) => {
       }
   })));
 };
-function j(t) {
+function V(t) {
   return Math.round(t * 1e3) / 1e3;
 }
-const hn = (t, e, n = !0) => {
+const bn = (t, e, n = !0) => {
   if (!(t instanceof HTMLElement))
     return null;
   let o = n ? t : t.parentElement;
@@ -2132,46 +2156,46 @@ const hn = (t, e, n = !0) => {
       return o;
   } while (o = o.parentElement);
   return null;
-}, fn = (t) => hn(t, (e) => {
+}, yn = (t) => bn(t, (e) => {
   const n = e.getAttribute("builder-id") || e.id;
   return Boolean((n == null ? void 0 : n.indexOf("builder-")) === 0);
-}), V = ({
+}), O = ({
   event: t,
   target: e
 }) => {
-  const n = e.getBoundingClientRect(), o = t.clientX - n.left, s = t.clientY - n.top, r = j(o / n.width), i = j(s / n.height);
+  const n = e.getBoundingClientRect(), o = t.clientX - n.left, s = t.clientY - n.top, r = V(o / n.width), i = V(s / n.height);
   return {
     x: r,
     y: i
   };
-}, gn = (t) => {
-  const e = t.target, n = e && fn(e), o = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
+}, vn = (t) => {
+  const e = t.target, n = e && yn(e), o = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
   return {
     targetBuilderElement: o || void 0,
     metadata: {
-      targetOffset: e ? V({ event: t, target: e }) : void 0,
-      builderTargetOffset: n ? V({ event: t, target: n }) : void 0,
+      targetOffset: e ? O({ event: t, target: e }) : void 0,
+      builderTargetOffset: n ? O({ event: t, target: n }) : void 0,
       builderElementIndex: n && o ? [].slice.call(document.getElementsByClassName(o)).indexOf(n) : void 0
     }
   };
-}, bn = ({
+}, _n = ({
   content: t,
   data: e,
   locale: n
 }) => {
-  var r, i, l;
+  var r, i, c;
   const o = {};
   (i = (r = t == null ? void 0 : t.data) == null ? void 0 : r.inputs) == null || i.forEach((a) => {
-    var c;
-    a.name && a.defaultValue !== void 0 && ((c = t == null ? void 0 : t.data) == null ? void 0 : c.state) && t.data.state[a.name] === void 0 && (o[a.name] = a.defaultValue);
+    var l;
+    a.name && a.defaultValue !== void 0 && ((l = t == null ? void 0 : t.data) == null ? void 0 : l.state) && t.data.state[a.name] === void 0 && (o[a.name] = a.defaultValue);
   });
   const s = {
-    ...(l = t == null ? void 0 : t.data) == null ? void 0 : l.state,
+    ...(c = t == null ? void 0 : t.data) == null ? void 0 : c.state,
     ...e,
     ...n ? { locale: n } : {}
   };
   return { ...o, ...s };
-}, yn = ({
+}, xn = ({
   content: t,
   data: e
 }) => t ? {
@@ -2181,21 +2205,21 @@ const hn = (t, e, n = !0) => {
     ...e
   },
   meta: t == null ? void 0 : t.meta
-} : void 0, vn = () => Promise.resolve().then(() => B).then((t) => t.default).catch((t) => {
+} : void 0, kn = () => Promise.resolve().then(() => W).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../render-blocks.vue",
     t
   ), t;
-}), _n = () => import("./render-styles.0d1f8872.js").then((t) => t.default).catch((t) => {
+}), Sn = () => import("./render-styles.a49c2339.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContentStyles at ./components/render-styles.vue",
     t
   ), t;
-}), xn = {
+}), wn = f({
   name: "render-content",
   components: {
-    RenderContentStyles: _n,
-    RenderBlocks: vn
+    RenderContentStyles: Sn,
+    RenderBlocks: kn
   },
   props: [
     "content",
@@ -2213,13 +2237,13 @@ const hn = (t, e, n = !0) => {
     return {
       forceReRenderCount: 0,
       overrideContent: null,
-      useContent: yn({
+      useContent: xn({
         content: this.content,
         data: this.data
       }),
       update: 0,
-      canTrackToUse: y(this.canTrack) ? this.canTrack : !0,
-      contentState: bn({
+      canTrackToUse: v(this.canTrack) ? this.canTrack : !0,
+      contentState: _n({
         content: this.content,
         data: this.data,
         locale: this.locale
@@ -2237,29 +2261,31 @@ const hn = (t, e, n = !0) => {
       ),
       httpReqsData: {},
       clicked: !1,
-      TARGET: _
+      TARGET: x
     };
   },
   provide() {
     const t = this;
     return {
-      [x.key]: {
+      [k.key]: {
         content: t.useContent,
-        state: t.contentState,
-        setState: t.setContextState,
+        localState: void 0,
+        rootState: t.contentState,
+        rootSetState: t.contentSetState,
         context: t.context || {},
         apiKey: t.apiKey,
         apiVersion: t.apiVersion,
-        registeredComponents: t.allRegisteredComponents
+        registeredComponents: t.allRegisteredComponents,
+        inheritedStyles: {}
       }
     };
   },
   mounted() {
     var t, e;
-    if (this.apiKey || b.error(
+    if (this.apiKey || y.error(
       "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
     ), p()) {
-      if (g() && (this.forceReRenderCount = this.forceReRenderCount + 1, pn(), mn({
+      if (b() && (this.forceReRenderCount = this.forceReRenderCount + 1, hn(), gn({
         ...this.locale ? {
           locale: this.locale
         } : {},
@@ -2270,14 +2296,14 @@ const hn = (t, e, n = !0) => {
         this.allRegisteredComponents
       ).forEach((n) => {
         var s;
-        const o = qt(n);
+        const o = Jt(n);
         (s = window.parent) == null || s.postMessage(o, "*");
       }), window.addEventListener("message", this.processMessage), window.addEventListener(
         "builder:component:stateChangeListenerActivated",
         this.emitStateUpdate
       )), this.useContent) {
         const n = (t = this.useContent) == null ? void 0 : t.testVariationId, o = (e = this.useContent) == null ? void 0 : e.id;
-        I({
+        R({
           type: "impression",
           canTrack: this.canTrackToUse,
           contentId: o,
@@ -2285,11 +2311,11 @@ const hn = (t, e, n = !0) => {
           variationId: n !== o ? n : void 0
         });
       }
-      if (Dt()) {
+      if (Gt()) {
         const n = new URL(location.href).searchParams, o = n.get("builder.preview"), s = n.get(
           `builder.preview.${o}`
         ), r = n.get("apiKey") || n.get("builder.space");
-        o === this.model && r === this.apiKey && (!this.content || s === this.content.id) && K({
+        o === this.model && r === this.apiKey && (!this.content || s === this.content.id) && D({
           model: this.model,
           apiKey: this.apiKey,
           apiVersion: this.apiVersion
@@ -2384,7 +2410,7 @@ const hn = (t, e, n = !0) => {
         }
       };
     },
-    setContextState(t) {
+    contentSetState(t) {
       this.contentState = t;
     },
     processMessage(t) {
@@ -2412,20 +2438,22 @@ const hn = (t, e, n = !0) => {
       t && A({
         code: t,
         context: this.context || {},
-        state: this.contentState
+        localState: void 0,
+        rootState: this.contentState,
+        rootSetState: this.contentSetState
       });
     },
     onClick(t) {
       var e, n;
       if (this.useContent) {
         const o = (e = this.useContent) == null ? void 0 : e.testVariationId, s = (n = this.useContent) == null ? void 0 : n.id;
-        I({
+        R({
           type: "click",
           canTrack: this.canTrackToUse,
           contentId: s,
           apiKey: this.apiKey,
           variationId: o !== s ? o : void 0,
-          ...gn(t),
+          ...vn(t),
           unique: !this.clicked
         });
       }
@@ -2437,17 +2465,19 @@ const hn = (t, e, n = !0) => {
         (e, n) => A({
           code: n,
           context: this.context || {},
-          state: this.contentState
+          localState: void 0,
+          rootState: this.contentState,
+          rootSetState: this.contentSetState
         })
       );
     },
     handleRequest({ url: t, key: e }) {
-      W(t).then((n) => n.json()).then((n) => {
+      M(t).then((n) => n.json()).then((n) => {
         const o = {
           ...this.contentState,
           [e]: n
         };
-        this.setContextState(o);
+        this.contentSetState(o);
       }).catch((n) => {
         console.error("error fetching dynamic data", t, n);
       });
@@ -2456,7 +2486,7 @@ const hn = (t, e, n = !0) => {
       var e, n, o;
       const t = (o = (n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.httpRequests) != null ? o : {};
       Object.entries(t).forEach(([s, r]) => {
-        if (r && (!this.httpReqsData[s] || g())) {
+        if (r && (!this.httpReqsData[s] || b())) {
           const i = this.evalExpression(r);
           this.handleRequest({
             url: i,
@@ -2466,7 +2496,7 @@ const hn = (t, e, n = !0) => {
       });
     },
     emitStateUpdate() {
-      g() && window.dispatchEvent(
+      b() && window.dispatchEvent(
         new CustomEvent(
           "builder:component:stateChange",
           {
@@ -2481,68 +2511,68 @@ const hn = (t, e, n = !0) => {
       );
     }
   }
-};
-var kn = function() {
-  var o, s, r, i, l, a, c, d;
+});
+var Cn = function() {
+  var o, s, r, i, c, a, l, d;
   var e = this, n = e._self._c;
-  return e.useContent ? n("div", { ref: "elementRef", attrs: { "builder-content-id": (o = e.useContent) == null ? void 0 : o.id, "builder-model": e.model }, on: { click: function(m) {
+  return e._self._setupProxy, e.useContent ? n("div", { ref: "elementRef", attrs: { "builder-content-id": (o = e.useContent) == null ? void 0 : o.id, "builder-model": e.model }, on: { click: function(m) {
     return e.onClick(m);
-  } } }, [e.TARGET !== "reactNative" ? [n("render-content-styles", { attrs: { contentId: (s = e.useContent) == null ? void 0 : s.id, cssCode: (i = (r = e.useContent) == null ? void 0 : r.data) == null ? void 0 : i.cssCode, customFonts: (a = (l = e.useContent) == null ? void 0 : l.data) == null ? void 0 : a.customFonts } })] : e._e(), n("render-blocks", { key: e.forceReRenderCount, attrs: { blocks: (d = (c = e.useContent) == null ? void 0 : c.data) == null ? void 0 : d.blocks } })], 2) : e._e();
-}, Sn = [], wn = /* @__PURE__ */ h(
-  xn,
-  kn,
-  Sn,
+  } } }, [e.TARGET !== "reactNative" ? [n("render-content-styles", { attrs: { contentId: (s = e.useContent) == null ? void 0 : s.id, cssCode: (i = (r = e.useContent) == null ? void 0 : r.data) == null ? void 0 : i.cssCode, customFonts: (a = (c = e.useContent) == null ? void 0 : c.data) == null ? void 0 : a.customFonts } })] : e._e(), n("render-blocks", { key: e.forceReRenderCount, attrs: { blocks: (d = (l = e.useContent) == null ? void 0 : l.data) == null ? void 0 : d.blocks } })], 2) : e._e();
+}, In = [], Rn = /* @__PURE__ */ h(
+  wn,
+  Cn,
+  In,
   !1,
   null,
   null,
   null,
   null
 );
-const Cn = wn.exports, In = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Tn = Rn.exports, $n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Cn
-}, Symbol.toStringTag, { value: "Module" })), O = {};
-function En(t) {
+  default: Tn
+}, Symbol.toStringTag, { value: "Module" })), U = {};
+function jn(t) {
   if (p()) {
-    Object.assign(O, t);
+    Object.assign(U, t);
     const e = {
       type: "builder.settingsChange",
-      data: O
+      data: U
     };
     parent.postMessage(e, "*");
   }
 }
 export {
-  x as B,
-  ce as C,
+  k as B,
+  de as C,
   he as F,
-  xe as I,
-  We as S,
-  _ as T,
-  wt as V,
-  Rn as a,
-  ee as b,
-  y as c,
-  Cn as d,
+  ke as I,
+  Me as S,
+  x as T,
+  Ct as V,
+  Pn as a,
+  te as b,
+  v as c,
+  Tn as d,
   A as e,
-  R as f,
-  te as g,
-  pt as h,
-  yt as i,
-  g as j,
-  Dt as k,
+  T as f,
+  ne as g,
+  mt as h,
+  vt as i,
+  b as j,
+  Gt as k,
   H as l,
-  Tn as m,
+  An as m,
   h as n,
-  qt as o,
-  un as p,
-  K as q,
-  $e as r,
-  En as s,
-  $n as t,
-  it as u,
-  tt as v,
-  nt as w,
-  ot as x,
+  Jt as o,
+  fn as p,
+  D as q,
+  Ee as r,
+  jn as s,
+  Fn as t,
+  at as u,
+  nt as v,
+  ot as w,
+  st as x,
   z as y
 };