@builder.io/sdk-vue 0.4.5 → 0.5.1

package/packages/_vue2/dist/{index.dcd9672f.js → index.ed62d736.js}

@@ -1,51 +1,49 @@
-import { defineComponent as b } from "vue";
-const et = b({
+import { defineComponent as g } from "vue";
+function V(e = {}, t, n) {
+  const o = {};
+  for (const r in e) {
+    if (!e[r] || n && !r.startsWith(t))
+      continue;
+    const s = n ? r.replace(t, "") : r;
+    o[s] = e[r];
+  }
+  return o;
+}
+const tt = g({
   name: "builder-button",
   props: ["attributes", "text", "link", "openLinkInNewTab"],
+  data() {
+    return { filterAttrs: V };
+  },
   methods: {
-    filterAttrs: function(t = {}, n) {
-      const r = "v-on:";
-      return Object.keys(t).filter((o) => {
-        if (!t[o])
-          return !1;
-        const s = o.startsWith(r);
-        return n ? s : !s;
-      }).reduce(
-        (o, s) => ({
-          ...o,
-          [s.replace(r, "")]: t[s]
-        }),
-        {}
-      );
-    },
     _classStringToObject(e) {
       const t = {};
       if (typeof e != "string")
         return t;
       const n = e.trim().split(/\s+/);
-      for (const r of n)
-        t[r] = !0;
+      for (const o of n)
+        t[o] = !0;
       return t;
     }
   }
 });
-function g(e, t, n, r, o, s, i, u) {
+function b(e, t, n, o, r, s, i, u) {
   var a = typeof e == "function" ? e.options : e;
-  t && (a.render = t, a.staticRenderFns = n, a._compiled = !0), r && (a.functional = !0), s && (a._scopeId = "data-v-" + s);
+  t && (a.render = t, a.staticRenderFns = n, a._compiled = !0), o && (a.functional = !0), s && (a._scopeId = "data-v-" + s);
   var d;
   if (i ? (d = function(c) {
-    c = c || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !c && typeof __VUE_SSR_CONTEXT__ < "u" && (c = __VUE_SSR_CONTEXT__), o && o.call(this, c), c && c._registeredComponents && c._registeredComponents.add(i);
-  }, a._ssrRegister = d) : o && (d = u ? function() {
-    o.call(
+    c = c || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !c && typeof __VUE_SSR_CONTEXT__ < "u" && (c = __VUE_SSR_CONTEXT__), r && r.call(this, c), c && c._registeredComponents && c._registeredComponents.add(i);
+  }, a._ssrRegister = d) : r && (d = u ? function() {
+    r.call(
       this,
       (a.functional ? this.parent : this).$root.$options.shadowRoot
     );
-  } : o), d)
+  } : r), d)
     if (a.functional) {
       a._injectStyles = d;
-      var m = a.render;
-      a.render = function(f, l) {
-        return d.call(l), m(f, l);
+      var f = a.render;
+      a.render = function(m, l) {
+        return d.call(l), f(m, l);
       };
     } else {
       var p = a.beforeCreate;
@@ -56,22 +54,20 @@ function g(e, t, n, r, o, s, i, u) {
     options: a
   };
 }
-var nt = function() {
+var et = function() {
   var t = this, n = t._self._c;
-  return t._self._setupProxy, t.link ? n("a", t._g(t._b({ attrs: { role: "button", href: t.link, target: t.openLinkInNewTab ? "_blank" : void 0 } }, "a", t.filterAttrs(t.attributes, !1), !1), t.filterAttrs(t.attributes, !0)), [t._v(" " + t._s(t.text) + " ")]) : n("button", t._g(t._b({ class: t._classStringToObject(
-    t.attributes.class + " button-t9spj7joih"
-  ) }, "button", t.filterAttrs(t.attributes, !1), !1), t.filterAttrs(t.attributes, !0)), [t._v(" " + t._s(t.text) + " ")]);
-}, rt = [], ot = /* @__PURE__ */ g(
+  return t._self._setupProxy, t.link ? n("a", t._g(t._b({ attrs: { role: "button", href: t.link, target: t.openLinkInNewTab ? "_blank" : void 0 } }, "a", t.filterAttrs(t.attributes, "v-on:", !1), !1), t.filterAttrs(t.attributes, "v-on:", !0)), [t._v(" " + t._s(t.text) + " ")]) : n("button", t._g(t._b({ class: t._classStringToObject(t.attributes.class + " button-2fnk003dqad"), style: t.attributes.style }, "button", t.filterAttrs(t.attributes, "v-on:", !1), !1), t.filterAttrs(t.attributes, "v-on:", !0)), [t._v(" " + t._s(t.text) + " ")]);
+}, nt = [], ot = /* @__PURE__ */ b(
+  tt,
   et,
   nt,
-  rt,
   !1,
   null,
-  "90ea412a",
+  "d03c6eb1",
   null,
   null
 );
-const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
+const nn = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
   small: {
     min: 320,
     default: 321,
@@ -87,21 +83,24 @@ const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
     default: 991,
     max: 1200
   }
-}, Ze = (e, t = F) => `@media (max-width: ${t[e].max}px)`, st = ({ small: e, medium: t }) => {
+}, on = (e, t = F) => `@media (max-width: ${t[e].max}px)`, rt = ({
+  small: e,
+  medium: t
+}) => {
   const n = A(F);
   if (!e || !t)
     return n;
-  const r = Math.floor(e / 2);
+  const o = Math.floor(e / 2);
   n.small = {
     max: e,
-    min: r,
-    default: r + 1
+    min: o,
+    default: o + 1
   };
-  const o = n.small.max + 1;
+  const r = n.small.max + 1;
   n.medium = {
     max: t,
-    min: o,
-    default: o + 1
+    min: r,
+    default: r + 1
   };
   const s = n.medium.max + 1;
   return n.large = {
@@ -109,39 +108,28 @@ const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
     min: s,
     default: s + 1
   }, n;
-}, w = "vue2", it = Symbol(), E = {
-  Builder: {
-    content: null,
-    context: {},
-    localState: void 0,
-    rootSetState() {
-    },
-    rootState: {},
-    apiKey: null,
-    apiVersion: void 0,
-    registeredComponents: {},
-    inheritedStyles: {}
-  },
-  key: it
-}, at = () => Promise.resolve().then(() => At).then((e) => e.default).catch((e) => {
+}, w = "vue2", st = () => Promise.resolve().then(() => Et).then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
+    "Error while attempting to dynamically import component Blocks at ../../components/blocks/blocks.vue",
     e
   ), e;
-}), ct = () => import("./inlined-styles.759d26e8.js").then((e) => e.default).catch((e) => {
+}), it = () => import("./inlined-styles.2709172e.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component InlinedStyles at ../../components/inlined-styles.vue",
     e
   ), e;
-}), lt = b({
+}), at = g({
   name: "builder-columns",
-  components: { InlinedStyles: ct, RenderBlocks: at },
+  components: { "inlined-styles": it, blocks: st },
   props: [
+    "js",
     "space",
     "columns",
     "stackColumnsAt",
     "reverseColumnsWhenStacked",
-    "builderBlock"
+    "builderContext",
+    "builderBlock",
+    "builderComponents"
   ],
   data() {
     return {
@@ -152,9 +140,6 @@ const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
       TARGET: w
     };
   },
-  inject: {
-    builderContext: E.key
-  },
   computed: {
     columnsCssVars() {
       return {
@@ -215,32 +200,32 @@ const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
       return this.stackAt === "never" ? t : e;
     },
     columnCssVars(e) {
-      const t = e === 0 ? 0 : this.gutterSize, n = this.getColumnCssWidth(e), r = `${t}px`, o = "100%", s = 0;
+      const t = e === 0 ? 0 : this.gutterSize, n = this.getColumnCssWidth(e), o = `${t}px`, r = "100%", s = 0;
       return {
         width: n,
-        "margin-left": r,
+        ["margin-left"]: o,
         "--column-width-mobile": this.getMobileStyle({
-          stackedStyle: o,
+          stackedStyle: r,
           desktopStyle: n
         }),
         "--column-margin-left-mobile": this.getMobileStyle({
           stackedStyle: s,
-          desktopStyle: r
+          desktopStyle: o
         }),
         "--column-width-tablet": this.getTabletStyle({
-          stackedStyle: o,
+          stackedStyle: r,
           desktopStyle: n
         }),
         "--column-margin-left-tablet": this.getTabletStyle({
           stackedStyle: s,
-          desktopStyle: r
+          desktopStyle: o
         })
       };
     },
     getWidthForBreakpointSize(e) {
-      var n, r;
-      return st(
-        ((r = (n = this.builderContext.content) == null ? void 0 : n.meta) == null ? void 0 : r.breakpoints) || {}
+      var n, o;
+      return rt(
+        ((o = (n = this.builderContext.content) == null ? void 0 : n.meta) == null ? void 0 : o.breakpoints) || {}
       )[e].max;
     },
     _classStringToObject(e) {
@@ -248,86 +233,80 @@ const Ye = ot.exports, A = (e) => JSON.parse(JSON.stringify(e)), F = {
       if (typeof e != "string")
         return t;
       const n = e.trim().split(/\s+/);
-      for (const r of n)
-        t[r] = !0;
+      for (const o of n)
+        t[o] = !0;
       return t;
     }
   }
 });
-var ut = function() {
+var ct = function() {
   var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", { class: t._classStringToObject(
-    `builder-columns ${t.builderBlock.id}-breakpoints div-2brhoa1k8gd`
-  ), style: t.columnsCssVars, attrs: { dataSet: {
-    "builder-block-name": "builder-columns"
-  } } }, [t.TARGET !== "reactNative" ? [n("inlined-styles", { attrs: { styles: t.columnsStyles } })] : t._e(), t._l(t.columns, function(r, o) {
-    return n("div", { key: o, staticClass: "builder-column div-2brhoa1k8gd-2", style: t.columnCssVars(o), attrs: { dataSet: {
-      "builder-block-name": "builder-column"
-    } } }, [n("render-blocks", { attrs: { blocks: r.blocks, path: `component.options.columns.${o}.blocks`, parent: t.builderBlock.id, styleProp: {
+  return t._self._setupProxy, n("div", t._b({ class: t._classStringToObject(
+    `builder-columns ${t.builderBlock.id}-breakpoints div-t9spj7joih`
+  ), style: t.columnsCssVars }, "div", {}, !1), [t.TARGET !== "reactNative" ? [n("inlined-styles", { attrs: { styles: t.columnsStyles } })] : t._e(), t._l(t.columns, function(o, r) {
+    return n("div", t._b({ key: r, staticClass: "builder-column div-t9spj7joih-2", style: t.columnCssVars(r) }, "div", {}, !1), [n("blocks", { attrs: { blocks: o.blocks, path: `component.options.columns.${r}.blocks`, parent: t.builderBlock.id, styleProp: {
       flexGrow: "1"
-    } } })], 1);
+    }, context: t.builderContext, registeredComponents: t.builderComponents } })], 1);
   })], 2);
-}, dt = [], ft = /* @__PURE__ */ g(
+}, lt = [], ut = /* @__PURE__ */ b(
+  at,
+  ct,
   lt,
-  ut,
-  dt,
   !1,
   null,
-  "7bfe490c",
+  "b1c2e5e0",
   null,
   null
 );
-const tn = ft.exports, mt = b({
+const rn = ut.exports, dt = g({
   name: "builder-fragment-component",
   props: []
 });
-var pt = function() {
+var mt = function() {
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("span", [t._t("default")], 2);
-}, ht = [], _t = /* @__PURE__ */ g(
+}, ft = [], pt = /* @__PURE__ */ b(
+  dt,
   mt,
-  pt,
-  ht,
+  ft,
   !1,
   null,
   null,
   null,
   null
 );
-const en = _t.exports;
+const sn = pt.exports;
 function P(e) {
   return e.replace(/http(s)?:/, "");
 }
-function bt(e = "", t, n) {
-  const r = new RegExp("([?&])" + t + "=.*?(&|$)", "i"), o = e.indexOf("?") !== -1 ? "&" : "?";
-  return e.match(r) ? e.replace(r, "$1" + t + "=" + encodeURIComponent(n) + "$2") : e + o + t + "=" + encodeURIComponent(n);
+function ht(e = "", t, n) {
+  const o = new RegExp("([?&])" + t + "=.*?(&|$)", "i"), r = e.indexOf("?") !== -1 ? "&" : "?";
+  return e.match(o) ? e.replace(o, "$1" + t + "=" + encodeURIComponent(n) + "$2") : e + r + t + "=" + encodeURIComponent(n);
 }
-function gt(e, t) {
+function _t(e, t) {
   if (!e || !(e != null && e.match(/cdn\.shopify\.com/)) || !t)
     return e;
   if (t === "master")
     return P(e);
-  const n = e.match(
-    /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
-  );
+  const n = e.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
   if (n) {
-    const r = e.split(n[0]), o = n[3], s = t.match("x") ? t : `${t}x`;
-    return P(`${r[0]}_${s}${o}`);
+    const o = e.split(n[0]), r = n[3], s = t.match("x") ? t : `${t}x`;
+    return P(`${o[0]}_${s}${r}`);
   }
   return null;
 }
-function R(e) {
+function T(e) {
   if (!e)
     return e;
   const t = [100, 200, 400, 800, 1200, 1600, 2e3];
   if (e.match(/builder\.io/)) {
     let n = e;
-    const r = Number(e.split("?width=")[1]);
-    return isNaN(r) || (n = `${n} ${r}w`), t.filter((o) => o !== r).map((o) => `${bt(e, "width", o)} ${o}w`).concat([n]).join(", ");
+    const o = Number(e.split("?width=")[1]);
+    return isNaN(o) || (n = `${n} ${o}w`), t.filter((r) => r !== o).map((r) => `${ht(e, "width", r)} ${r}w`).concat([n]).join(", ");
   }
-  return e.match(/cdn\.shopify\.com/) ? t.map((n) => [gt(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, r]) => `${n} ${r}w`).concat([e]).join(", ") : e;
+  return e.match(/cdn\.shopify\.com/) ? t.map((n) => [_t(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([e]).join(", ") : e;
 }
-const yt = b({
+const gt = g({
   name: "builder-image",
   props: [
     "image",
@@ -351,10 +330,10 @@ const yt = b({
         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"), R(t);
+          return console.debug("Removed given srcset"), T(t);
       } else if (this.image && !this.srcset)
-        return R(t);
-      return R(t);
+        return T(t);
+      return T(t);
     },
     webpSrcSet() {
       var e;
@@ -377,155 +356,114 @@ const yt = b({
       if (typeof e != "string")
         return t;
       const n = e.trim().split(/\s+/);
-      for (const r of n)
-        t[r] = !0;
+      for (const o of n)
+        t[o] = !0;
       return t;
     }
   }
 });
-var vt = function() {
-  var r, o, s, i;
+var bt = function() {
+  var o, r, s, i;
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("div", [n("picture", [t.webpSrcSet ? [n("source", { attrs: { type: "image/webp", srcset: t.webpSrcSet } })] : t._e(), n("img", { class: t._classStringToObject(
-    "builder-image" + (t.className ? " " + t.className : "") + " img-29wpyomtntv"
+    "builder-image" + (t.className ? " " + t.className : "") + " img-1pl23ac79ld"
   ), style: {
     objectPosition: t.backgroundPosition || "center",
     objectFit: t.backgroundSize || "cover",
     ...t.aspectRatioCss
-  }, attrs: { loading: "lazy", alt: t.altText, role: t.altText ? "presentation" : void 0, src: t.image, srcset: t.srcSetToUse, sizes: t.sizes } })], 2), t.aspectRatio && !(((o = (r = t.builderBlock) == null ? void 0 : r.children) == null ? void 0 : o.length) && t.fitContent) ? [n("div", { staticClass: "builder-image-sizer div-29wpyomtntv", style: {
+  }, attrs: { loading: "lazy", alt: t.altText, role: t.altText ? "presentation" : void 0, src: t.image, srcset: t.srcSetToUse, sizes: t.sizes } })], 2), t.aspectRatio && !(((r = (o = t.builderBlock) == null ? void 0 : o.children) == null ? void 0 : r.length) && t.fitContent) ? [n("div", { staticClass: "builder-image-sizer div-1pl23ac79ld", style: {
     paddingTop: t.aspectRatio * 100 + "%"
-  } })] : t._e(), ((i = (s = t.builderBlock) == null ? void 0 : s.children) == null ? void 0 : i.length) && t.fitContent ? [t._t("default")] : t._e(), !t.fitContent && t.children ? [n("div", { staticClass: "div-29wpyomtntv-2" }, [t._t("default")], 2)] : t._e()], 2);
-}, St = [], kt = /* @__PURE__ */ g(
+  } })] : t._e(), ((i = (s = t.builderBlock) == null ? void 0 : s.children) == null ? void 0 : i.length) && t.fitContent ? [t._t("default")] : t._e(), !t.fitContent && t.$slots.default ? [n("div", { staticClass: "div-1pl23ac79ld-2" }, [t._t("default")], 2)] : t._e()], 2);
+}, yt = [], vt = /* @__PURE__ */ b(
+  gt,
+  bt,
   yt,
-  vt,
-  St,
   !1,
   null,
-  "28890a77",
+  "29cdebee",
   null,
   null
 );
-const nn = kt.exports;
-function y() {
-  return typeof window < "u" && typeof document < "u";
-}
-function xt() {
-  return y() && window.self !== window.top;
-}
-function T() {
-  return xt() && window.location.search.indexOf("builder.frameEditing=") !== -1;
-}
-const wt = () => import("./block-styles.76e698a7.js").then((e) => e.default).catch((e) => {
+const an = vt.exports, St = Symbol(), kt = {
+  Builder: {
+    content: null,
+    context: {},
+    localState: void 0,
+    rootSetState() {
+    },
+    rootState: {},
+    apiKey: null,
+    apiVersion: void 0,
+    componentInfos: {},
+    inheritedStyles: {}
+  },
+  key: St
+}, xt = Symbol(), wt = {
+  Components: { registeredComponents: {} },
+  key: xt
+}, Ct = () => import("./block-styles.1cc420e2.js").then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
+    "Error while attempting to dynamically import component BlockStyles at ../block/components/block-styles.vue",
     e
   ), e;
-}), Ct = () => import("./render-block.844495c0.js").then((e) => e.default).catch((e) => {
+}), $t = () => import("./block.7a80ed18.js").then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
+    "Error while attempting to dynamically import component Block at ../block/block.vue",
     e
   ), e;
-}), $t = b({
-  name: "render-blocks",
-  components: { RenderBlock: Ct, BlockStyles: wt },
-  props: ["blocks", "parent", "path", "styleProp"],
-  inject: {
-    builderContext: E.key
-  },
-  computed: {
-    className() {
-      var e;
-      return "builder-blocks" + ((e = this.blocks) != null && e.length ? "" : " no-blocks");
-    }
+}), Tt = () => import("./blocks-wrapper.9aacce51.js").then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component BlocksWrapper at ./blocks-wrapper.vue",
+    e
+  ), e;
+}), It = g({
+  name: "builder-blocks",
+  components: {
+    "blocks-wrapper": Tt,
+    block: $t,
+    "block-styles": Ct
   },
-  methods: {
-    onClick() {
-      var e, t;
-      T() && !((e = this.blocks) != null && e.length) && ((t = window.parent) == null || t.postMessage(
-        {
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: this.parent,
-            dataPath: this.path
-          }
-        },
-        "*"
-      ));
-    },
-    onMouseEnter() {
-      var e, t;
-      T() && !((e = this.blocks) != null && e.length) && ((t = window.parent) == null || t.postMessage(
-        {
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: this.parent,
-            dataPath: this.path
-          }
-        },
-        "*"
-      ));
-    },
-    _classStringToObject(e) {
-      const t = {};
-      if (typeof e != "string")
-        return t;
-      const n = e.trim().split(/\s+/);
-      for (const r of n)
-        t[r] = !0;
-      return t;
-    }
+  props: [
+    "blocks",
+    "parent",
+    "path",
+    "styleProp",
+    "context",
+    "registeredComponents"
+  ],
+  inject: {
+    builderContext: kt.key,
+    componentsContext: wt.key
   }
 });
-var Tt = function() {
+var Rt = function() {
   var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", { class: t._classStringToObject(t.className + " div-2fnk003dqad"), style: t.styleProp, attrs: { "builder-path": t.path, "builder-parent-id": t.parent, dataSet: {
-    class: t.className
-  } }, on: { click: function(r) {
-    return t.onClick();
-  }, mouseenter: function(r) {
-    return t.onMouseEnter();
-  }, keypress: function(r) {
-    return t.onClick();
-  } } }, [t.blocks ? t._l(t.blocks, function(r, o) {
-    return n("render-block", { key: "render-block-" + r.id, attrs: { block: r, context: t.builderContext } });
-  }) : t._e(), t.blocks ? t._l(t.blocks, function(r, o) {
-    return n("block-styles", { key: "block-style-" + r.id, attrs: { block: r, context: t.builderContext } });
+  return t._self._setupProxy, n("blocks-wrapper", { attrs: { blocks: t.blocks, parent: t.parent, path: t.path, styleProp: t.styleProp } }, [t.blocks ? t._l(t.blocks, function(o, r) {
+    return n("block", { key: "render-block-" + o.id, attrs: { block: o, context: t.context || t.builderContext, registeredComponents: t.registeredComponents || t.componentsContext.registeredComponents } });
+  }) : t._e(), t.blocks ? t._l(t.blocks, function(o, r) {
+    return n("block-styles", { key: "block-style-" + o.id, attrs: { block: o, context: t.context || t.builderContext } });
   }) : t._e()], 2);
-}, Rt = [], It = /* @__PURE__ */ g(
-  $t,
-  Tt,
+}, Vt = [], At = /* @__PURE__ */ b(
+  It,
   Rt,
+  Vt,
   !1,
   null,
-  "b740fd05",
+  null,
   null,
   null
 );
-const Vt = It.exports, At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ot = At.exports, Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Vt
-}, Symbol.toStringTag, { value: "Module" })), Et = b({
+  default: Ot
+}, Symbol.toStringTag, { value: "Module" })), Pt = g({
   name: "builder-section-component",
-  props: ["maxWidth", "attributes"],
-  methods: {
-    filterAttrs: function(t = {}, n) {
-      const r = "v-on:";
-      return Object.keys(t).filter((o) => {
-        if (!t[o])
-          return !1;
-        const s = o.startsWith(r);
-        return n ? s : !s;
-      }).reduce(
-        (o, s) => ({
-          ...o,
-          [s.replace(r, "")]: t[s]
-        }),
-        {}
-      );
-    }
+  props: ["attributes", "maxWidth"],
+  data() {
+    return { filterAttrs: V };
   }
 });
-var Ot = function() {
+var jt = function() {
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("section", t._g(t._b({ style: {
     width: "100%",
@@ -538,87 +476,100 @@ var Ot = function() {
     alignItems: "stretch",
     marginLeft: "auto",
     marginRight: "auto"
-  } }, "section", t.filterAttrs(t.attributes, !1), !1), t.filterAttrs(t.attributes, !0)), [t._t("default")], 2);
-}, Pt = [], jt = /* @__PURE__ */ g(
-  Et,
-  Ot,
+  } }, "section", t.filterAttrs(t.attributes, "v-on:", !1), !1), t.filterAttrs(t.attributes, "v-on:", !0)), [t._t("default")], 2);
+}, Bt = [], Nt = /* @__PURE__ */ b(
   Pt,
+  jt,
+  Bt,
   !1,
   null,
   null,
   null,
   null
 );
