@builder.io/sdk-vue 0.4.5 → 0.5.0

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

@@ -1,46 +1,44 @@
-import { defineComponent as b } from "vue";
-const et = b({
+import { defineComponent as g } from "vue";
+function A(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: A };
+  },
   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;
@@ -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 Ye = ot.exports, V = (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 }) => {
-  const n = A(F);
+}, Ze = (e, t = F) => `@media (max-width: ${t[e].max}px)`, rt = ({
+  small: e,
+  medium: t
+}) => {
+  const n = V(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(() => Rt).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.dd4a079a.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 tn = ut.exports, dt = g({
   name: "builder-fragment-component",
   props: []
 });
-var pt = function() {
+var ft = function() {
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("span", [t._t("default")], 2);
-}, ht = [], _t = /* @__PURE__ */ g(
+}, mt = [], pt = /* @__PURE__ */ b(
+  dt,
+  ft,
   mt,
-  pt,
-  ht,
   !1,
   null,
   null,
   null,
   null
 );
-const en = _t.exports;
+const en = 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,93 @@ 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 nn = vt.exports, St = () => import("./block-styles.982735c2.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) => {
+}), kt = () => import("./block.e9484073.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");
-    }
+}), xt = () => import("./blocks-wrapper.4afaccc5.js").then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component BlocksWrapper at ./blocks-wrapper.vue",
+    e
+  ), e;
+}), wt = g({
+  name: "builder-blocks",
+  components: {
+    "blocks-wrapper": xt,
+    block: kt,
+    "block-styles": St
   },
-  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"
+  ]
 });
-var Tt = function() {
+var Ct = 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, registeredComponents: t.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._e()], 2);
-}, Rt = [], It = /* @__PURE__ */ g(
+}, $t = [], Tt = /* @__PURE__ */ b(
+  wt,
+  Ct,
   $t,
-  Tt,
-  Rt,
   !1,
   null,
-  "b740fd05",
+  null,
   null,
   null
 );
-const Vt = It.exports, At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const It = Tt.exports, Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Vt
-}, Symbol.toStringTag, { value: "Module" })), Et = b({
+  default: It
+}, Symbol.toStringTag, { value: "Module" })), At = 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: A };
   }
 });
