@builder.io/sdk-vue 0.0.6 → 0.0.8-0

package/packages/_vue2/dist/{index.53f5b352.js → index.64b2a483.js}

@@ -1,11 +1,11 @@
-const C = "vue2";
+const v = "vue2";
 function p() {
   return typeof window < "u" && typeof document < "u";
 }
-const k = {};
-function K(t, e) {
-  let n = k[t];
-  if (n || (n = k[t] = []), n.push(e), p()) {
+const I = {};
+function H(t, e) {
+  let n = I[t];
+  if (n || (n = I[t] = []), n.push(e), p()) {
     const o = {
       type: "builder.register",
       data: {
@@ -21,7 +21,7 @@ function K(t, e) {
   }
 }
 const q = () => {
-  K("insertMenu", {
+  H("insertMenu", {
     name: "_default",
     default: !0,
     items: [
@@ -36,14 +36,14 @@ const q = () => {
     ]
   });
 };
-let S = !1;
-const z = (t = {}) => {
+let R = !1;
+const G = (t = {}) => {
   var e, n;
-  S || (S = !0, p() && ((e = window.parent) == null || e.postMessage(
+  R || (R = !0, p() && ((e = window.parent) == null || e.postMessage(
     {
       type: "builder.sdkInfo",
       data: {
-        target: C,
+        target: v,
         supportsPatchUpdates: !1,
         supportsAddBlockScoping: !0,
         supportsCustomBreakpoints: !0
@@ -63,12 +63,12 @@ const z = (t = {}) => {
     if (!!(o != null && o.type))
       switch (o.type) {
         case "builder.evaluate": {
-          const i = o.data.text, c = o.data.arguments || [], a = o.data.id, d = new Function(i);
-          let u, h = null;
+          const i = o.data.text, l = o.data.arguments || [], a = o.data.id, u = new Function(i);
+          let d, h = null;
           try {
-            u = d.apply(null, c);
-          } catch (l) {
-            h = l;
+            d = u.apply(null, l);
+          } catch (c) {
+            h = c;
           }
           h ? (s = window.parent) == null || s.postMessage(
             {
@@ -76,19 +76,19 @@ const z = (t = {}) => {
               data: { id: a, error: h.message }
             },
             "*"
-          ) : u && typeof u.then == "function" ? u.then((l) => {
+          ) : d && typeof d.then == "function" ? d.then((c) => {
             var g;
             (g = window.parent) == null || g.postMessage(
               {
                 type: "builder.evaluateResult",
-                data: { id: a, result: l }
+                data: { id: a, result: c }
               },
               "*"
             );
           }).catch(console.error) : (r = window.parent) == null || r.postMessage(
             {
               type: "builder.evaluateResult",
-              data: { result: u, id: a }
+              data: { result: d, id: a }
             },
             "*"
           );
@@ -96,21 +96,84 @@ const z = (t = {}) => {
         }
       }
   })));
-}, D = () => Promise.resolve().then(() => H).then((t) => t.default).catch((t) => {
+}, S = (t) => JSON.parse(JSON.stringify(t)), O = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+}, fn = (t, e = O) => `@media (max-width: ${e[t].max}px)`, J = ({ small: t, medium: e }) => {
+  const n = S(O);
+  if (!t || !e)
+    return n;
+  const o = Math.floor(t / 2);
+  n.small = {
+    max: t,
+    min: o,
+    default: o + 1
+  };
+  const s = n.small.max + 1;
+  n.medium = {
+    max: e,
+    min: s,
+    default: s + 1
+  };
+  const r = n.medium.max + 1;
+  return n.large = {
+    max: 2e3,
+    min: r,
+    default: r + 1
+  }, n;
+}, X = (t) => t.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), y = (t) => t != null, Y = (t) => Object.entries(t).map(([n, o]) => {
+  if (typeof o == "string")
+    return `${X(n)}: ${o};`;
+}).filter(y), b = (t) => Y(t).join(`
+`), gn = ({
+  mediaQuery: t,
+  className: e,
+  styles: n
+}) => {
+  const o = `.${e} {
+    ${b(n)}
+  }`;
+  return t ? `${t} {
+      ${o}
+    }` : o;
+}, Q = () => Promise.resolve().then(() => D).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
     t
   ), t;
-}), J = {
+}), Z = () => import("./render-inlined-styles.b7fdfbd1.js").then((t) => t.default).catch((t) => {
+  throw console.error(
+    "Error while attempting to dynamically import component RenderInlinedStyles at ../../components/render-inlined-styles.vue",
+    t
+  ), t;
+}), ee = {
   name: "builder-columns",
-  components: { RenderBlocks: D },
+  components: {
+    RenderInlinedStyles: Z,
+    RenderBlocks: Q
+  },
   props: [
     "space",
     "columns",
     "stackColumnsAt",
     "reverseColumnsWhenStacked",
+    "customBreakpoints",
     "builderBlock"
   ],
+  data: () => ({ TARGET: v }),
   computed: {
     columnsCssVars() {
       const t = this.stackColumnsAt === "never" ? "inherit" : this.reverseColumnsWhenStacked ? "column-reverse" : "column";
@@ -127,6 +190,59 @@ const z = (t = {}) => {
         "--column-width-tablet": this.maybeApplyForTablet(t),
         "--column-margin-left-tablet": this.maybeApplyForTablet(e)
       };
+    },
+    columnStyleObjects() {
+      return {
+        columns: {
+          small: {
+            flexDirection: "var(--flex-dir)",
+            alignItems: "stretch"
+          },
+          medium: {
+            flexDirection: "var(--flex-dir-tablet)",
+            alignItems: "stretch"
+          }
+        },
+        column: {
+          small: {
+            width: "var(--column-width) !important",
+            marginLeft: "var(--column-margin-left) !important"
+          },
+          medium: {
+            width: "var(--column-width-tablet) !important",
+            marginLeft: "var(--column-margin-left-tablet) !important"
+          }
+        }
+      };
+    },
+    columnsStyles() {
+      return `
+      @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
+        .${this.builderBlock.id}-breakpoints {
+          ${b(this.columnStyleObjects.columns.medium)}
+        }
+
+        .${this.builderBlock.id}-breakpoints > .builder-column {
+          ${b(this.columnStyleObjects.column.medium)}
+        }
+      }
+
+      @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+        .${this.builderBlock.id}-breakpoints {
+          ${b(this.columnStyleObjects.columns.small)}
+        }
+
+        .${this.builderBlock.id}-breakpoints > .builder-column {
+          ${b(this.columnStyleObjects.column.small)}
+        }
+      },
+    `;
+    },
+    reactNativeColumnsStyles() {
+      return this.columnStyleObjects.columns.small;
+    },
+    reactNativeColumnStyles() {
+      return this.columnStyleObjects.column.small;
     }
   },
   methods: {
@@ -147,91 +263,111 @@ const z = (t = {}) => {
     },
     maybeApplyForTablet(t) {
       return (this.stackColumnsAt || "tablet") === "tablet" ? t : "inherit";
+    },
+    getWidthForBreakpointSize(t) {
+      return J(
+        this.customBreakpoints || {}
+      )[t].max;
+    },
+    _classStringToObject(t) {
+      const e = {};
+      if (typeof t != "string")
+        return e;
+      const n = t.trim().split(/\s+/);
+      for (const o of n)
+        e[o] = !0;
+      return e;
     }
   }
 };
-function m(t, e, n, o, s, r, i, c) {
+function m(t, e, n, o, s, r, i, l) {
   var a = typeof t == "function" ? t.options : t;
   e && (a.render = e, a.staticRenderFns = n, a._compiled = !0), o && (a.functional = !0), r && (a._scopeId = "data-v-" + r);
-  var d;
-  if (i ? (d = function(l) {
-    l = l || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !l && typeof __VUE_SSR_CONTEXT__ < "u" && (l = __VUE_SSR_CONTEXT__), s && s.call(this, l), l && l._registeredComponents && l._registeredComponents.add(i);
-  }, a._ssrRegister = d) : s && (d = c ? function() {
+  var u;
+  if (i ? (u = 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__), s && s.call(this, c), c && c._registeredComponents && c._registeredComponents.add(i);
+  }, a._ssrRegister = u) : s && (u = l ? function() {
     s.call(
       this,
       (a.functional ? this.parent : this).$root.$options.shadowRoot
     );
-  } : s), d)
+  } : s), u)
     if (a.functional) {
-      a._injectStyles = d;
-      var u = a.render;
+      a._injectStyles = u;
+      var d = a.render;
       a.render = function(g, w) {
-        return d.call(w), u(g, w);
+        return u.call(w), d(g, w);
       };
     } else {
       var h = a.beforeCreate;
-      a.beforeCreate = h ? [].concat(h, d) : [d];
+      a.beforeCreate = h ? [].concat(h, u) : [u];
     }
   return {
     exports: t,
     options: a
   };
 }
-var G = function() {
+var te = function() {
   var e = this, n = e._self._c;
-  return n("div", { staticClass: "builder-columns div-2flfunvabst", style: e.columnsCssVars }, e._l(e.columns, function(o, s) {
-    return n("div", { key: s, staticClass: "builder-column div-2flfunvabst-2", style: {
+  return n("div", { class: e._classStringToObject(
+    `builder-columns ${e.builderBlock.id}-breakpoints div-t9spj7joih`
+  ), style: {
+    ...e.TARGET === "reactNative" ? e.reactNativeColumnsStyles : {},
+    ...e.columnsCssVars
+  } }, [e.TARGET !== "reactNative" ? [n("render-inlined-styles", { attrs: { styles: e.columnsStyles } })] : e._e(), e._l(e.columns, function(o, s) {
+    return n("div", { key: s, staticClass: "builder-column div-t9spj7joih-2", style: {
       width: e.getColumnCssWidth(s),
       marginLeft: `${s === 0 ? 0 : e.getGutterSize()}px`,
+      ...e.TARGET === "reactNative" ? e.reactNativeColumnStyles : {},
       ...e.columnCssVars
     } }, [n("render-blocks", { attrs: { blocks: o.blocks, path: `component.options.columns.${s}.blocks`, parent: e.builderBlock.id, styleProp: {
       flexGrow: "1"
     } } })], 1);
-  }), 0);
-}, X = [], Y = /* @__PURE__ */ m(
-  J,
-  G,
-  X,
+  })], 2);
+}, ne = [], oe = /* @__PURE__ */ m(
+  ee,
+  te,
+  ne,
   !1,
   null,
-  "badfc4c5",
+  "6e9fb51e",
   null,
   null
 );
-const Q = Y.exports;
-function I(t) {
+const se = oe.exports;
+function T(t) {
   return t.replace(/http(s)?:/, "");
 }
-function Z(t = "", e, n) {
+function re(t = "", e, n) {
   const o = new RegExp("([?&])" + e + "=.*?(&|$)", "i"), s = t.indexOf("?") !== -1 ? "&" : "?";
   return t.match(o) ? t.replace(o, "$1" + e + "=" + encodeURIComponent(n) + "$2") : t + s + e + "=" + encodeURIComponent(n);
 }
-function ee(t, e) {
+function ie(t, e) {
   if (!t || !(t != null && t.match(/cdn\.shopify\.com/)) || !e)
     return t;
   if (e === "master")
-    return I(t);
+    return T(t);
   const n = t.match(
     /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
   );
   if (n) {
     const o = t.split(n[0]), s = n[3], r = e.match("x") ? e : `${e}x`;
-    return I(`${o[0]}_${r}${s}`);
+    return T(`${o[0]}_${r}${s}`);
   }
   return null;
 }
-function y(t) {
+function x(t) {
   if (!t)
     return t;
   const e = [100, 200, 400, 800, 1200, 1600, 2e3];
   if (t.match(/builder\.io/)) {
     let n = t;
     const o = Number(t.split("?width=")[1]);
-    return isNaN(o) || (n = `${n} ${o}w`), e.filter((s) => s !== o).map((s) => `${Z(t, "width", s)} ${s}w`).concat([n]).join(", ");
+    return isNaN(o) || (n = `${n} ${o}w`), e.filter((s) => s !== o).map((s) => `${re(t, "width", s)} ${s}w`).concat([n]).join(", ");
   }
-  return t.match(/cdn\.shopify\.com/) ? e.map((n) => [ee(t, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([t]).join(", ") : t;
+  return t.match(/cdn\.shopify\.com/) ? e.map((n) => [ie(t, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([t]).join(", ") : t;
 }
-const te = {
+const ae = {
   name: "builder-image",
   props: [
     "image",
@@ -255,10 +391,10 @@ const te = {
         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"), y(e);
+          return console.debug("Removed given srcset"), x(e);
       } else if (this.image && !this.srcset)
-        return y(e);
-      return y(e);
+        return x(e);
+      return x(e);
     },
     webpSrcSet() {
       var t;
@@ -287,46 +423,46 @@ const te = {
     }
   }
 };
-var ne = function() {
+var le = function() {
   var o, s, r, i;
   var e = this, n = e._self._c;
   return n("div", [n("picture", [e.webpSrcSet ? [n("source", { attrs: { type: "image/webp", srcset: e.webpSrcSet } })] : e._e(), n("img", { class: e._classStringToObject(
-    "builder-image" + (e.className ? " " + e.className : "") + " img-1j57pcfa436"
+    "builder-image" + (e.className ? " " + e.className : "") + " img-1pl23ac79ld"
   ), style: {
     objectPosition: e.backgroundPosition || "center",
     objectFit: e.backgroundSize || "cover",
     ...e.aspectRatioCss
-  }, attrs: { loading: "lazy", alt: e.altText, role: e.altText ? "presentation" : void 0, src: e.image, srcset: e.srcSetToUse, sizes: e.sizes } }), n("source", { attrs: { srcset: e.srcSetToUse } })], 2), e.aspectRatio && !(((s = (o = e.builderBlock) == null ? void 0 : o.children) == null ? void 0 : s.length) && e.fitContent) ? [n("div", { staticClass: "builder-image-sizer div-1j57pcfa436", style: {
+  }, attrs: { loading: "lazy", alt: e.altText, role: e.altText ? "presentation" : void 0, src: e.image, srcset: e.srcSetToUse, sizes: e.sizes } }), n("source", { attrs: { srcset: e.srcSetToUse } })], 2), e.aspectRatio && !(((s = (o = e.builderBlock) == null ? void 0 : o.children) == null ? void 0 : s.length) && e.fitContent) ? [n("div", { staticClass: "builder-image-sizer div-1pl23ac79ld", style: {
     paddingTop: e.aspectRatio * 100 + "%"
-  } })] : e._e(), ((i = (r = e.builderBlock) == null ? void 0 : r.children) == null ? void 0 : i.length) && e.fitContent ? [e._t("default")] : e._e(), !e.fitContent && e.children ? [n("div", { staticClass: "div-1j57pcfa436-2" }, [e._t("default")], 2)] : e._e()], 2);
-}, oe = [], se = /* @__PURE__ */ m(
-  te,
-  ne,
-  oe,
+  } })] : e._e(), ((i = (r = e.builderBlock) == null ? void 0 : r.children) == null ? void 0 : i.length) && e.fitContent ? [e._t("default")] : e._e(), !e.fitContent && e.children ? [n("div", { staticClass: "div-1pl23ac79ld-2" }, [e._t("default")], 2)] : e._e()], 2);
+}, ce = [], ue = /* @__PURE__ */ m(
+  ae,
+  le,
+  ce,
   !1,
   null,
-  "1e1c2091",
+  "a47edb6a",
   null,
   null
 );
-const re = se.exports, ie = {
+const de = ue.exports, pe = {
   name: "builder-text",
   props: ["text"]
 };
-var ae = function() {
+var me = function() {
   var e = this, n = e._self._c;
   return n("span", { staticClass: "builder-text", domProps: { innerHTML: e._s(e.text) } });
-}, ce = [], le = /* @__PURE__ */ m(
-  ie,
-  ae,
-  ce,
+}, he = [], fe = /* @__PURE__ */ m(
+  pe,
+  me,
+  he,
   !1,
   null,
   null,
   null,
   null
 );
-const de = le.exports, ue = {
+const ge = fe.exports, be = {
   name: "builder-video",
   props: [
     "autoPlay",
@@ -368,7 +504,7 @@ const de = le.exports, ue = {
     }
   }
 };
-var pe = function() {
+var ye = function() {
   var o;
   var e = this, n = e._self._c;
   return n("video", e._b({ style: {
@@ -379,63 +515,33 @@ var pe = function() {
     objectPosition: e.position,
     borderRadius: 1
   }, attrs: { src: e.video || "no-src", poster: e.posterImage } }, "video", e.spreadProps, !1));
-}, me = [], he = /* @__PURE__ */ m(
-  ue,
-  pe,
-  me,
+}, ve = [], _e = /* @__PURE__ */ m(
+  be,
+  ye,
+  ve,
   !1,
   null,
   null,
   null,
   null
 );
-const fe = he.exports;
-function _(t, e = null, n = ".") {
-  return Object.keys(t).reduce((o, s) => {
-    const r = t[s], i = [e, s].filter(Boolean).join(n);
-    return [
-      typeof r == "object",
-      r !== null,
-      !(Array.isArray(r) && r.length === 0)
-    ].every(Boolean) ? { ...o, ..._(r, i, n) } : { ...o, [i]: r };
-  }, {});
-}
-const R = "builder.", ge = "options.", be = (t) => {
-  const e = {};
-  return t.forEach((n, o) => {
-    e[o] = n;
-  }), e;
-}, ve = (t) => {
-  if (!t)
-    return {};
-  const e = F(t), n = {};
-  return Object.keys(e).forEach((o) => {
-    if (o.startsWith(R)) {
-      const s = o.replace(R, "").replace(ge, "");
-      n[s] = e[o];
-    }
-  }), n;
-}, ye = () => {
-  if (!p())
-    return {};
-  const t = new URLSearchParams(window.location.search);
-  return ve(t);
-}, F = (t) => t instanceof URLSearchParams ? be(t) : t;
-function _e() {
-  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : null;
+const xe = _e.exports;
+function Ce() {
+  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
 }
-async function j() {
-  const t = _e().fetch;
-  if (typeof t > "u" && typeof global < "u") {
-    const e = import("node-fetch").then((n) => n.default);
-    return e.default || e;
-  }
-  return t.default || t;
+function ke() {
+  const t = Ce().fetch;
+  if (typeof t > "u")
+    throw console.warn(
+      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
+    ), new Error("Builder SDK could not find a global `fetch` function");
+  return t;
 }
-const xe = (t) => {
+const A = ke(), Se = (t) => {
   const e = t.split(".");
   return e.length > 2 ? e.slice(1).join(".") : t;
-}, U = async ({
+}, B = async ({
   name: t,
   canTrack: e
 }) => {
@@ -445,22 +551,22 @@ const xe = (t) => {
   } catch (o) {
     console.debug("[COOKIE] GET error: ", o);
   }
-}, Ce = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).join("; "), we = [
+}, we = (t) => t.map(([e, n]) => n ? `${e}=${n}` : e).join("; "), Ie = [
   ["secure", ""],
   ["SameSite", "None"]
-], ke = ({
+], Re = ({
   name: t,
   value: e,
   expires: n
 }) => {
-  const s = (p() ? location.protocol === "https:" : !0) ? we : [[]], r = n ? [["expires", n.toUTCString()]] : [[]], i = [
+  const s = (p() ? location.protocol === "https:" : !0) ? Ie : [[]], r = n ? [["expires", n.toUTCString()]] : [[]], i = [
     [t, e],
     ...r,
     ["path", "/"],
-    ["domain", xe(window.location.hostname)],
+    ["domain", Se(window.location.hostname)],
     ...s
   ];
-  return Ce(i);
+  return we(i);
 }, P = async ({
   name: t,
   value: e,
@@ -470,19 +576,19 @@ const xe = (t) => {
   try {
     if (!o)
       return;
-    const s = ke({ name: t, value: e, expires: n });
+    const s = Re({ name: t, value: e, expires: n });
     document.cookie = s;
   } catch (s) {
     console.warn("[COOKIE] SET error: ", s);
   }
-}, Se = "builderio.variations", A = (t) => `${Se}.${t}`, Ie = ({
+}, Te = "builderio.variations", U = (t) => `${Te}.${t}`, $e = ({
   contentId: t,
   canTrack: e
-}) => U({ name: A(t), canTrack: e }), Re = ({
+}) => B({ name: U(t), canTrack: e }), Ee = ({
   contentId: t,
   canTrack: e,
   value: n
-}) => P({ name: A(t), value: n, canTrack: e }), b = (t) => t != null, Te = (t) => b(t.id) && b(t.variations) && Object.keys(t.variations).length > 0, $e = ({
+}) => P({ name: U(t), value: n, canTrack: e }), Fe = (t) => y(t.id) && y(t.variations) && Object.keys(t.variations).length > 0, je = ({
   id: t,
   variations: e
 }) => {
@@ -493,7 +599,7 @@ const xe = (t) => {
     if (n += (s = e[r]) == null ? void 0 : s.testRatio, o < n)
       return r;
   return t;
-}, T = ({
+}, $ = ({
   item: t,
   testGroupId: e
 }) => {
@@ -506,42 +612,69 @@ const xe = (t) => {
     testVariationId: n.id,
     testVariationName: n.name || (n.id === t.id ? "Default" : "")
   };
-}, Ee = async ({
+}, Oe = async ({
   item: t,
   canTrack: e
 }) => {
-  const n = await Ie({
+  const n = await $e({
     canTrack: e,
     contentId: t.id
-  }), o = n ? T({ item: t, testGroupId: n }) : void 0;
+  }), o = n ? $({ item: t, testGroupId: n }) : void 0;
   if (o)
     return o;
   {
-    const s = $e({
+    const s = je({
       variations: t.variations,
       id: t.id
     });
-    return Re({
+    return Ee({
       contentId: t.id,
       value: s,
       canTrack: e
     }).catch((r) => {
       console.error("could not store A/B test variation: ", r);
-    }), T({ item: t, testGroupId: s });
+    }), $({ item: t, testGroupId: s });
   }
-}, Fe = async ({
+}, Ae = async ({
   item: t,
   canTrack: e
 }) => {
-  if (!Te(t))
+  if (!Fe(t))
     return;
-  const n = await Ee({ item: t, canTrack: e });
+  const n = await Oe({ item: t, canTrack: e });
   Object.assign(t, n);
 };
-async function O(t) {
-  return (await Ue({ ...t, limit: 1 })).results[0] || null;
+function C(t, e = null, n = ".") {
+  return Object.keys(t).reduce((o, s) => {
+    const r = t[s], i = [e, s].filter(Boolean).join(n);
+    return [
+      typeof r == "object",
+      r !== null,
+      !(Array.isArray(r) && r.length === 0)
+    ].every(Boolean) ? { ...o, ...C(r, i, n) } : { ...o, [i]: r };
+  }, {});
 }
-const je = (t) => {
+const E = "builder.", Be = "options.", Pe = (t) => {
+  const e = {};
+  return t.forEach((n, o) => {
+    e[o] = n;
+  }), e;
+}, Ue = (t) => {
+  if (!t)
+    return {};
+  const e = V(t), n = {};
+  return Object.keys(e).forEach((o) => {
+    if (o.startsWith(E)) {
+      const s = o.replace(E, "").replace(Be, "");
+      n[s] = e[o];
+    }
+  }), n;
+}, Ve = () => {
+  if (!p())
+    return {};
+  const t = new URLSearchParams(window.location.search);
+  return Ue(t);
+}, V = (t) => t instanceof URLSearchParams ? Pe(t) : t, We = (t) => {
   const {
     limit: e = 30,
     userAttributes: n,
@@ -549,52 +682,53 @@ const je = (t) => {
     noTraverse: s = !1,
     model: r,
     apiKey: i,
-    includeRefs: c = !0,
+    includeRefs: l = !0,
     locale: a
   } = t;
   if (!i)
     throw new Error("Missing API key");
-  const d = new URL(
-    `https://cdn.builder.io/api/v2/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${c}${a ? `&locale=${a}` : ""}`
-  ), u = {
-    ...ye(),
-    ...F(t.options || {})
-  }, h = _(u);
-  for (const l in h)
-    d.searchParams.set(l, String(h[l]));
-  if (n && d.searchParams.set("userAttributes", JSON.stringify(n)), o) {
-    const l = _({ query: o });
-    for (const g in l)
-      d.searchParams.set(g, JSON.stringify(l[g]));
+  const u = new URL(
+    `https://cdn.builder.io/api/v2/content/${r}?apiKey=${i}&limit=${e}&noTraverse=${s}&includeRefs=${l}${a ? `&locale=${a}` : ""}`
+  ), d = {
+    ...Ve(),
+    ...V(t.options || {})
+  }, h = C(d);
+  for (const c in h)
+    u.searchParams.set(c, String(h[c]));
+  if (n && u.searchParams.set("userAttributes", JSON.stringify(n)), o) {
+    const c = C({ query: o });
+    for (const g in c)
+      u.searchParams.set(g, JSON.stringify(c[g]));
   }
-  return d;
+  return u;
 };
-async function Ue(t) {
-  const e = je(t), o = await (await j())(e.href).then(
-    (r) => r.json()
-  ), s = t.canTrack !== !1;
+async function W(t) {
+  return (await Ne({ ...t, limit: 1 })).results[0] || null;
+}
+async function Ne(t) {
+  const e = We(t), o = await (await A(e.href)).json(), s = t.canTrack !== !1;
   if (s && Array.isArray(o.results))
     for (const r of o.results)
-      await Fe({ item: r, canTrack: s });
+      await Ae({ item: r, canTrack: s });
   return o;
 }
-const Pe = () => Promise.resolve().then(() => Zt).then((t) => t.default).catch((t) => {
+const Le = () => Promise.resolve().then(() => an).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContent at ../../components/render-content/render-content.vue",
     t
   ), t;
-}), Ae = {
+}), Me = {
   name: "builder-symbol",
-  components: { RenderContent: Pe },
-  props: ["symbol", "attributes"],
-  data: () => ({ className: "builder-symbol", fetchedContent: null }),
+  components: { RenderContent: Le },
+  props: ["attributes", "symbol", "dynamic"],
+  data: () => ({ fetchedContent: null }),
   inject: {
     builderContext: "BuilderContext"
   },
   watch: {
     onUpdateHook0() {
       const t = this.symbol;
-      t && !t.content && !this.fetchedContent && t.model && O({
+      t && !t.content && !this.fetchedContent && t.model && W({
         model: t.model,
         apiKey: this.builderContext.apiKey,
         query: {
@@ -606,6 +740,15 @@ const Pe = () => Promise.resolve().then(() => Zt).then((t) => t.default).catch((
     }
   },
   computed: {
+    className() {
+      var t, e;
+      return [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        (t = this.symbol) != null && t.inline ? "builder-inline-symbol" : void 0,
+        ((e = this.symbol) == null ? void 0 : e.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" ");
+    },
     contentToUse() {
       var t;
       return ((t = this.symbol) == null ? void 0 : t.content) || this.fetchedContent;
@@ -629,8 +772,8 @@ const Pe = () => Promise.resolve().then(() => Zt).then((t) => t.default).catch((
     }
   }
 };
-var Oe = function() {
-  var o, s, r, i, c;
+var ze = function() {
+  var o, s, r, i, l;
   var e = this, n = e._self._c;
   return n("div", e._b({ class: e._classStringToObject(e.className), attrs: { dataSet: {
     class: e.className
@@ -638,71 +781,80 @@ var Oe = function() {
     ...(o = e.symbol) == null ? void 0 : o.data,
     ...e.builderContext.state,
     ...(i = (r = (s = e.symbol) == null ? void 0 : s.content) == null ? void 0 : r.data) == null ? void 0 : i.state
-  }, model: (c = e.symbol) == null ? void 0 : c.model, content: e.contentToUse } })], 1);
-}, Ve = [], Be = /* @__PURE__ */ m(
-  Ae,
-  Oe,
-  Ve,
+  }, model: (l = e.symbol) == null ? void 0 : l.model, content: e.contentToUse } })], 1);
+}, Ke = [], De = /* @__PURE__ */ m(
+  Me,
+  ze,
+  Ke,
   !1,
   null,
   null,
   null,
   null
 );
-const We = Be.exports, Le = {
+const He = De.exports, qe = {
   name: "builder-button",
   props: ["attributes", "text", "link", "openLinkInNewTab"]
 };
-var Ne = function() {
+var Ge = function() {
   var e = this, n = e._self._c;
-  return e.link ? n("a", e._b({ attrs: { role: "button", href: e.link, target: e.openLinkInNewTab ? "_blank" : void 0 } }, "a", e.attributes, !1), [e._v(" " + e._s(e.text) + " ")]) : n("button", e._b({ staticClass: "button-2brhoa1k8gd" }, "button", e.attributes, !1), [e._v(" " + e._s(e.text) + " ")]);
-}, Me = [], He = /* @__PURE__ */ m(
-  Le,
-  Ne,
-  Me,
+  return e.link ? n("a", e._b({ attrs: { role: "button", href: e.link, target: e.openLinkInNewTab ? "_blank" : void 0 } }, "a", e.attributes, !1), [e._v(" " + e._s(e.text) + " ")]) : n("button", e._b({ staticClass: "button-2fnk003dqad" }, "button", e.attributes, !1), [e._v(" " + e._s(e.text) + " ")]);
+}, Je = [], Xe = /* @__PURE__ */ m(
+  qe,
+  Ge,
+  Je,
   !1,
   null,
-  "1a3d5b35",
+  "b5c6b7e4",
   null,
   null
 );
-const Ke = He.exports, qe = {
+const Ye = Xe.exports, Qe = {
   name: "builder-section-component",
   props: ["attributes", "maxWidth"]
 };
-var ze = function() {
+var Ze = function() {
   var e = this, n = e._self._c;
-  return n("section", e._b({ style: e.maxWidth && typeof e.maxWidth == "number" ? {
-    maxWidth: e.maxWidth
-  } : void 0 }, "section", e.attributes, !1), [e._t("default")], 2);
-}, De = [], Je = /* @__PURE__ */ m(
-  qe,
-  ze,
-  De,
+  return n("section", e._b({ style: {
+    width: "100%",
+    alignSelf: "stretch",
+    flexGrow: "1",
+    boxSizing: "border-box",
+    maxWidth: `${e.maxWidth && typeof e.maxWidth == "number" ? e.maxWidth : 1200}px`,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    marginLeft: "auto",
+    marginRight: "auto"
+  } }, "section", e.attributes, !1), [e._t("default")], 2);
+}, et = [], tt = /* @__PURE__ */ m(
+  Qe,
+  Ze,
+  et,
   !1,
   null,
   null,
   null,
   null
 );
-const Ge = Je.exports, Xe = {
+const nt = tt.exports, ot = {
   name: "builder-fragment-component",
   props: []
 };
-var Ye = function() {
+var st = function() {
   var e = this, n = e._self._c;
   return n("span", [e._t("default")], 2);
-}, Qe = [], Ze = /* @__PURE__ */ m(
-  Xe,
-  Ye,
-  Qe,
+}, rt = [], it = /* @__PURE__ */ m(
+  ot,
+  st,
+  rt,
   !1,
   null,
   null,
   null,
   null
 );
-const et = Ze.exports, tt = {
+const at = it.exports, lt = {
   name: "Core:Button",
   builtIn: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -739,10 +891,10 @@ const et = Ze.exports, tt = {
   ],
   static: !0,
   noWrap: !0
-}, v = (t) => {
+}, _ = (t) => {
   const e = t.toString().trim();
   return `return (${!e.startsWith("function") && !e.startsWith("(") ? "function " : ""}${e}).apply(this, arguments)`;
-}, nt = {
+}, ct = {
   name: "Columns",
   builtIn: !0,
   inputs: [
@@ -930,7 +1082,7 @@ const et = Ze.exports, tt = {
           ]
         }
       ],
-      onChange: v((t) => {
+      onChange: _((t) => {
         function e() {
           n.forEach((o) => {
             o.delete("width");
@@ -941,7 +1093,7 @@ const et = Ze.exports, tt = {
           (s) => s.get("width")
         ) && (!!n.find(
           (r) => !r.get("width")
-        ) || n.reduce((c, a) => c + a.get("width"), 0) !== 100) && e();
+        ) || n.reduce((l, a) => l + a.get("width"), 0) !== 100) && e();
       })
     },
     {
@@ -967,14 +1119,14 @@ const et = Ze.exports, tt = {
       advanced: !0
     }
   ]
-}, ot = {
+}, ut = {
   name: "Fragment",
   static: !0,
   hidden: !0,
   builtIn: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, st = {
+}, dt = {
   name: "Image",
   static: !0,
   builtIn: !0,
@@ -994,19 +1146,19 @@ const et = Ze.exports, tt = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: !0,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: v((t) => {
+      onChange: _((t) => {
         t.delete("srcset"), t.delete("noWebp");
-        function n(i, c = 6e4) {
-          return new Promise((a, d) => {
-            const u = document.createElement("img");
+        function n(i, l = 6e4) {
+          return new Promise((a, u) => {
+            const d = document.createElement("img");
             let h = !1;
-            u.onload = () => {
-              h = !0, a(u);
-            }, u.addEventListener("error", (l) => {
-              console.warn("Image load failed", l.error), d(l.error);
-            }), u.src = i, setTimeout(() => {
-              h || d(new Error("Image load timed out"));
-            }, c);
+            d.onload = () => {
+              h = !0, a(d);
+            }, d.addEventListener("error", (c) => {
+              console.warn("Image load failed", c.error), u(c.error);
+            }), d.src = i, setTimeout(() => {
+              h || u(new Error("Image load timed out"));
+            }, l);
           });
         }
         function o(i) {
@@ -1017,8 +1169,8 @@ const et = Ze.exports, tt = {
           i.type.includes("svg") && t.set("noWebp", !0);
         }), s && (!r || r === 0.7041))
           return n(s).then((i) => {
-            const c = t.get("aspectRatio");
-            t.get("image") === s && (!c || c === 0.7041) && i.width && i.height && (t.set("aspectRatio", o(i.height / i.width)), t.set("height", i.height), t.set("width", i.width));
+            const l = t.get("aspectRatio");
+            t.get("image") === s && (!l || l === 0.7041) && i.width && i.height && (t.set("aspectRatio", o(i.height / i.width)), t.set("height", i.height), t.set("width", i.width));
           });
       })
     },
@@ -1100,7 +1252,7 @@ const et = Ze.exports, tt = {
       defaultValue: 0.7041
     }
   ]
-}, rt = {
+}, pt = {
   name: "Core:Section",
   static: !0,
   builtIn: !0,
@@ -1145,7 +1297,7 @@ const et = Ze.exports, tt = {
       }
     }
   ]
-}, it = {
+}, mt = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -1184,7 +1336,7 @@ const et = Ze.exports, tt = {
       type: "boolean"
     }
   ]
-}, at = {
+}, ht = {
   name: "Text",
   static: !0,
   builtIn: !0,
@@ -1204,7 +1356,7 @@ const et = Ze.exports, tt = {
     height: "auto",
     textAlign: "center"
   }
-}, ct = {
+}, ft = {
   name: "Video",
   canHaveChildren: !0,
   builtIn: !0,
@@ -1306,7 +1458,7 @@ const et = Ze.exports, tt = {
       advanced: !0
     }
   ]
-}, lt = {
+}, gt = {
   name: "Embed",
   static: !0,
   builtIn: !0,
@@ -1317,7 +1469,7 @@ const et = Ze.exports, tt = {
       required: !0,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: v((t) => {
+      onChange: _((t) => {
         const e = t.get("url");
         if (e)
           return t.set("content", "Loading..."), fetch(
@@ -1340,11 +1492,11 @@ const et = Ze.exports, tt = {
       hideFromUI: !0
     }
   ]
-}, dt = [
+}, bt = [
   "text/javascript",
   "application/javascript",
   "application/ecmascript"
-], ut = (t) => dt.includes(t.type), pt = {
+], yt = (t) => bt.includes(t.type), vt = {
   name: "builder-embed",
   props: ["content"],
   data: () => ({ scriptsInserted: [], scriptsRun: [], ranInitFn: !1 }),
@@ -1372,7 +1524,7 @@ const et = Ze.exports, tt = {
           this.scriptsInserted.push(n.src);
           const o = document.createElement("script");
           o.async = !0, o.src = n.src, document.head.appendChild(o);
-        } else if (ut(n) && !this.scriptsRun.includes(n.innerText))
+        } else if (yt(n) && !this.scriptsRun.includes(n.innerText))
           try {
             this.scriptsRun.push(n.innerText), new Function(n.innerText)();
           } catch (o) {
@@ -1382,27 +1534,27 @@ const et = Ze.exports, tt = {
     }
   }
 };
-var mt = function() {
+var _t = function() {
   var e = this, n = e._self._c;
   return n("div", { ref: "elem", staticClass: "builder-embed", domProps: { innerHTML: e._s(e.content) } });
-}, ht = [], ft = /* @__PURE__ */ m(
-  pt,
-  mt,
-  ht,
+}, xt = [], Ct = /* @__PURE__ */ m(
+  vt,
+  _t,
+  xt,
   !1,
   null,
   null,
   null,
   null
 );
-const gt = ft.exports;
-function bt() {
+const kt = Ct.exports;
+function St() {
   return p() && window.self !== window.top;
 }
 function f() {
-  return bt() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+  return St() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
-const vt = {
+const wt = {
   name: "builder-img-component",
   props: [
     "backgroundSize",
@@ -1414,23 +1566,23 @@ const vt = {
   ],
   data: () => ({ isEditing: f })
 };
-var yt = function() {
+var It = function() {
   var e = this, n = e._self._c;
   return n("img", e._b({ key: e.isEditing() && e.imgSrc || "default-key", style: {
     objectFit: e.backgroundSize || "cover",
     objectPosition: e.backgroundPosition || "center"
   }, attrs: { alt: e.altText, src: e.imgSrc || e.image } }, "img", e.attributes, !1));
-}, _t = [], xt = /* @__PURE__ */ m(
-  vt,
-  yt,
-  _t,
+}, Rt = [], Tt = /* @__PURE__ */ m(
+  wt,
+  It,
+  Rt,
   !1,
   null,
   null,
   null,
   null
 );
-const Ct = xt.exports, wt = {
+const $t = Tt.exports, Et = {
   name: "Raw:Img",
   hideFromInsertMenu: !0,
   builtIn: !0,
@@ -1446,7 +1598,7 @@ const Ct = xt.exports, wt = {
   ],
   noWrap: !0,
   static: !0
-}, kt = {
+}, Ft = {
   name: "builder-custom-code",
   props: ["replaceNodes", "code"],
   data: () => ({ scriptsInserted: [], scriptsRun: [] }),
@@ -1492,22 +1644,22 @@ const Ct = xt.exports, wt = {
     }
   }
 };
-var St = function() {
+var jt = function() {
   var e = this, n = e._self._c;
   return n("div", { ref: "elem", class: e._classStringToObject(
     "builder-custom-code" + (e.replaceNodes ? " replace-nodes" : "")
   ), domProps: { innerHTML: e._s(e.code) } });
-}, It = [], Rt = /* @__PURE__ */ m(
-  kt,
-  St,
-  It,
+}, Ot = [], At = /* @__PURE__ */ m(
+  Ft,
+  jt,
+  Ot,
   !1,
   null,
   null,
   null,
   null
 );
-const Tt = Rt.exports, $t = {
+const Bt = At.exports, Pt = {
   name: "Custom Code",
   static: !0,
   builtIn: !0,
@@ -1534,20 +1686,20 @@ const Tt = Rt.exports, $t = {
       advanced: !0
     }
   ]
-}, Et = () => [
-  { component: Q, ...nt },
-  { component: re, ...st },
-  { component: Ct, ...wt },
-  { component: de, ...at },
-  { component: fe, ...ct },
-  { component: We, ...it },
-  { component: Ke, ...tt },
-  { component: Ge, ...rt },
-  { component: et, ...ot },
-  { component: gt, ...lt },
-  { component: Tt, ...$t }
+}, Ut = () => [
+  { component: se, ...ct },
+  { component: de, ...dt },
+  { component: $t, ...Et },
+  { component: ge, ...ht },
+  { component: xe, ...ft },
+  { component: He, ...mt },
+  { component: Ye, ...lt },
+  { component: nt, ...pt },
+  { component: at, ...ut },
+  { component: kt, ...gt },
+  { component: Bt, ...Pt }
 ];
-function $({
+function F({
   code: t,
   context: e,
   state: n,
@@ -1562,7 +1714,7 @@ function $({
     isEditing: f(),
     isBrowser: p(),
     isServer: !p()
-  }, c = s && !(t.includes(";") || t.includes(" return ") || t.trim().startsWith("return ")) ? `return (${t});` : t;
+  }, l = s && !(t.includes(";") || t.includes(" return ") || t.trim().startsWith("return ")) ? `return (${t});` : t;
   try {
     return new Function(
       "builder",
@@ -1570,127 +1722,127 @@ function $({
       "state",
       "context",
       "event",
-      c
+      l
     )(r, r, n, e, o);
   } catch (a) {
     console.warn(
       `Builder custom code error: 
  While Evaluating: 
  `,
-      c,
+      l,
       `
 `,
       a
     );
   }
 }
-function Ft() {
+function Vt() {
   return !p() || f() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-const V = (t) => JSON.parse(JSON.stringify(t)), B = [];
-function cn(t, e) {
-  return B.push({ component: t, ...e }), console.warn(
+const N = [];
+function bn(t, e) {
+  return N.push({ component: t, ...e }), console.warn(
     "registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK."
   ), t;
 }
-const jt = ({
+const Wt = ({
   component: t,
   ...e
 }) => ({
   type: "builder.registerComponent",
-  data: Pt(e)
-}), Ut = (t) => typeof t == "function" ? v(t) : V(t), Pt = ({
+  data: Lt(e)
+}), Nt = (t) => typeof t == "function" ? _(t) : S(t), Lt = ({
   inputs: t,
   ...e
 }) => ({
-  ...V(e),
+  ...S(e),
   inputs: t == null ? void 0 : t.map(
     (n) => Object.entries(n).reduce(
       (o, [s, r]) => ({
         ...o,
-        [s]: Ut(r)
+        [s]: Nt(r)
       }),
       {}
     )
   )
 });
-function At() {
+function Mt() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
     const e = Math.random() * 16 | 0;
     return (t == "x" ? e : e & 3 | 8).toString(16);
   });
 }
-function W() {
-  return At().replace(/-/g, "");
+function L() {
+  return Mt().replace(/-/g, "");
 }
-const L = "builderSessionId", Ot = async ({ canTrack: t }) => {
+const M = "builderSessionId", zt = async ({ canTrack: t }) => {
   if (!t)
     return;
-  const e = await U({
-    name: L,
+  const e = await B({
+    name: M,
     canTrack: t
   });
-  if (b(e))
+  if (y(e))
     return e;
   {
-    const n = Vt();
-    Bt({ id: n, canTrack: t });
+    const n = Kt();
+    Dt({ id: n, canTrack: t });
   }
-}, Vt = () => W(), Bt = ({
+}, Kt = () => L(), Dt = ({
   id: t,
   canTrack: e
-}) => P({ name: L, value: t, canTrack: e }), N = () => p() && typeof localStorage < "u" ? localStorage : void 0, Wt = ({
+}) => P({ name: M, value: t, canTrack: e }), z = () => p() && typeof localStorage < "u" ? localStorage : void 0, Ht = ({
   key: t,
   canTrack: e
 }) => {
   var n;
   try {
-    return e ? (n = N()) == null ? void 0 : n.getItem(t) : void 0;
+    return e ? (n = z()) == null ? void 0 : n.getItem(t) : void 0;
   } catch (o) {
     console.debug("[LocalStorage] GET error: ", o);
   }
-}, Lt = ({
+}, qt = ({
   key: t,
   canTrack: e,
   value: n
 }) => {
   var o;
   try {
-    e && ((o = N()) == null || o.setItem(t, n));
+    e && ((o = z()) == null || o.setItem(t, n));
   } catch (s) {
     console.debug("[LocalStorage] SET error: ", s);
   }
-}, M = "builderVisitorId", Nt = ({ canTrack: t }) => {
+}, K = "builderVisitorId", Gt = ({ canTrack: t }) => {
   if (!t)
     return;
-  const e = Wt({
-    key: M,
+  const e = Ht({
+    key: K,
     canTrack: t
   });
-  if (b(e))
+  if (y(e))
     return e;
   {
-    const n = Mt();
-    Ht({ id: n, canTrack: t });
+    const n = Jt();
+    Xt({ id: n, canTrack: t });
   }
-}, Mt = () => W(), Ht = ({
+}, Jt = () => L(), Xt = ({
   id: t,
   canTrack: e
-}) => Lt({
-  key: M,
+}) => qt({
+  key: K,
   value: t,
   canTrack: e
-}), Kt = async ({
+}), Yt = async ({
   canTrack: t
 }) => {
   if (!t)
     return { visitorId: void 0, sessionId: void 0 };
-  const e = await Ot({ canTrack: t }), n = Nt({ canTrack: t });
+  const e = await zt({ canTrack: t }), n = Gt({ canTrack: t });
   return {
     sessionId: e,
     visitorId: n
   };
-}, qt = async ({
+}, Qt = async ({
   type: t,
   canTrack: e,
   apiKey: n,
@@ -1701,22 +1853,22 @@ const L = "builderSessionId", Ot = async ({ canTrack: t }) => {
   data: {
     ...s,
     metadata: JSON.stringify(o),
-    ...await Kt({ canTrack: e }),
+    ...await Yt({ canTrack: e }),
     ownerId: n
   }
 });
-async function x(t) {
+async function k(t) {
   if (!t.apiKey) {
     console.error(
       "[Builder.io]: Missing API key for track call. Please provide your API key."
     );
     return;
   }
-  if (!!t.canTrack && !f() && !!(p() || C === "reactNative"))
+  if (!!t.canTrack && !f() && !!(p() || v === "reactNative"))
     return fetch("https://builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await qt(t)]
+        events: [await Qt(t)]
       }),
       headers: {
         "content-type": "application/json"
@@ -1726,21 +1878,21 @@ async function x(t) {
       console.error("Failed to track: ", e);
     });
 }
-const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then(() => H).then((t) => t.default).catch((t) => {
+const yn = (t) => k({ ...t, canTrack: !0 }), Zt = () => Promise.resolve().then(() => D).then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../render-blocks.vue",
     t
   ), t;
-}), Dt = () => import("./render-styles.230dc75f.js").then((t) => t.default).catch((t) => {
+}), en = () => import("./render-styles.9f1c2b6a.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContentStyles at ./components/render-styles.vue",
     t
   ), t;
-}), Jt = {
+}), tn = {
   name: "render-content",
   components: {
-    RenderContentStyles: Dt,
-    RenderBlocks: zt
+    RenderContentStyles: en,
+    RenderBlocks: Zt
   },
   props: [
     "content",
@@ -1757,6 +1909,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     forceReRenderCount: 0,
     overrideContent: null,
     update: 0,
+    useBreakpoints: null,
     overrideState: {}
   }),
   provide() {
@@ -1786,7 +1939,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     if (this.apiKey || console.error(
       "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
     ), p()) {
-      if (f() && (this.forceReRenderCount = this.forceReRenderCount + 1, q(), z({
+      if (f() && (this.forceReRenderCount = this.forceReRenderCount + 1, q(), G({
         ...this.locale ? {
           locale: this.locale
         } : {},
@@ -1796,7 +1949,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
       }), Object.values(this.allRegisteredComponents).forEach(
         (n) => {
           var s;
-          const o = jt(n);
+          const o = Wt(n);
           (s = window.parent) == null || s.postMessage(o, "*");
         }
       ), window.addEventListener("message", this.processMessage), window.addEventListener(
@@ -1804,7 +1957,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
         this.emitStateUpdate
       )), this.useContent) {
         const n = (t = this.useContent) == null ? void 0 : t.testVariationId, o = (e = this.useContent) == null ? void 0 : e.id;
-        x({
+        k({
           type: "impression",
           canTrack: this.canTrackToUse,
           contentId: o,
@@ -1812,11 +1965,11 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
           variationId: n !== o ? n : void 0
         });
       }
-      if (Ft()) {
+      if (Vt()) {
         const n = new URL(location.href).searchParams;
         if (this.model && n.get("builder.preview") === this.model) {
           const o = n.get("apiKey") || n.get("builder.space");
-          o && O({
+          o && W({
             model: this.model,
             apiKey: o
           }).then((s) => {
@@ -1846,7 +1999,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
   },
   computed: {
     useContent() {
-      var e, n;
+      var e, n, o, s, r, i, l, a;
       return !this.content && !this.overrideContent ? void 0 : {
         ...this.content,
         ...this.overrideContent,
@@ -1854,6 +2007,11 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
           ...(e = this.content) == null ? void 0 : e.data,
           ...this.data,
           ...(n = this.overrideContent) == null ? void 0 : n.data
+        },
+        meta: {
+          ...(o = this.content) == null ? void 0 : o.meta,
+          ...(s = this.overrideContent) == null ? void 0 : s.meta,
+          breakpoints: this.useBreakpoints || ((i = (r = this.overrideContent) == null ? void 0 : r.meta) == null ? void 0 : i.breakpoints) || ((a = (l = this.content) == null ? void 0 : l.meta) == null ? void 0 : a.breakpoints)
         }
       };
     },
@@ -1876,8 +2034,8 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     },
     allRegisteredComponents() {
       return [
-        ...Et(),
-        ...B,
+        ...Ut(),
+        ...N,
         ...this.customComponents || []
       ].reduce(
         (n, o) => ({
@@ -1893,7 +2051,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     shouldRenderContentStyles() {
       var t, e, n, o, s;
       return Boolean(
-        (((e = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : e.cssCode) || ((s = (o = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : o.customFonts) == null ? void 0 : s.length)) && C !== "reactNative"
+        (((e = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : e.cssCode) || ((s = (o = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : o.customFonts) == null ? void 0 : s.length)) && v !== "reactNative"
       );
     },
     onUpdateHook0() {
@@ -1917,12 +2075,20 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
   },
   methods: {
     processMessage(t) {
+      var n;
       const { data: e } = t;
       if (e)
         switch (e.type) {
+          case "builder.configureSdk": {
+            const o = e.data, { breakpoints: s, contentId: r } = o;
+            if (!r || r !== ((n = this.useContent) == null ? void 0 : n.id))
+              return;
+            this.useBreakpoints = s, this.forceReRenderCount = this.forceReRenderCount + 1;
+            break;
+          }
           case "builder.contentUpdate": {
-            const n = e.data, o = n.key || n.alias || n.entry || n.modelName, s = n.data;
-            o === this.model && (this.overrideContent = s, this.forceReRenderCount = this.forceReRenderCount + 1);
+            const o = e.data, s = o.key || o.alias || o.entry || o.modelName, r = o.data;
+            s === this.model && (this.overrideContent = r, this.forceReRenderCount = this.forceReRenderCount + 1);
             break;
           }
         }
@@ -1930,7 +2096,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     evaluateJsCode() {
       var e, n;
       const t = (n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.jsCode;
-      t && $({
+      t && F({
         code: t,
         context: this.contextContext,
         state: this.contentState
@@ -1940,7 +2106,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
       var e, n;
       if (this.useContent) {
         const o = (e = this.useContent) == null ? void 0 : e.testVariationId, s = (n = this.useContent) == null ? void 0 : n.id;
-        x({
+        k({
           type: "click",
           canTrack: this.canTrackToUse,
           contentId: s,
@@ -1952,7 +2118,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     evalExpression(t) {
       return t.replace(
         /{{([^}]+)}}/g,
-        (e, n) => $({
+        (e, n) => F({
           code: n,
           context: this.contextContext,
           state: this.contentState
@@ -1960,7 +2126,7 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
       );
     },
     handleRequest({ url: t, key: e }) {
-      j().then((n) => n(t)).then((n) => n.json()).then((n) => {
+      A(t).then((n) => n.json()).then((n) => {
         const o = {
           ...this.overrideState,
           [e]: n
@@ -1997,38 +2163,38 @@ const ln = (t) => x({ ...t, canTrack: !0 }), zt = () => Promise.resolve().then((
     }
   }
 };
-var Gt = function() {
-  var o, s, r, i, c, a, d;
+var nn = function() {
+  var o, s, r, i, l, a, u;
   var e = this, n = e._self._c;
-  return e.useContent ? n("div", { ref: "elementRef", attrs: { "builder-content-id": (o = e.useContent) == null ? void 0 : o.id, "builder-model": e.model }, on: { click: function(u) {
-    return e.onClick(u);
-  } } }, [e.shouldRenderContentStyles ? [n("render-content-styles", { attrs: { cssCode: (r = (s = e.useContent) == null ? void 0 : s.data) == null ? void 0 : r.cssCode, customFonts: (c = (i = e.useContent) == null ? void 0 : i.data) == null ? void 0 : c.customFonts } })] : e._e(), n("render-blocks", { key: e.forceReRenderCount, attrs: { blocks: (d = (a = e.useContent) == null ? void 0 : a.data) == null ? void 0 : d.blocks } })], 2) : e._e();
-}, Xt = [], Yt = /* @__PURE__ */ m(
-  Jt,
-  Gt,
-  Xt,
+  return e.useContent ? n("div", { ref: "elementRef", attrs: { "builder-content-id": (o = e.useContent) == null ? void 0 : o.id, "builder-model": e.model }, on: { click: function(d) {
+    return e.onClick(d);
+  } } }, [e.shouldRenderContentStyles ? [n("render-content-styles", { attrs: { cssCode: (r = (s = e.useContent) == null ? void 0 : s.data) == null ? void 0 : r.cssCode, customFonts: (l = (i = e.useContent) == null ? void 0 : i.data) == null ? void 0 : l.customFonts } })] : e._e(), n("render-blocks", { key: e.forceReRenderCount, attrs: { blocks: (u = (a = e.useContent) == null ? void 0 : a.data) == null ? void 0 : u.blocks } })], 2) : e._e();
+}, on = [], sn = /* @__PURE__ */ m(
+  tn,
+  nn,
+  on,
   !1,
   null,
   null,
   null,
   null
 );
-const Qt = Yt.exports, Zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const rn = sn.exports, an = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Qt
-}, Symbol.toStringTag, { value: "Module" })), en = () => import("./block-styles.446ece03.js").then((t) => t.default).catch((t) => {
+  default: rn
+}, Symbol.toStringTag, { value: "Module" })), ln = () => import("./block-styles.b44c8edf.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
     t
   ), t;
-}), tn = () => import("./render-block.678a49f8.js").then((t) => t.default).catch((t) => {
+}), cn = () => import("./render-block.19d46f0b.js").then((t) => t.default).catch((t) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
     t
   ), t;
-}), nn = {
+}), un = {
   name: "render-blocks",
-  components: { RenderBlock: tn, BlockStyles: en },
+  components: { RenderBlock: cn, BlockStyles: ln },
   props: ["blocks", "parent", "path", "styleProp"],
   inject: {
     builderContext: "BuilderContext"
@@ -2077,9 +2243,9 @@ const Qt = Yt.exports, Zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
     }
   }
 };
-var on = function() {
+var dn = function() {
   var e = this, n = e._self._c;
-  return n("div", { class: e._classStringToObject(e.className + " div-23e8fqt91nf"), style: e.styleProp, attrs: { "builder-path": e.path, "builder-parent-id": e.parent, dataSet: {
+  return n("div", { class: e._classStringToObject(e.className + " div-21azgz5avex"), style: e.styleProp, attrs: { "builder-path": e.path, "builder-parent-id": e.parent, dataSet: {
     class: e.className
   } }, on: { click: function(o) {
     return e.onClick();
@@ -2090,58 +2256,61 @@ var on = function() {
   }) : e._e(), e.blocks ? e._l(e.blocks, function(o, s) {
     return n("block-styles", { key: "block-style-" + o.id, attrs: { block: o, context: e.builderContext } });
   }) : e._e()], 2);
-}, sn = [], rn = /* @__PURE__ */ m(
-  nn,
-  on,
-  sn,
+}, pn = [], mn = /* @__PURE__ */ m(
+  un,
+  dn,
+  pn,
   !1,
   null,
-  "713efc9e",
+  "0a33c796",
   null,
   null
 );
-const an = rn.exports, H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const hn = mn.exports, D = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: an
-}, Symbol.toStringTag, { value: "Module" })), E = {};
-function dn(t) {
+  default: hn
+}, Symbol.toStringTag, { value: "Module" })), j = {};
+function vn(t) {
   if (p()) {
-    Object.assign(E, t);
+    Object.assign(j, t);
     const e = {
       type: "builder.settingsChange",
-      data: E
+      data: j
     };
     parent.postMessage(e, "*");
   }
 }
 export {
-  Ke as B,
-  Q as C,
-  et as F,
-  re as I,
-  We as S,
-  C as T,
-  fe as V,
-  de as a,
-  Ge as b,
-  an as c,
-  Ft as d,
-  $ as e,
-  V as f,
-  B as g,
-  cn as h,
-  f as i,
-  jt as j,
-  K as k,
-  O as l,
-  je as m,
+  Ye as B,
+  se as C,
+  at as F,
+  de as I,
+  He as S,
+  v as T,
+  xe as V,
+  fn as a,
+  Y as b,
+  gn as c,
+  ge as d,
+  F as e,
+  S as f,
+  J as g,
+  nt as h,
+  hn as i,
+  f as j,
+  Vt as k,
+  N as l,
+  bn as m,
   m as n,
-  Ue as o,
-  be as p,
-  ve as q,
-  Qt as r,
-  dn as s,
-  ln as t,
-  ye as u,
-  F as v
+  Wt as o,
+  H as p,
+  W as q,
+  rn as r,
+  vn as s,
+  yn as t,
+  Ne as u,
+  Pe as v,
+  Ue as w,
+  Ve as x,
+  V as y
 };