@builder.io/sdk-vue 0.1.4 → 0.1.6

package/packages/_vue3/dist/{index.7db5ef7e.js → index.8392057e.js}

@@ -1,12 +1,12 @@
-import { defineAsyncComponent as x, resolveComponent as k, openBlock as l, createElementBlock as u, normalizeClass as j, normalizeStyle as w, createBlock as I, createCommentVNode as b, Fragment as R, renderList as O, createVNode as X, createElementVNode as L, renderSlot as E, mergeProps as S, toDisplayString as W } from "vue";
-const T = "vue3";
+import { openBlock as d, createElementBlock as u, mergeProps as _, toHandlers as w, toDisplayString as M, defineAsyncComponent as x, resolveComponent as k, normalizeClass as j, normalizeStyle as I, createBlock as T, createCommentVNode as b, Fragment as E, renderList as F, createVNode as Q, renderSlot as A, createElementVNode as $ } from "vue";
+const R = "vue3";
 function f() {
   return typeof window < "u" && typeof document < "u";
 }
-const M = {};
-function ue(e, n) {
-  let t = M[e];
-  if (t || (t = M[e] = []), t.push(n), f()) {
+const z = {};
+function pe(e, n) {
+  let t = z[e];
+  if (t || (t = z[e] = []), t.push(n), f()) {
     const o = {
       type: "builder.register",
       data: {
@@ -21,8 +21,8 @@ function ue(e, n) {
     }
   }
 }
-const me = () => {
-  ue("insertMenu", {
+const he = () => {
+  pe("insertMenu", {
     name: "_default",
     default: !0,
     items: [
@@ -37,14 +37,14 @@ const me = () => {
     ]
   });
 };
-let N = !1;
-const pe = (e = {}) => {
+let K = !1;
+const fe = (e = {}) => {
   var n, t;
-  N || (N = !0, f() && ((n = window.parent) == null || n.postMessage(
+  K || (K = !0, f() && ((n = window.parent) == null || n.postMessage(
     {
       type: "builder.sdkInfo",
       data: {
-        target: T,
+        target: R,
         supportsPatchUpdates: !1,
         supportsAddBlockScoping: !0,
         supportsCustomBreakpoints: !0
@@ -64,17 +64,17 @@ const pe = (e = {}) => {
     if (!!(o != null && o.type))
       switch (o.type) {
         case "builder.evaluate": {
-          const i = o.data.text, c = o.data.arguments || [], a = o.data.id, d = new Function(i);
+          const a = o.data.text, i = o.data.arguments || [], c = o.data.id, l = new Function(a);
           let m, p = null;
           try {
-            m = d.apply(null, c);
+            m = l.apply(null, i);
           } catch (h) {
             p = h;
           }
           p ? (r = window.parent) == null || r.postMessage(
             {
               type: "builder.evaluateError",
-              data: { id: a, error: p.message }
+              data: { id: c, error: p.message }
             },
             "*"
           ) : m && typeof m.then == "function" ? m.then((h) => {
@@ -82,14 +82,14 @@ const pe = (e = {}) => {
             (v = window.parent) == null || v.postMessage(
               {
                 type: "builder.evaluateResult",
-                data: { id: a, result: h }
+                data: { id: c, result: h }
               },
               "*"
             );
           }).catch(console.error) : (s = window.parent) == null || s.postMessage(
             {
               type: "builder.evaluateResult",
-              data: { result: m, id: a }
+              data: { result: m, id: c }
             },
             "*"
           );
@@ -97,7 +97,40 @@ const pe = (e = {}) => {
         }
       }
   })));
-}, U = (e) => JSON.parse(JSON.stringify(e)), Y = {
+}, ge = {
+  name: "builder-button",
+  props: ["attributes", "text", "link", "openLinkInNewTab"],
+  methods: {
+    filterAttrs: function(n = {}, t) {
+      const o = "v-on:", r = (i) => i.startsWith(o), s = (i) => !i.startsWith(o), a = (i) => i.replace(o, "");
+      return Object.keys(n).filter(t ? r : s).reduce(
+        (i, c) => ({
+          ...i,
+          [a(c)]: n[c]
+        }),
+        {}
+      );
+    }
+  }
+};
+const g = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [o, r] of n)
+    t[o] = r;
+  return t;
+}, be = ["href", "target"];
+function ye(e, n, t, o, r, s) {
+  return t.link ? (d(), u("a", _({
+    key: 0,
+    role: "button",
+    href: t.link,
+    target: t.openLinkInNewTab ? "_blank" : void 0
+  }, s.filterAttrs(t.attributes, !1), w(s.filterAttrs(t.attributes, !0), !0)), M(t.text), 17, be)) : (d(), u("button", _({
+    key: 1,
+    class: "button-7fq9d0i380"
+  }, s.filterAttrs(t.attributes, !1), w(s.filterAttrs(t.attributes, !0), !0)), M(t.text), 17));
+}
+const ve = /* @__PURE__ */ g(ge, [["render", ye], ["__scopeId", "data-v-465ad941"]]), V = (e) => JSON.parse(JSON.stringify(e)), Z = {
   small: {
     min: 320,
     default: 321,
@@ -113,8 +146,8 @@ const pe = (e = {}) => {
     default: 991,
     max: 1200
   }
-}, Rn = (e, n = Y) => `@media (max-width: ${n[e].max}px)`, he = ({ small: e, medium: n }) => {
-  const t = U(Y);
+}, Pn = (e, n = Z) => `@media (max-width: ${n[e].max}px)`, xe = ({ small: e, medium: n }) => {
+  const t = V(Z);
   if (!e || !n)
     return t;
   const o = Math.floor(e / 2);
@@ -135,36 +168,36 @@ const pe = (e = {}) => {
     min: s,
     default: s + 1
   }, t;
-}, fe = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), C = (e) => e != null, ge = (e) => Object.entries(e).map(([t, o]) => {
+}, ke = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), S = (e) => e != null, Se = (e) => Object.entries(e).map(([t, o]) => {
   if (typeof o == "string")
-    return `${fe(t)}: ${o};`;
-}).filter(C), _ = (e) => ge(e).join(`
-`), En = ({
+    return `${ke(t)}: ${o};`;
+}).filter(S), C = (e) => Se(e).join(`
+`), On = ({
   mediaQuery: e,
   className: n,
   styles: t
 }) => {
   const o = `.${n} {
-    ${_(t)}
+    ${C(t)}
   }`;
   return e ? `${e} {
       ${o}
     }` : o;
-}, be = () => Promise.resolve().then(() => le).then((e) => e.default).catch((e) => {
+}, _e = () => Promise.resolve().then(() => ee).then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
     e
   ), e;
-}), ye = () => import("./render-inlined-styles.47114c43.js").then((e) => e.default).catch((e) => {
+}), Ce = () => import("./render-inlined-styles.0773feb1.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderInlinedStyles at ../../components/render-inlined-styles.vue",
     e
   ), e;
-}), ve = {
+}), we = {
   name: "builder-columns",
   components: {
-    RenderInlinedStyles: x(ye),
-    RenderBlocks: x(be)
+    RenderInlinedStyles: x(Ce),
+    RenderBlocks: x(_e)
   },
   props: [
     "space",
@@ -175,7 +208,7 @@ const pe = (e = {}) => {
     "builderBlock"
   ],
   data() {
-    return { TARGET: T };
+    return { TARGET: R };
   },
   computed: {
     columnsCssVars() {
@@ -222,21 +255,21 @@ const pe = (e = {}) => {
       return `
       @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
         .${this.builderBlock.id}-breakpoints {
-          ${_(this.columnStyleObjects.columns.medium)}
+          ${C(this.columnStyleObjects.columns.medium)}
         }
 
         .${this.builderBlock.id}-breakpoints > .builder-column {
-          ${_(this.columnStyleObjects.column.medium)}
+          ${C(this.columnStyleObjects.column.medium)}
         }
       }
 
       @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
         .${this.builderBlock.id}-breakpoints {
-          ${_(this.columnStyleObjects.columns.small)}
+          ${C(this.columnStyleObjects.columns.small)}
         }
 
         .${this.builderBlock.id}-breakpoints > .builder-column {
-          ${_(this.columnStyleObjects.column.small)}
+          ${C(this.columnStyleObjects.column.small)}
         }
       },
     `;
@@ -268,7 +301,7 @@ const pe = (e = {}) => {
       return (this.stackColumnsAt || "tablet") === "tablet" ? e : "inherit";
     },
     getWidthForBreakpointSize(e) {
-      return he(
+      return xe(
         this.customBreakpoints || {}
       )[e].max;
     },
@@ -283,42 +316,36 @@ const pe = (e = {}) => {
     }
   }
 };
-const g = (e, n) => {
-  const t = e.__vccOpts || e;
-  for (const [o, r] of n)
-    t[o] = r;
-  return t;
-};
-function xe(e, n, t, o, r, s) {
-  const i = k("render-inlined-styles"), c = k("render-blocks");
-  return l(), u("div", {
+function Ie(e, n, t, o, r, s) {
+  const a = k("render-inlined-styles"), i = k("render-blocks");
+  return d(), u("div", {
     class: j(
       s._classStringToObject(
-        `builder-columns ${t.builderBlock.id}-breakpoints div-7fq9d0i380`
+        `builder-columns ${t.builderBlock.id}-breakpoints div-1eih9th5ow6`
       )
     ),
-    style: w({
+    style: I({
       ...r.TARGET === "reactNative" ? s.reactNativeColumnsStyles : {},
       ...s.columnsCssVars
     })
   }, [
-    r.TARGET !== "reactNative" ? (l(), I(i, {
+    r.TARGET !== "reactNative" ? (d(), T(a, {
       key: 0,
       styles: s.columnsStyles
     }, null, 8, ["styles"])) : b("", !0),
-    (l(!0), u(R, null, O(t.columns, (a, d) => (l(), u("div", {
-      key: d,
-      class: "builder-column div-7fq9d0i380-2",
-      style: w({
-        width: s.getColumnCssWidth(d),
-        marginLeft: `${d === 0 ? 0 : s.getGutterSize()}px`,
+    (d(!0), u(E, null, F(t.columns, (c, l) => (d(), u("div", {
+      key: l,
+      class: "builder-column div-1eih9th5ow6-2",
+      style: I({
+        width: s.getColumnCssWidth(l),
+        marginLeft: `${l === 0 ? 0 : s.getGutterSize()}px`,
         ...r.TARGET === "reactNative" ? s.reactNativeColumnStyles : {},
         ...s.columnCssVars
       })
     }, [
-      X(c, {
-        blocks: a.blocks,
-        path: `component.options.columns.${d}.blocks`,
+      Q(i, {
+        blocks: c.blocks,
+        path: `component.options.columns.${l}.blocks`,
         parent: t.builderBlock.id,
         styleProp: {
           flexGrow: "1"
@@ -327,40 +354,49 @@ function xe(e, n, t, o, r, s) {
     ], 4))), 128))
   ], 6);
 }
-const ke = /* @__PURE__ */ g(ve, [["render", xe], ["__scopeId", "data-v-1c640f4f"]]);
-function z(e) {
+const Te = /* @__PURE__ */ g(we, [["render", Ie], ["__scopeId", "data-v-8bc87868"]]), Re = {
+  name: "builder-fragment-component",
+  props: []
+};
+function Ee(e, n, t, o, r, s) {
+  return d(), u("span", null, [
+    A(e.$slots, "default")
+  ]);
+}
+const Ae = /* @__PURE__ */ g(Re, [["render", Ee]]);
+function H(e) {
   return e.replace(/http(s)?:/, "");
 }
-function Ce(e = "", n, t) {
+function je(e = "", n, t) {
   const o = new RegExp("([?&])" + n + "=.*?(&|$)", "i"), r = e.indexOf("?") !== -1 ? "&" : "?";
   return e.match(o) ? e.replace(o, "$1" + n + "=" + encodeURIComponent(t) + "$2") : e + r + n + "=" + encodeURIComponent(t);
 }
-function Se(e, n) {
+function Pe(e, n) {
   if (!e || !(e != null && e.match(/cdn\.shopify\.com/)) || !n)
     return e;
   if (n === "master")
-    return z(e);
+    return H(e);
   const t = e.match(
     /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
   );
   if (t) {
     const o = e.split(t[0]), r = t[3], s = n.match("x") ? n : `${n}x`;
-    return z(`${o[0]}_${s}${r}`);
+    return H(`${o[0]}_${s}${r}`);
   }
   return null;
 }
-function F(e) {
+function O(e) {
   if (!e)
     return e;
   const n = [100, 200, 400, 800, 1200, 1600, 2e3];
   if (e.match(/builder\.io/)) {
     let t = e;
     const o = Number(e.split("?width=")[1]);
-    return isNaN(o) || (t = `${t} ${o}w`), n.filter((r) => r !== o).map((r) => `${Ce(e, "width", r)} ${r}w`).concat([t]).join(", ");
+    return isNaN(o) || (t = `${t} ${o}w`), n.filter((r) => r !== o).map((r) => `${je(e, "width", r)} ${r}w`).concat([t]).join(", ");
   }
-  return e.match(/cdn\.shopify\.com/) ? n.map((t) => [Se(e, `${t}x${t}`), t]).filter(([t]) => !!t).map(([t, o]) => `${t} ${o}w`).concat([e]).join(", ") : e;
+  return e.match(/cdn\.shopify\.com/) ? n.map((t) => [Pe(e, `${t}x${t}`), t]).filter(([t]) => !!t).map(([t, o]) => `${t} ${o}w`).concat([e]).join(", ") : e;
 }
-const _e = {
+const Oe = {
   name: "builder-image",
   props: [
     "image",
@@ -384,10 +420,10 @@ const _e = {
         return this.srcset;
       if (this.srcset && ((t = this.image) == null ? void 0 : t.includes("builder.io/api/v1/image"))) {
         if (!this.srcset.includes(this.image.split("?")[0]))
-          return console.debug("Removed given srcset"), F(n);
+          return console.debug("Removed given srcset"), O(n);
       } else if (this.image && !this.srcset)
-        return F(n);
-      return F(n);
+        return O(n);
+      return O(n);
     },
     webpSrcSet() {
       var e;
@@ -416,457 +452,165 @@ const _e = {
     }
   }
 };
-const we = ["srcset"], Ie = ["alt", "role", "src", "srcset", "sizes"], Te = {
+const Fe = ["srcset"], Be = ["alt", "role", "src", "srcset", "sizes"], Ue = {
   key: 2,
-  class: "div-2pqqf5a7788-2"
+  class: "div-2btisl9m7v3-2"
 };
-function Re(e, n, t, o, r, s) {
-  var i, c, a, d;
-  return l(), u(R, null, [
-    L("picture", null, [
-      s.webpSrcSet ? (l(), u("source", {
+function Ve(e, n, t, o, r, s) {
+  var a, i, c, l;
+  return d(), u(E, null, [
+    $("picture", null, [
+      s.webpSrcSet ? (d(), u("source", {
         key: 0,
         type: "image/webp",
         srcset: s.webpSrcSet
-      }, null, 8, we)) : b("", !0),
-      L("img", {
+      }, null, 8, Fe)) : b("", !0),
+      $("img", {
         loading: "lazy",
         alt: t.altText,
         role: t.altText ? "presentation" : void 0,
-        style: w({
+        style: I({
           objectPosition: t.backgroundPosition || "center",
           objectFit: t.backgroundSize || "cover",
           ...s.aspectRatioCss
         }),
         class: j(
           s._classStringToObject(
-            "builder-image" + (t.className ? " " + t.className : "") + " img-2pqqf5a7788"
+            "builder-image" + (t.className ? " " + t.className : "") + " img-2btisl9m7v3"
           )
         ),
         src: t.image,
         srcset: s.srcSetToUse,
         sizes: t.sizes
-      }, null, 14, Ie)
+      }, null, 14, Be)
     ]),
-    t.aspectRatio && !(((c = (i = t.builderBlock) == null ? void 0 : i.children) == null ? void 0 : c.length) && t.fitContent) ? (l(), u("div", {
+    t.aspectRatio && !(((i = (a = t.builderBlock) == null ? void 0 : a.children) == null ? void 0 : i.length) && t.fitContent) ? (d(), u("div", {
       key: 0,
-      class: "builder-image-sizer div-2pqqf5a7788",
-      style: w({
+      class: "builder-image-sizer div-2btisl9m7v3",
+      style: I({
         paddingTop: t.aspectRatio * 100 + "%"
       })
     }, null, 4)) : b("", !0),
-    ((d = (a = t.builderBlock) == null ? void 0 : a.children) == null ? void 0 : d.length) && t.fitContent ? E(e.$slots, "default", { key: 1 }, void 0, !0) : b("", !0),
-    !t.fitContent && e.children ? (l(), u("div", Te, [
-      E(e.$slots, "default", {}, void 0, !0)
+    ((l = (c = t.builderBlock) == null ? void 0 : c.children) == null ? void 0 : l.length) && t.fitContent ? A(e.$slots, "default", { key: 1 }, void 0, !0) : b("", !0),
+    !t.fitContent && e.children ? (d(), u("div", Ue, [
+      A(e.$slots, "default", {}, void 0, !0)
     ])) : b("", !0)
   ], 64);
 }
-const Ee = /* @__PURE__ */ g(_e, [["render", Re], ["__scopeId", "data-v-50c3283d"]]), je = {
-  name: "builder-text",
-  props: ["text"]
-}, Be = ["innerHTML"];
-function Fe(e, n, t, o, r, s) {
-  return l(), u("span", {
-    class: "builder-text",
-    innerHTML: t.text
-  }, null, 8, Be);
-}
-const Oe = /* @__PURE__ */ g(je, [["render", Fe]]), Ae = {
-  name: "builder-video",
-  props: [
-    "autoPlay",
-    "muted",
-    "controls",
-    "loop",
-    "playsInline",
-    "attributes",
-    "fit",
-    "position",
-    "video",
-    "posterImage"
-  ],
-  computed: {
-    videoProps() {
-      return {
-        ...this.autoPlay === !0 ? {
-          autoPlay: !0
-        } : {},
-        ...this.muted === !0 ? {
-          muted: !0
-        } : {},
-        ...this.controls === !0 ? {
-          controls: !0
-        } : {},
-        ...this.loop === !0 ? {
-          loop: !0
-        } : {},
-        ...this.playsInline === !0 ? {
-          playsInline: !0
-        } : {}
-      };
-    },
-    spreadProps() {
-      return {
-        ...this.attributes,
-        ...this.videoProps
-      };
-    }
-  }
-}, Pe = ["src", "poster"];
-function Ue(e, n, t, o, r, s) {
-  var i;
-  return l(), u("video", S({
-    style: {
-      width: "100%",
-      height: "100%",
-      ...(i = t.attributes) == null ? void 0 : i.style,
-      objectFit: t.fit,
-      objectPosition: t.position,
-      borderRadius: 1
-    },
-    src: t.video || "no-src",
-    poster: t.posterImage
-  }, s.spreadProps), null, 16, Pe);
-}
-const $e = /* @__PURE__ */ g(Ae, [["render", Ue]]), Ve = Symbol(), $ = {
+const We = /* @__PURE__ */ g(Oe, [["render", Ve], ["__scopeId", "data-v-44c710e2"]]), Ne = Symbol(), W = {
   Builder: {
     content: null,
     context: {},
     state: {},
+    setState() {
+    },
     apiKey: null,
     registeredComponents: {},
     inheritedStyles: {}
   },
-  key: Ve
+  key: Ne
 };
 function Le() {
-  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
-}
-function We() {
-  const e = Le().fetch;
-  if (typeof e > "u")
-    throw console.warn(
-      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
-      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
-    ), new Error("Builder SDK could not find a global `fetch` function");
-  return e;
-}
-const Q = We(), Me = (e) => {
-  if (e === "localhost" || e === "127.0.0.1")
-    return e;
-  const n = e.split(".");
-  return n.length > 2 ? n.slice(1).join(".") : e;
-}, Z = async ({
-  name: e,
-  canTrack: n
-}) => {
-  var t;
-  try {
-    return n ? (t = document.cookie.split("; ").find((o) => o.startsWith(`${e}=`))) == null ? void 0 : t.split("=")[1] : void 0;
-  } catch (o) {
-    console.debug("[COOKIE] GET error: ", o);
-    return;
-  }
-}, Ne = (e) => e.map(([n, t]) => t ? `${n}=${t}` : n).filter(C).join("; "), ze = [
-  ["secure", ""],
-  ["SameSite", "None"]
-], Ke = ({
-  name: e,
-  value: n,
-  expires: t
-}) => {
-  const r = (f() ? location.protocol === "https:" : !0) ? ze : [[]], s = t ? [["expires", t.toUTCString()]] : [[]], i = [
-    [e, n],
-    ...s,
-    ["path", "/"],
-    ["domain", Me(window.location.hostname)],
-    ...r
-  ];
-  return Ne(i);
-}, ee = async ({
-  name: e,
-  value: n,
-  expires: t,
-  canTrack: o
-}) => {
-  try {
-    if (!o)
-      return;
-    const r = Ke({ name: e, value: n, expires: t });
-    document.cookie = r;
-  } catch (r) {
-    console.warn("[COOKIE] SET error: ", r);
-  }
-}, He = "builderio.variations", te = (e) => `${He}.${e}`, qe = ({
-  contentId: e,
-  canTrack: n
-}) => Z({ name: te(e), canTrack: n }), De = ({
-  contentId: e,
-  canTrack: n,
-  value: t
-}) => ee({ name: te(e), value: t, canTrack: n }), Ge = (e) => C(e.id) && C(e.variations) && Object.keys(e.variations).length > 0, Je = ({
-  id: e,
-  variations: n
-}) => {
-  var r;
-  let t = 0;
-  const o = Math.random();
-  for (const s in n)
-    if (t += (r = n[s]) == null ? void 0 : r.testRatio, o < t)
-      return s;
-  return e;
-}, K = ({
-  item: e,
-  testGroupId: n
-}) => {
-  const t = e.variations[n];
-  return n === e.id || !t ? {
-    testVariationId: e.id,
-    testVariationName: "Default"
-  } : {
-    data: t.data,
-    testVariationId: t.id,
-    testVariationName: t.name || (t.id === e.id ? "Default" : "")
-  };
-}, Xe = async ({
-  item: e,
-  canTrack: n
-}) => {
-  const t = await qe({
-    canTrack: n,
-    contentId: e.id
-  }), o = t ? K({ item: e, testGroupId: t }) : void 0;
-  if (o)
-    return o;
-  {
-    const r = Je({
-      variations: e.variations,
-      id: e.id
-    });
-    return De({
-      contentId: e.id,
-      value: r,
-      canTrack: n
-    }).catch((s) => {
-      console.error("could not store A/B test variation: ", s);
-    }), K({ item: e, testGroupId: r });
-  }
-}, Ye = async ({
-  item: e,
-  canTrack: n
-}) => {
-  if (!Ge(e))
-    return;
-  const t = await Xe({ item: e, canTrack: n });
-  Object.assign(e, t);
-};
-function A(e, n = null, t = ".") {
-  return Object.keys(e).reduce((o, r) => {
-    const s = e[r], i = [n, r].filter(Boolean).join(t);
-    return [
-      typeof s == "object",
-      s !== null,
-      !(Array.isArray(s) && s.length === 0)
-    ].every(Boolean) ? { ...o, ...A(s, i, t) } : { ...o, [i]: s };
-  }, {});
-}
-const H = "builder.", Qe = "options.", Ze = (e) => {
-  const n = {};
-  return e.forEach((t, o) => {
-    n[o] = t;
-  }), n;
-}, et = (e) => {
-  if (!e)
-    return {};
-  const n = ne(e), t = {};
-  return Object.keys(n).forEach((o) => {
-    if (o.startsWith(H)) {
-      const r = o.replace(H, "").replace(Qe, "");
-      t[r] = n[o];
-    }
-  }), t;
-}, tt = () => {
-  if (!f())
-    return {};
-  const e = new URLSearchParams(window.location.search);
-  return et(e);
-}, ne = (e) => e instanceof URLSearchParams ? Ze(e) : e, nt = (e) => {
-  const {
-    limit: n = 30,
-    userAttributes: t,
-    query: o,
-    noTraverse: r = !1,
-    model: s,
-    apiKey: i,
-    includeRefs: c = !0,
-    locale: a
-  } = e;
-  if (!i)
-    throw new Error("Missing API key");
-  const d = new URL(
-    `https://cdn.builder.io/api/v2/content/${s}?apiKey=${i}&limit=${n}&noTraverse=${r}&includeRefs=${c}${a ? `&locale=${a}` : ""}`
-  ), m = {
-    ...tt(),
-    ...ne(e.options || {})
-  }, p = A(m);
-  for (const h in p)
-    d.searchParams.set(h, String(p[h]));
-  if (t && d.searchParams.set("userAttributes", JSON.stringify(t)), o) {
-    const h = A({ query: o });
-    for (const v in h)
-      d.searchParams.set(v, JSON.stringify(h[v]));
-  }
-  return d;
-};
-async function oe(e) {
-  return (await ot({ ...e, limit: 1 })).results[0] || null;
+  return f() && window.self !== window.top;
 }
-async function ot(e) {
-  const n = nt(e), o = await (await Q(n.href)).json(), r = e.canTrack !== !1;
-  if (r && Array.isArray(o.results))
-    for (const s of o.results)
-      await Ye({ item: s, canTrack: r });
-  return o;
+function y() {
+  return Le() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
-const st = () => Promise.resolve().then(() => xn).then((e) => e.default).catch((e) => {
+const Me = () => import("./block-styles.5fb6e927.js").then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component RenderContent at ../../components/render-content/render-content.vue",
+    "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
     e
   ), e;
-}), rt = {
-  name: "builder-symbol",
-  components: { RenderContent: x(st) },
-  props: ["attributes", "symbol", "dynamic"],
-  data() {
-    return { fetchedContent: null };
+}), $e = () => import("./render-block.017ccb02.js").then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
+    e
+  ), e;
+}), ze = {
+  name: "render-blocks",
+  components: {
+    RenderBlock: x($e),
+    BlockStyles: x(Me)
   },
+  props: ["blocks", "parent", "path", "styleProp"],
   inject: {
-    builderContext: $.key
-  },
-  watch: {
-    onUpdateHook0: {
-      handler() {
-        var n;
-        const e = this.symbol;
-        e && !e.content && !this.fetchedContent && e.model && ((n = this.builderContext) == null ? void 0 : n.apiKey) && oe({
-          model: e.model,
-          apiKey: this.builderContext.apiKey,
-          query: {
-            id: e.entry
-          }
-        }).then((t) => {
-          this.fetchedContent = t;
-        });
-      },
-      immediate: !0
-    }
+    builderContext: W.key
   },
   computed: {
     className() {
-      var e, n;
-      return [
-        ...Object.keys(this.attributes.class),
-        "builder-symbol",
-        (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
-        ((n = this.symbol) == null ? void 0 : n.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
-      ].filter(Boolean).join(" ");
-    },
-    contentToUse() {
       var e;
-      return ((e = this.symbol) == null ? void 0 : e.content) || this.fetchedContent;
-    },
-    onUpdateHook0() {
-      return {
-        0: this.symbol,
-        1: this.fetchedContent
-      };
+      return "builder-blocks" + ((e = this.blocks) != null && e.length ? "" : " no-blocks");
     }
   },
   methods: {
-    _classStringToObject(e) {
-      const n = {};
-      if (typeof e != "string")
-        return n;
-      const t = e.trim().split(/\s+/);
-      for (const o of t)
-        n[o] = !0;
-      return n;
-    }
-  }
-}, it = ["dataSet"];
-function at(e, n, t, o, r, s) {
-  var c, a, d, m, p;
-  const i = k("render-content");
-  return l(), u("div", S({
-    dataSet: {
-      class: s.className
-    },
-    class: s._classStringToObject(s.className)
-  }, t.attributes), [
-    X(i, {
-      apiKey: s.builderContext.apiKey,
-      context: s.builderContext.context,
-      customComponents: Object.values(s.builderContext.registeredComponents),
-      data: {
-        ...(c = t.symbol) == null ? void 0 : c.data,
-        ...s.builderContext.state,
-        ...(m = (d = (a = t.symbol) == null ? void 0 : a.content) == null ? void 0 : d.data) == null ? void 0 : m.state
-      },
-      model: (p = t.symbol) == null ? void 0 : p.model,
-      content: s.contentToUse
-    }, null, 8, ["apiKey", "context", "customComponents", "data", "model", "content"])
-  ], 16, it);
-}
-const ct = /* @__PURE__ */ g(rt, [["render", at]]), lt = {
-  name: "builder-button",
-  props: ["attributes", "text", "link", "openLinkInNewTab"]
-};
-const dt = ["href", "target"];
-function ut(e, n, t, o, r, s) {
-  return t.link ? (l(), u("a", S({
-    key: 0,
-    role: "button",
-    href: t.link,
-    target: t.openLinkInNewTab ? "_blank" : void 0
-  }, t.attributes), W(t.text), 17, dt)) : (l(), u("button", S({
-    key: 1,
-    class: "button-4o9pb21oca6"
-  }, t.attributes), W(t.text), 17));
-}
-const mt = /* @__PURE__ */ g(lt, [["render", ut], ["__scopeId", "data-v-f9067262"]]), pt = {
-  name: "builder-section-component",
-  props: ["attributes", "maxWidth"]
-};
-function ht(e, n, t, o, r, s) {
-  return l(), u("section", S({
-    style: {
-      width: "100%",
-      alignSelf: "stretch",
-      flexGrow: "1",
-      boxSizing: "border-box",
-      maxWidth: `${t.maxWidth && typeof t.maxWidth == "number" ? t.maxWidth : 1200}px`,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      marginLeft: "auto",
-      marginRight: "auto"
+    onClick() {
+      var e, n;
+      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: this.parent,
+            dataPath: this.path
+          }
+        },
+        "*"
+      ));
+    },
+    onMouseEnter() {
+      var e, n;
+      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: this.parent,
+            dataPath: this.path
+          }
+        },
+        "*"
+      ));
+    },
+    _classStringToObject(e) {
+      const n = {};
+      if (typeof e != "string")
+        return n;
+      const t = e.trim().split(/\s+/);
+      for (const o of t)
+        n[o] = !0;
+      return n;
     }
-  }, t.attributes), [
-    E(e.$slots, "default")
-  ], 16);
-}
-const ft = /* @__PURE__ */ g(pt, [["render", ht]]), gt = {
-  name: "builder-fragment-component",
-  props: []
+  }
 };
-function bt(e, n, t, o, r, s) {
-  return l(), u("span", null, [
-    E(e.$slots, "default")
-  ]);
+const Ke = ["builder-path", "builder-parent-id", "dataSet"];
+function He(e, n, t, o, r, s) {
+  const a = k("render-block"), i = k("block-styles");
+  return d(), u("div", {
+    class: j(s._classStringToObject(s.className + " div-20vehov4ay6")),
+    "builder-path": t.path,
+    "builder-parent-id": t.parent,
+    dataSet: {
+      class: s.className
+    },
+    style: I(t.styleProp),
+    onClick: n[0] || (n[0] = (c) => s.onClick()),
+    onMouseenter: n[1] || (n[1] = (c) => s.onMouseEnter())
+  }, [
+    t.blocks ? (d(!0), u(E, { key: 0 }, F(t.blocks, (c, l) => (d(), T(a, {
+      key: "render-block-" + c.id,
+      block: c,
+      context: s.builderContext
+    }, null, 8, ["block", "context"]))), 128)) : b("", !0),
+    t.blocks ? (d(!0), u(E, { key: 1 }, F(t.blocks, (c, l) => (d(), T(i, {
+      key: "block-style-" + c.id,
+      block: c,
+      context: s.builderContext
+    }, null, 8, ["block", "context"]))), 128)) : b("", !0)
+  ], 46, Ke);
 }
-const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
+const De = /* @__PURE__ */ g(ze, [["render", He], ["__scopeId", "data-v-b5395d79"]]), ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: De
+}, Symbol.toStringTag, { value: "Module" })), qe = {
   name: "Core:Button",
-  builtIn: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
     appearance: "none",
@@ -901,12 +645,11 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
   ],
   static: !0,
   noWrap: !0
-}, B = (e) => {
+}, P = (e) => {
   const n = e.toString().trim();
   return `return (${!n.startsWith("function") && !n.startsWith("(") ? "function " : ""}${n}).apply(this, arguments)`;
-}, xt = {
+}, Ge = {
   name: "Columns",
-  builtIn: !0,
   inputs: [
     {
       name: "columns",
@@ -1092,7 +835,7 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
           ]
         }
       ],
-      onChange: B((e) => {
+      onChange: P((e) => {
         function n() {
           t.forEach((o) => {
             o.delete("width");
@@ -1103,7 +846,7 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
           (r) => r.get("width")
         ) && (!!t.find(
           (s) => !s.get("width")
-        ) || t.reduce((c, a) => c + a.get("width"), 0) !== 100) && n();
+        ) || t.reduce((i, c) => i + c.get("width"), 0) !== 100) && n();
       })
     },
     {
@@ -1129,17 +872,15 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       advanced: !0
     }
   ]
-}, kt = {
+}, Je = {
   name: "Fragment",
   static: !0,
   hidden: !0,
-  builtIn: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, Ct = {
+}, Xe = {
   name: "Image",
   static: !0,
-  builtIn: !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",
   defaultStyles: {
     position: "relative",
@@ -1156,32 +897,32 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: !0,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: B(
+      onChange: P(
         (e) => {
           e.delete("srcset"), e.delete("noWebp");
-          function t(i, c = 6e4) {
-            return new Promise((a, d) => {
+          function t(a, i = 6e4) {
+            return new Promise((c, l) => {
               const m = document.createElement("img");
               let p = !1;
               m.onload = () => {
-                p = !0, a(m);
+                p = !0, c(m);
               }, m.addEventListener("error", (h) => {
-                console.warn("Image load failed", h.error), d(h.error);
-              }), m.src = i, setTimeout(() => {
-                p || d(new Error("Image load timed out"));
-              }, c);
+                console.warn("Image load failed", h.error), l(h.error);
+              }), m.src = a, setTimeout(() => {
+                p || l(new Error("Image load timed out"));
+              }, i);
             });
           }
-          function o(i) {
-            return Math.round(i * 1e3) / 1e3;
+          function o(a) {
+            return Math.round(a * 1e3) / 1e3;
           }
           const r = e.get("image"), s = e.get("aspectRatio");
-          if (fetch(r).then((i) => i.blob()).then((i) => {
-            i.type.includes("svg") && e.set("noWebp", !0);
+          if (fetch(r).then((a) => a.blob()).then((a) => {
+            a.type.includes("svg") && e.set("noWebp", !0);
           }), r && (!s || s === 0.7041))
-            return t(r).then((i) => {
-              const c = e.get("aspectRatio");
-              e.get("image") === r && (!c || c === 0.7041) && i.width && i.height && (e.set("aspectRatio", o(i.height / i.width)), e.set("height", i.height), e.set("width", i.width));
+            return t(r).then((a) => {
+              const i = e.get("aspectRatio");
+              e.get("image") === r && (!i || i === 0.7041) && a.width && a.height && (e.set("aspectRatio", o(a.height / a.width)), e.set("height", a.height), e.set("width", a.width));
             });
         }
       )
@@ -1264,10 +1005,9 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       defaultValue: 0.7041
     }
   ]
-}, St = {
+}, Ye = {
   name: "Core:Section",
   static: !0,
-  builtIn: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
   inputs: [
     {
@@ -1308,50 +1048,371 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
         }
       }
     }
-  ]
-}, _t = {
-  name: "Symbol",
-  noWrap: !0,
-  static: !0,
-  builtIn: !0,
-  inputs: [
-    {
-      name: "symbol",
-      type: "uiSymbol"
-    },
-    {
-      name: "dataOnly",
-      helperText: "Make this a data symbol that doesn't display any UI",
-      type: "boolean",
-      defaultValue: !1,
-      advanced: !0,
-      hideFromUI: !0
+  ]
+}, Qe = {
+  name: "builder-section-component",
+  props: ["maxWidth", "attributes"],
+  methods: {
+    filterAttrs: function(n = {}, t) {
+      const o = "v-on:", r = (i) => i.startsWith(o), s = (i) => !i.startsWith(o), a = (i) => i.replace(o, "");
+      return Object.keys(n).filter(t ? r : s).reduce(
+        (i, c) => ({
+          ...i,
+          [a(c)]: n[c]
+        }),
+        {}
+      );
+    }
+  }
+};
+function Ze(e, n, t, o, r, s) {
+  return d(), u("section", _({
+    style: {
+      width: "100%",
+      alignSelf: "stretch",
+      flexGrow: "1",
+      boxSizing: "border-box",
+      maxWidth: `${t.maxWidth && typeof t.maxWidth == "number" ? t.maxWidth : 1200}px`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  }, s.filterAttrs(t.attributes, !1), w(s.filterAttrs(t.attributes, !0), !0)), [
+    A(e.$slots, "default")
+  ], 16);
+}
+const et = /* @__PURE__ */ g(Qe, [["render", Ze]]), tt = {
+  name: "Symbol",
+  noWrap: !0,
+  static: !0,
+  inputs: [
+    {
+      name: "symbol",
+      type: "uiSymbol"
+    },
+    {
+      name: "dataOnly",
+      helperText: "Make this a data symbol that doesn't display any UI",
+      type: "boolean",
+      defaultValue: !1,
+      advanced: !0,
+      hideFromUI: !0
+    },
+    {
+      name: "inheritState",
+      helperText: "Inherit the parent component state and data",
+      type: "boolean",
+      defaultValue: !1,
+      advanced: !0
+    },
+    {
+      name: "renderToLiquid",
+      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+      type: "boolean",
+      defaultValue: !1,
+      advanced: !0,
+      hideFromUI: !0
+    },
+    {
+      name: "useChildren",
+      hideFromUI: !0,
+      type: "boolean"
+    }
+  ]
+};
+function nt() {
+  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
+}
+function ot() {
+  const e = nt().fetch;
+  if (typeof e > "u")
+    throw console.warn(
+      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
+    ), new Error("Builder SDK could not find a global `fetch` function");
+  return e;
+}
+const te = ot(), st = (e) => {
+  if (e === "localhost" || e === "127.0.0.1")
+    return e;
+  const n = e.split(".");
+  return n.length > 2 ? n.slice(1).join(".") : e;
+}, ne = async ({
+  name: e,
+  canTrack: n
+}) => {
+  var t;
+  try {
+    return n ? (t = document.cookie.split("; ").find((o) => o.startsWith(`${e}=`))) == null ? void 0 : t.split("=")[1] : void 0;
+  } catch (o) {
+    console.debug("[COOKIE] GET error: ", o);
+    return;
+  }
+}, rt = (e) => e.map(([n, t]) => t ? `${n}=${t}` : n).filter(S).join("; "), it = [
+  ["secure", ""],
+  ["SameSite", "None"]
+], at = ({
+  name: e,
+  value: n,
+  expires: t
+}) => {
+  const r = (f() ? location.protocol === "https:" : !0) ? it : [[]], s = t ? [["expires", t.toUTCString()]] : [[]], a = [
+    [e, n],
+    ...s,
+    ["path", "/"],
+    ["domain", st(window.location.hostname)],
+    ...r
+  ];
+  return rt(a);
+}, oe = async ({
+  name: e,
+  value: n,
+  expires: t,
+  canTrack: o
+}) => {
+  try {
+    if (!o)
+      return;
+    const r = at({ name: e, value: n, expires: t });
+    document.cookie = r;
+  } catch (r) {
+    console.warn("[COOKIE] SET error: ", r);
+  }
+}, ct = "builderio.variations", se = (e) => `${ct}.${e}`, lt = ({
+  contentId: e,
+  canTrack: n
+}) => ne({ name: se(e), canTrack: n }), dt = ({
+  contentId: e,
+  canTrack: n,
+  value: t
+}) => oe({ name: se(e), value: t, canTrack: n }), ut = (e) => S(e.id) && S(e.variations) && Object.keys(e.variations).length > 0, mt = ({
+  id: e,
+  variations: n
+}) => {
+  var r;
+  let t = 0;
+  const o = Math.random();
+  for (const s in n)
+    if (t += (r = n[s]) == null ? void 0 : r.testRatio, o < t)
+      return s;
+  return e;
+}, D = ({
+  item: e,
+  testGroupId: n
+}) => {
+  const t = e.variations[n];
+  return n === e.id || !t ? {
+    testVariationId: e.id,
+    testVariationName: "Default"
+  } : {
+    data: t.data,
+    testVariationId: t.id,
+    testVariationName: t.name || (t.id === e.id ? "Default" : "")
+  };
+}, pt = async ({
+  item: e,
+  canTrack: n
+}) => {
+  const t = await lt({
+    canTrack: n,
+    contentId: e.id
+  }), o = t ? D({ item: e, testGroupId: t }) : void 0;
+  if (o)
+    return o;
+  {
+    const r = mt({
+      variations: e.variations,
+      id: e.id
+    });
+    return dt({
+      contentId: e.id,
+      value: r,
+      canTrack: n
+    }).catch((s) => {
+      console.error("could not store A/B test variation: ", s);
+    }), D({ item: e, testGroupId: r });
+  }
+}, ht = async ({
+  item: e,
+  canTrack: n
+}) => {
+  if (!ut(e))
+    return;
+  const t = await pt({ item: e, canTrack: n });
+  Object.assign(e, t);
+};
+function B(e, n = null, t = ".") {
+  return Object.keys(e).reduce((o, r) => {
+    const s = e[r], a = [n, r].filter(Boolean).join(t);
+    return [
+      typeof s == "object",
+      s !== null,
+      !(Array.isArray(s) && s.length === 0)
+    ].every(Boolean) ? { ...o, ...B(s, a, t) } : { ...o, [a]: s };
+  }, {});
+}
+const q = "builder.", ft = "options.", gt = (e) => {
+  const n = {};
+  return e.forEach((t, o) => {
+    n[o] = t;
+  }), n;
+}, bt = (e) => {
+  if (!e)
+    return {};
+  const n = re(e), t = {};
+  return Object.keys(n).forEach((o) => {
+    if (o.startsWith(q)) {
+      const r = o.replace(q, "").replace(ft, "");
+      t[r] = n[o];
+    }
+  }), t;
+}, yt = () => {
+  if (!f())
+    return {};
+  const e = new URLSearchParams(window.location.search);
+  return bt(e);
+}, re = (e) => e instanceof URLSearchParams ? gt(e) : e, vt = (e) => {
+  const {
+    limit: n = 30,
+    userAttributes: t,
+    query: o,
+    noTraverse: r = !1,
+    model: s,
+    apiKey: a,
+    includeRefs: i = !0,
+    locale: c
+  } = e;
+  if (!a)
+    throw new Error("Missing API key");
+  const l = new URL(
+    `https://cdn.builder.io/api/v2/content/${s}?apiKey=${a}&limit=${n}&noTraverse=${r}&includeRefs=${i}${c ? `&locale=${c}` : ""}`
+  ), m = {
+    ...yt(),
+    ...re(e.options || {})
+  }, p = B(m);
+  for (const h in p)
+    l.searchParams.set(h, String(p[h]));
+  if (t && l.searchParams.set("userAttributes", JSON.stringify(t)), o) {
+    const h = B({ query: o });
+    for (const v in h)
+      l.searchParams.set(v, JSON.stringify(h[v]));
+  }
+  return l;
+};
+async function ie(e) {
+  return (await xt({ ...e, limit: 1 })).results[0] || null;
+}
+async function xt(e) {
+  const n = vt(e), o = await (await te(n.href)).json(), r = e.canTrack !== !1;
+  if (r && Array.isArray(o.results))
+    for (const s of o.results)
+      await ht({ item: s, canTrack: r });
+  return o;
+}
+const kt = () => Promise.resolve().then(() => An).then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component RenderContent at ../../components/render-content/render-content.vue",
+    e
+  ), e;
+}), St = {
+  name: "builder-symbol",
+  components: { RenderContent: x(kt) },
+  props: ["attributes", "symbol", "dynamic"],
+  data() {
+    return { fetchedContent: null };
+  },
+  inject: {
+    builderContext: W.key
+  },
+  watch: {
+    onUpdateHook0: {
+      handler() {
+        var n;
+        const e = this.symbol;
+        e && !e.content && !this.fetchedContent && e.model && ((n = this.builderContext) == null ? void 0 : n.apiKey) && ie({
+          model: e.model,
+          apiKey: this.builderContext.apiKey,
+          query: {
+            id: e.entry
+          }
+        }).then((t) => {
+          this.fetchedContent = t;
+        });
+      },
+      immediate: !0
+    }
+  },
+  computed: {
+    className() {
+      var e, n;
+      return [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
+        ((n = this.symbol) == null ? void 0 : n.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" ");
     },
-    {
-      name: "inheritState",
-      helperText: "Inherit the parent component state and data",
-      type: "boolean",
-      defaultValue: !1,
-      advanced: !0
+    contentToUse() {
+      var e;
+      return ((e = this.symbol) == null ? void 0 : e.content) || this.fetchedContent;
     },
-    {
-      name: "renderToLiquid",
-      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
-      type: "boolean",
-      defaultValue: !1,
-      advanced: !0,
-      hideFromUI: !0
+    onUpdateHook0() {
+      return {
+        0: this.symbol,
+        1: this.fetchedContent
+      };
+    }
+  },
+  methods: {
+    filterAttrs: function(n = {}, t) {
+      const o = "v-on:", r = (i) => i.startsWith(o), s = (i) => !i.startsWith(o), a = (i) => i.replace(o, "");
+      return Object.keys(n).filter(t ? r : s).reduce(
+        (i, c) => ({
+          ...i,
+          [a(c)]: n[c]
+        }),
+        {}
+      );
     },
-    {
-      name: "useChildren",
-      hideFromUI: !0,
-      type: "boolean"
+    _classStringToObject(e) {
+      const n = {};
+      if (typeof e != "string")
+        return n;
+      const t = e.trim().split(/\s+/);
+      for (const o of t)
+        n[o] = !0;
+      return n;
     }
-  ]
-}, wt = {
+  }
+}, _t = ["dataSet"];
+function Ct(e, n, t, o, r, s) {
+  var i, c, l, m, p;
+  const a = k("render-content");
+  return d(), u("div", _({
+    dataSet: {
+      class: s.className
+    },
+    class: s._classStringToObject(s.className)
+  }, s.filterAttrs(t.attributes, !1), w(s.filterAttrs(t.attributes, !0), !0)), [
+    Q(a, {
+      apiKey: s.builderContext.apiKey,
+      context: s.builderContext.context,
+      customComponents: Object.values(s.builderContext.registeredComponents),
+      data: {
+        ...(i = t.symbol) == null ? void 0 : i.data,
+        ...s.builderContext.state,
+        ...(m = (l = (c = t.symbol) == null ? void 0 : c.content) == null ? void 0 : l.data) == null ? void 0 : m.state
+      },
+      model: (p = t.symbol) == null ? void 0 : p.model,
+      content: s.contentToUse
+    }, null, 8, ["apiKey", "context", "customComponents", "data", "model", "content"])
+  ], 16, _t);
+}
+const wt = /* @__PURE__ */ g(St, [["render", Ct]]), It = {
   name: "Text",
   static: !0,
-  builtIn: !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",
   inputs: [
     {
@@ -1368,10 +1429,19 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
     height: "auto",
     textAlign: "center"
   }
-}, It = {
+}, Tt = {
+  name: "builder-text",
+  props: ["text"]
+}, Rt = ["innerHTML"];
+function Et(e, n, t, o, r, s) {
+  return d(), u("span", {
+    class: "builder-text",
+    innerHTML: t.text
+  }, null, 8, Rt);
+}
+const At = /* @__PURE__ */ g(Tt, [["render", Et]]), jt = {
   name: "Video",
   canHaveChildren: !0,
-  builtIn: !0,
   defaultStyles: {
     minHeight: "20px",
     minWidth: "20px"
@@ -1470,10 +1540,66 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       advanced: !0
     }
   ]
-}, Tt = {
+}, Pt = {
+  name: "builder-video",
+  props: [
+    "autoPlay",
+    "muted",
+    "controls",
+    "loop",
+    "playsInline",
+    "attributes",
+    "fit",
+    "position",
+    "video",
+    "posterImage"
+  ],
+  computed: {
+    videoProps() {
+      return {
+        ...this.autoPlay === !0 ? {
+          autoPlay: !0
+        } : {},
+        ...this.muted === !0 ? {
+          muted: !0
+        } : {},
+        ...this.controls === !0 ? {
+          controls: !0
+        } : {},
+        ...this.loop === !0 ? {
+          loop: !0
+        } : {},
+        ...this.playsInline === !0 ? {
+          playsInline: !0
+        } : {}
+      };
+    },
+    spreadProps() {
+      return {
+        ...this.attributes,
+        ...this.videoProps
+      };
+    }
+  }
+}, Ot = ["src", "poster"];
+function Ft(e, n, t, o, r, s) {
+  var a;
+  return d(), u("video", _({
+    style: {
+      width: "100%",
+      height: "100%",
+      ...(a = t.attributes) == null ? void 0 : a.style,
+      objectFit: t.fit,
+      objectPosition: t.position,
+      borderRadius: 1
+    },
+    src: t.video || "no-src",
+    poster: t.posterImage
+  }, s.spreadProps), null, 16, Ot);
+}
+const Bt = /* @__PURE__ */ g(Pt, [["render", Ft]]), Ut = {
   name: "Embed",
   static: !0,
-  builtIn: !0,
   inputs: [
     {
       name: "url",
@@ -1481,7 +1607,7 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       required: !0,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: B(
+      onChange: P(
         (e) => {
           const n = e.get("url");
           if (n)
@@ -1506,11 +1632,11 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       hideFromUI: !0
     }
   ]
-}, Rt = [
+}, Vt = [
   "text/javascript",
   "application/javascript",
   "application/ecmascript"
-], Et = (e) => Rt.includes(e.type), jt = {
+], Wt = (e) => Vt.includes(e.type), Nt = {
   name: "builder-embed",
   props: ["content"],
   data() {
@@ -1543,7 +1669,7 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
           this.scriptsInserted.push(t.src);
           const o = document.createElement("script");
           o.async = !0, o.src = t.src, document.head.appendChild(o);
-        } else if (Et(t) && !this.scriptsRun.includes(t.innerText))
+        } else if (Wt(t) && !this.scriptsRun.includes(t.innerText))
           try {
             this.scriptsRun.push(t.innerText), new Function(t.innerText)();
           } catch (o) {
@@ -1552,22 +1678,15 @@ const yt = /* @__PURE__ */ g(gt, [["render", bt]]), vt = {
       }
     }
   }
-}, Bt = ["innerHTML"];
-function Ft(e, n, t, o, r, s) {
-  return l(), u("div", {
+}, Lt = ["innerHTML"];
+function Mt(e, n, t, o, r, s) {
+  return d(), u("div", {
     class: "builder-embed",
     ref: "elem",
     innerHTML: t.content
-  }, null, 8, Bt);
-}
-const Ot = /* @__PURE__ */ g(jt, [["render", Ft]]);
-function At() {
-  return f() && window.self !== window.top;
-}
-function y() {
-  return At() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+  }, null, 8, Lt);
 }
-const Pt = {
+const $t = /* @__PURE__ */ g(Nt, [["render", Mt]]), zt = {
   name: "builder-img-component",
   props: [
     "backgroundSize",
@@ -1579,10 +1698,22 @@ const Pt = {
   ],
   data() {
     return { isEditing: y };
+  },
+  methods: {
+    filterAttrs: function(n = {}, t) {
+      const o = "v-on:", r = (i) => i.startsWith(o), s = (i) => !i.startsWith(o), a = (i) => i.replace(o, "");
+      return Object.keys(n).filter(t ? r : s).reduce(
+        (i, c) => ({
+          ...i,
+          [a(c)]: n[c]
+        }),
+        {}
+      );
+    }
   }
-}, Ut = ["alt", "src"];
-function $t(e, n, t, o, r, s) {
-  return l(), u("img", S({
+}, Kt = ["alt", "src"];
+function Ht(e, n, t, o, r, s) {
+  return d(), u("img", _({
     style: {
       objectFit: t.backgroundSize || "cover",
       objectPosition: t.backgroundPosition || "center"
@@ -1590,12 +1721,11 @@ function $t(e, n, t, o, r, s) {
     key: r.isEditing() && t.imgSrc || "default-key",
     alt: t.altText,
     src: t.imgSrc || t.image
-  }, t.attributes), null, 16, Ut);
+  }, s.filterAttrs(t.attributes, !1), w(s.filterAttrs(t.attributes, !0), !0)), null, 16, Kt);
 }
-const Vt = /* @__PURE__ */ g(Pt, [["render", $t]]), Lt = {
+const Dt = /* @__PURE__ */ g(zt, [["render", Ht]]), qt = {
   name: "Raw:Img",
   hideFromInsertMenu: !0,
-  builtIn: !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",
   inputs: [
     {
@@ -1608,7 +1738,7 @@ const Vt = /* @__PURE__ */ g(Pt, [["render", $t]]), Lt = {
   ],
   noWrap: !0,
   static: !0
-}, Wt = {
+}, Gt = {
   name: "builder-custom-code",
   props: ["replaceNodes", "code"],
   data() {
@@ -1655,9 +1785,9 @@ const Vt = /* @__PURE__ */ g(Pt, [["render", $t]]), Lt = {
       return n;
     }
   }
-}, Mt = ["innerHTML"];
-function Nt(e, n, t, o, r, s) {
-  return l(), u("div", {
+}, Jt = ["innerHTML"];
+function Xt(e, n, t, o, r, s) {
+  return d(), u("div", {
     ref: "elem",
     class: j(
       s._classStringToObject(
@@ -1665,12 +1795,11 @@ function Nt(e, n, t, o, r, s) {
       )
     ),
     innerHTML: t.code
-  }, null, 10, Mt);
+  }, null, 10, Jt);
 }
-const zt = /* @__PURE__ */ g(Wt, [["render", Nt]]), Kt = {
+const Yt = /* @__PURE__ */ g(Gt, [["render", Xt]]), Qt = {
   name: "Custom Code",
   static: !0,
-  builtIn: !0,
   requiredPermissions: ["editCode"],
   inputs: [
     {
@@ -1694,20 +1823,20 @@ const zt = /* @__PURE__ */ g(Wt, [["render", Nt]]), Kt = {
       advanced: !0
     }
   ]
-}, Ht = () => [
-  { component: ke, ...xt },
-  { component: Ee, ...Ct },
-  { component: Vt, ...Lt },
-  { component: Oe, ...wt },
-  { component: $e, ...It },
-  { component: ct, ..._t },
-  { component: mt, ...vt },
-  { component: ft, ...St },
-  { component: yt, ...kt },
-  { component: Ot, ...Tt },
-  { component: zt, ...Kt }
+}, Zt = () => [
+  { component: ve, ...qe },
+  { component: Te, ...Ge },
+  { component: Yt, ...Qt },
+  { component: $t, ...Ut },
+  { component: Ae, ...Je },
+  { component: We, ...Xe },
+  { component: Dt, ...qt },
+  { component: et, ...Ye },
+  { component: wt, ...tt },
+  { component: At, ...It },
+  { component: Bt, ...jt }
 ];
-function q({
+function G({
   code: e,
   context: n,
   state: t,
@@ -1722,7 +1851,7 @@ function q({
     isEditing: y(),
     isBrowser: f(),
     isServer: !f()
-  }, c = r && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e;
+  }, i = r && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e;
   try {
     return new Function(
       "builder",
@@ -1730,127 +1859,127 @@ function q({
       "state",
       "context",
       "event",
-      c
+      i
     )(s, s, t, n, o);
-  } catch (a) {
+  } catch (c) {
     console.warn(
       `Builder custom code error: 
  While Evaluating: 
  `,
-      c,
+      i,
       `
 `,
-      a
+      c
     );
   }
 }
-function qt() {
+function en() {
   return !f() || y() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-const se = [];
-function jn(e, n) {
-  return se.push({ component: e, ...n }), console.warn(
+const ae = [];
+function Fn(e, n) {
+  return ae.push({ component: e, ...n }), console.warn(
     "registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK."
   ), e;
 }
-const Dt = ({
+const tn = ({
   component: e,
   ...n
 }) => ({
   type: "builder.registerComponent",
-  data: Jt(n)
-}), Gt = (e) => typeof e == "function" ? B(e) : U(e), Jt = ({
+  data: on(n)
+}), nn = (e) => typeof e == "function" ? P(e) : V(e), on = ({
   inputs: e,
   ...n
 }) => ({
-  ...U(n),
+  ...V(n),
   inputs: e == null ? void 0 : e.map(
     (t) => Object.entries(t).reduce(
       (o, [r, s]) => ({
         ...o,
-        [r]: Gt(s)
+        [r]: nn(s)
       }),
       {}
     )
   )
 });
-function Xt() {
+function sn() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
     const n = Math.random() * 16 | 0;
     return (e == "x" ? n : n & 3 | 8).toString(16);
   });
 }
-function re() {
-  return Xt().replace(/-/g, "");
+function ce() {
+  return sn().replace(/-/g, "");
 }
-const ie = "builderSessionId", Yt = async ({
+const le = "builderSessionId", rn = async ({
   canTrack: e
 }) => {
   if (!e)
     return;
-  const n = await Z({
-    name: ie,
+  const n = await ne({
+    name: le,
     canTrack: e
   });
-  if (C(n))
+  if (S(n))
     return n;
   {
-    const t = Qt();
-    return Zt({ id: t, canTrack: e }), t;
+    const t = an();
+    return cn({ id: t, canTrack: e }), t;
   }
-}, Qt = () => re(), Zt = ({
+}, an = () => ce(), cn = ({
   id: e,
   canTrack: n
-}) => ee({ name: ie, value: e, canTrack: n }), ae = () => f() && typeof localStorage < "u" ? localStorage : void 0, en = ({
+}) => oe({ name: le, value: e, canTrack: n }), de = () => f() && typeof localStorage < "u" ? localStorage : void 0, ln = ({
   key: e,
   canTrack: n
 }) => {
   var t;
   try {
-    return n ? (t = ae()) == null ? void 0 : t.getItem(e) : void 0;
+    return n ? (t = de()) == null ? void 0 : t.getItem(e) : void 0;
   } catch (o) {
     console.debug("[LocalStorage] GET error: ", o);
     return;
   }
-}, tn = ({
+}, dn = ({
   key: e,
   canTrack: n,
   value: t
 }) => {
   var o;
   try {
-    n && ((o = ae()) == null || o.setItem(e, t));
+    n && ((o = de()) == null || o.setItem(e, t));
   } catch (r) {
     console.debug("[LocalStorage] SET error: ", r);
   }
-}, ce = "builderVisitorId", nn = ({ canTrack: e }) => {
+}, ue = "builderVisitorId", un = ({ canTrack: e }) => {
   if (!e)
     return;
-  const n = en({
-    key: ce,
+  const n = ln({
+    key: ue,
     canTrack: e
   });
-  if (C(n))
+  if (S(n))
     return n;
   {
-    const t = on();
-    return sn({ id: t, canTrack: e }), t;
+    const t = mn();
+    return pn({ id: t, canTrack: e }), t;
   }
-}, on = () => re(), sn = ({
+}, mn = () => ce(), pn = ({
   id: e,
   canTrack: n
-}) => tn({
-  key: ce,
+}) => dn({
+  key: ue,
   value: e,
   canTrack: n
-}), rn = () => {
+}), hn = () => {
   if (f()) {
     const e = new URL(location.href);
     return e.pathname === "" && (e.pathname = "/"), e;
   } else
     return console.warn("Cannot get location for tracking in non-browser environment"), null;
-}, an = () => typeof navigator == "object" && navigator.userAgent || "", cn = () => {
-  const e = an(), n = {
+}, fn = () => typeof navigator == "object" && navigator.userAgent || "", gn = () => {
+  const e = fn(), n = {
     Android() {
       return e.match(/Android/i);
     },
@@ -1867,25 +1996,25 @@ const ie = "builderSessionId", Yt = async ({
       return e.match(/IEMobile/i) || e.match(/WPDesktop/i);
     },
     any() {
-      return n.Android() || n.BlackBerry() || n.iOS() || n.Opera() || n.Windows() || T === "reactNative";
+      return n.Android() || n.BlackBerry() || n.iOS() || n.Opera() || n.Windows() || R === "reactNative";
     }
-  }, t = e.match(/Tablet|iPad/i), o = rn();
+  }, t = e.match(/Tablet|iPad/i), o = hn();
   return {
     urlPath: o == null ? void 0 : o.pathname,
     host: (o == null ? void 0 : o.host) || (o == null ? void 0 : o.hostname),
     device: t ? "tablet" : n.any() ? "mobile" : "desktop"
   };
-}, ln = async ({
+}, bn = async ({
   canTrack: e
 }) => {
   if (!e)
     return { visitorId: void 0, sessionId: void 0 };
-  const n = await Yt({ canTrack: e }), t = nn({ canTrack: e });
+  const n = await rn({ canTrack: e }), t = un({ canTrack: e });
   return {
     sessionId: n,
     visitorId: t
   };
-}, dn = async ({
+}, yn = async ({
   type: e,
   canTrack: n,
   apiKey: t,
@@ -1899,23 +2028,23 @@ const ie = "builderSessionId", Yt = async ({
       url: location.href,
       ...o
     },
-    ...await ln({ canTrack: n }),
-    userAttributes: cn(),
+    ...await bn({ canTrack: n }),
+    userAttributes: gn(),
     ownerId: t
   }
 });
-async function P(e) {
+async function U(e) {
   if (!e.apiKey) {
     console.error(
       "[Builder.io]: Missing API key for track call. Please provide your API key."
     );
     return;
   }
-  if (!!e.canTrack && !y() && !!(f() || T === "reactNative"))
+  if (!!e.canTrack && !y() && !!(f() || R === "reactNative"))
     return fetch("https://builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await dn(e)]
+        events: [await yn(e)]
       }),
       headers: {
         "content-type": "application/json"
@@ -1925,11 +2054,11 @@ async function P(e) {
       console.error("Failed to track: ", n);
     });
 }
-const Bn = (e) => P({ ...e, canTrack: !0 });
-function D(e) {
+const Bn = (e) => U({ ...e, canTrack: !0 });
+function J(e) {
   return Math.round(e * 1e3) / 1e3;
 }
-const un = (e, n, t = !0) => {
+const vn = (e, n, t = !0) => {
   if (!(e instanceof HTMLElement))
     return null;
   let o = t ? e : e.parentElement;
@@ -1940,52 +2069,79 @@ const un = (e, n, t = !0) => {
       return o;
   } while (o = o.parentElement);
   return null;
-}, mn = (e) => un(e, (n) => {
+}, xn = (e) => vn(e, (n) => {
   const t = n.getAttribute("builder-id") || n.id;
   return Boolean((t == null ? void 0 : t.indexOf("builder-")) === 0);
-}), G = ({
+}), X = ({
   event: e,
   target: n
 }) => {
-  const t = n.getBoundingClientRect(), o = e.clientX - t.left, r = e.clientY - t.top, s = D(o / t.width), i = D(r / t.height);
+  const t = n.getBoundingClientRect(), o = e.clientX - t.left, r = e.clientY - t.top, s = J(o / t.width), a = J(r / t.height);
   return {
     x: s,
-    y: i
+    y: a
   };
-}, pn = (e) => {
-  const n = e.target, t = n && mn(n), o = (t == null ? void 0 : t.getAttribute("builder-id")) || (t == null ? void 0 : t.id);
+}, kn = (e) => {
+  const n = e.target, t = n && xn(n), o = (t == null ? void 0 : t.getAttribute("builder-id")) || (t == null ? void 0 : t.id);
   return {
     targetBuilderElement: o || void 0,
     metadata: {
-      targetOffset: n ? G({ event: e, target: n }) : void 0,
-      builderTargetOffset: t ? G({ event: e, target: t }) : void 0,
+      targetOffset: n ? X({ event: e, target: n }) : void 0,
+      builderTargetOffset: t ? X({ event: e, target: t }) : void 0,
       builderElementIndex: t && o ? [].slice.call(document.getElementsByClassName(o)).indexOf(t) : void 0
     }
   };
-}, hn = () => Promise.resolve().then(() => le).then((e) => e.default).catch((e) => {
+}, Sn = ({
+  content: e,
+  data: n,
+  locale: t
+}) => {
+  var s, a, i;
+  const o = {};
+  (a = (s = e == null ? void 0 : e.data) == null ? void 0 : s.inputs) == null || a.forEach((c) => {
+    var l;
+    c.name && c.defaultValue !== void 0 && ((l = e == null ? void 0 : e.data) == null ? void 0 : l.state) && e.data.state[c.name] === void 0 && (o[c.name] = c.defaultValue);
+  });
+  const r = {
+    ...(i = e == null ? void 0 : e.data) == null ? void 0 : i.state,
+    ...n,
+    ...t ? { locale: t } : {}
+  };
+  return { ...o, ...r };
+}, _n = ({
+  content: e,
+  data: n
+}) => e ? {
+  ...e,
+  data: {
+    ...e == null ? void 0 : e.data,
+    ...n
+  },
+  meta: e == null ? void 0 : e.meta
+} : void 0, Cn = () => Promise.resolve().then(() => ee).then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../render-blocks.vue",
     e
   ), e;
-}), fn = () => import("./render-styles.8780951f.js").then((e) => e.default).catch((e) => {
+}), wn = () => import("./render-styles.c79197c2.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContentStyles at ./components/render-styles.vue",
     e
   ), e;
-}), gn = {
+}), In = {
   name: "render-content",
   components: {
-    RenderContentStyles: x(fn),
-    RenderBlocks: x(hn)
+    RenderContentStyles: x(wn),
+    RenderBlocks: x(Cn)
   },
   props: [
     "content",
     "data",
     "canTrack",
     "locale",
-    "context",
     "customComponents",
     "model",
+    "context",
     "apiKey",
     "includeRefs"
   ],
@@ -1993,14 +2149,20 @@ const un = (e, n, t = !0) => {
     return {
       forceReRenderCount: 0,
       overrideContent: null,
+      useContent: _n({
+        content: this.content,
+        data: this.data
+      }),
       update: 0,
-      useBreakpoints: null,
-      canTrackToUse: C(this.canTrack) ? this.canTrack : !0,
-      overrideState: {},
-      contextContext: this.context || {},
+      canTrackToUse: S(this.canTrack) ? this.canTrack : !0,
+      contentState: Sn({
+        content: this.content,
+        data: this.data,
+        locale: this.locale
+      }),
       allRegisteredComponents: [
-        ...Ht(),
-        ...se,
+        ...Zt(),
+        ...ae,
         ...this.customComponents || []
       ].reduce(
         (e, n) => ({
@@ -2016,10 +2178,11 @@ const un = (e, n, t = !0) => {
   provide() {
     const e = this;
     return {
-      [$.key]: {
+      [W.key]: {
         content: e.useContent,
         state: e.contentState,
-        context: e.contextContext,
+        setState: e.setContextState,
+        context: e.context || {},
         apiKey: e.apiKey,
         registeredComponents: e.allRegisteredComponents
       }
@@ -2030,7 +2193,7 @@ const un = (e, n, t = !0) => {
     if (this.apiKey || console.error(
       "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
     ), f()) {
-      if (y() && (this.forceReRenderCount = this.forceReRenderCount + 1, me(), pe({
+      if (y() && (this.forceReRenderCount = this.forceReRenderCount + 1, he(), fe({
         ...this.locale ? {
           locale: this.locale
         } : {},
@@ -2040,7 +2203,7 @@ const un = (e, n, t = !0) => {
       }), Object.values(this.allRegisteredComponents).forEach(
         (t) => {
           var r;
-          const o = Dt(t);
+          const o = tn(t);
           (r = window.parent) == null || r.postMessage(o, "*");
         }
       ), window.addEventListener("message", this.processMessage), window.addEventListener(
@@ -2048,7 +2211,7 @@ const un = (e, n, t = !0) => {
         this.emitStateUpdate
       )), this.useContent) {
         const t = (e = this.useContent) == null ? void 0 : e.testVariationId, o = (n = this.useContent) == null ? void 0 : n.id;
-        P({
+        U({
           type: "impression",
           canTrack: this.canTrackToUse,
           contentId: o,
@@ -2056,13 +2219,13 @@ const un = (e, n, t = !0) => {
           variationId: t !== o ? t : void 0
         });
       }
-      if (qt()) {
+      if (en()) {
         const t = new URL(location.href).searchParams, o = t.get("builder.preview"), r = t.get("apiKey") || t.get("builder.space");
-        o === this.model && r === this.apiKey && oe({
+        o === this.model && r === this.apiKey && ie({
           model: this.model,
           apiKey: this.apiKey
         }).then((s) => {
-          s && (this.overrideContent = s);
+          s && this.mergeNewContent(s);
         });
       }
       this.evaluateJsCode(), this.runHttpRequests(), this.emitStateUpdate();
@@ -2095,39 +2258,10 @@ const un = (e, n, t = !0) => {
     ));
   },
   computed: {
-    useContent() {
-      var e, n, t, o, r, s, i, c;
-      if (!(!this.content && !this.overrideContent))
-        return {
-          ...this.content,
-          ...this.overrideContent,
-          data: {
-            ...(e = this.content) == null ? void 0 : e.data,
-            ...this.data,
-            ...(n = this.overrideContent) == null ? void 0 : n.data
-          },
-          meta: {
-            ...(t = this.content) == null ? void 0 : t.meta,
-            ...(o = this.overrideContent) == null ? void 0 : o.meta,
-            breakpoints: this.useBreakpoints || ((s = (r = this.overrideContent) == null ? void 0 : r.meta) == null ? void 0 : s.breakpoints) || ((c = (i = this.content) == null ? void 0 : i.meta) == null ? void 0 : c.breakpoints)
-          }
-        };
-    },
-    contentState() {
-      var e, n;
-      return {
-        ...(n = (e = this.content) == null ? void 0 : e.data) == null ? void 0 : n.state,
-        ...this.data,
-        ...this.locale ? {
-          locale: this.locale
-        } : {},
-        ...this.overrideState
-      };
-    },
     shouldRenderContentStyles() {
       var e, n, t, o, r;
       return Boolean(
-        (((n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.cssCode) || ((r = (o = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : o.customFonts) == null ? void 0 : r.length)) && T !== "reactNative"
+        (((n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.cssCode) || ((r = (o = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : o.customFonts) == null ? void 0 : r.length)) && R !== "reactNative"
       );
     },
     onUpdateHook0() {
@@ -2150,6 +2284,35 @@ const un = (e, n, t = !0) => {
     }
   },
   methods: {
+    mergeNewContent(e) {
+      var n, t, o, r, s;
+      this.useContent = {
+        ...this.useContent,
+        ...e,
+        data: {
+          ...(n = this.useContent) == null ? void 0 : n.data,
+          ...e == null ? void 0 : e.data
+        },
+        meta: {
+          ...(t = this.useContent) == null ? void 0 : t.meta,
+          ...e == null ? void 0 : e.meta,
+          breakpoints: ((o = e == null ? void 0 : e.meta) == null ? void 0 : o.breakpoints) || ((s = (r = this.useContent) == null ? void 0 : r.meta) == null ? void 0 : s.breakpoints)
+        }
+      };
+    },
+    setBreakpoints(e) {
+      var n;
+      this.useContent = {
+        ...this.useContent,
+        meta: {
+          ...(n = this.useContent) == null ? void 0 : n.meta,
+          breakpoints: e
+        }
+      };
+    },
+    setContextState(e) {
+      this.contentState = e;
+    },
     processMessage(e) {
       var t;
       const { data: n } = e;
@@ -2159,12 +2322,12 @@ const un = (e, n, t = !0) => {
             const o = n.data, { breakpoints: r, contentId: s } = o;
             if (!s || s !== ((t = this.useContent) == null ? void 0 : t.id))
               return;
-            this.useBreakpoints = r, this.forceReRenderCount = this.forceReRenderCount + 1;
+            r && this.setBreakpoints(r), this.forceReRenderCount = this.forceReRenderCount + 1;
             break;
           }
           case "builder.contentUpdate": {
             const o = n.data, r = o.key || o.alias || o.entry || o.modelName, s = o.data;
-            r === this.model && (this.overrideContent = s, this.forceReRenderCount = this.forceReRenderCount + 1);
+            r === this.model && (this.mergeNewContent(s), this.forceReRenderCount = this.forceReRenderCount + 1);
             break;
           }
         }
@@ -2172,9 +2335,9 @@ const un = (e, n, t = !0) => {
     evaluateJsCode() {
       var n, t;
       const e = (t = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : t.jsCode;
-      e && q({
+      e && G({
         code: e,
-        context: this.contextContext,
+        context: this.context || {},
         state: this.contentState
       });
     },
@@ -2182,13 +2345,13 @@ const un = (e, n, t = !0) => {
       var n, t;
       if (this.useContent) {
         const o = (n = this.useContent) == null ? void 0 : n.testVariationId, r = (t = this.useContent) == null ? void 0 : t.id;
-        P({
+        U({
           type: "click",
           canTrack: this.canTrackToUse,
           contentId: r,
           apiKey: this.apiKey,
           variationId: o !== r ? o : void 0,
-          ...pn(e),
+          ...kn(e),
           unique: !this.clicked
         });
       }
@@ -2197,20 +2360,20 @@ const un = (e, n, t = !0) => {
     evalExpression(e) {
       return e.replace(
         /{{([^}]+)}}/g,
-        (n, t) => q({
+        (n, t) => G({
           code: t,
-          context: this.contextContext,
+          context: this.context || {},
           state: this.contentState
         })
       );
     },
     handleRequest({ url: e, key: n }) {
-      Q(e).then((t) => t.json()).then((t) => {
+      te(e).then((t) => t.json()).then((t) => {
         const o = {
-          ...this.overrideState,
+          ...this.contentState,
           [n]: t
         };
-        this.overrideState = o;
+        this.setContextState(o);
       }).catch((t) => {
         console.log("error fetching dynamic data", e, t);
       });
@@ -2220,9 +2383,9 @@ const un = (e, n, t = !0) => {
       const e = (o = (t = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : t.httpRequests) != null ? o : {};
       Object.entries(e).forEach(([r, s]) => {
         if (s && (!this.httpReqsData[r] || y())) {
-          const i = this.evalExpression(s);
+          const a = this.evalExpression(s);
           this.handleRequest({
-            url: i,
+            url: a,
             key: r
           });
         }
@@ -2241,167 +2404,75 @@ const un = (e, n, t = !0) => {
       );
     }
   }
-}, bn = ["builder-content-id", "builder-model"];
-function yn(e, n, t, o, r, s) {
-  var a, d, m, p, h, v, V;
-  const i = k("render-content-styles"), c = k("render-blocks");
-  return s.useContent ? (l(), u("div", {
+}, Tn = ["builder-content-id", "builder-model"];
+function Rn(e, n, t, o, r, s) {
+  var c, l, m, p, h, v, N, L;
+  const a = k("render-content-styles"), i = k("render-blocks");
+  return r.useContent ? (d(), u("div", {
     key: 0,
     ref: "elementRef",
-    onClick: n[0] || (n[0] = (de) => s.onClick(de)),
-    "builder-content-id": (a = s.useContent) == null ? void 0 : a.id,
+    onClick: n[0] || (n[0] = (me) => s.onClick(me)),
+    "builder-content-id": (c = r.useContent) == null ? void 0 : c.id,
     "builder-model": t.model
   }, [
-    s.shouldRenderContentStyles ? (l(), I(i, {
+    s.shouldRenderContentStyles ? (d(), T(a, {
       key: 0,
-      cssCode: (m = (d = s.useContent) == null ? void 0 : d.data) == null ? void 0 : m.cssCode,
-      customFonts: (h = (p = s.useContent) == null ? void 0 : p.data) == null ? void 0 : h.customFonts
-    }, null, 8, ["cssCode", "customFonts"])) : b("", !0),
-    (l(), I(c, {
-      blocks: (V = (v = s.useContent) == null ? void 0 : v.data) == null ? void 0 : V.blocks,
+      contentId: (l = r.useContent) == null ? void 0 : l.id,
+      cssCode: (p = (m = r.useContent) == null ? void 0 : m.data) == null ? void 0 : p.cssCode,
+      customFonts: (v = (h = r.useContent) == null ? void 0 : h.data) == null ? void 0 : v.customFonts
+    }, null, 8, ["contentId", "cssCode", "customFonts"])) : b("", !0),
+    (d(), T(i, {
+      blocks: (L = (N = r.useContent) == null ? void 0 : N.data) == null ? void 0 : L.blocks,
       key: r.forceReRenderCount
     }, null, 8, ["blocks"]))
-  ], 8, bn)) : b("", !0);
-}
-const vn = /* @__PURE__ */ g(gn, [["render", yn]]), xn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: vn
-}, Symbol.toStringTag, { value: "Module" })), kn = () => import("./block-styles.413a68e9.js").then((e) => e.default).catch((e) => {
-  throw console.error(
-    "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
-    e
-  ), e;
-}), Cn = () => import("./render-block.a53e9af1.js").then((e) => e.default).catch((e) => {
-  throw console.error(
-    "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
-    e
-  ), e;
-}), Sn = {
-  name: "render-blocks",
-  components: {
-    RenderBlock: x(Cn),
-    BlockStyles: x(kn)
-  },
-  props: ["blocks", "parent", "path", "styleProp"],
-  inject: {
-    builderContext: $.key
-  },
-  computed: {
-    className() {
-      var e;
-      return "builder-blocks" + ((e = this.blocks) != null && e.length ? "" : " no-blocks");
-    }
-  },
-  methods: {
-    onClick() {
-      var e, n;
-      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
-        {
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: this.parent,
-            dataPath: this.path
-          }
-        },
-        "*"
-      ));
-    },
-    onMouseEnter() {
-      var e, n;
-      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
-        {
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: this.parent,
-            dataPath: this.path
-          }
-        },
-        "*"
-      ));
-    },
-    _classStringToObject(e) {
-      const n = {};
-      if (typeof e != "string")
-        return n;
-      const t = e.trim().split(/\s+/);
-      for (const o of t)
-        n[o] = !0;
-      return n;
-    }
-  }
-};
-const _n = ["builder-path", "builder-parent-id", "dataSet"];
-function wn(e, n, t, o, r, s) {
-  const i = k("render-block"), c = k("block-styles");
-  return l(), u("div", {
-    class: j(s._classStringToObject(s.className + " div-361b1o6wv2k")),
-    "builder-path": t.path,
-    "builder-parent-id": t.parent,
-    dataSet: {
-      class: s.className
-    },
-    style: w(t.styleProp),
-    onClick: n[0] || (n[0] = (a) => s.onClick()),
-    onMouseenter: n[1] || (n[1] = (a) => s.onMouseEnter())
-  }, [
-    t.blocks ? (l(!0), u(R, { key: 0 }, O(t.blocks, (a, d) => (l(), I(i, {
-      key: "render-block-" + a.id,
-      block: a,
-      context: s.builderContext
-    }, null, 8, ["block", "context"]))), 128)) : b("", !0),
-    t.blocks ? (l(!0), u(R, { key: 1 }, O(t.blocks, (a, d) => (l(), I(c, {
-      key: "block-style-" + a.id,
-      block: a,
-      context: s.builderContext
-    }, null, 8, ["block", "context"]))), 128)) : b("", !0)
-  ], 46, _n);
+  ], 8, Tn)) : b("", !0);
 }
-const In = /* @__PURE__ */ g(Sn, [["render", wn], ["__scopeId", "data-v-69d4cd84"]]), le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const En = /* @__PURE__ */ g(In, [["render", Rn]]), An = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: In
-}, Symbol.toStringTag, { value: "Module" })), J = {};
-function Fn(e) {
+  default: En
+}, Symbol.toStringTag, { value: "Module" })), Y = {};
+function Un(e) {
   if (f()) {
-    Object.assign(J, e);
+    Object.assign(Y, e);
     const n = {
       type: "builder.settingsChange",
-      data: J
+      data: Y
     };
     parent.postMessage(n, "*");
   }
 }
 export {
-  $ as B,
-  ke as C,
-  yt as F,
-  Ee as I,
-  ct as S,
-  T,
-  $e as V,
+  W as B,
+  Te as C,
+  Ae as F,
+  We as I,
+  et as S,
+  R as T,
+  Bt as V,
   g as _,
-  Rn as a,
-  ge as b,
-  En as c,
-  Oe as d,
-  q as e,
-  U as f,
-  he as g,
-  mt as h,
-  ft as i,
-  In as j,
+  Pn as a,
+  Se as b,
+  On as c,
+  ve as d,
+  G as e,
+  V as f,
+  xe as g,
+  En as h,
+  wt as i,
+  At as j,
   y as k,
-  qt as l,
-  se as m,
-  jn as n,
-  Dt as o,
-  ue as p,
-  oe as q,
-  vn as r,
-  Fn as s,
+  en as l,
+  ae as m,
+  Fn as n,
+  tn as o,
+  pe as p,
+  ie as q,
+  De as r,
+  Un as s,
   Bn as t,
-  ot as u,
-  Ze as v,
-  et as w,
-  tt as x,
-  ne as y
+  xt as u,
+  gt as v,
+  bt as w,
+  yt as x,
+  re as y
 };