@builder.io/sdk-vue 0.1.11 → 0.1.12

package/packages/_vue2/dist/{index.e8dd60dc.js → index.02b9d9df.js}

@@ -17,7 +17,7 @@ const J = {
     }
   }
 };
-function f(t, e, n, o, s, r, i, l) {
+function h(t, e, n, o, s, r, i, l) {
   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;
@@ -32,12 +32,12 @@ function f(t, e, n, o, s, r, i, l) {
     if (a.functional) {
       a._injectStyles = c;
       var d = a.render;
-      a.render = function(g, T) {
-        return c.call(T), d(g, T);
+      a.render = function(f, y) {
+        return c.call(y), d(f, y);
       };
     } else {
-      var m = a.beforeCreate;
-      a.beforeCreate = m ? [].concat(m, c) : [c];
+      var p = a.beforeCreate;
+      a.beforeCreate = p ? [].concat(p, c) : [c];
     }
   return {
     exports: t,
@@ -47,7 +47,7 @@ function f(t, e, n, o, s, r, i, l) {
 var X = 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({ staticClass: "button-2fnk003dqad" }, "button", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._v(" " + e._s(e.text) + " ")]);
-}, Y = [], Q = /* @__PURE__ */ f(
+}, Y = [], Q = /* @__PURE__ */ h(
   J,
   X,
   Y,
@@ -57,7 +57,7 @@ var X = function() {
   null,
   null
 );
-const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
+const Z = Q.exports, T = (t) => JSON.parse(JSON.stringify(t)), V = {
   small: {
     min: 320,
     default: 321,
@@ -73,8 +73,8 @@ const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
     default: 991,
     max: 1200
   }
-}, Rn = (t, e = B) => `@media (max-width: ${e[t].max}px)`, ee = ({ small: t, medium: e }) => {
-  const n = w(B);
+}, Rn = (t, e = V) => `@media (max-width: ${e[t].max}px)`, ee = ({ small: t, medium: e }) => {
+  const n = T(V);
   if (!t || !e)
     return n;
   const o = Math.floor(t / 2);
@@ -95,22 +95,22 @@ const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
     min: r,
     default: r + 1
   }, n;
-}, v = "vue2", te = (t) => t.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), b = (t) => t != null, ne = (t) => Object.entries(t).map(([n, o]) => {
+}, _ = "vue2", te = (t) => t.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), b = (t) => t != null, ne = (t) => Object.entries(t).map(([n, o]) => {
   if (typeof o == "string")
     return `${te(n)}: ${o};`;
-}).filter(b), y = (t) => ne(t).join(`
+}).filter(b), v = (t) => ne(t).join(`
 `), In = ({
   mediaQuery: t,
   className: e,
   styles: n
 }) => {
   const o = `.${e} {
-    ${y(n)}
+    ${v(n)}
   }`;
   return t ? `${t} {
       ${o}
     }` : o;
-}, oe = Symbol(), _ = {
+}, oe = Symbol(), x = {
   Builder: {
     content: null,
     context: {},
@@ -118,16 +118,17 @@ const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
     setState() {
     },
     apiKey: null,
+    apiVersion: void 0,
     registeredComponents: {},
     inheritedStyles: {}
   },
   key: oe
-}, se = () => Promise.resolve().then(() => U).then((t) => t.default).catch((t) => {
+}, se = () => Promise.resolve().then(() => B).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
     t
   ), t;
-}), re = () => import("./render-inlined-styles.9195825e.js").then((t) => t.default).catch((t) => {
+}), re = () => import("./render-inlined-styles.7a493822.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
@@ -146,10 +147,10 @@ const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
     "builderBlock"
   ],
   data() {
-    return { TARGET: v };
+    return { TARGET: _ };
   },
   inject: {
-    builderContext: _.key
+    builderContext: x.key
   },
   computed: {
     columnsCssVars() {
@@ -196,21 +197,21 @@ const Z = Q.exports, w = (t) => JSON.parse(JSON.stringify(t)), B = {
       return `
       @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
         .${this.builderBlock.id}-breakpoints {
-          ${y(this.columnStyleObjects.columns.medium)}
+          ${v(this.columnStyleObjects.columns.medium)}
         }
 
         .${this.builderBlock.id}-breakpoints > .builder-column {
-          ${y(this.columnStyleObjects.column.medium)}
+          ${v(this.columnStyleObjects.column.medium)}
         }
       }
 
       @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
         .${this.builderBlock.id}-breakpoints {
-          ${y(this.columnStyleObjects.columns.small)}
+          ${v(this.columnStyleObjects.columns.small)}
         }
 
         .${this.builderBlock.id}-breakpoints > .builder-column {
-          ${y(this.columnStyleObjects.column.small)}
+          ${v(this.columnStyleObjects.column.small)}
         }
       },
     `;
@@ -275,7 +276,7 @@ var ae = function() {
       flexGrow: "1"
     } } })], 1);
   })], 2);
-}, le = [], ce = /* @__PURE__ */ f(
+}, le = [], ce = /* @__PURE__ */ h(
   ie,
   ae,
   le,
@@ -285,15 +286,15 @@ var ae = function() {
   null,
   null
 );
-const ue = ce.exports, de = {
+const de = ce.exports, ue = {
   name: "builder-fragment-component",
   props: []
 };
 var me = function() {
   var e = this, n = e._self._c;
   return n("span", [e._t("default")], 2);
-}, pe = [], fe = /* @__PURE__ */ f(
-  de,
+}, pe = [], he = /* @__PURE__ */ h(
+  ue,
   me,
   pe,
   !1,
@@ -302,7 +303,7 @@ var me = function() {
   null,
   null
 );
-const he = fe.exports;
+const fe = he.exports;
 function R(t) {
   return t.replace(/http(s)?:/, "");
 }
@@ -324,7 +325,7 @@ function be(t, e) {
   }
   return null;
 }
-function k(t) {
+function C(t) {
   if (!t)
     return t;
   const e = [100, 200, 400, 800, 1200, 1600, 2e3];
@@ -359,10 +360,10 @@ const ye = {
         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"), k(e);
+          return console.debug("Removed given srcset"), C(e);
       } else if (this.image && !this.srcset)
-        return k(e);
-      return k(e);
+        return C(e);
+      return C(e);
     },
     webpSrcSet() {
       var t;
@@ -403,7 +404,7 @@ var ve = 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);
-}, _e = [], xe = /* @__PURE__ */ f(
+}, _e = [], xe = /* @__PURE__ */ h(
   ye,
   ve,
   _e,
@@ -414,21 +415,21 @@ var ve = function() {
   null
 );
 const ke = xe.exports;
-function p() {
+function m() {
   return typeof window < "u" && typeof document < "u";
 }
 function Ce() {
-  return p() && window.self !== window.top;
+  return m() && window.self !== window.top;
 }
-function h() {
+function g() {
   return Ce() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
-const Se = () => import("./block-styles.a206dd50.js").then((t) => t.default).catch((t) => {
+const Se = () => import("./block-styles.1fddeaa3.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.fd86fb8a.js").then((t) => t.default).catch((t) => {
+}), we = () => import("./render-block.9b751cde.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
@@ -438,7 +439,7 @@ const Se = () => import("./block-styles.a206dd50.js").then((t) => t.default).cat
   components: { RenderBlock: we, BlockStyles: Se },
   props: ["blocks", "parent", "path", "styleProp"],
   inject: {
-    builderContext: _.key
+    builderContext: x.key
   },
   computed: {
     className() {
@@ -449,7 +450,7 @@ const Se = () => import("./block-styles.a206dd50.js").then((t) => t.default).cat
   methods: {
     onClick() {
       var t, e;
-      h() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
+      g() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
         {
           type: "builder.clickEmptyBlocks",
           data: {
@@ -462,7 +463,7 @@ const Se = () => import("./block-styles.a206dd50.js").then((t) => t.default).cat
     },
     onMouseEnter() {
       var t, e;
-      h() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
+      g() && !((t = this.blocks) != null && t.length) && ((e = window.parent) == null || e.postMessage(
         {
           type: "builder.hoverEmptyBlocks",
           data: {
@@ -497,7 +498,7 @@ var Re = 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);
-}, Ie = [], $e = /* @__PURE__ */ f(
+}, Ie = [], $e = /* @__PURE__ */ h(
   Te,
   Re,
   Ie,
@@ -507,7 +508,7 @@ var Re = function() {
   null,
   null
 );
-const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ee = $e.exports, B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Ee
 }, Symbol.toStringTag, { value: "Module" })), Ae = {
@@ -546,7 +547,7 @@ const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   ],
   static: !0,
   noWrap: !0
-}, x = (t) => {
+}, k = (t) => {
   const e = t.toString().trim();
   return `return (${!e.startsWith("function") && !e.startsWith("(") ? "function " : ""}${e}).apply(this, arguments)`;
 }, Fe = {
@@ -736,7 +737,7 @@ const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
           ]
         }
       ],
-      onChange: x((t) => {
+      onChange: k((t) => {
         function e() {
           n.forEach((o) => {
             o.delete("width");
@@ -798,19 +799,19 @@ const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: !0,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
-      onChange: x(
+      onChange: k(
         (t) => {
           t.delete("srcset"), t.delete("noWebp");
           function n(i, l = 6e4) {
             return new Promise((a, c) => {
               const d = document.createElement("img");
-              let m = !1;
+              let p = !1;
               d.onload = () => {
-                m = !0, a(d);
+                p = !0, a(d);
               }, d.addEventListener("error", (u) => {
                 console.warn("Image load failed", u.error), c(u.error);
               }), d.src = i, setTimeout(() => {
-                m || c(new Error("Image load timed out"));
+                p || c(new Error("Image load timed out"));
               }, l);
             });
           }
@@ -950,7 +951,7 @@ const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
       }
     }
   ]
-}, Be = {
+}, Ve = {
   name: "builder-section-component",
   props: ["maxWidth", "attributes"],
   methods: {
@@ -969,7 +970,7 @@ const Ee = $e.exports, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
     }
   }
 };
-var Ue = function() {
+var Be = function() {
   var e = this, n = e._self._c;
   return n("section", e._g(e._b({ style: {
     width: "100%",
@@ -983,10 +984,10 @@ var Ue = function() {
     marginLeft: "auto",
     marginRight: "auto"
   } }, "section", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [e._t("default")], 2);
-}, Ve = [], We = /* @__PURE__ */ f(
+}, Ue = [], We = /* @__PURE__ */ h(
+  Ve,
   Be,
   Ue,
-  Ve,
   !1,
   null,
   null,
@@ -1044,7 +1045,7 @@ function ze() {
     ), new Error("Builder SDK could not find a global `fetch` function");
   return t;
 }
-const V = ze(), Ke = (t) => {
+const U = ze(), Ke = (t) => {
   if (t === "localhost" || t === "127.0.0.1")
     return t;
   const e = t.split(".");
@@ -1060,7 +1061,7 @@ const V = ze(), Ke = (t) => {
     console.debug("[COOKIE] GET error: ", o);
     return;
   }
-}, De = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).filter(b).join("; "), He = [
+}, He = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).filter(b).join("; "), De = [
   ["secure", ""],
   ["SameSite", "None"]
 ], qe = ({
@@ -1068,14 +1069,14 @@ const V = ze(), Ke = (t) => {
   value: e,
   expires: n
 }) => {
-  const s = (p() ? location.protocol === "https:" : !0) ? He : [[]], r = n ? [["expires", n.toUTCString()]] : [[]], i = [
+  const s = (m() ? location.protocol === "https:" : !0) ? De : [[]], r = n ? [["expires", n.toUTCString()]] : [[]], i = [
     [t, e],
     ...r,
     ["path", "/"],
     ["domain", Ke(window.location.hostname)],
     ...s
   ];
-  return De(i);
+  return He(i);
 }, N = async ({
   name: t,
   value: e,
@@ -1155,14 +1156,14 @@ const V = ze(), Ke = (t) => {
   const n = await Ze({ item: t, canTrack: e });
   Object.assign(t, n);
 };
-function C(t, e = null, n = ".") {
+function S(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, ...S(r, i, n) } : { ...o, [i]: r };
   }, {});
 }
 const $ = "builder.", tt = "options.", nt = (t) => {
@@ -1181,7 +1182,7 @@ const $ = "builder.", tt = "options.", nt = (t) => {
     }
   }), n;
 }, st = () => {
-  if (!p())
+  if (!m())
     return {};
   const t = new URLSearchParams(window.location.search);
   return ot(t);
@@ -1194,30 +1195,35 @@ const $ = "builder.", tt = "options.", nt = (t) => {
     model: r,
     apiKey: i,
     includeRefs: l = !0,
-    locale: a
+    locale: a,
+    apiVersion: c = "v2"
   } = t;
   if (!i)
     throw new Error("Missing API key");
-  const c = new URL(
-    `https://cdn.builder.io/api/v2/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${l}${a ? `&locale=${a}` : ""}`
-  ), d = {
+  if (!["v2", "v3"].includes(c))
+    throw new Error(
+      `Invalid apiVersion: expected 'v2' or 'v3', received '${c}'`
+    );
+  const d = new URL(
+    `https://cdn.builder.io/api/${c}/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${l}${a ? `&locale=${a}` : ""}`
+  ), p = {
     ...st(),
     ...M(t.options || {})
-  }, m = C(d);
-  for (const u in m)
-    c.searchParams.set(u, String(m[u]));
-  if (n && c.searchParams.set("userAttributes", JSON.stringify(n)), o) {
-    const u = C({ query: o });
-    for (const g in u)
-      c.searchParams.set(g, JSON.stringify(u[g]));
+  }, u = S(p);
+  for (const f in u)
+    d.searchParams.set(f, String(u[f]));
+  if (n && d.searchParams.set("userAttributes", JSON.stringify(n)), o) {
+    const f = S({ query: o });
+    for (const y in f)
+      d.searchParams.set(y, JSON.stringify(f[y]));
   }
-  return c;
+  return d;
 };
 async function z(t) {
   return (await it({ ...t, limit: 1 })).results[0] || null;
 }
 async function it(t) {
-  const e = rt(t), o = await (await V(e.href)).json(), s = t.canTrack !== !1;
+  const e = rt(t), o = await (await U(e.href)).json(), s = t.canTrack !== !1;
   if (s && Array.isArray(o.results))
     for (const r of o.results)
       await et({ item: r, canTrack: s });
@@ -1233,51 +1239,57 @@ const at = () => Promise.resolve().then(() => Tn).then((t) => t.default).catch((
   components: { RenderContent: at },
   props: ["attributes", "symbol", "dynamic"],
   data() {
-    return { fetchedContent: null };
+    var t, e, n;
+    return {
+      className: [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        (t = this.symbol) != null && t.inline ? "builder-inline-symbol" : void 0,
+        ((e = this.symbol) == null ? void 0 : e.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" "),
+      contentToUse: (n = this.symbol) == null ? void 0 : n.content
+    };
   },
   inject: {
-    builderContext: _.key
+    builderContext: x.key
+  },
+  mounted() {
+    this.fetchContent();
   },
   watch: {
     onUpdateHook0: {
       handler() {
-        var e;
-        const t = this.symbol;
-        t && !t.content && !this.fetchedContent && t.model && ((e = this.builderContext) == null ? void 0 : e.apiKey) && z({
-          model: t.model,
-          apiKey: this.builderContext.apiKey,
-          query: {
-            id: t.entry
-          }
-        }).then((n) => {
-          this.fetchedContent = n;
-        });
+        this.fetchContent();
       },
       immediate: !0
     }
   },
   computed: {
-    className() {
-      var t, e;
-      return [
-        ...Object.keys(this.attributes.class),
-        "builder-symbol",
-        (t = this.symbol) != null && t.inline ? "builder-inline-symbol" : void 0,
-        ((e = this.symbol) == null ? void 0 : e.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
-      ].filter(Boolean).join(" ");
-    },
-    contentToUse() {
-      var t;
-      return ((t = this.symbol) == null ? void 0 : t.content) || this.fetchedContent;
-    },
     onUpdateHook0() {
       return {
-        0: this.symbol,
-        1: this.fetchedContent
+        0: this.symbol
       };
     }
   },
   methods: {
+    fetchContent() {
+      var t, e;
+      !this.contentToUse && ((t = this.symbol) == null ? void 0 : t.model) && ((e = this.builderContext) == null ? void 0 : e.apiKey) && z({
+        model: this.symbol.model,
+        apiKey: this.builderContext.apiKey,
+        apiVersion: this.builderContext.apiVersion,
+        query: {
+          id: this.symbol.entry
+        }
+      }).then((n) => {
+        n && (this.contentToUse = n);
+      }).catch((n) => {
+        console.error(
+          "[Builder.io]: Could not fetch symbol content: ",
+          n
+        );
+      });
+    },
     filterAttrs: function(e = {}, n) {
       const o = "v-on:";
       return Object.keys(e).filter((s) => {
@@ -1303,26 +1315,26 @@ const at = () => Promise.resolve().then(() => Tn).then((t) => t.default).catch((
   }
 };
 var ct = function() {
-  var o, s, r, i, l;
+  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: {
     class: e.className
-  } } }, "div", e.filterAttrs(e.attributes, !1), !1), e.filterAttrs(e.attributes, !0)), [n("render-content", { attrs: { apiKey: e.builderContext.apiKey, context: e.builderContext.context, customComponents: Object.values(e.builderContext.registeredComponents), data: {
+  } } }, "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,
-    ...(i = (r = (s = e.symbol) == null ? void 0 : s.content) == null ? void 0 : r.data) == null ? void 0 : i.state
-  }, model: (l = e.symbol) == null ? void 0 : l.model, content: e.contentToUse } })], 1);
-}, ut = [], dt = /* @__PURE__ */ f(
+    ...(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,
   ct,
-  ut,
+  dt,
   !1,
   null,
   null,
   null,
   null
 );
-const mt = dt.exports, pt = {
+const mt = ut.exports, pt = {
   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",
@@ -1341,18 +1353,18 @@ const mt = dt.exports, pt = {
     height: "auto",
     textAlign: "center"
   }
-}, ft = {
+}, ht = {
   name: "builder-text",
   props: ["text"]
 };
-var ht = function() {
+var ft = function() {
   var e = this, n = e._self._c;
   return n("span", { staticClass: "builder-text", style: {
     outline: "none"
   }, domProps: { innerHTML: e._s(e.text) } });
-}, gt = [], bt = /* @__PURE__ */ f(
-  ft,
+}, gt = [], bt = /* @__PURE__ */ h(
   ht,
+  ft,
   gt,
   !1,
   null,
@@ -1514,7 +1526,7 @@ var xt = function() {
     objectPosition: e.position,
     borderRadius: 1
   }, attrs: { src: e.video || "no-src", poster: e.posterImage } }, "video", e.spreadProps, !1));
-}, kt = [], Ct = /* @__PURE__ */ f(
+}, kt = [], Ct = /* @__PURE__ */ h(
   _t,
   xt,
   kt,
@@ -1534,7 +1546,7 @@ const St = Ct.exports, wt = {
       required: !0,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: x(
+      onChange: k(
         (t) => {
           const e = t.get("url");
           if (e)
@@ -1609,7 +1621,7 @@ const St = Ct.exports, wt = {
 var $t = 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__ */ f(
+}, Et = [], At = /* @__PURE__ */ h(
   It,
   $t,
   Et,
@@ -1630,7 +1642,7 @@ const Ft = At.exports, jt = {
     "attributes"
   ],
   data() {
-    return { isEditing: h };
+    return { isEditing: g };
   },
   methods: {
     filterAttrs: function(e = {}, n) {
@@ -1654,7 +1666,7 @@ var Ot = function() {
     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)));
-}, Pt = [], Bt = /* @__PURE__ */ f(
+}, Pt = [], Vt = /* @__PURE__ */ h(
   jt,
   Ot,
   Pt,
@@ -1664,7 +1676,7 @@ var Ot = function() {
   null,
   null
 );
-const Ut = Bt.exports, Vt = {
+const Bt = Vt.exports, Ut = {
   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",
@@ -1732,7 +1744,7 @@ var Nt = function() {
   return n("div", { ref: "elem", class: e._classStringToObject(
     "builder-custom-code" + (e.replaceNodes ? " replace-nodes" : "")
   ), domProps: { innerHTML: e._s(e.code) } });
-}, Lt = [], Mt = /* @__PURE__ */ f(
+}, Lt = [], Mt = /* @__PURE__ */ h(
   Wt,
   Nt,
   Lt,
@@ -1768,14 +1780,14 @@ const zt = Mt.exports, Kt = {
       advanced: !0
     }
   ]
-}, Dt = () => [
+}, Ht = () => [
   { component: Z, ...Ae },
-  { component: ue, ...Fe },
+  { component: de, ...Fe },
   { component: zt, ...Kt },
   { component: Ft, ...wt },
-  { component: he, ...je },
+  { component: fe, ...je },
   { component: ke, ...Oe },
-  { component: Ut, ...Vt },
+  { component: Bt, ...Ut },
   { component: Ne, ...Pe },
   { component: mt, ...Le },
   { component: yt, ...pt },
@@ -1793,9 +1805,9 @@ function E({
     return;
   }
   const r = {
-    isEditing: h(),
-    isBrowser: p(),
-    isServer: !p()
+    isEditing: g(),
+    isBrowser: m(),
+    isServer: !m()
   }, l = s && !(t.includes(";") || t.includes(" return ") || t.trim().startsWith("return ")) ? `return (${t});` : t;
   try {
     return new Function(
@@ -1818,8 +1830,8 @@ function E({
     );
   }
 }
-function Ht() {
-  return !p() || h() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+function Dt() {
+  return !m() || g() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
 const K = [];
 function $n(t, e) {
@@ -1833,11 +1845,11 @@ const qt = ({
 }) => ({
   type: "builder.registerComponent",
   data: Jt(e)
-}), Gt = (t) => typeof t == "function" ? x(t) : w(t), Jt = ({
+}), Gt = (t) => typeof t == "function" ? k(t) : T(t), Jt = ({
   inputs: t,
   ...e
 }) => ({
-  ...w(e),
+  ...T(e),
   inputs: t == null ? void 0 : t.map(
     (n) => Object.entries(n).reduce(
       (o, [s, r]) => ({
@@ -1854,16 +1866,16 @@ function Xt() {
     return (t == "x" ? e : e & 3 | 8).toString(16);
   });
 }
-function D() {
+function H() {
   return Xt().replace(/-/g, "");
 }
-const H = "builderSessionId", Yt = async ({
+const D = "builderSessionId", Yt = async ({
   canTrack: t
 }) => {
   if (!t)
     return;
   const e = await W({
-    name: H,
+    name: D,
     canTrack: t
   });
   if (b(e))
@@ -1872,10 +1884,10 @@ const H = "builderSessionId", Yt = async ({
     const n = Qt();
     return Zt({ id: n, canTrack: t }), n;
   }
-}, Qt = () => D(), Zt = ({
+}, Qt = () => H(), Zt = ({
   id: t,
   canTrack: e
-}) => N({ name: H, value: t, canTrack: e }), q = () => p() && typeof localStorage < "u" ? localStorage : void 0, en = ({
+}) => N({ name: D, value: t, canTrack: e }), q = () => m() && typeof localStorage < "u" ? localStorage : void 0, en = ({
   key: t,
   canTrack: e
 }) => {
@@ -1910,7 +1922,7 @@ const H = "builderSessionId", Yt = async ({
     const n = on();
     return sn({ id: n, canTrack: t }), n;
   }
-}, on = () => D(), sn = ({
+}, on = () => H(), sn = ({
   id: t,
   canTrack: e
 }) => tn({
@@ -1918,7 +1930,7 @@ const H = "builderSessionId", Yt = async ({
   value: t,
   canTrack: e
 }), rn = () => {
-  if (p()) {
+  if (m()) {
     const t = new URL(location.href);
     return t.pathname === "" && (t.pathname = "/"), t;
   } else
@@ -1941,7 +1953,7 @@ const H = "builderSessionId", Yt = async ({
       return t.match(/IEMobile/i) || t.match(/WPDesktop/i);
     },
     any() {
-      return e.Android() || e.BlackBerry() || e.iOS() || e.Opera() || e.Windows() || v === "reactNative";
+      return e.Android() || e.BlackBerry() || e.iOS() || e.Opera() || e.Windows() || _ === "reactNative";
     }
   }, n = t.match(/Tablet|iPad/i), o = rn();
   return {
@@ -1959,7 +1971,7 @@ const H = "builderSessionId", Yt = async ({
     sessionId: e,
     visitorId: n
   };
-}, un = async ({
+}, dn = async ({
   type: t,
   canTrack: e,
   apiKey: n,
@@ -1978,18 +1990,18 @@ const H = "builderSessionId", Yt = async ({
     ownerId: n
   }
 });
-async function S(t) {
+async function w(t) {
   if (!t.apiKey) {
     console.error(
       "[Builder.io]: Missing API key for track call. Please provide your API key."
     );
     return;
   }
-  if (!!t.canTrack && !h() && !!(p() || v === "reactNative"))
+  if (!!t.canTrack && !g() && !!(m() || _ === "reactNative"))
     return fetch("https://builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await un(t)]
+        events: [await dn(t)]
       }),
       headers: {
         "content-type": "application/json"
@@ -1999,10 +2011,10 @@ async function S(t) {
       console.error("Failed to track: ", e);
     });
 }
-const En = (t) => S({ ...t, canTrack: !0 }), A = {};
-function dn(t, e) {
+const En = (t) => w({ ...t, canTrack: !0 }), A = {};
+function un(t, e) {
   let n = A[t];
-  if (n || (n = A[t] = []), n.push(e), p()) {
+  if (n || (n = A[t] = []), n.push(e), m()) {
     const o = {
       type: "builder.register",
       data: {
@@ -2018,7 +2030,7 @@ function dn(t, e) {
   }
 }
 const mn = () => {
-  dn("insertMenu", {
+  un("insertMenu", {
     name: "_default",
     default: !0,
     items: [
@@ -2036,11 +2048,11 @@ const mn = () => {
 let F = !1;
 const pn = (t = {}) => {
   var e, n;
-  F || (F = !0, p() && ((e = window.parent) == null || e.postMessage(
+  F || (F = !0, m() && ((e = window.parent) == null || e.postMessage(
     {
       type: "builder.sdkInfo",
       data: {
-        target: v,
+        target: _,
         supportsPatchUpdates: !1,
         supportsAddBlockScoping: !0,
         supportsCustomBreakpoints: !0
@@ -2061,21 +2073,21 @@ const pn = (t = {}) => {
       switch (o.type) {
         case "builder.evaluate": {
           const i = o.data.text, l = o.data.arguments || [], a = o.data.id, c = new Function(i);
-          let d, m = null;
+          let d, p = null;
           try {
             d = c.apply(null, l);
           } catch (u) {
-            m = u;
+            p = u;
           }
-          m ? (s = window.parent) == null || s.postMessage(
+          p ? (s = window.parent) == null || s.postMessage(
             {
               type: "builder.evaluateError",
-              data: { id: a, error: m.message }
+              data: { id: a, error: p.message }
             },
             "*"
           ) : d && typeof d.then == "function" ? d.then((u) => {
-            var g;
-            (g = window.parent) == null || g.postMessage(
+            var f;
+            (f = window.parent) == null || f.postMessage(
               {
                 type: "builder.evaluateResult",
                 data: { id: a, result: u }
@@ -2097,7 +2109,7 @@ const pn = (t = {}) => {
 function j(t) {
   return Math.round(t * 1e3) / 1e3;
 }
-const fn = (t, e, n = !0) => {
+const hn = (t, e, n = !0) => {
   if (!(t instanceof HTMLElement))
     return null;
   let o = n ? t : t.parentElement;
@@ -2108,7 +2120,7 @@ const fn = (t, e, n = !0) => {
       return o;
   } while (o = o.parentElement);
   return null;
-}, hn = (t) => fn(t, (e) => {
+}, fn = (t) => hn(t, (e) => {
   const n = e.getAttribute("builder-id") || e.id;
   return Boolean((n == null ? void 0 : n.indexOf("builder-")) === 0);
 }), O = ({
@@ -2121,7 +2133,7 @@ const fn = (t, e, n = !0) => {
     y: i
   };
 }, gn = (t) => {
-  const e = t.target, n = e && hn(e), o = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
+  const e = t.target, n = e && fn(e), o = (n == null ? void 0 : n.getAttribute("builder-id")) || (n == null ? void 0 : n.id);
   return {
     targetBuilderElement: o || void 0,
     metadata: {
@@ -2157,12 +2169,12 @@ const fn = (t, e, n = !0) => {
     ...e
   },
   meta: t == null ? void 0 : t.meta
-} : void 0, vn = () => Promise.resolve().then(() => U).then((t) => t.default).catch((t) => {
+} : void 0, vn = () => Promise.resolve().then(() => B).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.c4b6de30.js").then((t) => t.default).catch((t) => {
+}), _n = () => import("./render-styles.a04e3469.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContentStyles at ./components/render-styles.vue",
     t
@@ -2182,7 +2194,8 @@ const fn = (t, e, n = !0) => {
     "model",
     "context",
     "apiKey",
-    "includeRefs"
+    "includeRefs",
+    "apiVersion"
   ],
   data() {
     return {
@@ -2200,7 +2213,7 @@ const fn = (t, e, n = !0) => {
         locale: this.locale
       }),
       allRegisteredComponents: [
-        ...Dt(),
+        ...Ht(),
         ...K,
         ...this.customComponents || []
       ].reduce(
@@ -2212,18 +2225,19 @@ const fn = (t, e, n = !0) => {
       ),
       httpReqsData: {},
       clicked: !1,
-      TARGET: v
+      TARGET: _
     };
   },
   provide() {
     const t = this;
     return {
-      [_.key]: {
+      [x.key]: {
         content: t.useContent,
         state: t.contentState,
         setState: t.setContextState,
         context: t.context || {},
         apiKey: t.apiKey,
+        apiVersion: t.apiVersion,
         registeredComponents: t.allRegisteredComponents
       }
     };
@@ -2232,8 +2246,8 @@ const fn = (t, e, n = !0) => {
     var t, e;
     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."
-    ), p()) {
-      if (h() && (this.forceReRenderCount = this.forceReRenderCount + 1, mn(), pn({
+    ), m()) {
+      if (g() && (this.forceReRenderCount = this.forceReRenderCount + 1, mn(), pn({
         ...this.locale ? {
           locale: this.locale
         } : {},
@@ -2251,7 +2265,7 @@ const fn = (t, e, n = !0) => {
         this.emitStateUpdate
       )), this.useContent) {
         const n = (t = this.useContent) == null ? void 0 : t.testVariationId, o = (e = this.useContent) == null ? void 0 : e.id;
-        S({
+        w({
           type: "impression",
           canTrack: this.canTrackToUse,
           contentId: o,
@@ -2259,11 +2273,12 @@ const fn = (t, e, n = !0) => {
           variationId: n !== o ? n : void 0
         });
       }
-      if (Ht()) {
+      if (Dt()) {
         const n = new URL(location.href).searchParams, o = n.get("builder.preview"), s = n.get("apiKey") || n.get("builder.space");
         o === this.model && s === this.apiKey && z({
           model: this.model,
-          apiKey: this.apiKey
+          apiKey: this.apiKey,
+          apiVersion: this.apiVersion
         }).then((r) => {
           r && this.mergeNewContent(r);
         });
@@ -2274,17 +2289,23 @@ const fn = (t, e, n = !0) => {
   watch: {
     onUpdateHook0: {
       handler() {
-        this.evaluateJsCode();
+        this.content && this.mergeNewContent(this.content);
       },
       immediate: !0
     },
     onUpdateHook1: {
       handler() {
-        this.runHttpRequests();
+        this.evaluateJsCode();
       },
       immediate: !0
     },
     onUpdateHook2: {
+      handler() {
+        this.runHttpRequests();
+      },
+      immediate: !0
+    },
+    onUpdateHook3: {
       handler() {
         this.emitStateUpdate();
       },
@@ -2292,26 +2313,31 @@ const fn = (t, e, n = !0) => {
     }
   },
   unmounted() {
-    p() && (window.removeEventListener("message", this.processMessage), window.removeEventListener(
+    m() && (window.removeEventListener("message", this.processMessage), window.removeEventListener(
       "builder:component:stateChangeListenerActivated",
       this.emitStateUpdate
     ));
   },
   computed: {
     onUpdateHook0() {
+      return {
+        0: this.content
+      };
+    },
+    onUpdateHook1() {
       var t, e;
       return {
         0: (e = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : e.jsCode,
         1: this.contentState
       };
     },
-    onUpdateHook1() {
+    onUpdateHook2() {
       var t, e;
       return {
         0: (e = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : e.httpRequests
       };
     },
-    onUpdateHook2() {
+    onUpdateHook3() {
       return {
         0: this.contentState
       };
@@ -2379,7 +2405,7 @@ const fn = (t, e, n = !0) => {
       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;
-        S({
+        w({
           type: "click",
           canTrack: this.canTrackToUse,
           contentId: s,
@@ -2402,7 +2428,7 @@ const fn = (t, e, n = !0) => {
       );
     },
     handleRequest({ url: t, key: e }) {
-      V(t).then((n) => n.json()).then((n) => {
+      U(t).then((n) => n.json()).then((n) => {
         const o = {
           ...this.contentState,
           [e]: n
@@ -2416,7 +2442,7 @@ const fn = (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] || h())) {
+        if (r && (!this.httpReqsData[s] || g())) {
           const i = this.evalExpression(r);
           this.handleRequest({
             url: i,
@@ -2426,7 +2452,7 @@ const fn = (t, e, n = !0) => {
       });
     },
     emitStateUpdate() {
-      h() && window.dispatchEvent(
+      g() && window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
             state: this.contentState,
@@ -2442,10 +2468,10 @@ const fn = (t, e, n = !0) => {
 var kn = function() {
   var o, s, r, i, l, a, c, 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.onClick(m);
+  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(p) {
+    return e.onClick(p);
   } } }, [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();
-}, Cn = [], Sn = /* @__PURE__ */ f(
+}, Cn = [], Sn = /* @__PURE__ */ h(
   xn,
   kn,
   Cn,
@@ -2460,7 +2486,7 @@ const wn = Sn.exports, Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   default: wn
 }, Symbol.toStringTag, { value: "Module" })), P = {};
 function An(t) {
-  if (p()) {
+  if (m()) {
     Object.assign(P, t);
     const e = {
       type: "builder.settingsChange",
@@ -2471,32 +2497,32 @@ function An(t) {
 }
 export {
   M as A,
-  _ as B,
-  ue as C,
-  he as F,
+  x as B,
+  de as C,
+  fe as F,
   ke as I,
   Ne as S,
-  v as T,
+  _ as T,
   St as V,
   In as a,
   Rn as b,
   b as c,
   ne as d,
   E as e,
-  w as f,
+  T as f,
   ee as g,
   Z as h,
   wn as i,
   mt as j,
   yt as k,
-  h as l,
-  Ht as m,
-  f as n,
+  g as l,
+  Dt as m,
+  h as n,
   K as o,
   $n as p,
   qt as q,
   Ee as r,
-  dn as s,
+  un as s,
   En as t,
   An as u,
   z as v,