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

package/packages/_vue3/dist/{index.0555f850.js → index.c2f0c6b9.js}

@@ -1,12 +1,12 @@
-import { defineAsyncComponent as x, resolveComponent as C, openBlock as l, createElementBlock as d, normalizeStyle as k, Fragment as w, renderList as j, createVNode as K, createElementVNode as E, createCommentVNode as v, normalizeClass as P, renderSlot as S, mergeProps as _, toDisplayString as O, createBlock as I } from "vue";
-const V = "vue3";
+import { defineAsyncComponent as x, resolveComponent as k, openBlock as l, createElementBlock as u, normalizeClass as E, normalizeStyle as _, createBlock as w, createCommentVNode as b, Fragment as T, renderList as $, createVNode as q, createElementVNode as B, renderSlot as R, mergeProps as C, toDisplayString as W } from "vue";
+const j = "vue3";
 function f() {
   return typeof window < "u" && typeof document < "u";
 }
-const $ = {};
-function ie(e, n) {
-  let t = $[e];
-  if (t || (t = $[e] = []), t.push(n), f()) {
+const L = {};
+function ce(e, n) {
+  let t = L[e];
+  if (t || (t = L[e] = []), t.push(n), f()) {
     const o = {
       type: "builder.register",
       data: {
@@ -16,13 +16,13 @@ function ie(e, n) {
     };
     try {
       parent.postMessage(o, "*"), parent !== window && window.postMessage(o, "*");
-    } catch (s) {
-      console.debug("Could not postmessage", s);
+    } catch (r) {
+      console.debug("Could not postmessage", r);
     }
   }
 }
-const ae = () => {
-  ie("insertMenu", {
+const le = () => {
+  ce("insertMenu", {
     name: "_default",
     default: !0,
     items: [
@@ -37,14 +37,14 @@ const ae = () => {
     ]
   });
 };
-let W = !1;
-const ce = (e = {}) => {
+let N = !1;
+const de = (e = {}) => {
   var n, t;
-  W || (W = !0, f() && ((n = window.parent) == null || n.postMessage(
+  N || (N = !0, f() && ((n = window.parent) == null || n.postMessage(
     {
       type: "builder.sdkInfo",
       data: {
-        target: V,
+        target: j,
         supportsPatchUpdates: !1,
         supportsAddBlockScoping: !0,
         supportsCustomBreakpoints: !0
@@ -60,33 +60,33 @@ const ce = (e = {}) => {
     },
     "*"
   ), window.addEventListener("message", ({ data: o }) => {
-    var s, r;
+    var r, s;
     if (!!(o != null && o.type))
       switch (o.type) {
         case "builder.evaluate": {
-          const i = o.data.text, c = o.data.arguments || [], a = o.data.id, u = new Function(i);
+          const i = o.data.text, c = o.data.arguments || [], a = o.data.id, d = new Function(i);
           let m, p = null;
           try {
-            m = u.apply(null, c);
+            m = d.apply(null, c);
           } catch (h) {
             p = h;
           }
-          p ? (s = window.parent) == null || s.postMessage(
+          p ? (r = window.parent) == null || r.postMessage(
             {
               type: "builder.evaluateError",
               data: { id: a, error: p.message }
             },
             "*"
           ) : m && typeof m.then == "function" ? m.then((h) => {
-            var y;
-            (y = window.parent) == null || y.postMessage(
+            var v;
+            (v = window.parent) == null || v.postMessage(
               {
                 type: "builder.evaluateResult",
                 data: { id: a, result: h }
               },
               "*"
             );
-          }).catch(console.error) : (r = window.parent) == null || r.postMessage(
+          }).catch(console.error) : (s = window.parent) == null || s.postMessage(
             {
               type: "builder.evaluateResult",
               data: { result: m, id: a }
@@ -97,21 +97,84 @@ const ce = (e = {}) => {
         }
       }
   })));
-}, le = () => Promise.resolve().then(() => se).then((e) => e.default).catch((e) => {
+}, U = (e) => JSON.parse(JSON.stringify(e)), G = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+}, vn = (e, n = G) => `@media (max-width: ${n[e].max}px)`, ue = ({ small: e, medium: n }) => {
+  const t = U(G);
+  if (!e || !n)
+    return t;
+  const o = Math.floor(e / 2);
+  t.small = {
+    max: e,
+    min: o,
+    default: o + 1
+  };
+  const r = t.small.max + 1;
+  t.medium = {
+    max: n,
+    min: r,
+    default: r + 1
+  };
+  const s = t.medium.max + 1;
+  return t.large = {
+    max: 2e3,
+    min: s,
+    default: s + 1
+  }, t;
+}, me = (e) => e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), I = (e) => e != null, pe = (e) => Object.entries(e).map(([t, o]) => {
+  if (typeof o == "string")
+    return `${me(t)}: ${o};`;
+}).filter(I), S = (e) => pe(e).join(`
+`), xn = ({
+  mediaQuery: e,
+  className: n,
+  styles: t
+}) => {
+  const o = `.${n} {
+    ${S(t)}
+  }`;
+  return e ? `${e} {
+      ${o}
+    }` : o;
+}, he = () => Promise.resolve().then(() => ie).then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../../components/render-blocks.vue",
     e
   ), e;
-}), de = {
+}), fe = () => import("./render-inlined-styles.575fa695.js").then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component RenderInlinedStyles at ../../components/render-inlined-styles.vue",
+    e
+  ), e;
+}), ge = {
   name: "builder-columns",
-  components: { RenderBlocks: x(le) },
+  components: {
+    RenderInlinedStyles: x(fe),
+    RenderBlocks: x(he)
+  },
   props: [
     "space",
     "columns",
     "stackColumnsAt",
     "reverseColumnsWhenStacked",
+    "customBreakpoints",
     "builderBlock"
   ],
+  data: () => ({ TARGET: j }),
   computed: {
     columnsCssVars() {
       const e = this.stackColumnsAt === "never" ? "inherit" : this.reverseColumnsWhenStacked ? "column-reverse" : "column";
@@ -128,6 +191,59 @@ const ce = (e = {}) => {
         "--column-width-tablet": this.maybeApplyForTablet(e),
         "--column-margin-left-tablet": this.maybeApplyForTablet(n)
       };
+    },
+    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 {
+          ${S(this.columnStyleObjects.columns.medium)}
+        }
+
+        .${this.builderBlock.id}-breakpoints > .builder-column {
+          ${S(this.columnStyleObjects.column.medium)}
+        }
+      }
+
+      @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+        .${this.builderBlock.id}-breakpoints {
+          ${S(this.columnStyleObjects.columns.small)}
+        }
+
+        .${this.builderBlock.id}-breakpoints > .builder-column {
+          ${S(this.columnStyleObjects.column.small)}
+        }
+      },
+    `;
+    },
+    reactNativeColumnsStyles() {
+      return this.columnStyleObjects.columns.small;
+    },
+    reactNativeColumnStyles() {
+      return this.columnStyleObjects.column.small;
     }
   },
   methods: {
@@ -148,75 +264,101 @@ const ce = (e = {}) => {
     },
     maybeApplyForTablet(e) {
       return (this.stackColumnsAt || "tablet") === "tablet" ? e : "inherit";
+    },
+    getWidthForBreakpointSize(e) {
+      return ue(
+        this.customBreakpoints || {}
+      )[e].max;
+    },
+    _classStringToObject(e) {
+      const n = {};
+      if (typeof e != "string")
+        return n;
+      const t = e.trim().split(/\s+/);
+      for (const o of t)
+        n[o] = !0;
+      return n;
     }
   }
 };
 const g = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [o, s] of n)
-    t[o] = s;
+  for (const [o, r] of n)
+    t[o] = r;
   return t;
 };
-function ue(e, n, t, o, s, r) {
-  const i = C("render-blocks");
-  return l(), d("div", {
-    class: "builder-columns div-4uae37x75le",
-    style: k(r.columnsCssVars)
+function be(e, n, t, o, r, s) {
+  const i = k("render-inlined-styles"), c = k("render-blocks");
+  return l(), u("div", {
+    class: E(
+      s._classStringToObject(
+        `builder-columns ${t.builderBlock.id}-breakpoints div-1eih9th5ow6`
+      )
+    ),
+    style: _({
+      ...e.TARGET === "reactNative" ? s.reactNativeColumnsStyles : {},
+      ...s.columnsCssVars
+    })
   }, [
-    (l(!0), d(w, null, j(t.columns, (c, a) => (l(), d("div", {
-      key: a,
-      class: "builder-column div-4uae37x75le-2",
-      style: k({
-        width: r.getColumnCssWidth(a),
-        marginLeft: `${a === 0 ? 0 : r.getGutterSize()}px`,
-        ...r.columnCssVars
+    e.TARGET !== "reactNative" ? (l(), w(i, {
+      key: 0,
+      styles: s.columnsStyles
+    }, null, 8, ["styles"])) : b("", !0),
+    (l(!0), u(T, null, $(t.columns, (a, d) => (l(), u("div", {
+      key: d,
+      class: "builder-column div-1eih9th5ow6-2",
+      style: _({
+        width: s.getColumnCssWidth(d),
+        marginLeft: `${d === 0 ? 0 : s.getGutterSize()}px`,
+        ...e.TARGET === "reactNative" ? s.reactNativeColumnStyles : {},
+        ...s.columnCssVars
       })
     }, [
-      K(i, {
-        blocks: c.blocks,
-        path: `component.options.columns.${a}.blocks`,
+      q(c, {
+        blocks: a.blocks,
+        path: `component.options.columns.${d}.blocks`,
         parent: t.builderBlock.id,
         styleProp: {
           flexGrow: "1"
         }
       }, null, 8, ["blocks", "path", "parent"])
     ], 4))), 128))
-  ], 4);
+  ], 6);
 }
-const me = /* @__PURE__ */ g(de, [["render", ue], ["__scopeId", "data-v-11562ef4"]]);
-function L(e) {
+const ye = /* @__PURE__ */ g(ge, [["render", be], ["__scopeId", "data-v-4ed006a3"]]);
+function M(e) {
   return e.replace(/http(s)?:/, "");
 }
-function pe(e = "", n, t) {
-  const o = new RegExp("([?&])" + n + "=.*?(&|$)", "i"), s = e.indexOf("?") !== -1 ? "&" : "?";
-  return e.match(o) ? e.replace(o, "$1" + n + "=" + encodeURIComponent(t) + "$2") : e + s + n + "=" + encodeURIComponent(t);
+function ve(e = "", n, t) {
+  const o = new RegExp("([?&])" + n + "=.*?(&|$)", "i"), r = e.indexOf("?") !== -1 ? "&" : "?";
+  return e.match(o) ? e.replace(o, "$1" + n + "=" + encodeURIComponent(t) + "$2") : e + r + n + "=" + encodeURIComponent(t);
 }
-function he(e, n) {
+function xe(e, n) {
   if (!e || !(e != null && e.match(/cdn\.shopify\.com/)) || !n)
     return e;
   if (n === "master")
-    return L(e);
+    return M(e);
   const t = e.match(
     /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
   );
   if (t) {
-    const o = e.split(t[0]), s = t[3], r = n.match("x") ? n : `${n}x`;
-    return L(`${o[0]}_${r}${s}`);
+    const o = e.split(t[0]), r = t[3], s = n.match("x") ? n : `${n}x`;
+    return M(`${o[0]}_${s}${r}`);
   }
   return null;
 }
-function F(e) {
+function A(e) {
   if (!e)
     return e;
   const n = [100, 200, 400, 800, 1200, 1600, 2e3];
   if (e.match(/builder\.io/)) {
     let t = e;
     const o = Number(e.split("?width=")[1]);
-    return isNaN(o) || (t = `${t} ${o}w`), n.filter((s) => s !== o).map((s) => `${pe(e, "width", s)} ${s}w`).concat([t]).join(", ");
+    return isNaN(o) || (t = `${t} ${o}w`), n.filter((r) => r !== o).map((r) => `${ve(e, "width", r)} ${r}w`).concat([t]).join(", ");
   }
-  return e.match(/cdn\.shopify\.com/) ? n.map((t) => [he(e, `${t}x${t}`), t]).filter(([t]) => !!t).map(([t, o]) => `${t} ${o}w`).concat([e]).join(", ") : e;
+  return e.match(/cdn\.shopify\.com/) ? n.map((t) => [xe(e, `${t}x${t}`), t]).filter(([t]) => !!t).map(([t, o]) => `${t} ${o}w`).concat([e]).join(", ") : e;
 }
-const fe = {
+const ke = {
   name: "builder-image",
   props: [
     "image",
@@ -240,10 +382,10 @@ const fe = {
         return this.srcset;
       if (this.srcset && ((t = this.image) == null ? void 0 : t.includes("builder.io/api/v1/image"))) {
         if (!this.srcset.includes(this.image.split("?")[0]))
-          return console.debug("Removed given srcset"), F(n);
+          return console.debug("Removed given srcset"), A(n);
       } else if (this.image && !this.srcset)
-        return F(n);
-      return F(n);
+        return A(n);
+      return A(n);
     },
     webpSrcSet() {
       var e;
@@ -272,63 +414,63 @@ const fe = {
     }
   }
 };
-const ge = ["srcset"], be = ["alt", "role", "src", "srcset", "sizes"], ye = ["srcset"], ve = {
+const Ce = ["srcset"], Se = ["alt", "role", "src", "srcset", "sizes"], _e = ["srcset"], we = {
   key: 2,
-  class: "div-bmtecjgqz8g-2"
+  class: "div-256wrwn33ry-2"
 };
-function xe(e, n, t, o, s, r) {
-  var i, c, a, u;
-  return l(), d(w, null, [
-    E("picture", null, [
-      r.webpSrcSet ? (l(), d("source", {
+function Ie(e, n, t, o, r, s) {
+  var i, c, a, d;
+  return l(), u(T, null, [
+    B("picture", null, [
+      s.webpSrcSet ? (l(), u("source", {
         key: 0,
         type: "image/webp",
-        srcset: r.webpSrcSet
-      }, null, 8, ge)) : v("", !0),
-      E("img", {
+        srcset: s.webpSrcSet
+      }, null, 8, Ce)) : b("", !0),
+      B("img", {
         loading: "lazy",
         alt: t.altText,
         role: t.altText ? "presentation" : void 0,
-        style: k({
+        style: _({
           objectPosition: t.backgroundPosition || "center",
           objectFit: t.backgroundSize || "cover",
-          ...r.aspectRatioCss
+          ...s.aspectRatioCss
         }),
-        class: P(
-          r._classStringToObject(
-            "builder-image" + (t.className ? " " + t.className : "") + " img-bmtecjgqz8g"
+        class: E(
+          s._classStringToObject(
+            "builder-image" + (t.className ? " " + t.className : "") + " img-256wrwn33ry"
           )
         ),
         src: t.image,
-        srcset: r.srcSetToUse,
+        srcset: s.srcSetToUse,
         sizes: t.sizes
-      }, null, 14, be),
-      E("source", { srcset: r.srcSetToUse }, null, 8, ye)
+      }, null, 14, Se),
+      B("source", { srcset: s.srcSetToUse }, null, 8, _e)
     ]),
-    t.aspectRatio && !(((c = (i = t.builderBlock) == null ? void 0 : i.children) == null ? void 0 : c.length) && t.fitContent) ? (l(), d("div", {
+    t.aspectRatio && !(((c = (i = t.builderBlock) == null ? void 0 : i.children) == null ? void 0 : c.length) && t.fitContent) ? (l(), u("div", {
       key: 0,
-      class: "builder-image-sizer div-bmtecjgqz8g",
-      style: k({
+      class: "builder-image-sizer div-256wrwn33ry",
+      style: _({
         paddingTop: t.aspectRatio * 100 + "%"
       })
-    }, null, 4)) : v("", !0),
-    ((u = (a = t.builderBlock) == null ? void 0 : a.children) == null ? void 0 : u.length) && t.fitContent ? S(e.$slots, "default", { key: 1 }, void 0, !0) : v("", !0),
-    !t.fitContent && e.children ? (l(), d("div", ve, [
-      S(e.$slots, "default", {}, void 0, !0)
-    ])) : v("", !0)
+    }, null, 4)) : b("", !0),
+    ((d = (a = t.builderBlock) == null ? void 0 : a.children) == null ? void 0 : d.length) && t.fitContent ? R(e.$slots, "default", { key: 1 }, void 0, !0) : b("", !0),
+    !t.fitContent && e.children ? (l(), u("div", we, [
+      R(e.$slots, "default", {}, void 0, !0)
+    ])) : b("", !0)
   ], 64);
 }
-const Ce = /* @__PURE__ */ g(fe, [["render", xe], ["__scopeId", "data-v-d9473cba"]]), _e = {
+const Te = /* @__PURE__ */ g(ke, [["render", Ie], ["__scopeId", "data-v-4d05ad57"]]), Re = {
   name: "builder-text",
   props: ["text"]
-}, ke = ["innerHTML"];
-function we(e, n, t, o, s, r) {
-  return l(), d("span", {
+}, Ee = ["innerHTML"];
+function je(e, n, t, o, r, s) {
+  return l(), u("span", {
     class: "builder-text",
     innerHTML: t.text
-  }, null, 8, ke);
+  }, null, 8, Ee);
 }
-const Se = /* @__PURE__ */ g(_e, [["render", we]]), Ie = {
+const Fe = /* @__PURE__ */ g(Re, [["render", je]]), Be = {
   name: "builder-video",
   props: [
     "autoPlay",
@@ -369,10 +511,10 @@ const Se = /* @__PURE__ */ g(_e, [["render", we]]), Ie = {
       };
     }
   }
-}, Te = ["src", "poster"];
-function Re(e, n, t, o, s, r) {
+}, Ae = ["src", "poster"];
+function $e(e, n, t, o, r, s) {
   var i;
-  return l(), d("video", _({
+  return l(), u("video", C({
     style: {
       width: "100%",
       height: "100%",
@@ -383,55 +525,25 @@ function Re(e, n, t, o, s, r) {
     },
     src: t.video || "no-src",
     poster: t.posterImage
-  }, r.spreadProps), null, 16, Te);
+  }, s.spreadProps), null, 16, Ae);
 }
-const Ee = /* @__PURE__ */ g(Ie, [["render", Re]]);
-function A(e, n = null, t = ".") {
-  return Object.keys(e).reduce((o, s) => {
-    const r = e[s], i = [n, s].filter(Boolean).join(t);
-    return [
-      typeof r == "object",
-      r !== null,
-      !(Array.isArray(r) && r.length === 0)
-    ].every(Boolean) ? { ...o, ...A(r, i, t) } : { ...o, [i]: r };
-  }, {});
-}
-const N = "builder.", Fe = "options.", je = (e) => {
-  const n = {};
-  return e.forEach((t, o) => {
-    n[o] = t;
-  }), n;
-}, Ae = (e) => {
-  if (!e)
-    return {};
-  const n = q(e), t = {};
-  return Object.keys(n).forEach((o) => {
-    if (o.startsWith(N)) {
-      const s = o.replace(N, "").replace(Fe, "");
-      t[s] = n[o];
-    }
-  }), t;
-}, Ue = () => {
-  if (!f())
-    return {};
-  const e = new URLSearchParams(window.location.search);
-  return Ae(e);
-}, q = (e) => e instanceof URLSearchParams ? je(e) : e;
+const Oe = /* @__PURE__ */ g(Be, [["render", $e]]);
 function Pe() {
-  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : null;
+  return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
 }
-async function D() {
+function Ue() {
   const e = Pe().fetch;
-  if (typeof e > "u" && typeof global < "u") {
-    const n = import("node-fetch").then((t) => t.default);
-    return n.default || n;
-  }
-  return e.default || e;
+  if (typeof e > "u")
+    throw console.warn(
+      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
+    ), new Error("Builder SDK could not find a global `fetch` function");
+  return e;
 }
-const Ve = (e) => {
+const J = Ue(), Ve = (e) => {
   const n = e.split(".");
   return n.length > 2 ? n.slice(1).join(".") : e;
-}, J = async ({
+}, X = async ({
   name: e,
   canTrack: n
 }) => {
@@ -441,23 +553,23 @@ const Ve = (e) => {
   } catch (o) {
     console.debug("[COOKIE] GET error: ", o);
   }
-}, Be = (e) => e.map(([n, t]) => t ? `${n}=${t}` : n).join("; "), Oe = [
+}, We = (e) => e.map(([n, t]) => t ? `${n}=${t}` : n).join("; "), Le = [
   ["secure", ""],
   ["SameSite", "None"]
-], $e = ({
+], Ne = ({
   name: e,
   value: n,
   expires: t
 }) => {
-  const s = (f() ? location.protocol === "https:" : !0) ? Oe : [[]], r = t ? [["expires", t.toUTCString()]] : [[]], i = [
+  const r = (f() ? location.protocol === "https:" : !0) ? Le : [[]], s = t ? [["expires", t.toUTCString()]] : [[]], i = [
     [e, n],
-    ...r,
+    ...s,
     ["path", "/"],
     ["domain", Ve(window.location.hostname)],
-    ...s
+    ...r
   ];
-  return Be(i);
-}, G = async ({
+  return We(i);
+}, Y = async ({
   name: e,
   value: n,
   expires: t,
@@ -466,30 +578,30 @@ const Ve = (e) => {
   try {
     if (!o)
       return;
-    const s = $e({ name: e, value: n, expires: t });
-    document.cookie = s;
-  } catch (s) {
-    console.warn("[COOKIE] SET error: ", s);
+    const r = Ne({ name: e, value: n, expires: t });
+    document.cookie = r;
+  } catch (r) {
+    console.warn("[COOKIE] SET error: ", r);
   }
-}, We = "builderio.variations", X = (e) => `${We}.${e}`, Le = ({
+}, Me = "builderio.variations", Q = (e) => `${Me}.${e}`, ze = ({
   contentId: e,
   canTrack: n
-}) => J({ name: X(e), canTrack: n }), Ne = ({
+}) => X({ name: Q(e), canTrack: n }), He = ({
   contentId: e,
   canTrack: n,
   value: t
-}) => G({ name: X(e), value: t, canTrack: n }), T = (e) => e != null, Me = (e) => T(e.id) && T(e.variations) && Object.keys(e.variations).length > 0, He = ({
+}) => Y({ name: Q(e), value: t, canTrack: n }), Ke = (e) => I(e.id) && I(e.variations) && Object.keys(e.variations).length > 0, De = ({
   id: e,
   variations: n
 }) => {
-  var s;
+  var r;
   let t = 0;
   const o = Math.random();
-  for (const r in n)
-    if (t += (s = n[r]) == null ? void 0 : s.testRatio, o < t)
-      return r;
+  for (const s in n)
+    if (t += (r = n[s]) == null ? void 0 : r.testRatio, o < t)
+      return s;
   return e;
-}, M = ({
+}, z = ({
   item: e,
   testGroupId: n
 }) => {
@@ -502,95 +614,123 @@ const Ve = (e) => {
     testVariationId: t.id,
     testVariationName: t.name || (t.id === e.id ? "Default" : "")
   };
-}, ze = async ({
+}, qe = async ({
   item: e,
   canTrack: n
 }) => {
-  const t = await Le({
+  const t = await ze({
     canTrack: n,
     contentId: e.id
-  }), o = t ? M({ item: e, testGroupId: t }) : void 0;
+  }), o = t ? z({ item: e, testGroupId: t }) : void 0;
   if (o)
     return o;
   {
-    const s = He({
+    const r = De({
       variations: e.variations,
       id: e.id
     });
-    return Ne({
+    return He({
       contentId: e.id,
-      value: s,
+      value: r,
       canTrack: n
-    }).catch((r) => {
-      console.error("could not store A/B test variation: ", r);
-    }), M({ item: e, testGroupId: s });
+    }).catch((s) => {
+      console.error("could not store A/B test variation: ", s);
+    }), z({ item: e, testGroupId: r });
   }
-}, Ke = async ({
+}, Ge = async ({
   item: e,
   canTrack: n
 }) => {
-  if (!Me(e))
+  if (!Ke(e))
     return;
-  const t = await ze({ item: e, canTrack: n });
+  const t = await qe({ item: e, canTrack: n });
   Object.assign(e, t);
 };
-async function Y(e) {
-  return (await De({ ...e, limit: 1 })).results[0] || null;
+function O(e, n = null, t = ".") {
+  return Object.keys(e).reduce((o, r) => {
+    const s = e[r], i = [n, r].filter(Boolean).join(t);
+    return [
+      typeof s == "object",
+      s !== null,
+      !(Array.isArray(s) && s.length === 0)
+    ].every(Boolean) ? { ...o, ...O(s, i, t) } : { ...o, [i]: s };
+  }, {});
 }
-const qe = (e) => {
+const H = "builder.", Je = "options.", Xe = (e) => {
+  const n = {};
+  return e.forEach((t, o) => {
+    n[o] = t;
+  }), n;
+}, Ye = (e) => {
+  if (!e)
+    return {};
+  const n = Z(e), t = {};
+  return Object.keys(n).forEach((o) => {
+    if (o.startsWith(H)) {
+      const r = o.replace(H, "").replace(Je, "");
+      t[r] = n[o];
+    }
+  }), t;
+}, Qe = () => {
+  if (!f())
+    return {};
+  const e = new URLSearchParams(window.location.search);
+  return Ye(e);
+}, Z = (e) => e instanceof URLSearchParams ? Xe(e) : e, Ze = (e) => {
   const {
     limit: n = 30,
     userAttributes: t,
     query: o,
-    noTraverse: s = !1,
-    model: r,
+    noTraverse: r = !1,
+    model: s,
     apiKey: i,
     includeRefs: c = !0,
     locale: a
   } = e;
   if (!i)
     throw new Error("Missing API key");
-  const u = new URL(
-    `https://cdn.builder.io/api/v2/content/${r}?apiKey=${i}&limit=${n}&noTraverse=${s}&includeRefs=${c}${a ? `&locale=${a}` : ""}`
+  const d = new URL(
+    `https://cdn.builder.io/api/v2/content/${s}?apiKey=${i}&limit=${n}&noTraverse=${r}&includeRefs=${c}${a ? `&locale=${a}` : ""}`
   ), m = {
-    ...Ue(),
-    ...q(e.options || {})
-  }, p = A(m);
+    ...Qe(),
+    ...Z(e.options || {})
+  }, p = O(m);
   for (const h in p)
-    u.searchParams.set(h, String(p[h]));
-  if (t && u.searchParams.set("userAttributes", JSON.stringify(t)), o) {
-    const h = A({ query: o });
-    for (const y in h)
-      u.searchParams.set(y, JSON.stringify(h[y]));
+    d.searchParams.set(h, String(p[h]));
+  if (t && d.searchParams.set("userAttributes", JSON.stringify(t)), o) {
+    const h = O({ query: o });
+    for (const v in h)
+      d.searchParams.set(v, JSON.stringify(h[v]));
   }
-  return u;
+  return d;
 };
-async function De(e) {
-  const n = qe(e), o = await (await D())(n.href).then(
-    (r) => r.json()
-  ), s = e.canTrack !== !1;
-  if (s && Array.isArray(o.results))
-    for (const r of o.results)
-      await Ke({ item: r, canTrack: s });
+async function ee(e) {
+  return (await et({ ...e, limit: 1 })).results[0] || null;
+}
+async function et(e) {
+  const n = Ze(e), o = await (await J(n.href)).json(), r = e.canTrack !== !1;
+  if (r && Array.isArray(o.results))
+    for (const s of o.results)
+      await Ge({ item: s, canTrack: r });
   return o;
 }
-const Je = () => Promise.resolve().then(() => on).then((e) => e.default).catch((e) => {
+const tt = () => Promise.resolve().then(() => un).then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContent at ../../components/render-content/render-content.vue",
     e
   ), e;
-}), Ge = {
+}), nt = {
   name: "builder-symbol",
-  components: { RenderContent: x(Je) },
-  props: ["symbol", "attributes"],
-  data: () => ({ className: "builder-symbol", fetchedContent: null }),
+  components: { RenderContent: x(tt) },
+  props: ["attributes", "symbol", "dynamic"],
+  data: () => ({ fetchedContent: null }),
   inject: {
     builderContext: "BuilderContext"
   },
   watch: {
     onUpdateHook0() {
       const e = this.symbol;
-      e && !e.content && !this.fetchedContent && e.model && Y({
+      e && !e.content && !this.fetchedContent && e.model && ee({
         model: e.model,
         apiKey: this.builderContext.apiKey,
         query: {
@@ -602,6 +742,15 @@ const Je = () => Promise.resolve().then(() => on).then((e) => e.default).catch((
     }
   },
   computed: {
+    className() {
+      var e, n;
+      return [
+        ...Object.keys(this.attributes.class),
+        "builder-symbol",
+        (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
+        ((n = this.symbol) == null ? void 0 : n.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" ");
+    },
     contentToUse() {
       var e;
       return ((e = this.symbol) == null ? void 0 : e.content) || this.fetchedContent;
@@ -624,69 +773,78 @@ const Je = () => Promise.resolve().then(() => on).then((e) => e.default).catch((
       return n;
     }
   }
-}, Xe = ["dataSet"];
-function Ye(e, n, t, o, s, r) {
-  var c, a, u, m, p;
-  const i = C("render-content");
-  return l(), d("div", _({
+}, ot = ["dataSet"];
+function st(e, n, t, o, r, s) {
+  var c, a, d, m, p;
+  const i = k("render-content");
+  return l(), u("div", C({
     dataSet: {
-      class: e.className
+      class: s.className
     },
-    class: r._classStringToObject(e.className)
+    class: s._classStringToObject(s.className)
   }, t.attributes), [
-    K(i, {
-      apiKey: r.builderContext.apiKey,
-      context: r.builderContext.context,
-      customComponents: Object.values(r.builderContext.registeredComponents),
+    q(i, {
+      apiKey: s.builderContext.apiKey,
+      context: s.builderContext.context,
+      customComponents: Object.values(s.builderContext.registeredComponents),
       data: {
         ...(c = t.symbol) == null ? void 0 : c.data,
-        ...r.builderContext.state,
-        ...(m = (u = (a = t.symbol) == null ? void 0 : a.content) == null ? void 0 : u.data) == null ? void 0 : m.state
+        ...s.builderContext.state,
+        ...(m = (d = (a = t.symbol) == null ? void 0 : a.content) == null ? void 0 : d.data) == null ? void 0 : m.state
       },
       model: (p = t.symbol) == null ? void 0 : p.model,
-      content: r.contentToUse
+      content: s.contentToUse
     }, null, 8, ["apiKey", "context", "customComponents", "data", "model", "content"])
-  ], 16, Xe);
+  ], 16, ot);
 }
-const Qe = /* @__PURE__ */ g(Ge, [["render", Ye]]), Ze = {
+const rt = /* @__PURE__ */ g(nt, [["render", st]]), it = {
   name: "builder-button",
   props: ["attributes", "text", "link", "openLinkInNewTab"]
 };
-const et = ["href", "target"];
-function tt(e, n, t, o, s, r) {
-  return t.link ? (l(), d("a", _({
+const at = ["href", "target"];
+function ct(e, n, t, o, r, s) {
+  return t.link ? (l(), u("a", C({
     key: 0,
     role: "button",
     href: t.link,
     target: t.openLinkInNewTab ? "_blank" : void 0
-  }, t.attributes), O(t.text), 17, et)) : (l(), d("button", _({
+  }, t.attributes), W(t.text), 17, at)) : (l(), u("button", C({
     key: 1,
-    class: "button-2btisl9m7v3"
-  }, t.attributes), O(t.text), 17));
+    class: "button-361b1o6wv2k"
+  }, t.attributes), W(t.text), 17));
 }
-const nt = /* @__PURE__ */ g(Ze, [["render", tt], ["__scopeId", "data-v-db085cd5"]]), ot = {
+const lt = /* @__PURE__ */ g(it, [["render", ct], ["__scopeId", "data-v-00528171"]]), dt = {
   name: "builder-section-component",
   props: ["attributes", "maxWidth"]
 };
-function st(e, n, t, o, s, r) {
-  return l(), d("section", _({
-    style: t.maxWidth && typeof t.maxWidth == "number" ? {
-      maxWidth: t.maxWidth
-    } : void 0
+function ut(e, n, t, o, r, s) {
+  return l(), u("section", C({
+    style: {
+      width: "100%",
+      alignSelf: "stretch",
+      flexGrow: "1",
+      boxSizing: "border-box",
+      maxWidth: `${t.maxWidth && typeof t.maxWidth == "number" ? t.maxWidth : 1200}px`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
   }, t.attributes), [
-    S(e.$slots, "default")
+    R(e.$slots, "default")
   ], 16);
 }
-const rt = /* @__PURE__ */ g(ot, [["render", st]]), it = {
+const mt = /* @__PURE__ */ g(dt, [["render", ut]]), pt = {
   name: "builder-fragment-component",
   props: []
 };
-function at(e, n, t, o, s, r) {
-  return l(), d("span", null, [
-    S(e.$slots, "default")
+function ht(e, n, t, o, r, s) {
+  return l(), u("span", null, [
+    R(e.$slots, "default")
   ]);
 }
-const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
+const ft = /* @__PURE__ */ g(pt, [["render", ht]]), gt = {
   name: "Core:Button",
   builtIn: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -723,10 +881,10 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
   ],
   static: !0,
   noWrap: !0
-}, R = (e) => {
+}, F = (e) => {
   const n = e.toString().trim();
   return `return (${!n.startsWith("function") && !n.startsWith("(") ? "function " : ""}${n}).apply(this, arguments)`;
-}, dt = {
+}, bt = {
   name: "Columns",
   builtIn: !0,
   inputs: [
@@ -914,7 +1072,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
           ]
         }
       ],
-      onChange: R((e) => {
+      onChange: F((e) => {
         function n() {
           t.forEach((o) => {
             o.delete("width");
@@ -922,9 +1080,9 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
         }
         const t = e.get("columns");
         Array.isArray(t) && !!t.find(
-          (s) => s.get("width")
+          (r) => r.get("width")
         ) && (!!t.find(
-          (r) => !r.get("width")
+          (s) => !s.get("width")
         ) || t.reduce((c, a) => c + a.get("width"), 0) !== 100) && n();
       })
     },
@@ -951,14 +1109,14 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       advanced: !0
     }
   ]
-}, ut = {
+}, yt = {
   name: "Fragment",
   static: !0,
   hidden: !0,
   builtIn: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, mt = {
+}, vt = {
   name: "Image",
   static: !0,
   builtIn: !0,
@@ -978,31 +1136,31 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: !0,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: R((e) => {
+      onChange: F((e) => {
         e.delete("srcset"), e.delete("noWebp");
         function t(i, c = 6e4) {
-          return new Promise((a, u) => {
+          return new Promise((a, d) => {
             const m = document.createElement("img");
             let p = !1;
             m.onload = () => {
               p = !0, a(m);
             }, m.addEventListener("error", (h) => {
-              console.warn("Image load failed", h.error), u(h.error);
+              console.warn("Image load failed", h.error), d(h.error);
             }), m.src = i, setTimeout(() => {
-              p || u(new Error("Image load timed out"));
+              p || d(new Error("Image load timed out"));
             }, c);
           });
         }
         function o(i) {
           return Math.round(i * 1e3) / 1e3;
         }
-        const s = e.get("image"), r = e.get("aspectRatio");
-        if (fetch(s).then((i) => i.blob()).then((i) => {
+        const r = e.get("image"), s = e.get("aspectRatio");
+        if (fetch(r).then((i) => i.blob()).then((i) => {
           i.type.includes("svg") && e.set("noWebp", !0);
-        }), s && (!r || r === 0.7041))
-          return t(s).then((i) => {
+        }), r && (!s || s === 0.7041))
+          return t(r).then((i) => {
             const c = e.get("aspectRatio");
-            e.get("image") === s && (!c || c === 0.7041) && i.width && i.height && (e.set("aspectRatio", o(i.height / i.width)), e.set("height", i.height), e.set("width", i.width));
+            e.get("image") === r && (!c || c === 0.7041) && i.width && i.height && (e.set("aspectRatio", o(i.height / i.width)), e.set("height", i.height), e.set("width", i.width));
           });
       })
     },
@@ -1084,7 +1242,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       defaultValue: 0.7041
     }
   ]
-}, pt = {
+}, xt = {
   name: "Core:Section",
   static: !0,
   builtIn: !0,
@@ -1129,7 +1287,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       }
     }
   ]
-}, ht = {
+}, kt = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -1168,7 +1326,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       type: "boolean"
     }
   ]
-}, ft = {
+}, Ct = {
   name: "Text",
   static: !0,
   builtIn: !0,
@@ -1188,7 +1346,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
     height: "auto",
     textAlign: "center"
   }
-}, gt = {
+}, St = {
   name: "Video",
   canHaveChildren: !0,
   builtIn: !0,
@@ -1290,7 +1448,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       advanced: !0
     }
   ]
-}, bt = {
+}, _t = {
   name: "Embed",
   static: !0,
   builtIn: !0,
@@ -1301,7 +1459,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       required: !0,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: R((e) => {
+      onChange: F((e) => {
         const n = e.get("url");
         if (n)
           return e.set("content", "Loading..."), fetch(
@@ -1324,11 +1482,11 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       hideFromUI: !0
     }
   ]
-}, yt = [
+}, wt = [
   "text/javascript",
   "application/javascript",
   "application/ecmascript"
-], vt = (e) => yt.includes(e.type), xt = {
+], It = (e) => wt.includes(e.type), Tt = {
   name: "builder-embed",
   props: ["content"],
   data: () => ({ scriptsInserted: [], scriptsRun: [], ranInitFn: !1 }),
@@ -1356,7 +1514,7 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
           this.scriptsInserted.push(t.src);
           const o = document.createElement("script");
           o.async = !0, o.src = t.src, document.head.appendChild(o);
-        } else if (vt(t) && !this.scriptsRun.includes(t.innerText))
+        } else if (It(t) && !this.scriptsRun.includes(t.innerText))
           try {
             this.scriptsRun.push(t.innerText), new Function(t.innerText)();
           } catch (o) {
@@ -1365,22 +1523,22 @@ const ct = /* @__PURE__ */ g(it, [["render", at]]), lt = {
       }
     }
   }
-}, Ct = ["innerHTML"];
-function _t(e, n, t, o, s, r) {
-  return l(), d("div", {
+}, Rt = ["innerHTML"];
+function Et(e, n, t, o, r, s) {
+  return l(), u("div", {
     class: "builder-embed",
     ref: "elem",
     innerHTML: t.content
-  }, null, 8, Ct);
+  }, null, 8, Rt);
 }
-const kt = /* @__PURE__ */ g(xt, [["render", _t]]);
-function wt() {
+const jt = /* @__PURE__ */ g(Tt, [["render", Et]]);
+function Ft() {
   return f() && window.self !== window.top;
 }
-function b() {
-  return wt() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+function y() {
+  return Ft() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
-const St = {
+const Bt = {
   name: "builder-img-component",
   props: [
     "backgroundSize",
@@ -1390,10 +1548,10 @@ const St = {
     "image",
     "attributes"
   ],
-  data: () => ({ isEditing: b })
-}, It = ["alt", "src"];
-function Tt(e, n, t, o, s, r) {
-  return l(), d("img", _({
+  data: () => ({ isEditing: y })
+}, At = ["alt", "src"];
+function $t(e, n, t, o, r, s) {
+  return l(), u("img", C({
     style: {
       objectFit: t.backgroundSize || "cover",
       objectPosition: t.backgroundPosition || "center"
@@ -1401,9 +1559,9 @@ function Tt(e, n, t, o, s, r) {
     key: e.isEditing() && t.imgSrc || "default-key",
     alt: t.altText,
     src: t.imgSrc || t.image
-  }, t.attributes), null, 16, It);
+  }, t.attributes), null, 16, At);
 }
-const Rt = /* @__PURE__ */ g(St, [["render", Tt]]), Et = {
+const Ot = /* @__PURE__ */ g(Bt, [["render", $t]]), Pt = {
   name: "Raw:Img",
   hideFromInsertMenu: !0,
   builtIn: !0,
@@ -1419,7 +1577,7 @@ const Rt = /* @__PURE__ */ g(St, [["render", Tt]]), Et = {
   ],
   noWrap: !0,
   static: !0
-}, Ft = {
+}, Ut = {
   name: "builder-custom-code",
   props: ["replaceNodes", "code"],
   data: () => ({ scriptsInserted: [], scriptsRun: [] }),
@@ -1464,19 +1622,19 @@ const Rt = /* @__PURE__ */ g(St, [["render", Tt]]), Et = {
       return n;
     }
   }
-}, jt = ["innerHTML"];
-function At(e, n, t, o, s, r) {
-  return l(), d("div", {
+}, Vt = ["innerHTML"];
+function Wt(e, n, t, o, r, s) {
+  return l(), u("div", {
     ref: "elem",
-    class: P(
-      r._classStringToObject(
+    class: E(
+      s._classStringToObject(
         "builder-custom-code" + (t.replaceNodes ? " replace-nodes" : "")
       )
     ),
     innerHTML: t.code
-  }, null, 10, jt);
+  }, null, 10, Vt);
 }
-const Ut = /* @__PURE__ */ g(Ft, [["render", At]]), Pt = {
+const Lt = /* @__PURE__ */ g(Ut, [["render", Wt]]), Nt = {
   name: "Custom Code",
   static: !0,
   builtIn: !0,
@@ -1503,35 +1661,35 @@ const Ut = /* @__PURE__ */ g(Ft, [["render", At]]), Pt = {
       advanced: !0
     }
   ]
-}, Vt = () => [
-  { component: me, ...dt },
-  { component: Ce, ...mt },
-  { component: Rt, ...Et },
-  { component: Se, ...ft },
-  { component: Ee, ...gt },
-  { component: Qe, ...ht },
-  { component: nt, ...lt },
-  { component: rt, ...pt },
-  { component: ct, ...ut },
-  { component: kt, ...bt },
-  { component: Ut, ...Pt }
+}, Mt = () => [
+  { component: ye, ...bt },
+  { component: Te, ...vt },
+  { component: Ot, ...Pt },
+  { component: Fe, ...Ct },
+  { component: Oe, ...St },
+  { component: rt, ...kt },
+  { component: lt, ...gt },
+  { component: mt, ...xt },
+  { component: ft, ...yt },
+  { component: jt, ..._t },
+  { component: Lt, ...Nt }
 ];
-function H({
+function K({
   code: e,
   context: n,
   state: t,
   event: o,
-  isExpression: s = !0
+  isExpression: r = !0
 }) {
   if (e === "") {
     console.warn("Skipping evaluation of empty code block.");
     return;
   }
-  const r = {
-    isEditing: b(),
+  const s = {
+    isEditing: y(),
     isBrowser: f(),
     isServer: !f()
-  }, c = s && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e;
+  }, c = r && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e;
   try {
     return new Function(
       "builder",
@@ -1540,7 +1698,7 @@ function H({
       "context",
       "event",
       c
-    )(r, r, t, n, o);
+    )(s, s, t, n, o);
   } catch (a) {
     console.warn(
       `Builder custom code error: 
@@ -1553,139 +1711,139 @@ function H({
     );
   }
 }
-function Bt() {
-  return !f() || b() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+function zt() {
+  return !f() || y() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-const Q = (e) => JSON.parse(JSON.stringify(e)), Z = [];
-function mn(e, n) {
-  return Z.push({ component: e, ...n }), console.warn(
+const te = [];
+function kn(e, n) {
+  return te.push({ component: e, ...n }), console.warn(
     "registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK."
   ), e;
 }
-const Ot = ({
+const Ht = ({
   component: e,
   ...n
 }) => ({
   type: "builder.registerComponent",
-  data: Wt(n)
-}), $t = (e) => typeof e == "function" ? R(e) : Q(e), Wt = ({
+  data: Dt(n)
+}), Kt = (e) => typeof e == "function" ? F(e) : U(e), Dt = ({
   inputs: e,
   ...n
 }) => ({
-  ...Q(n),
+  ...U(n),
   inputs: e == null ? void 0 : e.map(
     (t) => Object.entries(t).reduce(
-      (o, [s, r]) => ({
+      (o, [r, s]) => ({
         ...o,
-        [s]: $t(r)
+        [r]: Kt(s)
       }),
       {}
     )
   )
 });
-function Lt() {
+function qt() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
     const n = Math.random() * 16 | 0;
     return (e == "x" ? n : n & 3 | 8).toString(16);
   });
 }
-function ee() {
-  return Lt().replace(/-/g, "");
+function ne() {
+  return qt().replace(/-/g, "");
 }
-const te = "builderSessionId", Nt = async ({ canTrack: e }) => {
+const oe = "builderSessionId", Gt = async ({ canTrack: e }) => {
   if (!e)
     return;
-  const n = await J({
-    name: te,
+  const n = await X({
+    name: oe,
     canTrack: e
   });
-  if (T(n))
+  if (I(n))
     return n;
   {
-    const t = Mt();
-    Ht({ id: t, canTrack: e });
+    const t = Jt();
+    Xt({ id: t, canTrack: e });
   }
-}, Mt = () => ee(), Ht = ({
+}, Jt = () => ne(), Xt = ({
   id: e,
   canTrack: n
-}) => G({ name: te, value: e, canTrack: n }), ne = () => f() && typeof localStorage < "u" ? localStorage : void 0, zt = ({
+}) => Y({ name: oe, value: e, canTrack: n }), se = () => f() && typeof localStorage < "u" ? localStorage : void 0, Yt = ({
   key: e,
   canTrack: n
 }) => {
   var t;
   try {
-    return n ? (t = ne()) == null ? void 0 : t.getItem(e) : void 0;
+    return n ? (t = se()) == null ? void 0 : t.getItem(e) : void 0;
   } catch (o) {
     console.debug("[LocalStorage] GET error: ", o);
   }
-}, Kt = ({
+}, Qt = ({
   key: e,
   canTrack: n,
   value: t
 }) => {
   var o;
   try {
-    n && ((o = ne()) == null || o.setItem(e, t));
-  } catch (s) {
-    console.debug("[LocalStorage] SET error: ", s);
+    n && ((o = se()) == null || o.setItem(e, t));
+  } catch (r) {
+    console.debug("[LocalStorage] SET error: ", r);
   }
-}, oe = "builderVisitorId", qt = ({ canTrack: e }) => {
+}, re = "builderVisitorId", Zt = ({ canTrack: e }) => {
   if (!e)
     return;
-  const n = zt({
-    key: oe,
+  const n = Yt({
+    key: re,
     canTrack: e
   });
-  if (T(n))
+  if (I(n))
     return n;
   {
-    const t = Dt();
-    Jt({ id: t, canTrack: e });
+    const t = en();
+    tn({ id: t, canTrack: e });
   }
-}, Dt = () => ee(), Jt = ({
+}, en = () => ne(), tn = ({
   id: e,
   canTrack: n
-}) => Kt({
-  key: oe,
+}) => Qt({
+  key: re,
   value: e,
   canTrack: n
-}), Gt = async ({
+}), nn = async ({
   canTrack: e
 }) => {
   if (!e)
     return { visitorId: void 0, sessionId: void 0 };
-  const n = await Nt({ canTrack: e }), t = qt({ canTrack: e });
+  const n = await Gt({ canTrack: e }), t = Zt({ canTrack: e });
   return {
     sessionId: n,
     visitorId: t
   };
-}, Xt = async ({
+}, on = async ({
   type: e,
   canTrack: n,
   apiKey: t,
   metadata: o,
-  ...s
+  ...r
 }) => ({
   type: e,
   data: {
-    ...s,
+    ...r,
     metadata: JSON.stringify(o),
-    ...await Gt({ canTrack: n }),
+    ...await nn({ canTrack: n }),
     ownerId: t
   }
 });
-async function U(e) {
+async function P(e) {
   if (!e.apiKey) {
     console.error(
       "[Builder.io]: Missing API key for track call. Please provide your API key."
     );
     return;
   }
-  if (!!e.canTrack && !b() && !!(f() || V === "reactNative"))
+  if (!!e.canTrack && !y() && !!(f() || j === "reactNative"))
     return fetch("https://builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
-        events: [await Xt(e)]
+        events: [await on(e)]
       }),
       headers: {
         "content-type": "application/json"
@@ -1695,21 +1853,21 @@ async function U(e) {
       console.error("Failed to track: ", n);
     });
 }
-const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then(() => se).then((e) => e.default).catch((e) => {
+const Cn = (e) => P({ ...e, canTrack: !0 }), sn = () => Promise.resolve().then(() => ie).then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlocks at ../render-blocks.vue",
     e
   ), e;
-}), Qt = () => import("./render-styles.ce553bd8.js").then((e) => e.default).catch((e) => {
+}), rn = () => import("./render-styles.f5323f3c.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderContentStyles at ./components/render-styles.vue",
     e
   ), e;
-}), Zt = {
+}), an = {
   name: "render-content",
   components: {
-    RenderContentStyles: x(Qt),
-    RenderBlocks: x(Yt)
+    RenderContentStyles: x(rn),
+    RenderBlocks: x(sn)
   },
   props: [
     "content",
@@ -1726,6 +1884,7 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
     forceReRenderCount: 0,
     overrideContent: null,
     update: 0,
+    useBreakpoints: null,
     overrideState: {}
   }),
   provide() {
@@ -1755,7 +1914,7 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => 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."
     ), f()) {
-      if (b() && (this.forceReRenderCount = this.forceReRenderCount + 1, ae(), ce({
+      if (y() && (this.forceReRenderCount = this.forceReRenderCount + 1, le(), de({
         ...this.locale ? {
           locale: this.locale
         } : {},
@@ -1764,16 +1923,16 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
         } : {}
       }), Object.values(this.allRegisteredComponents).forEach(
         (t) => {
-          var s;
-          const o = Ot(t);
-          (s = window.parent) == null || s.postMessage(o, "*");
+          var r;
+          const o = Ht(t);
+          (r = window.parent) == null || r.postMessage(o, "*");
         }
       ), window.addEventListener("message", this.processMessage), window.addEventListener(
         "builder:component:stateChangeListenerActivated",
         this.emitStateUpdate
       )), this.useContent) {
         const t = (e = this.useContent) == null ? void 0 : e.testVariationId, o = (n = this.useContent) == null ? void 0 : n.id;
-        U({
+        P({
           type: "impression",
           canTrack: this.canTrackToUse,
           contentId: o,
@@ -1781,15 +1940,15 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
           variationId: t !== o ? t : void 0
         });
       }
-      if (Bt()) {
+      if (zt()) {
         const t = new URL(location.href).searchParams;
         if (this.model && t.get("builder.preview") === this.model) {
           const o = t.get("apiKey") || t.get("builder.space");
-          o && Y({
+          o && ee({
             model: this.model,
             apiKey: o
-          }).then((s) => {
-            s && (this.overrideContent = s);
+          }).then((r) => {
+            r && (this.overrideContent = r);
           });
         }
       }
@@ -1815,7 +1974,7 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
   },
   computed: {
     useContent() {
-      var n, t;
+      var n, t, o, r, s, i, c, a;
       return !this.content && !this.overrideContent ? void 0 : {
         ...this.content,
         ...this.overrideContent,
@@ -1823,6 +1982,11 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
           ...(n = this.content) == null ? void 0 : n.data,
           ...this.data,
           ...(t = this.overrideContent) == null ? void 0 : t.data
+        },
+        meta: {
+          ...(o = this.content) == null ? void 0 : o.meta,
+          ...(r = this.overrideContent) == null ? void 0 : r.meta,
+          breakpoints: this.useBreakpoints || ((i = (s = this.overrideContent) == null ? void 0 : s.meta) == null ? void 0 : i.breakpoints) || ((a = (c = this.content) == null ? void 0 : c.meta) == null ? void 0 : a.breakpoints)
         }
       };
     },
@@ -1845,8 +2009,8 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
     },
     allRegisteredComponents() {
       return [
-        ...Vt(),
-        ...Z,
+        ...Mt(),
+        ...te,
         ...this.customComponents || []
       ].reduce(
         (t, o) => ({
@@ -1860,9 +2024,9 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
       return {};
     },
     shouldRenderContentStyles() {
-      var e, n, t, o, s;
+      var e, n, t, o, r;
       return Boolean(
-        (((n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.cssCode) || ((s = (o = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : o.customFonts) == null ? void 0 : s.length)) && V !== "reactNative"
+        (((n = (e = this.useContent) == null ? void 0 : e.data) == null ? void 0 : n.cssCode) || ((r = (o = (t = this.useContent) == null ? void 0 : t.data) == null ? void 0 : o.customFonts) == null ? void 0 : r.length)) && j !== "reactNative"
       );
     },
     onUpdateHook0() {
@@ -1886,12 +2050,20 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
   },
   methods: {
     processMessage(e) {
+      var t;
       const { data: n } = e;
       if (n)
         switch (n.type) {
+          case "builder.configureSdk": {
+            const o = n.data, { breakpoints: r, contentId: s } = o;
+            if (!s || s !== ((t = this.useContent) == null ? void 0 : t.id))
+              return;
+            this.useBreakpoints = r, this.forceReRenderCount = this.forceReRenderCount + 1;
+            break;
+          }
           case "builder.contentUpdate": {
-            const t = n.data, o = t.key || t.alias || t.entry || t.modelName, s = t.data;
-            o === this.model && (this.overrideContent = s, this.forceReRenderCount = this.forceReRenderCount + 1);
+            const o = n.data, r = o.key || o.alias || o.entry || o.modelName, s = o.data;
+            r === this.model && (this.overrideContent = s, this.forceReRenderCount = this.forceReRenderCount + 1);
             break;
           }
         }
@@ -1899,7 +2071,7 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
     evaluateJsCode() {
       var n, t;
       const e = (t = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : t.jsCode;
-      e && H({
+      e && K({
         code: e,
         context: this.contextContext,
         state: this.contentState
@@ -1908,20 +2080,20 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
     onClick(e) {
       var n, t;
       if (this.useContent) {
-        const o = (n = this.useContent) == null ? void 0 : n.testVariationId, s = (t = this.useContent) == null ? void 0 : t.id;
-        U({
+        const o = (n = this.useContent) == null ? void 0 : n.testVariationId, r = (t = this.useContent) == null ? void 0 : t.id;
+        P({
           type: "click",
           canTrack: this.canTrackToUse,
-          contentId: s,
+          contentId: r,
           apiKey: this.apiKey,
-          variationId: o !== s ? o : void 0
+          variationId: o !== r ? o : void 0
         });
       }
     },
     evalExpression(e) {
       return e.replace(
         /{{([^}]+)}}/g,
-        (n, t) => H({
+        (n, t) => K({
           code: t,
           context: this.contextContext,
           state: this.contentState
@@ -1929,7 +2101,7 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
       );
     },
     handleRequest({ url: e, key: n }) {
-      D().then((t) => t(e)).then((t) => t.json()).then((t) => {
+      J(e).then((t) => t.json()).then((t) => {
         const o = {
           ...this.overrideState,
           [n]: t
@@ -1942,18 +2114,18 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
     runHttpRequests() {
       var n, t, o;
       const e = (o = (t = (n = this.useContent) == null ? void 0 : n.data) == null ? void 0 : t.httpRequests) != null ? o : {};
-      Object.entries(e).forEach(([s, r]) => {
-        if (r && (!this.httpReqsData[s] || b())) {
-          const i = this.evalExpression(r);
+      Object.entries(e).forEach(([r, s]) => {
+        if (s && (!this.httpReqsData[r] || y())) {
+          const i = this.evalExpression(s);
           this.handleRequest({
             url: i,
-            key: s
+            key: r
           });
         }
       });
     },
     emitStateUpdate() {
-      b() && window.dispatchEvent(
+      y() && window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
             state: this.contentState,
@@ -1965,46 +2137,46 @@ const pn = (e) => U({ ...e, canTrack: !0 }), Yt = () => Promise.resolve().then((
       );
     }
   }
-}, en = ["builder-content-id", "builder-model"];
-function tn(e, n, t, o, s, r) {
-  var a, u, m, p, h, y, B;
-  const i = C("render-content-styles"), c = C("render-blocks");
-  return r.useContent ? (l(), d("div", {
+}, cn = ["builder-content-id", "builder-model"];
+function ln(e, n, t, o, r, s) {
+  var a, d, m, p, h, v, V;
+  const i = k("render-content-styles"), c = k("render-blocks");
+  return s.useContent ? (l(), u("div", {
     key: 0,
     ref: "elementRef",
-    onClick: n[0] || (n[0] = (re) => r.onClick(re)),
-    "builder-content-id": (a = r.useContent) == null ? void 0 : a.id,
+    onClick: n[0] || (n[0] = (ae) => s.onClick(ae)),
+    "builder-content-id": (a = s.useContent) == null ? void 0 : a.id,
     "builder-model": t.model
   }, [
-    r.shouldRenderContentStyles ? (l(), I(i, {
+    s.shouldRenderContentStyles ? (l(), w(i, {
       key: 0,
-      cssCode: (m = (u = r.useContent) == null ? void 0 : u.data) == null ? void 0 : m.cssCode,
-      customFonts: (h = (p = r.useContent) == null ? void 0 : p.data) == null ? void 0 : h.customFonts
-    }, null, 8, ["cssCode", "customFonts"])) : v("", !0),
-    (l(), I(c, {
-      blocks: (B = (y = r.useContent) == null ? void 0 : y.data) == null ? void 0 : B.blocks,
+      cssCode: (m = (d = s.useContent) == null ? void 0 : d.data) == null ? void 0 : m.cssCode,
+      customFonts: (h = (p = s.useContent) == null ? void 0 : p.data) == null ? void 0 : h.customFonts
+    }, null, 8, ["cssCode", "customFonts"])) : b("", !0),
+    (l(), w(c, {
+      blocks: (V = (v = s.useContent) == null ? void 0 : v.data) == null ? void 0 : V.blocks,
       key: e.forceReRenderCount
     }, null, 8, ["blocks"]))
-  ], 8, en)) : v("", !0);
+  ], 8, cn)) : b("", !0);
 }
-const nn = /* @__PURE__ */ g(Zt, [["render", tn]]), on = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const dn = /* @__PURE__ */ g(an, [["render", ln]]), un = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: nn
-}, Symbol.toStringTag, { value: "Module" })), sn = () => import("./block-styles.bfb6bf01.js").then((e) => e.default).catch((e) => {
+  default: dn
+}, Symbol.toStringTag, { value: "Module" })), mn = () => import("./block-styles.8b54c0ff.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component BlockStyles at ./render-block/block-styles.vue",
     e
   ), e;
-}), rn = () => import("./render-block.ff327bfe.js").then((e) => e.default).catch((e) => {
+}), pn = () => import("./render-block.ac15669c.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RenderBlock at ./render-block/render-block.vue",
     e
   ), e;
-}), an = {
+}), hn = {
   name: "render-blocks",
   components: {
-    RenderBlock: x(rn),
-    BlockStyles: x(sn)
+    RenderBlock: x(pn),
+    BlockStyles: x(mn)
   },
   props: ["blocks", "parent", "path", "styleProp"],
   inject: {
@@ -2019,7 +2191,7 @@ const nn = /* @__PURE__ */ g(Zt, [["render", tn]]), on = /* @__PURE__ */ Object.
   methods: {
     onClick() {
       var e, n;
-      b() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
+      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
         {
           type: "builder.clickEmptyBlocks",
           data: {
@@ -2032,7 +2204,7 @@ const nn = /* @__PURE__ */ g(Zt, [["render", tn]]), on = /* @__PURE__ */ Object.
     },
     onMouseEnter() {
       var e, n;
-      b() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
+      y() && !((e = this.blocks) != null && e.length) && ((n = window.parent) == null || n.postMessage(
         {
           type: "builder.hoverEmptyBlocks",
           data: {
@@ -2054,74 +2226,77 @@ const nn = /* @__PURE__ */ g(Zt, [["render", tn]]), on = /* @__PURE__ */ Object.
     }
   }
 };
-const cn = ["builder-path", "builder-parent-id", "dataSet"];
-function ln(e, n, t, o, s, r) {
-  const i = C("render-block"), c = C("block-styles");
-  return l(), d("div", {
-    class: P(r._classStringToObject(r.className + " div-7fq9d0i380")),
+const fn = ["builder-path", "builder-parent-id", "dataSet"];
+function gn(e, n, t, o, r, s) {
+  const i = k("render-block"), c = k("block-styles");
+  return l(), u("div", {
+    class: E(s._classStringToObject(s.className + " div-4o9pb21oca6")),
     "builder-path": t.path,
     "builder-parent-id": t.parent,
     dataSet: {
-      class: r.className
+      class: s.className
     },
-    style: k(t.styleProp),
-    onClick: n[0] || (n[0] = (a) => r.onClick()),
-    onMouseenter: n[1] || (n[1] = (a) => r.onMouseEnter())
+    style: _(t.styleProp),
+    onClick: n[0] || (n[0] = (a) => s.onClick()),
+    onMouseenter: n[1] || (n[1] = (a) => s.onMouseEnter())
   }, [
-    t.blocks ? (l(!0), d(w, { key: 0 }, j(t.blocks, (a, u) => (l(), I(i, {
+    t.blocks ? (l(!0), u(T, { key: 0 }, $(t.blocks, (a, d) => (l(), w(i, {
       key: "render-block-" + a.id,
       block: a,
-      context: r.builderContext
-    }, null, 8, ["block", "context"]))), 128)) : v("", !0),
-    t.blocks ? (l(!0), d(w, { key: 1 }, j(t.blocks, (a, u) => (l(), I(c, {
+      context: s.builderContext
+    }, null, 8, ["block", "context"]))), 128)) : b("", !0),
+    t.blocks ? (l(!0), u(T, { key: 1 }, $(t.blocks, (a, d) => (l(), w(c, {
       key: "block-style-" + a.id,
       block: a,
-      context: r.builderContext
-    }, null, 8, ["block", "context"]))), 128)) : v("", !0)
-  ], 46, cn);
+      context: s.builderContext
+    }, null, 8, ["block", "context"]))), 128)) : b("", !0)
+  ], 46, fn);
 }
-const dn = /* @__PURE__ */ g(an, [["render", ln], ["__scopeId", "data-v-4f5f0a37"]]), se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const bn = /* @__PURE__ */ g(hn, [["render", gn], ["__scopeId", "data-v-9786df38"]]), ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: dn
-}, Symbol.toStringTag, { value: "Module" })), z = {};
-function hn(e) {
+  default: bn
+}, Symbol.toStringTag, { value: "Module" })), D = {};
+function Sn(e) {
   if (f()) {
-    Object.assign(z, e);
+    Object.assign(D, e);
     const n = {
       type: "builder.settingsChange",
-      data: z
+      data: D
     };
     parent.postMessage(n, "*");
   }
 }
 export {
-  nt as B,
-  me as C,
-  ct as F,
-  Ce as I,
-  Qe as S,
-  V as T,
-  Ee as V,
+  lt as B,
+  ye as C,
+  ft as F,
+  Te as I,
+  rt as S,
+  j as T,
+  Oe as V,
   g as _,
-  Se as a,
-  rt as b,
-  dn as c,
-  Bt as d,
-  H as e,
-  Q as f,
-  Z as g,
-  mn as h,
-  b as i,
-  Ot as j,
-  ie as k,
-  Y as l,
-  qe as m,
-  De as n,
-  je as o,
-  Ae as p,
-  Ue as q,
-  nn as r,
-  hn as s,
-  pn as t,
-  q as u
+  vn as a,
+  pe as b,
+  xn as c,
+  Fe as d,
+  K as e,
+  U as f,
+  ue as g,
+  mt as h,
+  bn as i,
+  y as j,
+  zt as k,
+  te as l,
+  kn as m,
+  Ht as n,
+  ce as o,
+  ee as p,
+  et as q,
+  dn as r,
+  Sn as s,
+  Cn as t,
+  Xe as u,
+  Ye as v,
+  Qe as w,
+  Z as x
 };