-var Ot = function() {
+var Vt = function() {
   var t = this, n = t._self._c;
   return t._self._setupProxy, n("section", t._g(t._b({ style: {
     width: "100%",
@@ -538,87 +455,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,
+  } }, "section", t.filterAttrs(t.attributes, "v-on:", !1), !1), t.filterAttrs(t.attributes, "v-on:", !0)), [t._t("default")], 2);
+}, Ot = [], Et = /* @__PURE__ */ b(
+  At,
+  Vt,
   Ot,
-  Pt,
   !1,
   null,
   null,
   null,
   null
 );
-const rn = jt.exports, C = "[Builder.io]: ", v = {
+const on = Et.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, Pt = (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), jt = (e) => e.map(([t, n]) => n ? `${t}=${n}` : t).filter(x).join("; "), Bt = [["secure", ""], ["SameSite", "None"]], Nt = ({
   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) ? Bt : [[]], s = n ? [["expires", n.toUTCString()]] : [[]], i = [[e, t], ...s, ["path", "/"], ["domain", Pt(window.location.hostname)], ...r];
+  return jt(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 = Nt({
+      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 = ({
+}, Ft = "builder.tests", O = (e) => `${Ft}.${e}`, Ut = ({
+  contentId: e
+}) => M({
+  name: O(e),
+  canTrack: !0
+}), Mt = ({
+  contentId: e
+}) => U({
+  name: O(e),
+  canTrack: !0
+}), Wt = ({
   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, Lt = ({
   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 = Lt(e);
+  return Wt({
     contentId: e.id,
     value: t
   }).catch((n) => {
@@ -637,7 +567,7 @@ const rn = jt.exports, C = "[Builder.io]: ", v = {
     testVariationId: n.id,
     testVariationName: n.name || (n.id === e.id ? "Default" : "")
   };
-}, Gt = ({
+}, Kt = ({
   item: e,
   canTrack: t
 }) => {
@@ -647,125 +577,135 @@ const rn = jt.exports, C = "[Builder.io]: ", v = {
     return;
   if (!L(e))
     return e;
-  const n = Lt({
+  const n = Mt({
     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 ({
+}, zt = async ({
   item: e,
   canTrack: t
 }) => {
   if (!t || !L(e))
     return e;
-  const r = await Wt({
+  const o = await Ut({
     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 Gt() {
   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 Dt() {
+  const e = Gt().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 Ht = Dt();
+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.", Jt = "options.", Xt = (e) => {
   const t = {};
-  return e.forEach((n, r) => {
-    t[r] = n;
+  return e.forEach((n, o) => {
+    t[o] = n;
   }), t;
-}, Yt = (e) => {
+}, qt = (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];
+  return Object.keys(t).forEach((o) => {
+    if (o.startsWith(j)) {
+      const r = o.replace(j, "").replace(Jt, "");
+      n[r] = t[o];
     }
   }), n;
-}, Zt = () => {
+}, Qt = () => {
   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 qt(e);
+}, G = (e) => e instanceof URLSearchParams ? Xt(e) : e, Yt = "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: m = Yt
   } = 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(),
+    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=${r}&includeRefs=${u}${d ? `&locale=${d}` : ""}${a ? `&enrich=${a}` : ""}`), c = {
+    ...Qt(),
     ...G(e.options || {})
-  }, f = V(c);
+  }, f = R(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 (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;
+}, Zt = (e) => "results" in e;
+async function te(e) {
+  const t = await oe({
+    ...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 ee = async (e) => {
+  const t = E(e);
+  return await (await Ht(t.href)).json();
+}, ne = 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 zt({
+        item: s,
+        canTrack: o
+      }));
     t.results = r;
   } catch (r) {
     v.error("Could not process A/B tests. ", r);
@@ -774,48 +714,74 @@ const ne = async (e) => {
 };
 async function oe(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 ee(e);
+    return Zt(n) ? ne(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 re = async ({
+  builderContextValue: e,
+  symbol: t
+}) => {
+  if ((t == null ? void 0 : t.model) && (e == null ? void 0 : e.apiKey))
+    return te({
+      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);
+    });
+}, se = () => Promise.resolve().then(() => Oe).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({
+}), ie = g({
   name: "builder-symbol",
-  components: { RenderContentVariants: se },
-  props: ["attributes", "symbol", "dynamic"],
+  components: { "content-variants": se },
+  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: A };
   },
   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,60 +789,34 @@ 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 || re({
+        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 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(
+}, ce = [], le = /* @__PURE__ */ b(
   ie,
   ae,
   ce,
@@ -886,17 +826,17 @@ var ae = function() {
   null,
   null
 );
-const on = le.exports, ue = b({
+const rn = le.exports, ue = g({
   name: "builder-text",
   props: ["text"]
 });
 var de = function() {
-  var r;
+  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(
+  }, domProps: { innerHTML: t._s(((o = t.text) == null ? void 0 : o.toString()) || "") } });
+}, fe = [], me = /* @__PURE__ */ b(
   ue,
   de,
   fe,
@@ -906,7 +846,7 @@ var de = function() {
   null,
   null
 );
-const sn = me.exports, pe = b({
+const sn = me.exports, pe = g({
   name: "builder-video",
   props: [
     "autoPlay",
@@ -915,6 +855,7 @@ const sn = me.exports, pe = b({
     "loop",
     "playsInline",
     "attributes",
+    "preload",
     "fit",
     "position",
     "video",
@@ -949,17 +890,17 @@ const sn = me.exports, pe = b({
   }
 });
 var he = function() {
-  var r;
+  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(
+  }, attrs: { preload: t.preload || "metadata", src: t.video || "no-src", poster: t.posterImage } }, "video", t.spreadProps, !1));
+}, _e = [], ge = /* @__PURE__ */ b(
   pe,
   he,
   _e,
@@ -969,17 +910,17 @@ var he = function() {
   null,
   null
 );
-const an = be.exports, $ = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
+const an = ge.exports, $ = (e) => Object.values((e == null ? void 0 : e.variations) || {}).map((t) => ({
   ...t,
   testVariationId: t.id,
   id: e == null ? void 0 : e.id
-})), ge = ({
+})), be = ({
   canTrack: e,
   content: t
 }) => !(!($(t).length > 0) || !e);
 function ye(e, t, n) {
   var i;
-  function r() {
+  function o() {
     function u(l, h, S) {
       let k = "";
       if (S) {
@@ -1011,13 +952,15 @@ function ye(e, t, n) {
     }
     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;
   }
@@ -1026,7 +969,7 @@ function ve(e, t, n) {
   var a;
   if (!navigator.cookieEnabled)
     return;
-  function r(d) {
+  function o(d) {
     const m = d + "=", p = document.cookie.split(";");
     for (let c = 0; c < p.length; c++) {
       let f = p[c];
@@ -1037,7 +980,7 @@ function ve(e, t, n) {
     }
     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 +990,38 @@ function ve(e, t, n) {
     return;
   }
 }
-const Se = (e) => e === "react" || e === "reactNative", J = Se(w), X = "builderIoAbTest", q = "builderIoRenderContent", ke = () => {
+const Se = (e) => e === "react" || e === "reactNative", D = Se(w), H = "builderIoAbTest", J = "builderIoRenderContent", ke = () => {
   const e = ye.toString().replace(/\s+/g, " "), t = ve.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 = ({
+  window.${H}("${t}",${JSON.stringify(e)}, ${D})`, cn = ({
   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}", ${D})`, we = () => import("./content.697b2fbd.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) => {
+}), Ce = () => import("./inlined-styles.dd4a079a.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) => {
+}), $e = () => import("./inlined-script.b4595308.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",
+}), Te = g({
+  name: "content-variants",
   components: {
-    InlinedScript: $e,
-    InlinedStyles: Ce,
-    RenderContent: we
+    "inlined-script": $e,
+    "inlined-styles": Ce,
+    "content-component": we
   },
   props: [
     "canTrack",
@@ -1097,87 +1038,91 @@ const Se = (e) => e === "react" || e === "reactNative", J = Se(w), X = "builderI
     "enrich"
   ],
   data() {
-    var e;
     return {
-      shouldRenderVariants: ge({
+      shouldRenderVariants: be({
         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,
       getVariants: $,
       getDefaultCanTrack: I,
-      handleABTestingSync: Gt,
+      handleABTestingSync: Kt,
       TARGET: w
     };
   },
   mounted() {
     this.shouldRenderVariants = !1;
+  },
+  computed: {
+    variantScriptStr() {
+      var e;
+      return xe(
+        $(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 Ie = 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(
+}, Re = [], Ae = /* @__PURE__ */ b(
   Te,
-  Re,
   Ie,
+  Re,
   !1,
   null,
   null,
   null,
   null
 );
-const Ae = Ve.exports, Ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ve = Ae.exports, Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Ae
+  default: Ve
 }, Symbol.toStringTag, { value: "Module" }));
+function Ee() {
+  return y() && window.self !== window.top;
+}
+function X() {
+  return Ee() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+}
 function ln() {
-  return !y() || T() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+  return !y() || X() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-const Oe = (e) => {
+const un = [], dn = (e) => ({
+  type: "builder.registerComponent",
+  data: e
+}), Pe = (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 = ({
+}, je = (e) => typeof e == "function" ? Pe(e) : V(e), fn = ({
   inputs: e,
   ...t
 }) => ({
-  ...A(t),
-  inputs: e == null ? void 0 : e.map(
-    (n) => Object.entries(n).reduce(
-      (r, [o, s]) => ({
-        ...r,
-        [o]: Pe(s)
-      }),
-      {}
-    )
-  )
+  ...V(t),
+  inputs: e == null ? void 0 : e.map((n) => Object.entries(n).reduce((o, [r, s]) => ({
+    ...o,
+    [r]: je(s)
+  }), {}))
 }), B = {};
-function fn(e, t) {
+function mn(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 +1130,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 pn(e) {
   if (y()) {
     Object.assign(N, e);
     const t = {
@@ -1208,36 +1153,43 @@ function Be() {
     return (e == "x" ? t : t & 3 | 8).toString(16);
   });
 }
-function Q() {
+function q() {
   return Be().replace(/-/g, "");
 }
-const Y = "builderSessionId", Ne = async ({
+const Q = "builderSessionId", Ne = 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;
+    return Ue({
+      id: n,
+      canTrack: e
+    }), n;
   }
-}, Fe = () => Q(), Me = ({
+}, Fe = () => q(), Ue = ({
   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, Me = ({
   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 = ({
@@ -1245,30 +1197,35 @@ const Y = "builderSessionId", Ne = async ({
   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", Le = ({
+  canTrack: e
+}) => {
   if (!e)
     return;
-  const t = Ue({
-    key: tt,
+  const t = Me({
+    key: Z,
     canTrack: e
   });
   if (x(t))
     return t;
   {
     const n = Ke();
-    return ze({ id: n, canTrack: e }), n;
+    return ze({
+      id: n,
+      canTrack: e
+    }), n;
   }
-}, Ke = () => Q(), ze = ({
+}, Ke = () => q(), ze = ({
   id: e,
   canTrack: t
 }) => We({
-  key: tt,
+  key: Z,
   value: e,
   canTrack: t
 }), Ge = () => {
@@ -1297,18 +1254,25 @@ 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 = Ge();
   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 ({
   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 Ne({
+    canTrack: e
+  }), n = Le({
+    canTrack: e
+  });
   return {
     sessionId: t,
     visitorId: n
@@ -1317,29 +1281,29 @@ const Y = "builderSessionId", Ne = 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 }),
+    ...await Je({
+      canTrack: t
+    }),
     userAttributes: He(),
     ownerId: n
   }
 });
 async function qe(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({
@@ -1353,41 +1317,44 @@ async function qe(e) {
       console.error("Failed to track: ", t);
     });
 }
-const pn = (e) => qe({ ...e, canTrack: !0 });
+const hn = (e) => qe({
+  ...e,
+  canTrack: !0
+});
 export {
-  At as A,
+  Rt as A,
   Ye as B,
   tn as C,
   en as F,
   nn as I,
-  rn as S,
+  on as S,
   w as T,
   an as V,
   qe as _,
   Ze as a,
-  y as b,
+  X as b,
   x as c,
-  on as d,
-  sn as e,
-  A as f,
-  st as g,
-  cn as h,
-  T as i,
-  un as j,
-  E as k,
+  A as d,
+  rn as e,
+  V as f,
+  rt as g,
+  sn as h,
+  y as i,
+  cn as j,
+  un 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,
+  ln as m,
+  b as n,
+  te as o,
+  Ht as p,
+  dn as q,
+  mn as r,
+  fn as s,
+  pn as t,
   oe as u,
-  re as v,
-  Yt as w,
-  pn as x,
-  Vt as y,
-  Ae as z
+  ne as v,
+  qt as w,
+  hn as x,
+  It as y,
+  Ve as z
 };