-const rn = jt.exports, C = "[Builder.io]: ", v = {
+const cn = Nt.exports;
+function y() {
+  return typeof window < "u" && typeof document < "u";
+}
+const C = "[Builder.io]: ", v = {
   log: (...e) => console.log(C, ...e),
   error: (...e) => console.error(C, ...e),
   warn: (...e) => console.warn(C, ...e),
   debug: (...e) => console.debug(C, ...e)
-}, x = (e) => e != null, Bt = (e) => {
+}, x = (e) => e != null, Ft = (e) => {
   if (e === "localhost" || e === "127.0.0.1")
     return e;
   const t = e.split(".");
   return t.length > 2 ? t.slice(1).join(".") : e;
-}, M = ({
+}, U = ({
   name: e,
   canTrack: t
 }) => {
   var n;
   try {
-    return t ? (n = document.cookie.split("; ").find((r) => r.startsWith(`${e}=`))) == null ? void 0 : n.split("=")[1] : void 0;
-  } catch (r) {
-    v.warn("[COOKIE] GET error: ", (r == null ? void 0 : r.message) || r);
+    return t ? (n = document.cookie.split("; ").find((o) => o.startsWith(`${e}=`))) == null ? void 0 : n.split("=")[1] : void 0;
+  } catch (o) {
+    v.warn("[COOKIE] GET error: ", (o == null ? void 0 : o.message) || o);
     return;
   }
-}, U = async (e) => M(e), Nt = (e) => e.map(([t, n]) => n ? `${t}=${n}` : t).filter(x).join("; "), Ft = [
-  ["secure", ""],
-  ["SameSite", "None"]
-], Mt = ({
+}, M = async (e) => U(e), Ut = (e) => e.map(([t, n]) => n ? `${t}=${n}` : t).filter(x).join("; "), Mt = [["secure", ""], ["SameSite", "None"]], Wt = ({
   name: e,
   value: t,
   expires: n
 }) => {
-  const o = (y() ? location.protocol === "https:" : !0) ? Ft : [[]], s = n ? [["expires", n.toUTCString()]] : [[]], i = [
-    [e, t],
-    ...s,
-    ["path", "/"],
-    ["domain", Bt(window.location.hostname)],
-    ...o
-  ];
-  return Nt(i);
+  const r = (y() ? location.protocol === "https:" : !0) ? Mt : [[]], s = n ? [["expires", n.toUTCString()]] : [[]], i = [[e, t], ...s, ["path", "/"], ["domain", Ft(window.location.hostname)], ...r];
+  return Ut(i);
 }, W = async ({
   name: e,
   value: t,
   expires: n,
-  canTrack: r
+  canTrack: o
 }) => {
   try {
-    if (!r)
+    if (!o)
       return;
-    const o = Mt({ name: e, value: t, expires: n });
-    document.cookie = o;
-  } catch (o) {
-    v.warn("[COOKIE] SET error: ", (o == null ? void 0 : o.message) || o);
+    const r = Wt({
+      name: e,
+      value: t,
+      expires: n
+    });
+    document.cookie = r;
+  } catch (r) {
+    v.warn("[COOKIE] SET error: ", (r == null ? void 0 : r.message) || r);
   }
-}, Ut = "builder.tests", O = (e) => `${Ut}.${e}`, Wt = ({ contentId: e }) => U({ name: O(e), canTrack: !0 }), Lt = ({ contentId: e }) => M({ name: O(e), canTrack: !0 }), Kt = ({
+}, Lt = "builder.tests", O = (e) => `${Lt}.${e}`, Kt = ({
+  contentId: e
+}) => M({
+  name: O(e),
+  canTrack: !0
+}), zt = ({
+  contentId: e
+}) => U({
+  name: O(e),
+  canTrack: !0
+}), Dt = ({
   contentId: e,
   value: t
-}) => W({ name: O(e), value: t, canTrack: !0 }), L = (e) => x(e.id) && x(e.variations) && Object.keys(e.variations).length > 0, zt = ({
+}) => W({
+  name: O(e),
+  value: t,
+  canTrack: !0
+}), L = (e) => x(e.id) && x(e.variations) && Object.keys(e.variations).length > 0, Gt = ({
   id: e,
   variations: t
 }) => {
-  var o;
+  var r;
   let n = 0;
-  const r = Math.random();
+  const o = Math.random();
   for (const s in t) {
-    const i = (o = t[s]) == null ? void 0 : o.testRatio;
-    if (n += i, r < n)
+    const i = (r = t[s]) == null ? void 0 : r.testRatio;
+    if (n += i, o < n)
       return s;
   }
   return e;
 }, K = (e) => {
-  const t = zt(e);
-  return Kt({
+  const t = Gt(e);
+  return Dt({
     contentId: e.id,
     value: t
   }).catch((n) => {
@@ -637,7 +588,7 @@ const rn = jt.exports, C = "[Builder.io]: ", v = {
     testVariationId: n.id,
     testVariationName: n.name || (n.id === e.id ? "Default" : "")
   };
-}, Gt = ({
+}, Ht = ({
   item: e,
   canTrack: t
 }) => {
@@ -647,175 +598,211 @@ const rn = jt.exports, C = "[Builder.io]: ", v = {
     return;
   if (!L(e))
     return e;
-  const n = Lt({
+  const n = zt({
     contentId: e.id
   }) || K({
     variations: e.variations,
     id: e.id
-  }), r = z({ item: e, testGroupId: n });
+  }), o = z({
+    item: e,
+    testGroupId: n
+  });
   return {
     ...e,
-    ...r
+    ...o
   };
-}, Dt = async ({
+}, Jt = async ({
   item: e,
   canTrack: t
 }) => {
   if (!t || !L(e))
     return e;
-  const r = await Wt({
+  const o = await Kt({
     contentId: e.id
   }) || K({
     variations: e.variations,
     id: e.id
-  }), o = z({ item: e, testGroupId: r });
+  }), r = z({
+    item: e,
+    testGroupId: o
+  });
   return {
     ...e,
-    ...o
+    ...r
   };
 }, I = (e) => x(e) ? e : !0;
-function Ht() {
+function Xt() {
   return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
 }
-function Jt() {
-  const e = Ht().fetch;
+function qt() {
+  const e = Xt().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");
+    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 Xt = Jt();
-function V(e, t = null, n = ".") {
-  return Object.keys(e).reduce((r, o) => {
-    const s = e[o], i = [t, o].filter(Boolean).join(n);
-    return [
-      typeof s == "object",
-      s !== null,
-      !(Array.isArray(s) && s.length === 0)
-    ].every(Boolean) ? { ...r, ...V(s, i, n) } : { ...r, [i]: s };
+const Qt = qt();
+function R(e, t = null, n = ".") {
+  return Object.keys(e).reduce((o, r) => {
+    const s = e[r], i = [t, r].filter(Boolean).join(n);
+    return [typeof s == "object", s !== null, !(Array.isArray(s) && s.length === 0)].every(Boolean) ? {
+      ...o,
+      ...R(s, i, n)
+    } : {
+      ...o,
+      [i]: s
+    };
   }, {});
 }
-const j = "builder.", qt = "options.", Qt = (e) => {
+const j = "builder.", Yt = "options.", Zt = (e) => {
   const t = {};
-  return e.forEach((n, r) => {
-    t[r] = n;
+  return e.forEach((n, o) => {
+    t[o] = n;
   }), t;
-}, Yt = (e) => {
+}, te = (e) => {
   if (!e)
     return {};
-  const t = G(e), n = {};
-  return Object.keys(t).forEach((r) => {
-    if (r.startsWith(j)) {
-      const o = r.replace(j, "").replace(qt, "");
-      n[o] = t[r];
+  const t = D(e), n = {};
+  return Object.keys(t).forEach((o) => {
+    if (o.startsWith(j)) {
+      const r = o.replace(j, "").replace(Yt, "");
+      n[r] = t[o];
     }
   }), n;
-}, Zt = () => {
+}, ee = () => {
   if (!y())
     return {};
   const e = new URLSearchParams(window.location.search);
-  return Yt(e);
-}, G = (e) => e instanceof URLSearchParams ? Qt(e) : e, te = "v3", D = (e) => {
+  return te(e);
+}, D = (e) => e instanceof URLSearchParams ? Zt(e) : e, ne = "v3", E = (e) => {
   const {
     limit: t = 30,
     userAttributes: n,
-    query: r,
-    noTraverse: o = !1,
+    query: o,
+    noTraverse: r = !1,
     model: s,
     apiKey: i,
     includeRefs: u = !0,
     enrich: a,
     locale: d,
-    apiVersion: m = te
+    apiVersion: f = ne
   } = e;
   if (!i)
     throw new Error("Missing API key");
-  if (!["v2", "v3"].includes(m))
-    throw new Error(
-      `Invalid apiVersion: expected 'v2' or 'v3', received '${m}'`
-    );
-  const p = new URL(
-    `https://cdn.builder.io/api/${m}/content/${s}?apiKey=${i}&limit=${t}&noTraverse=${o}&includeRefs=${u}${d ? `&locale=${d}` : ""}${a ? `&enrich=${a}` : ""}`
-  ), c = {
-    ...Zt(),
-    ...G(e.options || {})
-  }, f = V(c);
-  for (const l in f)
-    p.searchParams.set(l, String(f[l]));
-  if (n && p.searchParams.set("userAttributes", JSON.stringify(n)), r) {
-    const l = V({ query: r });
+  if (!["v2", "v3"].includes(f))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${f}'`);
+  const p = new URL(`https://cdn.builder.io/api/${f}/content/${s}?apiKey=${i}&limit=${t}&noTraverse=${r}&includeRefs=${u}${d ? `&locale=${d}` : ""}${a ? `&enrich=${a}` : ""}`), c = {
+    ...ee(),
+    ...D(e.options || {})
+  }, m = R(c);
+  for (const l in m)
+    p.searchParams.set(l, String(m[l]));
+  if (n && p.searchParams.set("userAttributes", JSON.stringify(n)), o) {
+    const l = R({
+      query: o
+    });
     for (const h in l)
       p.searchParams.set(h, JSON.stringify(l[h]));
   }
   return p;
-}, H = (e) => "results" in e;
-async function ee(e) {
-  const t = await oe({ ...e, limit: 1 });
-  return t && H(t) && t.results[0] || null;
+}, oe = (e) => "results" in e;
+async function re(e) {
+  const t = await ae({
+    ...e,
+    limit: 1
+  });
+  return t && t.results[0] || null;
 }
-const ne = async (e) => {
-  const t = D(e);
-  return await (await Xt(t.href)).json();
-}, re = async (e, t) => {
-  const n = I(e.canTrack);
-  if (!n || !(y() || w === "reactNative"))
+const se = async (e) => {
+  const t = E(e);
+  return await (await Qt(t.href)).json();
+}, ie = async (e, t, n = E(e)) => {
+  const o = I(e.canTrack);
+  if (n.search.includes("preview="), !o || !(y() || w === "reactNative"))
     return t;
   try {
     const r = [];
-    for (const o of t.results)
-      r.push(await Dt({ item: o, canTrack: n }));
+    for (const s of t.results)
+      r.push(await Jt({
+        item: s,
+        canTrack: o
+      }));
     t.results = r;
   } catch (r) {
     v.error("Could not process A/B tests. ", r);
   }
   return t;
 };
-async function oe(e) {
+async function ae(e) {
   try {
-    const t = D(e), n = await ne(e);
-    return H(n) ? re(e, n) : (v.error("Error fetching data. ", { url: t, content: n, options: e }), n);
+    const t = E(e), n = await se(e);
+    return oe(n) ? ie(e, n) : (v.error("Error fetching data. ", {
+      url: t,
+      content: n,
+      options: e
+    }), null);
   } catch (t) {
     return v.error("Error fetching data. ", t), null;
   }
 }
-const se = () => Promise.resolve().then(() => Ee).then((e) => e.default).catch((e) => {
+const ce = async ({
+  builderContextValue: e,
+  symbol: t
+}) => {
+  if ((t == null ? void 0 : t.model) && (e == null ? void 0 : e.apiKey))
+    return re({
+      model: t.model,
+      apiKey: e.apiKey,
+      apiVersion: e.apiVersion,
+      ...(t == null ? void 0 : t.entry) && {
+        query: {
+          id: t.entry
+        }
+      }
+    }).catch((n) => {
+      v.error("Could not fetch symbol content: ", n);
+    });
+}, le = () => Promise.resolve().then(() => Be).then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component RenderContentVariants at ../../components/render-content-variants/render-content-variants.vue",
+    "Error while attempting to dynamically import component ContentVariants at ../../components/content-variants/content-variants.vue",
     e
   ), e;
-}), ie = b({
+}), ue = g({
   name: "builder-symbol",
-  components: { RenderContentVariants: se },
-  props: ["attributes", "symbol", "dynamic"],
+  components: { "content-variants": le },
+  props: [
+    "js",
+    "attributes",
+    "symbol",
+    "dynamic",
+    "builderContext",
+    "builderComponents"
+  ],
   data() {
-    var e, t, n;
-    return {
-      className: [
-        ...Object.keys(this.attributes.class),
-        "builder-symbol",
-        (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
-        ((t = this.symbol) == null ? void 0 : t.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
-      ].filter(Boolean).join(" "),
-      contentToUse: (n = this.symbol) == null ? void 0 : n.content
-    };
-  },
-  inject: {
-    builderContext: E.key
+    var e;
+    return { contentToUse: (e = this.symbol) == null ? void 0 : e.content, filterAttrs: V };
   },
   mounted() {
-    this.fetchContent();
+    this.setContent();
   },
   watch: {
     onUpdateHook0: {
       handler() {
-        this.fetchContent();
+        this.setContent();
       },
       immediate: !0
     }
   },
   computed: {
+    className() {
+      var e, t;
+      return [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
+        ((t = this.symbol) == null ? void 0 : t.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" ");
+    },
     onUpdateHook0() {
       return {
         0: this.symbol
@@ -823,90 +810,64 @@ const se = () => Promise.resolve().then(() => Ee).then((e) => e.default).catch((
     }
   },
   methods: {
-    fetchContent() {
-      var e, t, n;
-      !this.contentToUse && ((e = this.symbol) == null ? void 0 : e.model) && ((t = this.builderContext) == null ? void 0 : t.apiKey) && ee({
-        model: this.symbol.model,
-        apiKey: this.builderContext.apiKey,
-        apiVersion: this.builderContext.apiVersion,
-        ...((n = this.symbol) == null ? void 0 : n.entry) && {
-          query: {
-            id: this.symbol.entry
-          }
-        }
-      }).then((r) => {
-        r && (this.contentToUse = r);
-      }).catch((r) => {
-        v.error("Could not fetch symbol content: ", r);
+    setContent() {
+      this.contentToUse || ce({
+        symbol: this.symbol,
+        builderContextValue: this.builderContext
+      }).then((e) => {
+        e && (this.contentToUse = e);
       });
     },
-    filterAttrs: function(t = {}, n) {
-      const r = "v-on:";
-      return Object.keys(t).filter((o) => {
-        if (!t[o])
-          return !1;
-        const s = o.startsWith(r);
-        return n ? s : !s;
-      }).reduce(
-        (o, s) => ({
-          ...o,
-          [s.replace(r, "")]: t[s]
-        }),
-        {}
-      );
-    },
     _classStringToObject(e) {
       const t = {};
       if (typeof e != "string")
         return t;
       const n = e.trim().split(/\s+/);
-      for (const r of n)
-        t[r] = !0;
+      for (const o of n)
+        t[o] = !0;
       return t;
     }
   }
 });
-var ae = function() {
-  var r, o, s, i;
+var de = function() {
+  var o, r, s, i;
   var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", t._g(t._b({ class: t._classStringToObject(t.className), attrs: { dataSet: {
-    class: t.className
-  } } }, "div", t.filterAttrs(t.attributes, !1), !1), t.filterAttrs(t.attributes, !0)), [n("render-content-variants", { attrs: { __isNestedRender: !0, apiVersion: t.builderContext.apiVersion, apiKey: t.builderContext.apiKey, context: t.builderContext.context, customComponents: Object.values(t.builderContext.registeredComponents), data: {
-    ...(r = t.symbol) == null ? void 0 : r.data,
+  return t._self._setupProxy, n("div", t._g(t._b({ class: t._classStringToObject(t.className) }, "div", { ...t.filterAttrs(t.attributes, "v-on:", !1) }, !1), t.filterAttrs(t.attributes, "v-on:", !0)), [n("content-variants", { attrs: { __isNestedRender: !0, apiVersion: t.builderContext.apiVersion, apiKey: t.builderContext.apiKey, context: t.builderContext.context, customComponents: Object.values(t.builderComponents), data: {
+    ...(o = t.symbol) == null ? void 0 : o.data,
     ...t.builderContext.localState,
-    ...(s = (o = t.contentToUse) == null ? void 0 : o.data) == null ? void 0 : s.state
+    ...(s = (r = t.contentToUse) == null ? void 0 : r.data) == null ? void 0 : s.state
   }, model: (i = t.symbol) == null ? void 0 : i.model, content: t.contentToUse } })], 1);
-}, ce = [], le = /* @__PURE__ */ g(
-  ie,
-  ae,
-  ce,
+}, me = [], fe = /* @__PURE__ */ b(
+  ue,
+  de,
+  me,
   !1,
   null,
   null,
   null,
   null
 );
-const on = le.exports, ue = b({
+const ln = fe.exports, pe = g({
   name: "builder-text",
   props: ["text"]
 });
-var de = function() {
-  var r;
+var he = function() {
+  var o;
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("span", { staticClass: "builder-text", style: {
     outline: "none"
-  }, domProps: { innerHTML: t._s((r = t.text) == null ? void 0 : r.toString()) } });
-}, fe = [], me = /* @__PURE__ */ g(
-  ue,
-  de,
-  fe,
+  }, domProps: { innerHTML: t._s(((o = t.text) == null ? void 0 : o.toString()) || "") } });
+}, _e = [], ge = /* @__PURE__ */ b(
+  pe,
+  he,
+  _e,
   !1,
   null,
   null,
   null,
   null
 );
-const sn = me.exports, pe = b({
+const un = ge.exports, be = g({
   name: "builder-video",
   props: [
     "autoPlay",
@@ -915,6 +876,7 @@ const sn = me.exports, pe = b({
     "loop",
     "playsInline",
     "attributes",
+    "preload",
     "fit",
     "position",
     "video",
@@ -948,38 +910,38 @@ const sn = me.exports, pe = b({
     }
   }
 });
-var he = function() {
-  var r;
+var ye = function() {
+  var o;
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("video", t._b({ style: {
     width: "100%",
     height: "100%",
-    ...(r = t.attributes) == null ? void 0 : r.style,
+    ...(o = t.attributes) == null ? void 0 : o.style,
     objectFit: t.fit,
     objectPosition: t.position,
     borderRadius: 1
-  }, attrs: { src: t.video || "no-src", poster: t.posterImage } }, "video", t.spreadProps, !1));
-}, _e = [], be = /* @__PURE__ */ g(
-  pe,
-  he,
-  _e,
+  }, attrs: { preload: t.preload || "metadata", src: t.video || "no-src", poster: t.posterImage } }, "video", t.spreadProps, !1));
+}, ve = [], Se = /* @__PURE__ */ b(
+  be,
+  ye,
+  ve,
   !1,
   null,
   null,
   null,
   null
 );
-const an = be.exports, $ = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
+const dn = Se.exports, $ = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
   ...t,
   testVariationId: t.id,
   id: e == null ? void 0 : e.id
-})), ge = ({
+})), ke = ({
   canTrack: e,
   content: t
 }) => !(!($(t).length > 0) || !e);
-function ye(e, t, n) {
+function xe(e, t, n) {
   var i;
-  function r() {
+  function o() {
     function u(l, h, S) {
       let k = "";
       if (S) {
@@ -999,45 +961,47 @@ function ye(e, t, n) {
       }
       return null;
     }
-    const d = `builder.tests.${e}`, m = a(d), p = t.map((l) => l.id).concat(e);
-    if (m && p.includes(m))
-      return m;
+    const d = `builder.tests.${e}`, f = a(d), p = t.map((l) => l.id).concat(e);
+    if (f && p.includes(f))
+      return f;
     let c = 0;
-    const f = Math.random();
+    const m = Math.random();
     for (let l = 0; l < t.length; l++) {
       const h = t[l], S = h.testRatio;
-      if (c += S, f < c)
+      if (c += S, m < c)
         return u(d, h.id), h.id;
     }
     return u(d, e), e;
   }
-  const o = r(), s = (i = document.currentScript) == null ? void 0 : i.previousElementSibling;
+  const r = o(), s = (i = document.currentScript) == null ? void 0 : i.previousElementSibling;
   if (n) {
     s.remove();
     const u = document.currentScript;
     u == null || u.remove();
   } else {
-    const u = t.concat({ id: e }).filter((a) => a.id !== o).map((a) => `.variant-${a.id} {  display: none; }
+    const u = t.concat({
+      id: e
+    }).filter((a) => a.id !== r).map((a) => `.variant-${a.id} {  display: none; }
         `).join("");
     s.innerHTML = u;
   }
 }
-function ve(e, t, n) {
+function we(e, t, n) {
   var a;
   if (!navigator.cookieEnabled)
     return;
-  function r(d) {
-    const m = d + "=", p = document.cookie.split(";");
+  function o(d) {
+    const f = d + "=", p = document.cookie.split(";");
     for (let c = 0; c < p.length; c++) {
-      let f = p[c];
-      for (; f.charAt(0) === " "; )
-        f = f.substring(1, f.length);
-      if (f.indexOf(m) === 0)
-        return f.substring(m.length, f.length);
+      let m = p[c];
+      for (; m.charAt(0) === " "; )
+        m = m.substring(1, m.length);
+      if (m.indexOf(f) === 0)
+        return m.substring(f.length, m.length);
     }
     return null;
   }
-  const o = `builder.tests.${t}`, s = r(o), i = (a = document.currentScript) == null ? void 0 : a.parentElement, u = e === t;
+  const r = `builder.tests.${t}`, s = o(r), i = (a = document.currentScript) == null ? void 0 : a.parentElement, u = e === t;
   if (s === e) {
     if (u)
       return;
@@ -1047,40 +1011,38 @@ function ve(e, t, n) {
     return;
   }
 }
-const Se = (e) => e === "react" || e === "reactNative", J = Se(w), X = "builderIoAbTest", q = "builderIoRenderContent", ke = () => {
-  const e = ye.toString().replace(/\s+/g, " "), t = ve.toString().replace(/\s+/g, " ");
+const Ce = (e) => e === "react" || e === "reactNative", G = Ce(w), H = "builderIoAbTest", J = "builderIoRenderContent", $e = () => {
+  const e = xe.toString().replace(/\s+/g, " "), t = we.toString().replace(/\s+/g, " ");
   return `
-  window.${X} = ${e}
-  window.${q} = ${t}
+  window.${H} = ${e}
+  window.${J} = ${t}
   `;
-}, xe = (e, t) => `
-  window.${X}("${t}",${JSON.stringify(
-  e
-)}, ${J})`, cn = ({
+}, Te = (e, t) => `
+  window.${H}("${t}",${JSON.stringify(e)}, ${G})`, mn = ({
   contentId: e,
   variationId: t
 }) => `
-  window.${q}("${t}", "${e}", ${J})`, we = () => import("./render-content.8d297efd.js").then((e) => e.default).catch((e) => {
+  window.${J}("${t}", "${e}", ${G})`, Ie = () => import("./content.cb96a18a.js").then((e) => e.default).catch((e) => {
   throw console.error(
-    "Error while attempting to dynamically import component RenderContent at ../render-content/render-content.vue",
+    "Error while attempting to dynamically import component ContentComponent at ../content/content.vue",
     e
   ), e;
-}), Ce = () => import("./inlined-styles.759d26e8.js").then((e) => e.default).catch((e) => {
+}), Re = () => import("./inlined-styles.2709172e.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component InlinedStyles at ../inlined-styles.vue",
     e
   ), e;
-}), $e = () => import("./inlined-script.5b4b5fc3.js").then((e) => e.default).catch((e) => {
+}), Ve = () => import("./inlined-script.cf733bda.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component InlinedScript at ../inlined-script.vue",
     e
   ), e;
-}), Te = b({
-  name: "render-content-variants",
+}), Ae = g({
+  name: "content-variants",
   components: {
-    InlinedScript: $e,
-    InlinedStyles: Ce,
-    RenderContent: we
+    "inlined-script": Ve,
+    "inlined-styles": Re,
+    "content-component": Ie
   },
   props: [
     "canTrack",
@@ -1097,87 +1059,91 @@ const Se = (e) => e === "react" || e === "reactNative", J = Se(w), X = "builderI
     "enrich"
   ],
   data() {
-    var e;
     return {
-      shouldRenderVariants: ge({
+      shouldRenderVariants: ke({
         canTrack: I(this.canTrack),
         content: this.content
       }),
-      variantScriptStr: xe(
-        $(this.content).map((t) => ({
-          id: t.testVariationId,
-          testRatio: t.testRatio
-        })),
-        ((e = this.content) == null ? void 0 : e.id) || ""
-      ),
-      hideVariantsStyleString: $(this.content).map((t) => `.variant-${t.testVariationId} { display: none; } `).join(""),
-      getScriptString: ke,
+      getScriptString: $e,
       getVariants: $,
       getDefaultCanTrack: I,
-      handleABTestingSync: Gt,
+      handleABTestingSync: Ht,
       TARGET: w
     };
   },
   mounted() {
     this.shouldRenderVariants = !1;
+  },
+  computed: {
+    variantScriptStr() {
+      var e;
+      return Te(
+        $(this.content).map((t) => ({
+          id: t.testVariationId,
+          testRatio: t.testRatio
+        })),
+        ((e = this.content) == null ? void 0 : e.id) || ""
+      );
+    },
+    hideVariantsStyleString() {
+      return $(this.content).map((e) => `.variant-${e.testVariationId} { display: none; } `).join("");
+    }
   }
 });
-var Re = function() {
-  var r, o;
+var Oe = function() {
+  var o, r;
   var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", [!t.__isNestedRender && t.TARGET !== "reactNative" ? [n("inlined-script", { attrs: { scriptStr: t.getScriptString() } })] : t._e(), t.shouldRenderVariants ? [n("inlined-styles", { attrs: { id: `variants-styles-${(r = t.content) == null ? void 0 : r.id}`, styles: t.hideVariantsStyleString } }), n("inlined-script", { attrs: { scriptStr: t.variantScriptStr } }), t._l(t.getVariants(t.content), function(s, i) {
-    return n("render-content", { key: s.testVariationId, attrs: { content: s, showContent: !1, classNameProp: void 0, model: t.model, data: t.data, context: t.context, apiKey: t.apiKey, apiVersion: t.apiVersion, customComponents: t.customComponents, canTrack: t.canTrack, locale: t.locale, includeRefs: t.includeRefs, enrich: t.enrich, isSsrAbTest: t.shouldRenderVariants } });
-  })] : t._e(), n("render-content", t._b({ attrs: { content: t.shouldRenderVariants ? t.content : t.handleABTestingSync({
+  return t._self._setupProxy, n("div", [!t.__isNestedRender && t.TARGET !== "reactNative" ? [n("inlined-script", { attrs: { scriptStr: t.getScriptString() } })] : t._e(), t.shouldRenderVariants ? [n("inlined-styles", { attrs: { id: `variants-styles-${(o = t.content) == null ? void 0 : o.id}`, styles: t.hideVariantsStyleString } }), n("inlined-script", { attrs: { scriptStr: t.variantScriptStr } }), t._l(t.getVariants(t.content), function(s, i) {
+    return n("content-component", { key: s.testVariationId, attrs: { content: s, showContent: !1, classNameProp: void 0, model: t.model, data: t.data, context: t.context, apiKey: t.apiKey, apiVersion: t.apiVersion, customComponents: t.customComponents, canTrack: t.canTrack, locale: t.locale, includeRefs: t.includeRefs, enrich: t.enrich, isSsrAbTest: t.shouldRenderVariants } });
+  })] : t._e(), n("content-component", t._b({ attrs: { content: t.shouldRenderVariants ? t.content : t.handleABTestingSync({
     item: t.content,
     canTrack: t.getDefaultCanTrack(t.canTrack)
-  }), classNameProp: `variant-${(o = t.content) == null ? void 0 : o.id}`, showContent: !0, model: t.model, data: t.data, context: t.context, apiKey: t.apiKey, apiVersion: t.apiVersion, customComponents: t.customComponents, canTrack: t.canTrack, locale: t.locale, includeRefs: t.includeRefs, enrich: t.enrich, isSsrAbTest: t.shouldRenderVariants } }, "render-content", {
+  }), classNameProp: `variant-${(r = t.content) == null ? void 0 : r.id}`, showContent: !0, model: t.model, data: t.data, context: t.context, apiKey: t.apiKey, apiVersion: t.apiVersion, customComponents: t.customComponents, canTrack: t.canTrack, locale: t.locale, includeRefs: t.includeRefs, enrich: t.enrich, isSsrAbTest: t.shouldRenderVariants } }, "content-component", {
     key: t.shouldRenderVariants.toString()
   }, !1))], 2);
-}, Ie = [], Ve = /* @__PURE__ */ g(
-  Te,
-  Re,
-  Ie,
+}, Ee = [], Pe = /* @__PURE__ */ b(
+  Ae,
+  Oe,
+  Ee,
   !1,
   null,
   null,
   null,
   null
 );
-const Ae = Ve.exports, Ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const je = Pe.exports, Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Ae
+  default: je
 }, Symbol.toStringTag, { value: "Module" }));
-function ln() {
-  return !y() || T() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+function Ne() {
+  return y() && window.self !== window.top;
+}
+function X() {
+  return Ne() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+}
+function fn() {
+  return !y() || X() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-const Oe = (e) => {
+const pn = [], hn = (e) => ({
+  type: "builder.registerComponent",
+  data: e
+}), Fe = (e) => {
   const t = e.toString().trim();
   return `return (${!t.startsWith("function") && !t.startsWith("(") ? "function " : ""}${t}).apply(this, arguments)`;
-}, un = [], dn = ({
-  component: e,
-  ...t
-}) => ({
-  type: "builder.registerComponent",
-  data: je(t)
-}), Pe = (e) => typeof e == "function" ? Oe(e) : A(e), je = ({
+}, Ue = (e) => typeof e == "function" ? Fe(e) : A(e), _n = ({
   inputs: e,
   ...t
 }) => ({
   ...A(t),
-  inputs: e == null ? void 0 : e.map(
-    (n) => Object.entries(n).reduce(
-      (r, [o, s]) => ({
-        ...r,
-        [o]: Pe(s)
-      }),
-      {}
-    )
-  )
+  inputs: e == null ? void 0 : e.map((n) => Object.entries(n).reduce((o, [r, s]) => ({
+    ...o,
+    [r]: Ue(s)
+  }), {}))
 }), B = {};
-function fn(e, t) {
+function gn(e, t) {
   let n = B[e];
   if (n || (n = B[e] = []), n.push(t), y()) {
-    const r = {
+    const o = {
       type: "builder.register",
       data: {
         type: e,
@@ -1185,14 +1151,14 @@ function fn(e, t) {
       }
     };
     try {
-      parent.postMessage(r, "*"), parent !== window && window.postMessage(r, "*");
-    } catch (o) {
-      console.debug("Could not postmessage", o);
+      parent.postMessage(o, "*"), parent !== window && window.postMessage(o, "*");
+    } catch (r) {
+      console.debug("Could not postmessage", r);
     }
   }
 }
 const N = {};
-function mn(e) {
+function bn(e) {
   if (y()) {
     Object.assign(N, e);
     const t = {
@@ -1202,83 +1168,95 @@ function mn(e) {
     parent.postMessage(t, "*");
   }
 }
-function Be() {
+function Me() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
     const t = Math.random() * 16 | 0;
     return (e == "x" ? t : t & 3 | 8).toString(16);
   });
 }
-function Q() {
-  return Be().replace(/-/g, "");
+function q() {
+  return Me().replace(/-/g, "");
 }
-const Y = "builderSessionId", Ne = async ({
+const Q = "builderSessionId", We = async ({
   canTrack: e
 }) => {
   if (!e)
     return;
-  const t = await U({
-    name: Y,
+  const t = await M({
+    name: Q,
     canTrack: e
   });
   if (x(t))
     return t;
   {
-    const n = Fe();
-    return Me({ id: n, canTrack: e }), n;
+    const n = Le();
+    return Ke({
+      id: n,
+      canTrack: e
+    }), n;
   }
-}, Fe = () => Q(), Me = ({
+}, Le = () => q(), Ke = ({
   id: e,
   canTrack: t
-}) => W({ name: Y, value: e, canTrack: t }), Z = () => y() && typeof localStorage < "u" ? localStorage : void 0, Ue = ({
+}) => W({
+  name: Q,
+  value: e,
+  canTrack: t
+}), Y = () => y() && typeof localStorage < "u" ? localStorage : void 0, ze = ({
   key: e,
   canTrack: t
 }) => {
   var n;
   try {
-    return t ? (n = Z()) == null ? void 0 : n.getItem(e) : void 0;
-  } catch (r) {
-    console.debug("[LocalStorage] GET error: ", r);
+    return t ? (n = Y()) == null ? void 0 : n.getItem(e) : void 0;
+  } catch (o) {
+    console.debug("[LocalStorage] GET error: ", o);
     return;
   }
-}, We = ({
+}, De = ({
   key: e,
   canTrack: t,
   value: n
 }) => {
-  var r;
+  var o;
   try {
-    t && ((r = Z()) == null || r.setItem(e, n));
-  } catch (o) {
-    console.debug("[LocalStorage] SET error: ", o);
+    t && ((o = Y()) == null || o.setItem(e, n));
+  } catch (r) {
+    console.debug("[LocalStorage] SET error: ", r);
   }
-}, tt = "builderVisitorId", Le = ({ canTrack: e }) => {
+}, Z = "builderVisitorId", Ge = ({
+  canTrack: e
+}) => {
   if (!e)
     return;
-  const t = Ue({
-    key: tt,
+  const t = ze({
+    key: Z,
     canTrack: e
   });
   if (x(t))
     return t;
   {
-    const n = Ke();
-    return ze({ id: n, canTrack: e }), n;
+    const n = He();
+    return Je({
+      id: n,
+      canTrack: e
+    }), n;
   }
-}, Ke = () => Q(), ze = ({
+}, He = () => q(), Je = ({
   id: e,
   canTrack: t
-}) => We({
-  key: tt,
+}) => De({
+  key: Z,
   value: e,
   canTrack: t
-}), Ge = () => {
+}), Xe = () => {
   if (y()) {
     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;
-}, De = () => typeof navigator == "object" && navigator.userAgent || "", He = () => {
-  const e = De(), t = {
+}, qe = () => typeof navigator == "object" && navigator.userAgent || "", Qe = () => {
+  const e = qe(), t = {
     Android() {
       return e.match(/Android/i);
     },
@@ -1297,53 +1275,60 @@ const Y = "builderSessionId", Ne = async ({
     any() {
       return t.Android() || t.BlackBerry() || t.iOS() || t.Opera() || t.Windows() || w === "reactNative";
     }
-  }, n = e.match(/Tablet|iPad/i), r = Ge();
+  }, n = e.match(/Tablet|iPad/i), o = Xe();
   return {
-    urlPath: r == null ? void 0 : r.pathname,
-    host: (r == null ? void 0 : r.host) || (r == null ? void 0 : r.hostname),
+    urlPath: o == null ? void 0 : o.pathname,
+    host: (o == null ? void 0 : o.host) || (o == null ? void 0 : o.hostname),
     device: n ? "tablet" : t.any() ? "mobile" : "desktop"
   };
-}, Je = async ({
+}, Ye = async ({
   canTrack: e
 }) => {
   if (!e)
-    return { visitorId: void 0, sessionId: void 0 };
-  const t = await Ne({ canTrack: e }), n = Le({ canTrack: e });
+    return {
+      visitorId: void 0,
+      sessionId: void 0
+    };
+  const t = await We({
+    canTrack: e
+  }), n = Ge({
+    canTrack: e
+  });
   return {
     sessionId: t,
     visitorId: n
   };
-}, Xe = async ({
+}, Ze = async ({
   type: e,
   canTrack: t,
   apiKey: n,
-  metadata: r,
-  ...o
+  metadata: o,
+  ...r
 }) => ({
   type: e,
   data: {
-    ...o,
+    ...r,
     metadata: {
       url: location.href,
-      ...r
+      ...o
     },
-    ...await Je({ canTrack: t }),
-    userAttributes: He(),
+    ...await Ye({
+      canTrack: t
+    }),
+    userAttributes: Qe(),
     ownerId: n
   }
 });
-async function qe(e) {
+async function tn(e) {
   if (!e.apiKey) {
-    v.error(
-      "Missing API key for track call. Please provide your API key."
-    );
+    v.error("Missing API key for track call. Please provide your API key.");
     return;
   }
-  if (!!e.canTrack && !T() && !!(y() || w === "reactNative"))
+  if (!!e.canTrack && !X() && !!(y() || w === "reactNative"))
     return fetch("https://cdn.builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await Xe(e)]
+        events: [await Ze(e)]
       }),
       headers: {
         "content-type": "application/json"
@@ -1353,41 +1338,46 @@ async function qe(e) {
       console.error("Failed to track: ", t);
     });
 }
-const pn = (e) => qe({ ...e, canTrack: !0 });
+const yn = (e) => tn({
+  ...e,
+  canTrack: !0
+});
 export {
-  At as A,
-  Ye as B,
-  tn as C,
-  en as F,
-  nn as I,
-  rn as S,
+  Ot as A,
+  nn as B,
+  rn as C,
+  je as D,
+  Et as E,
+  sn as F,
+  an as I,
+  cn as S,
   w as T,
-  an as V,
-  qe as _,
-  Ze as a,
-  y as b,
+  dn as V,
+  tn as _,
+  on as a,
+  X as b,
   x as c,
-  on as d,
-  sn as e,
+  V as d,
+  ln as e,
   A as f,
-  st as g,
-  cn as h,
-  T as i,
-  un as j,
-  E as k,
+  rt as g,
+  un as h,
+  y as i,
+  mn as j,
+  pn as k,
   v as l,
-  dn as m,
-  g as n,
-  ln as o,
-  ee as p,
-  Xt as q,
-  fn as r,
-  Oe as s,
-  mn as t,
-  oe as u,
-  re as v,
-  Yt as w,
-  pn as x,
-  Vt as y,
-  Ae as z
+  wt as m,
+  b as n,
+  kt as o,
+  fn as p,
+  re as q,
+  gn as r,
+  _n as s,
+  Qt as t,
+  hn as u,
+  bn as v,
+  ae as w,
+  ie as x,
+  te as y,
+  yn as z
 };