@builder.io/sdk-vue 0.13.1 → 0.13.3

package/lib/node/{index.f804c64d.js → index-TgZujUqz.js}

@@ -11,7 +11,7 @@ function filterAttrs(e = {}, t, n) {
   }
   return o;
 }
-const _sfc_main$l = defineComponent({
+const _sfc_main$p = defineComponent({
   name: "dynamic-renderer",
   props: ["attributes", "actionAttributes", "TagName"],
   data() {
@@ -23,7 +23,7 @@ const _sfc_main$l = defineComponent({
     n[o] = r;
   return n;
 };
-function _sfc_render$j(e, t, n, o, r, s) {
+function _sfc_render$n(e, t, n, o, r, s) {
   return e.isEmptyElement(e.TagName) ? (openBlock(), createBlock(resolveDynamicComponent(e.TagName), mergeProps({ key: 1 }, e.attributes, toHandlers(e.actionAttributes)), null, 16)) : (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
     typeof e.TagName == "string" ? (openBlock(), createBlock(resolveDynamicComponent(e.TagName), mergeProps({ key: 0 }, e.attributes, toHandlers(e.actionAttributes)), {
       default: withCtx(() => [
@@ -38,7 +38,7 @@ function _sfc_render$j(e, t, n, o, r, s) {
     }, 16))
   ], 64));
 }
-const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$j], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/dynamic-renderer/dynamic-renderer.vue"]]), dynamicRenderer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$n]]), dynamicRenderer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: DynamicRenderer
 }, Symbol.toStringTag, { value: "Module" })), TARGET = "vue", getClassPropName = () => {
@@ -53,7 +53,7 @@ const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sf
     case "qwik":
       return "class";
   }
-}, _sfc_main$k = defineComponent({
+}, _sfc_main$o = defineComponent({
   name: "builder-button",
   components: { DynamicRenderer },
   props: [
@@ -67,7 +67,7 @@ const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sf
     return { getClassPropName, filterAttrs };
   }
 });
-function _sfc_render$i(e, t, n, o, r, s) {
+function _sfc_render$m(e, t, n, o, r, s) {
   const i = resolveComponent("dynamic-renderer");
   return openBlock(), createBlock(i, {
     TagName: e.link ? e.builderLinkComponent || "a" : "button",
@@ -90,7 +90,7 @@ function _sfc_render$i(e, t, n, o, r, s) {
     _: 1
   }, 8, ["TagName", "attributes", "actionAttributes"]);
 }
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$i], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/button/button.vue"]]), key$1 = Symbol(), BuilderContext = {
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$m]]), key$1 = Symbol(), BuilderContext = {
   Builder: {
     content: null,
     context: {},
@@ -115,6 +115,9 @@ function getBlockComponentOptions(e) {
   return {
     ...(t = e.component) == null ? void 0 : t.options,
     ...e.options,
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
     builderBlock: e
   };
 }
@@ -131,7 +134,7 @@ function isIframe() {
   return isBrowser() && window.self !== window.top;
 }
 function isEditing() {
-  return isIframe() && (TARGET === "reactNative" || window.location.search.indexOf("builder.frameEditing=") !== -1);
+  return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }
 const getLocation = () => {
   if (isBrowser()) {
@@ -173,6 +176,7 @@ const getLocation = () => {
 }) => Object.entries({
   state: o,
   Builder: e,
+  // legacy
   builder: e,
   context: t,
   event: n
@@ -183,7 +187,7 @@ const getLocation = () => {
   getUserAttributes: () => getUserAttributes()
 }), parseCode = (e, {
   isExpression: t = !0
-}) => t && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e, runInBrowser = ({
+}) => /* we disable this for cases where we definitely don't want a return */ t && !(e.includes(";") || e.includes(" return ") || e.trim().startsWith("return ")) ? `return (${e});` : e, runInBrowser = ({
   code: e,
   builder: t,
   context: n,
@@ -310,28 +314,29 @@ output;
     context: n,
     event: o,
     state: a
-  }), c = getIsolateContext(), d = c.global;
-  d.setSync("global", d.derefInto()), d.setSync("log", function(...m) {
-    console.log(...m);
-  }), d.setSync(BUILDER_SET_STATE_NAME, function(m, f) {
-    set(i, m, f), s == null || s(i);
-  }), l.forEach(([m, f]) => {
-    const b = typeof f == "object" ? new ivm.Reference(
-      m === "builder" ? {
-        ...f,
-        getUserAttributes: () => f.getUserAttributes()
-      } : f
+  }), c = getIsolateContext(), p = c.global;
+  p.setSync("global", p.derefInto()), p.setSync("log", function(...f) {
+    console.log(...f);
+  }), p.setSync(BUILDER_SET_STATE_NAME, function(f, m) {
+    set(i, f, m), s == null || s(i);
+  }), l.forEach(([f, m]) => {
+    const g = typeof m == "object" ? new ivm.Reference(
+      // workaround: methods with default values for arguments is not being cloned over
+      f === "builder" ? {
+        ...m,
+        getUserAttributes: () => m.getUserAttributes()
+      } : m
     ) : null;
-    d.setSync(getSyncValName(m), b);
-  }), d.setSync(INJECTED_IVM_GLOBAL, ivm);
-  const u = processCode({
+    p.setSync(getSyncValName(f), g);
+  }), p.setSync(INJECTED_IVM_GLOBAL, ivm);
+  const d = processCode({
     code: e,
     args: l
-  }), p = c.evalSync(u);
+  }), u = c.evalSync(d);
   try {
-    return JSON.parse(p);
+    return JSON.parse(u);
   } catch {
-    return p;
+    return u;
   }
 }, checkIsDefined = (e) => e != null;
 function isNodeRuntime() {
@@ -478,8 +483,8 @@ function throttle(e, t, n = {}) {
   return function() {
     const c = Date.now();
     !a && n.leading === !1 && (a = c);
-    const d = t - (c - a);
-    return o = this, r = arguments, d <= 0 || d > t ? (i && (clearTimeout(i), i = null), a = c, s = e.apply(o, r), i || (o = r = null)) : !i && n.trailing !== !1 && (i = setTimeout(l, d)), s;
+    const p = t - (c - a);
+    return o = this, r = arguments, p <= 0 || p > t ? (i && (clearTimeout(i), i = null), a = c, s = e.apply(o, r), i || (o = r = null)) : !i && n.trailing !== !1 && (i = setTimeout(l, p)), s;
   };
 }
 function assign(e, ...t) {
@@ -576,9 +581,9 @@ function bindScrollInViewAnimation(e) {
     const i = throttle(s, 200, {
       leading: !1
     });
-    function a(d) {
-      const u = d.getBoundingClientRect(), p = window.innerHeight, f = (e.thresholdPercent || 0) / 100 * p;
-      return u.bottom > f && u.top < p - f;
+    function a(p) {
+      const d = p.getBoundingClientRect(), u = window.innerHeight, m = (e.thresholdPercent || 0) / 100 * u;
+      return d.bottom > m && d.top < u - m;
     }
     const l = e.steps[0].styles;
     function c() {
@@ -647,27 +652,27 @@ const getComponent = ({
     },
     block: o
   }));
-}, BlockStyles = () => import("./block-styles.5c506171.js").then((e) => e.default).catch((e) => {
+}, BlockStyles = () => import("./block-styles-WHZ3oh47.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component BlockStyles at ./components/block-styles.vue",
     e
   ), e;
-}), BlockWrapper = () => import("./block-wrapper.779562b4.js").then((e) => e.default).catch((e) => {
+}), BlockWrapper = () => import("./block-wrapper-Oi21HLL-.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component BlockWrapper at ./components/block-wrapper.vue",
     e
   ), e;
-}), ComponentRef = () => import("./component-ref.616a1d7e.js").then((e) => e.default).catch((e) => {
+}), ComponentRef = () => import("./component-ref-6gNNgUIq.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component ComponentRef at ./components/component-ref/component-ref.vue",
     e
   ), e;
-}), RepeatedBlock = () => import("./repeated-block.4fe417ba.js").then((e) => e.default).catch((e) => {
+}), RepeatedBlock = () => import("./repeated-block-4ZvFRl8H.js").then((e) => e.default).catch((e) => {
   throw console.error(
     "Error while attempting to dynamically import component RepeatedBlock at ./components/repeated-block.vue",
     e
   ), e;
-}), _sfc_main$j = defineComponent({
+}), _sfc_main$n = defineComponent({
   name: "block",
   components: {
     BlockStyles: defineAsyncComponent(BlockStyles),
@@ -725,21 +730,21 @@ const getComponent = ({
       return ("show" in this.processedBlock ? this.processedBlock.show : !0) && !e;
     },
     childrenWithoutParentComponent() {
-      var t, n;
-      return !((t = this.blockComponent) != null && t.component) && !this.repeatItem ? (n = this.processedBlock.children) != null ? n : [] : [];
+      var t;
+      return !((t = this.blockComponent) != null && t.component) && !this.repeatItem ? this.processedBlock.children ?? [] : [];
     },
     componentRefProps() {
-      var e, t, n, o, r, s, i, a, l;
+      var e, t, n, o, r, s, i, a, l, c;
       return {
-        blockChildren: (e = this.processedBlock.children) != null ? e : [],
-        componentRef: (t = this.blockComponent) == null ? void 0 : t.component,
+        blockChildren: this.processedBlock.children ?? [],
+        componentRef: (e = this.blockComponent) == null ? void 0 : e.component,
         componentOptions: {
           ...getBlockComponentOptions(this.processedBlock),
           builderContext: this.context,
-          ...((n = this.blockComponent) == null ? void 0 : n.name) === "Core:Button" || ((o = this.blockComponent) == null ? void 0 : o.name) === "Symbol" || ((r = this.blockComponent) == null ? void 0 : r.name) === "Columns" ? {
+          ...((t = this.blockComponent) == null ? void 0 : t.name) === "Core:Button" || ((n = this.blockComponent) == null ? void 0 : n.name) === "Symbol" || ((o = this.blockComponent) == null ? void 0 : o.name) === "Columns" || ((r = this.blockComponent) == null ? void 0 : r.name) === "Form:Form" ? {
             builderLinkComponent: this.linkComponent
           } : {},
-          ...((s = this.blockComponent) == null ? void 0 : s.name) === "Symbol" || ((i = this.blockComponent) == null ? void 0 : i.name) === "Columns" ? {
+          ...((s = this.blockComponent) == null ? void 0 : s.name) === "Symbol" || ((i = this.blockComponent) == null ? void 0 : i.name) === "Columns" || ((a = this.blockComponent) == null ? void 0 : a.name) === "Form:Form" ? {
             builderComponents: this.registeredComponents
           } : {}
         },
@@ -747,21 +752,21 @@ const getComponent = ({
         linkComponent: this.linkComponent,
         registeredComponents: this.registeredComponents,
         builderBlock: this.processedBlock,
-        includeBlockProps: ((a = this.blockComponent) == null ? void 0 : a.noWrap) === !0,
-        isInteractive: !((l = this.blockComponent) != null && l.isRSC)
+        includeBlockProps: ((l = this.blockComponent) == null ? void 0 : l.noWrap) === !0,
+        isInteractive: !((c = this.blockComponent) != null && c.isRSC)
       };
     }
   }
 });
-function _sfc_render$h(e, t, n, o, r, s) {
-  var u;
-  const i = resolveComponent("block-styles"), a = resolveComponent("component-ref"), l = resolveComponent("block", !0), c = resolveComponent("block-wrapper"), d = resolveComponent("repeated-block");
+function _sfc_render$l(e, t, n, o, r, s) {
+  var d;
+  const i = resolveComponent("block-styles"), a = resolveComponent("component-ref"), l = resolveComponent("block", !0), c = resolveComponent("block-wrapper"), p = resolveComponent("repeated-block");
   return e.canShowBlock ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
     createVNode(i, {
       block: e.block,
       context: e.context
     }, null, 8, ["block", "context"]),
-    (u = e.blockComponent) != null && u.noWrap ? (openBlock(), createBlock(a, {
+    (d = e.blockComponent) != null && d.noWrap ? (openBlock(), createBlock(a, {
       key: 1,
       componentRef: e.componentRefProps.componentRef,
       componentOptions: e.componentRefProps.componentOptions,
@@ -773,10 +778,10 @@ function _sfc_render$h(e, t, n, o, r, s) {
       includeBlockProps: e.componentRefProps.includeBlockProps,
       isInteractive: e.componentRefProps.isInteractive
     }, null, 8, ["componentRef", "componentOptions", "blockChildren", "context", "registeredComponents", "linkComponent", "builderBlock", "includeBlockProps", "isInteractive"])) : (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
-      e.repeatItem ? (openBlock(!0), createElementBlock(Fragment$1, { key: 1 }, renderList(e.repeatItem, (p, m) => (openBlock(), createBlock(d, {
-        key: m,
-        repeatContext: p.context,
-        block: p.block,
+      e.repeatItem ? (openBlock(!0), createElementBlock(Fragment$1, { key: 1 }, renderList(e.repeatItem, (u, f) => (openBlock(), createBlock(p, {
+        key: f,
+        repeatContext: u.context,
+        block: u.block,
         registeredComponents: e.registeredComponents,
         linkComponent: e.linkComponent
       }, null, 8, ["repeatContext", "block", "registeredComponents", "linkComponent"]))), 128)) : (openBlock(), createBlock(c, {
@@ -798,9 +803,9 @@ function _sfc_render$h(e, t, n, o, r, s) {
             includeBlockProps: e.componentRefProps.includeBlockProps,
             isInteractive: e.componentRefProps.isInteractive
           }, null, 8, ["componentRef", "componentOptions", "blockChildren", "context", "registeredComponents", "linkComponent", "builderBlock", "includeBlockProps", "isInteractive"]),
-          (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.childrenWithoutParentComponent, (p, m) => (openBlock(), createBlock(l, {
-            key: p.id,
-            block: p,
+          (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.childrenWithoutParentComponent, (u, f) => (openBlock(), createBlock(l, {
+            key: u.id,
+            block: u,
             context: e.childrenContext,
             registeredComponents: e.registeredComponents,
             linkComponent: e.linkComponent
@@ -809,12 +814,12 @@ function _sfc_render$h(e, t, n, o, r, s) {
         _: 1
       }, 8, ["Wrapper", "block", "context", "linkComponent"]))
     ], 64))
-  ], 64)) : createCommentVNode("v-if", !0);
+  ], 64)) : createCommentVNode("", !0);
 }
-const Block = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$h], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/block.vue"]]), block = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Block = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l]]), block = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Block
-}, Symbol.toStringTag, { value: "Module" })), _sfc_main$i = defineComponent({
+}, Symbol.toStringTag, { value: "Module" })), _sfc_main$m = defineComponent({
   name: "builder-blocks-wrapper",
   props: [
     "BlocksWrapper",
@@ -858,10 +863,10 @@ const Block = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$h
       ));
     }
   }
-}), blocksWrapper_vue_vue_type_style_index_0_scoped_1f8aab9f_lang = "";
-function _sfc_render$g(e, t, n, o, r, s) {
+});
+function _sfc_render$k(e, t, n, o, r, s) {
   return openBlock(), createBlock(resolveDynamicComponent(e.BlocksWrapper), mergeProps({
-    class: e.className + " component-1k2igrjdg3x",
+    class: e.className + " component-b1turyjjkok",
     "builder-path": e.path,
     "builder-parent-id": e.parent,
     style: e.styleProp,
@@ -875,7 +880,7 @@ function _sfc_render$g(e, t, n, o, r, s) {
     _: 3
   }, 16, ["class", "builder-path", "builder-parent-id", "style", "onClick", "onMouseEnter", "onKeyPress"]);
 }
-const BlocksWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$g], ["__scopeId", "data-v-1f8aab9f"], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/blocks/blocks-wrapper.vue"]]), _sfc_main$h = defineComponent({
+const BlocksWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$k], ["__scopeId", "data-v-3403e3cb"]]), _sfc_main$l = defineComponent({
   name: "builder-blocks",
   components: { BlocksWrapper, Block },
   props: [
@@ -892,7 +897,7 @@ const BlocksWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_
     componentsContext: ComponentsContext.key
   }
 });
-function _sfc_render$f(e, t, n, o, r, s) {
+function _sfc_render$j(e, t, n, o, r, s) {
   var l, c;
   const i = resolveComponent("block"), a = resolveComponent("blocks-wrapper");
   return openBlock(), createBlock(a, {
@@ -904,24 +909,24 @@ function _sfc_render$f(e, t, n, o, r, s) {
     BlocksWrapperProps: (c = e.context) == null ? void 0 : c.BlocksWrapperProps
   }, {
     default: withCtx(() => [
-      e.blocks ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList(e.blocks, (d, u) => (openBlock(), createBlock(i, {
-        key: d.id,
-        block: d,
+      e.blocks ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList(e.blocks, (p, d) => (openBlock(), createBlock(i, {
+        key: p.id,
+        block: p,
         linkComponent: e.linkComponent,
         context: e.context || e.builderContext,
         registeredComponents: e.registeredComponents || e.componentsContext.registeredComponents
-      }, null, 8, ["block", "linkComponent", "context", "registeredComponents"]))), 128)) : createCommentVNode("v-if", !0)
+      }, null, 8, ["block", "linkComponent", "context", "registeredComponents"]))), 128)) : createCommentVNode("", !0)
     ]),
     _: 1
   }, 8, ["blocks", "parent", "path", "styleProp", "BlocksWrapper", "BlocksWrapperProps"]);
 }
-const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$f], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/blocks/blocks.vue"]]), _sfc_main$g = defineComponent({
+const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$j]]), _sfc_main$k = defineComponent({
   render() {
     return h("style", { id: this.id, innerHTML: this.styles });
   },
   name: "inlined-styles",
   props: ["styles", "id"]
-}), InlinedStyles = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/inlined-styles.vue"]]), SIZES = {
+}), SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -959,18 +964,18 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$
   const s = n.medium.max + 1;
   return n.large = {
     max: 2e3,
+    // TODO: decide upper limit
     min: s,
     default: s + 1
   }, n;
-}, _sfc_main$f = defineComponent({
+}, _sfc_main$j = defineComponent({
   name: "builder-columns",
   components: {
-    InlinedStyles,
+    InlinedStyles: _sfc_main$k,
     DynamicRenderer,
     Blocks
   },
   props: [
-    "js",
     "space",
     "columns",
     "stackColumnsAt",
@@ -1085,8 +1090,8 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$
       )[e].max;
     }
   }
-}), columns_vue_vue_type_style_index_0_scoped_7be099dc_lang = "";
-function _sfc_render$e(e, t, n, o, r, s) {
+});
+function _sfc_render$i(e, t, n, o, r, s) {
   const i = resolveComponent("inlined-styles"), a = resolveComponent("blocks"), l = resolveComponent("dynamic-renderer");
   return openBlock(), createElementBlock("div", mergeProps({
     class: `builder-columns ${e.builderBlock.id}-breakpoints div-16nol0lwi20`,
@@ -1095,9 +1100,9 @@ function _sfc_render$e(e, t, n, o, r, s) {
     e.TARGET !== "reactNative" ? (openBlock(), createBlock(i, {
       key: 0,
       styles: e.columnsStyles
-    }, null, 8, ["styles"])) : createCommentVNode("v-if", !0),
-    (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.columns, (c, d) => (openBlock(), createBlock(l, {
-      key: d,
+    }, null, 8, ["styles"])) : createCommentVNode("", !0),
+    (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.columns, (c, p) => (openBlock(), createBlock(l, {
+      key: p,
       TagName: c.link ? e.builderLinkComponent || "a" : "div",
       actionAttributes: {},
       attributes: {
@@ -1105,12 +1110,12 @@ function _sfc_render$e(e, t, n, o, r, s) {
           href: c.link
         } : {},
         [e.getClassPropName()]: "builder-column",
-        style: e.mapStyleObjToStrIfNeeded(e.columnCssVars(d))
+        style: e.mapStyleObjToStrIfNeeded(e.columnCssVars(p))
       }
     }, {
       default: withCtx(() => [
         createVNode(a, {
-          path: `component.options.columns.${d}.blocks`,
+          path: `component.options.columns.${p}.blocks`,
           parent: e.builderBlock.id,
           styleProp: {
             flexGrow: "1"
@@ -1125,16 +1130,16 @@ function _sfc_render$e(e, t, n, o, r, s) {
     }, 1032, ["TagName", "attributes"]))), 128))
   ], 16);
 }
-const Columns = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e], ["__scopeId", "data-v-7be099dc"], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/columns/columns.vue"]]), _sfc_main$e = defineComponent({
+const Columns = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$i], ["__scopeId", "data-v-3a12caec"]]), _sfc_main$i = defineComponent({
   name: "builder-fragment-component",
   props: []
 });
-function _sfc_render$d(e, t, n, o, r, s) {
+function _sfc_render$h(e, t, n, o, r, s) {
   return openBlock(), createElementBlock("span", null, [
     renderSlot(e.$slots, "default")
   ]);
 }
-const Fragment = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$d], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/fragment/fragment.vue"]]);
+const Fragment = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$h]]);
 function removeProtocol(e) {
   return e.replace(/http(s)?:/, "");
 }
@@ -1165,7 +1170,7 @@ function getSrcSet(e) {
   }
   return e.match(/cdn\.shopify\.com/) ? t.map((n) => [getShopifyImageUrl(e, `${n}x${n}`), n]).filter(([n]) => !!n).map(([n, o]) => `${n} ${o}w`).concat([e]).join(", ") : e;
 }
-const _sfc_main$d = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "builder-image",
   props: [
     "image",
@@ -1185,9 +1190,11 @@ const _sfc_main$d = defineComponent({
     srcSetToUse() {
       var n;
       const t = this.image || this.src;
-      if (!t || !(t.match(/builder\.io/) || t.match(/cdn\.shopify\.com/)))
+      if (!t || // We can auto add srcset for cdn.builder.io and shopify
+      // images, otherwise you can supply this prop manually
+      !(t.match(/builder\.io/) || t.match(/cdn\.shopify\.com/)))
         return this.srcset;
-      if (this.srcset && ((n = this.image) == null ? void 0 : n.includes("builder.io/api/v1/image"))) {
+      if (this.srcset && ((n = this.image) != null && n.includes("builder.io/api/v1/image"))) {
         if (!this.srcset.includes(this.image.split("?")[0]))
           return console.debug("Removed given srcset"), getSrcSet(t);
       } else if (this.image && !this.srcset)
@@ -1196,7 +1203,7 @@ const _sfc_main$d = defineComponent({
     },
     webpSrcSet() {
       var e;
-      return ((e = this.srcSetToUse) == null ? void 0 : e.match(/builder\.io/)) && !this.noWebp ? this.srcSetToUse.replace(/\?/g, "?format=webp&") : "";
+      return (e = this.srcSetToUse) != null && e.match(/builder\.io/) && !this.noWebp ? this.srcSetToUse.replace(/\?/g, "?format=webp&") : "";
     },
     aspectRatioCss() {
       const e = {
@@ -1209,11 +1216,11 @@ const _sfc_main$d = defineComponent({
       return this.aspectRatio ? e : void 0;
     }
   }
-}), image_vue_vue_type_style_index_0_scoped_58ca75d1_lang = "", _hoisted_1$5 = ["srcset"], _hoisted_2$1 = ["alt", "role", "src", "srcset", "sizes"], _hoisted_3$1 = {
+}), _hoisted_1$8 = ["srcset"], _hoisted_2$3 = ["alt", "role", "src", "srcset", "sizes"], _hoisted_3$1 = {
   key: 2,
-  class: "div-1be3j8m9ewb-2"
+  class: "div-4wbls88y960-2"
 };
-function _sfc_render$c(e, t, n, o, r, s) {
+function _sfc_render$g(e, t, n, o, r, s) {
   var i, a, l, c;
   return openBlock(), createElementBlock(Fragment$1, null, [
     createElementVNode("picture", null, [
@@ -1221,7 +1228,7 @@ function _sfc_render$c(e, t, n, o, r, s) {
         key: 0,
         type: "image/webp",
         srcset: e.webpSrcSet
-      }, null, 8, _hoisted_1$5)) : createCommentVNode("v-if", !0),
+      }, null, 8, _hoisted_1$8)) : createCommentVNode("", !0),
       createElementVNode("img", {
         loading: "lazy",
         alt: e.altText,
@@ -1232,34 +1239,34 @@ function _sfc_render$c(e, t, n, o, r, s) {
           ...e.aspectRatioCss
         }),
         class: normalizeClass(
-          "builder-image" + (e.className ? " " + e.className : "") + " img-1be3j8m9ewb"
+          "builder-image" + (e.className ? " " + e.className : "") + " img-4wbls88y960"
         ),
         src: e.image,
         srcset: e.srcSetToUse,
         sizes: e.sizes
-      }, null, 14, _hoisted_2$1)
+      }, null, 14, _hoisted_2$3)
     ]),
-    e.aspectRatio && !(((a = (i = e.builderBlock) == null ? void 0 : i.children) == null ? void 0 : a.length) && e.fitContent) ? (openBlock(), createElementBlock("div", {
+    e.aspectRatio && !((a = (i = e.builderBlock) == null ? void 0 : i.children) != null && a.length && e.fitContent) ? (openBlock(), createElementBlock("div", {
       key: 0,
-      class: "builder-image-sizer div-1be3j8m9ewb",
+      class: "builder-image-sizer div-4wbls88y960",
       style: normalizeStyle({
         paddingTop: e.aspectRatio * 100 + "%"
       })
-    }, null, 4)) : createCommentVNode("v-if", !0),
-    ((c = (l = e.builderBlock) == null ? void 0 : l.children) == null ? void 0 : c.length) && e.fitContent ? renderSlot(e.$slots, "default", { key: 1 }, void 0, !0) : createCommentVNode("v-if", !0),
+    }, null, 4)) : createCommentVNode("", !0),
+    (c = (l = e.builderBlock) == null ? void 0 : l.children) != null && c.length && e.fitContent ? renderSlot(e.$slots, "default", { key: 1 }, void 0, !0) : createCommentVNode("", !0),
     !e.fitContent && e.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
       renderSlot(e.$slots, "default", {}, void 0, !0)
-    ])) : createCommentVNode("v-if", !0)
+    ])) : createCommentVNode("", !0)
   ], 64);
 }
-const Image = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$c], ["__scopeId", "data-v-58ca75d1"], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/image/image.vue"]]), _sfc_main$c = defineComponent({
+const Image = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$g], ["__scopeId", "data-v-4ab1cc9f"]]), _sfc_main$g = defineComponent({
   name: "builder-section-component",
   props: ["attributes", "maxWidth"],
   data() {
     return { filterAttrs };
   }
 });
-function _sfc_render$b(e, t, n, o, r, s) {
+function _sfc_render$f(e, t, n, o, r, s) {
   return openBlock(), createElementBlock("section", mergeProps({
     style: {
       width: "100%",
@@ -1277,7 +1284,7 @@ function _sfc_render$b(e, t, n, o, r, s) {
     renderSlot(e.$slots, "default")
   ], 16);
 }
-const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/section/section.vue"]]), getTopLevelDomain = (e) => {
+const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$f]]), getTopLevelDomain = (e) => {
   if (e === "localhost" || e === "127.0.0.1")
     return e;
   const t = e.split(".");
@@ -1361,7 +1368,8 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render
   testGroupId: t
 }) => {
   const n = e.variations[t];
-  return t === e.id || !n ? {
+  return t === e.id || // handle edge-case where `testGroupId` points to non-existing variation
+  !n ? {
     testVariationId: e.id,
     testVariationName: "Default"
   } : {
@@ -1411,10 +1419,11 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render
     ...e,
     ...r
   };
-}, getDefaultCanTrack = (e) => checkIsDefined(e) ? e : !0, componentInfo$b = {
+}, getDefaultCanTrack = (e) => checkIsDefined(e) ? e : !0, componentInfo$f = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
+    // TODO: make min width more intuitive and set one
     appearance: "none",
     paddingTop: "15px",
     paddingBottom: "15px",
@@ -1443,7 +1452,8 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render
   }],
   static: !0,
   noWrap: !0
-}, componentInfo$a = {
+}, componentInfo$e = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: !0,
   inputs: [{
@@ -1621,7 +1631,7 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render
         });
       }
       const n = e.get("columns");
-      Array.isArray(n) && !!n.find((r) => r.get("width")) && (!!n.find((s) => !s.get("width")) || n.reduce((a, l) => a + l.get("width"), 0) !== 100) && t();
+      Array.isArray(n) && n.find((r) => r.get("width")) && (n.find((s) => !s.get("width")) || n.reduce((a, l) => a + l.get("width"), 0) !== 100) && t();
     }
   }, {
     name: "space",
@@ -1643,152 +1653,13 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render
     helperText: "When stacking columns for mobile devices, reverse the ordering",
     advanced: !0
   }]
-}, componentInfo$9 = {
-  name: "Custom Code",
-  static: !0,
-  requiredPermissions: ["editCode"],
-  inputs: [{
-    name: "code",
-    type: "html",
-    required: !0,
-    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-    code: !0
-  }, {
-    name: "replaceNodes",
-    type: "boolean",
-    helperText: "Preserve server rendered dom nodes",
-    advanced: !0
-  }, {
-    name: "scriptsClientOnly",
-    type: "boolean",
-    defaultValue: !1,
-    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-    advanced: !0
-  }]
-}, _sfc_main$b = defineComponent({
-  name: "builder-custom-code",
-  props: ["replaceNodes", "code"],
-  data() {
-    return { scriptsInserted: [], scriptsRun: [] };
-  },
-  mounted() {
-    var t;
-    if (!((t = this.$refs.elementRef) != null && t.getElementsByTagName) || typeof window > "u")
-      return;
-    const e = this.$refs.elementRef.getElementsByTagName("script");
-    for (let n = 0; n < e.length; n++) {
-      const o = e[n];
-      if (o.src) {
-        if (this.scriptsInserted.includes(o.src))
-          continue;
-        this.scriptsInserted.push(o.src);
-        const r = document.createElement("script");
-        r.async = !0, r.src = o.src, document.head.appendChild(r);
-      } else if (!o.type || [
-        "text/javascript",
-        "application/javascript",
-        "application/ecmascript"
-      ].includes(o.type)) {
-        if (this.scriptsRun.includes(o.innerText))
-          continue;
-        try {
-          this.scriptsRun.push(o.innerText), new Function(o.innerText)();
-        } catch (r) {
-          console.warn("`CustomCode`: Error running script:", r);
-        }
-      }
-    }
-  }
-}), _hoisted_1$4 = ["innerHTML"];
-function _sfc_render$a(e, t, n, o, r, s) {
-  return openBlock(), createElementBlock("div", {
-    ref: "elementRef",
-    class: normalizeClass("builder-custom-code" + (e.replaceNodes ? " replace-nodes" : "")),
-    innerHTML: e.code
-  }, null, 10, _hoisted_1$4);
-}
-const customCode = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/custom-code/custom-code.vue"]]), componentInfo$8 = {
-  name: "Embed",
-  static: !0,
-  inputs: [{
-    name: "url",
-    type: "url",
-    required: !0,
-    defaultValue: "",
-    helperText: "e.g. enter a youtube url, google map, etc",
-    onChange: (e) => {
-      const t = e.get("url");
-      if (t)
-        return e.set("content", "Loading..."), fetch(`https://iframe.ly/api/iframely?url=${t}&api_key=ae0e60e78201a3f2b0de4b`).then((o) => o.json()).then((o) => {
-          e.get("url") === t && (o.html ? e.set("content", o.html) : e.set("content", "Invalid url, please try another"));
-        }).catch((o) => {
-          e.set("content", "There was an error embedding this URL, please try again or another URL");
-        });
-      e.delete("content");
-    }
-  }, {
-    name: "content",
-    type: "html",
-    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-    hideFromUI: !0
-  }]
-}, SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"], isJsScript = (e) => SCRIPT_MIME_TYPES.includes(e.type), _sfc_main$a = defineComponent({
-  name: "builder-embed",
-  props: ["content"],
-  data() {
-    return { scriptsInserted: [], scriptsRun: [], ranInitFn: !1 };
-  },
-  watch: {
-    onUpdateHook0: {
-      handler() {
-        this.$refs.elem && !this.ranInitFn && (this.ranInitFn = !0, this.findAndRunScripts());
-      },
-      immediate: !0
-    }
-  },
-  computed: {
-    onUpdateHook0() {
-      return {
-        0: this.$refs.elem,
-        1: this.ranInitFn
-      };
-    }
-  },
-  methods: {
-    findAndRunScripts() {
-      if (!this.$refs.elem || !this.$refs.elem.getElementsByTagName)
-        return;
-      const e = this.$refs.elem.getElementsByTagName("script");
-      for (let t = 0; t < e.length; t++) {
-        const n = e[t];
-        if (n.src && !this.scriptsInserted.includes(n.src)) {
-          this.scriptsInserted.push(n.src);
-          const o = document.createElement("script");
-          o.async = !0, o.src = n.src, document.head.appendChild(o);
-        } else if (isJsScript(n) && !this.scriptsRun.includes(n.innerText))
-          try {
-            this.scriptsRun.push(n.innerText), new Function(n.innerText)();
-          } catch (o) {
-            console.warn("`Embed`: Error running script:", o);
-          }
-      }
-    }
-  }
-}), _hoisted_1$3 = ["innerHTML"];
-function _sfc_render$9(e, t, n, o, r, s) {
-  return openBlock(), createElementBlock("div", {
-    class: "builder-embed",
-    ref: "elem",
-    innerHTML: e.content
-  }, null, 8, _hoisted_1$3);
-}
-const embed = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/embed/embed.vue"]]), componentInfo$7 = {
+}, componentInfo$d = {
   name: "Fragment",
   static: !0,
   hidden: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, componentInfo$6 = {
+}, componentInfo$c = {
   name: "Image",
   static: !0,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
@@ -1810,14 +1681,14 @@ const embed = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9
       e.delete("srcset"), e.delete("noWebp");
       function n(i, a = 6e4) {
         return new Promise((l, c) => {
-          const d = document.createElement("img");
-          let u = !1;
-          d.onload = () => {
-            u = !0, l(d);
-          }, d.addEventListener("error", (p) => {
-            console.warn("Image load failed", p.error), c(p.error);
-          }), d.src = i, setTimeout(() => {
-            u || c(new Error("Image load timed out"));
+          const p = document.createElement("img");
+          let d = !1;
+          p.onload = () => {
+            d = !0, l(p);
+          }, p.addEventListener("error", (u) => {
+            console.warn("Image load failed", u.error), c(u.error);
+          }), p.src = i, setTimeout(() => {
+            d || c(new Error("Image load timed out"));
           }, a);
         });
       }
@@ -1888,45 +1759,7 @@ const embed = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9
     advanced: !0,
     defaultValue: 0.7041
   }]
-}, componentInfo$5 = {
-  name: "Raw:Img",
-  hideFromInsertMenu: !0,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
-  inputs: [{
-    name: "image",
-    bubble: !0,
-    type: "file",
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
-    required: !0
-  }],
-  noWrap: !0,
-  static: !0
-}, _sfc_main$9 = defineComponent({
-  name: "builder-img-component",
-  props: [
-    "backgroundSize",
-    "backgroundPosition",
-    "imgSrc",
-    "altText",
-    "image",
-    "attributes"
-  ],
-  data() {
-    return { isEditing, filterAttrs };
-  }
-}), _hoisted_1$2 = ["alt", "src"];
-function _sfc_render$8(e, t, n, o, r, s) {
-  return openBlock(), createElementBlock("img", mergeProps({
-    style: {
-      objectFit: e.backgroundSize || "cover",
-      objectPosition: e.backgroundPosition || "center"
-    },
-    key: e.isEditing() && e.imgSrc || "default-key",
-    alt: e.altText,
-    src: e.imgSrc || e.image
-  }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), null, 16, _hoisted_1$2);
-}
-const Img = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/img/img.vue"]]), componentInfo$4 = {
+}, componentInfo$b = {
   name: "Core:Section",
   static: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -1965,24 +1798,25 @@ const Img = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8],
       }
     }
   }]
-}, componentInfo$3 = {
+}, componentInfo$a = {
   name: "Slot",
   isRSC: !0,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
   docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
   image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
+  // Maybe wrap this for canHaveChildren so bind children to this hm
   inputs: [{
     name: "name",
     type: "string",
     required: !0,
     defaultValue: "children"
   }]
-}, _sfc_main$8 = defineComponent({
+}, _sfc_main$f = defineComponent({
   name: "builder-slot",
   components: { Blocks },
-  props: ["builderContext", "name"]
+  props: ["js", "builderContext", "name"]
 });
-function _sfc_render$7(e, t, n, o, r, s) {
+function _sfc_render$e(e, t, n, o, r, s) {
   var a, l, c;
   const i = resolveComponent("blocks");
   return openBlock(), createElementBlock("div", mergeProps(
@@ -2001,7 +1835,7 @@ function _sfc_render$7(e, t, n, o, r, s) {
     }, null, 8, ["parent", "path", "context", "blocks"])
   ], 16);
 }
-const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/slot/slot.vue"]]), componentInfo$2 = {
+const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e]]), componentInfo$9 = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -2034,7 +1868,7 @@ const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]
     hideFromUI: !0,
     type: "boolean"
   }]
-}, componentInfo$1 = {
+}, componentInfo$8 = {
   name: "Text",
   static: !0,
   isRSC: !0,
@@ -2052,11 +1886,11 @@ const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]
     height: "auto",
     textAlign: "center"
   }
-}, _sfc_main$7 = defineComponent({
+}, _sfc_main$e = defineComponent({
   name: "builder-text",
   props: ["text"]
-}), _hoisted_1$1 = ["innerHTML"];
-function _sfc_render$6(e, t, n, o, r, s) {
+}), _hoisted_1$7 = ["innerHTML"];
+function _sfc_render$d(e, t, n, o, r, s) {
   var i;
   return openBlock(), createElementBlock("div", {
     class: "builder-text",
@@ -2064,62 +1898,857 @@ function _sfc_render$6(e, t, n, o, r, s) {
     style: {
       outline: "none"
     }
-  }, null, 8, _hoisted_1$1);
+  }, null, 8, _hoisted_1$7);
 }
-const Text = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/text/text.vue"]]), componentInfo = {
-  name: "Video",
-  canHaveChildren: !0,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+const Text = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$d]]), componentInfo$7 = {
+  name: "Custom Code",
+  static: !0,
+  requiredPermissions: ["editCode"],
   inputs: [{
-    name: "video",
-    type: "file",
-    allowedFileTypes: ["mp4"],
-    bubble: !0,
-    defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-    required: !0
-  }, {
-    name: "posterImage",
-    type: "file",
-    allowedFileTypes: ["jpeg", "png"],
-    helperText: "Image to show before the video plays"
-  }, {
-    name: "autoPlay",
-    type: "boolean",
-    defaultValue: !0
-  }, {
-    name: "controls",
-    type: "boolean",
-    defaultValue: !1
-  }, {
-    name: "muted",
-    type: "boolean",
-    defaultValue: !0
-  }, {
-    name: "loop",
-    type: "boolean",
-    defaultValue: !0
+    name: "code",
+    type: "html",
+    required: !0,
+    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+    code: !0
   }, {
-    name: "playsInline",
+    name: "replaceNodes",
     type: "boolean",
-    defaultValue: !0
-  }, {
-    name: "fit",
-    type: "text",
-    defaultValue: "cover",
-    enum: ["contain", "cover", "fill", "auto"]
-  }, {
-    name: "preload",
-    type: "text",
-    defaultValue: "metadata",
-    enum: ["auto", "metadata", "none"]
+    helperText: "Preserve server rendered dom nodes",
+    advanced: !0
   }, {
-    name: "fitContent",
+    name: "scriptsClientOnly",
     type: "boolean",
-    helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+    defaultValue: !1,
+    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+    advanced: !0
+  }]
+}, _sfc_main$d = defineComponent({
+  name: "builder-custom-code",
+  props: ["replaceNodes", "code"],
+  data() {
+    return { scriptsInserted: [], scriptsRun: [] };
+  },
+  mounted() {
+    var t;
+    if (!((t = this.$refs.elementRef) != null && t.getElementsByTagName) || typeof window > "u")
+      return;
+    const e = this.$refs.elementRef.getElementsByTagName("script");
+    for (let n = 0; n < e.length; n++) {
+      const o = e[n];
+      if (o.src) {
+        if (this.scriptsInserted.includes(o.src))
+          continue;
+        this.scriptsInserted.push(o.src);
+        const r = document.createElement("script");
+        r.async = !0, r.src = o.src, document.head.appendChild(r);
+      } else if (!o.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(o.type)) {
+        if (this.scriptsRun.includes(o.innerText))
+          continue;
+        try {
+          this.scriptsRun.push(o.innerText), new Function(o.innerText)();
+        } catch (r) {
+          console.warn("`CustomCode`: Error running script:", r);
+        }
+      }
+    }
+  }
+}), _hoisted_1$6 = ["innerHTML"];
+function _sfc_render$c(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("div", {
+    ref: "elementRef",
+    class: normalizeClass("builder-custom-code" + (e.replaceNodes ? " replace-nodes" : "")),
+    innerHTML: e.code
+  }, null, 10, _hoisted_1$6);
+}
+const customCode = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$c]]), componentInfo$6 = {
+  name: "Embed",
+  static: !0,
+  inputs: [{
+    name: "url",
+    type: "url",
+    required: !0,
+    defaultValue: "",
+    helperText: "e.g. enter a youtube url, google map, etc",
+    onChange: (e) => {
+      const t = e.get("url");
+      if (t)
+        return e.set("content", "Loading..."), fetch(`https://iframe.ly/api/iframely?url=${t}&api_key=ae0e60e78201a3f2b0de4b`).then((o) => o.json()).then((o) => {
+          e.get("url") === t && (o.html ? e.set("content", o.html) : e.set("content", "Invalid url, please try another"));
+        }).catch((o) => {
+          e.set("content", "There was an error embedding this URL, please try again or another URL");
+        });
+      e.delete("content");
+    }
+  }, {
+    name: "content",
+    type: "html",
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: !0
+  }]
+}, SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"], isJsScript = (e) => SCRIPT_MIME_TYPES.includes(e.type), _sfc_main$c = defineComponent({
+  name: "builder-embed",
+  props: ["content"],
+  data() {
+    return { scriptsInserted: [], scriptsRun: [], ranInitFn: !1 };
+  },
+  watch: {
+    onUpdateHook0: {
+      handler() {
+        this.$refs.elem && !this.ranInitFn && (this.ranInitFn = !0, this.findAndRunScripts());
+      },
+      immediate: !0
+    }
+  },
+  computed: {
+    onUpdateHook0() {
+      return {
+        0: this.$refs.elem,
+        1: this.ranInitFn
+      };
+    }
+  },
+  methods: {
+    findAndRunScripts() {
+      if (!this.$refs.elem || !this.$refs.elem.getElementsByTagName)
+        return;
+      const e = this.$refs.elem.getElementsByTagName("script");
+      for (let t = 0; t < e.length; t++) {
+        const n = e[t];
+        if (n.src && !this.scriptsInserted.includes(n.src)) {
+          this.scriptsInserted.push(n.src);
+          const o = document.createElement("script");
+          o.async = !0, o.src = n.src, document.head.appendChild(o);
+        } else if (isJsScript(n) && !this.scriptsRun.includes(n.innerText))
+          try {
+            this.scriptsRun.push(n.innerText), new Function(n.innerText)();
+          } catch (o) {
+            console.warn("`Embed`: Error running script:", o);
+          }
+      }
+    }
+  }
+}), _hoisted_1$5 = ["innerHTML"];
+function _sfc_render$b(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("div", {
+    class: "builder-embed",
+    ref: "elem",
+    innerHTML: e.content
+  }, null, 8, _hoisted_1$5);
+}
+const embed = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b]]), componentInfo$5 = {
+  name: "Form:Form",
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: "15px",
+        paddingBottom: "15px"
+      }
+    }
+  },
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
+  inputs: [{
+    name: "sendSubmissionsTo",
+    type: "string",
+    // TODO: save to builder data and user can download as csv
+    // TODO: easy for mode too or computed add/remove fields form mode
+    // so you can edit details and high level mode at same time...
+    // Later - more integrations like mailchimp
+    // /api/v1/form-submit?to=mailchimp
+    enum: [{
+      label: "Send to email",
+      value: "email",
+      helperText: "Send form submissions to the email address of your choosing"
+    }, {
+      label: "Custom",
+      value: "custom",
+      helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
+    }],
+    defaultValue: "email"
+  }, {
+    name: "sendSubmissionsToEmail",
+    type: "string",
+    required: !0,
+    // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+    defaultValue: "your@email.com",
+    showIf: 'options.get("sendSubmissionsTo") === "email"'
+  }, {
+    name: "sendWithJs",
+    type: "boolean",
+    helperText: "Set to false to use basic html form action",
+    defaultValue: !0,
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "name",
+    type: "string",
+    defaultValue: "My form"
+    // advanced: true
+  }, {
+    name: "action",
+    type: "string",
+    helperText: "URL to send the form data to",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "contentType",
+    type: "string",
+    defaultValue: "application/json",
+    advanced: !0,
+    // TODO: do automatically if file input
+    enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }, {
+    name: "method",
+    type: "string",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    defaultValue: "POST",
+    advanced: !0
+  }, {
+    name: "previewState",
+    type: "string",
+    // TODO: persist: false flag
+    enum: ["unsubmitted", "sending", "success", "error"],
+    defaultValue: "unsubmitted",
+    helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "successUrl",
+    type: "url",
+    helperText: "Optional URL to redirect the user to on form submission success",
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "resetFormOnSubmit",
+    type: "boolean",
+    showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+    advanced: !0
+  }, {
+    name: "successMessage",
+    type: "uiBlocks",
+    hideFromUI: !0,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Thanks!</span>"
+        }
+      }
+    }]
+  }, {
+    name: "validate",
+    type: "boolean",
+    defaultValue: !0,
+    advanced: !0
+  }, {
+    name: "errorMessagePath",
+    type: "text",
+    advanced: !0,
+    helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
+  }, {
+    name: "errorMessage",
+    type: "uiBlocks",
+    hideFromUI: !0,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      bindings: {
+        "component.options.text": "state.formErrorMessage || block.component.options.text"
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Form submission error :( Please check your answers and try again</span>"
+        }
+      }
+    }]
+  }, {
+    name: "sendingMessage",
+    type: "uiBlocks",
+    hideFromUI: !0,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Sending...</span>"
+        }
+      }
+    }]
+  }, {
+    name: "customHeaders",
+    type: "map",
+    valueType: {
+      type: "string"
+    },
+    advanced: !0,
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }],
+  noWrap: !0,
+  canHaveChildren: !0,
+  defaultChildren: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your name</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "name",
+        placeholder: "Jane Doe"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your email</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "email",
+        placeholder: "jane@doe.com"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:SubmitButton",
+      options: {
+        text: "Submit"
+      }
+    }
+  }]
+}, validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"], getEnv = () => {
+  const e = process.env.NODE_ENV || "production";
+  return validEnvList.includes(e) ? e : "production";
+}, get = (e, t, n) => {
+  const o = String.prototype.split.call(t, /[,[\].]+?/).filter(Boolean).reduce((r, s) => r != null ? r[s] : r, e);
+  return o === void 0 || o === e ? n : o;
+}, _sfc_main$b = defineComponent({
+  name: "builder-form-component",
+  components: { Block, Blocks },
+  props: [
+    "js",
+    "builderContext",
+    "previewState",
+    "sendWithJs",
+    "sendSubmissionsTo",
+    "action",
+    "customHeaders",
+    "contentType",
+    "sendSubmissionsToEmail",
+    "name",
+    "method",
+    "errorMessagePath",
+    "resetFormOnSubmit",
+    "successUrl",
+    "validate",
+    "attributes",
+    "builderBlock",
+    "builderComponents",
+    "builderLinkComponent",
+    "errorMessage",
+    "sendingMessage",
+    "successMessage"
+  ],
+  data() {
+    return {
+      formState: "unsubmitted",
+      responseData: null,
+      formErrorMessage: "",
+      filterAttrs
+    };
+  },
+  methods: {
+    mergeNewRootState(e) {
+      var n, o;
+      const t = {
+        ...this.builderContext.rootState,
+        ...e
+      };
+      this.builderContext.rootSetState ? (o = (n = this.builderContext).rootSetState) == null || o.call(n, t) : this.builderContext.rootState = t;
+    },
+    submissionState() {
+      return isEditing() && this.previewState || this.formState;
+    },
+    onSubmit(e) {
+      var n;
+      const t = this.sendWithJs || this.sendSubmissionsTo === "email";
+      if (this.sendSubmissionsTo === "zapier")
+        e.preventDefault();
+      else if (t) {
+        if (!(this.action || this.sendSubmissionsTo === "email")) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        const o = e.currentTarget, r = this.customHeaders || {};
+        let s;
+        const i = new FormData(o), a = Array.from(
+          e.currentTarget.querySelectorAll("input,select,textarea")
+        ).filter((d) => !!d.name).map((d) => {
+          let u;
+          const f = d.name;
+          if (d instanceof HTMLInputElement)
+            if (d.type === "radio") {
+              if (d.checked)
+                return u = d.name, {
+                  key: f,
+                  value: u
+                };
+            } else if (d.type === "checkbox")
+              u = d.checked;
+            else if (d.type === "number" || d.type === "range") {
+              const m = d.valueAsNumber;
+              isNaN(m) || (u = m);
+            } else
+              d.type === "file" ? u = d.files : u = d.value;
+          else
+            u = d.value;
+          return {
+            key: f,
+            value: u
+          };
+        });
+        let l = this.contentType;
+        if (this.sendSubmissionsTo === "email" && (l = "multipart/form-data"), Array.from(a).forEach(({ value: d }) => {
+          (d instanceof File || Array.isArray(d) && d[0] instanceof File || d instanceof FileList) && (l = "multipart/form-data");
+        }), l !== "application/json")
+          s = i;
+        else {
+          const d = {};
+          Array.from(a).forEach(({ value: u, key: f }) => {
+            set(d, f, u);
+          }), s = JSON.stringify(d);
+        }
+        l && l !== "multipart/form-data" && (t && ((n = this.action) != null && n.includes("zapier.com")) || (r["content-type"] = l));
+        const c = new CustomEvent("presubmit", {
+          detail: {
+            body: s
+          }
+        });
+        if (this.$refs.formRef && (this.$refs.formRef.dispatchEvent(c), c.defaultPrevented))
+          return;
+        this.formState = "sending";
+        const p = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${this.builderContext.apiKey}&to=${btoa(
+          this.sendSubmissionsToEmail || ""
+        )}&name=${encodeURIComponent(this.name || "")}`;
+        fetch(
+          this.sendSubmissionsTo === "email" ? p : this.action,
+          {
+            body: s,
+            headers: r,
+            method: this.method || "post"
+          }
+        ).then(
+          async (d) => {
+            let u;
+            const f = d.headers.get("content-type");
+            if (f && f.indexOf("application/json") !== -1 ? u = await d.json() : u = await d.text(), !d.ok && this.errorMessagePath) {
+              let m = get(u, this.errorMessagePath);
+              m && (typeof m != "string" && (m = JSON.stringify(m)), this.formErrorMessage = m, this.mergeNewRootState({
+                formErrorMessage: m
+              }));
+            }
+            if (this.responseData = u, this.formState = d.ok ? "success" : "error", d.ok) {
+              const m = new CustomEvent("submit:success", {
+                detail: {
+                  res: d,
+                  body: u
+                }
+              });
+              if (this.$refs.formRef) {
+                if (this.$refs.formRef.dispatchEvent(m), m.defaultPrevented)
+                  return;
+                this.resetFormOnSubmit !== !1 && this.$refs.formRef.reset();
+              }
+              if (this.successUrl)
+                if (this.$refs.formRef) {
+                  const g = new CustomEvent("route", {
+                    detail: {
+                      url: this.successUrl
+                    }
+                  });
+                  this.$refs.formRef.dispatchEvent(g), g.defaultPrevented || (location.href = this.successUrl);
+                } else
+                  location.href = this.successUrl;
+            }
+          },
+          (d) => {
+            const u = new CustomEvent("submit:error", {
+              detail: {
+                error: d
+              }
+            });
+            this.$refs.formRef && (this.$refs.formRef.dispatchEvent(u), u.defaultPrevented) || (this.responseData = d, this.formState = "error");
+          }
+        );
+      }
+    }
+  }
+}), _hoisted_1$4 = ["validate", "action", "method", "name"], _hoisted_2$2 = {
+  key: 3,
+  class: "builder-form-error-text pre-tqyw9m0iue"
+};
+function _sfc_render$a(e, t, n, o, r, s) {
+  var l;
+  const i = resolveComponent("block"), a = resolveComponent("blocks");
+  return openBlock(), createElementBlock("form", mergeProps({
+    validate: e.validate,
+    ref: "formRef",
+    action: !e.sendWithJs && e.action,
+    method: e.method,
+    name: e.name,
+    onSubmit: t[0] || (t[0] = (c) => e.onSubmit(c))
+  }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), [
+    e.builderBlock && e.builderBlock.children ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList((l = e.builderBlock) == null ? void 0 : l.children, (c, p) => (openBlock(), createBlock(i, {
+      key: `form-block-${e.idx}`,
+      block: c,
+      context: e.builderContext,
+      registeredComponents: e.builderComponents,
+      linkComponent: e.builderLinkComponent
+    }, null, 8, ["block", "context", "registeredComponents", "linkComponent"]))), 128)) : createCommentVNode("", !0),
+    e.submissionState() === "error" ? (openBlock(), createBlock(a, {
+      key: 1,
+      path: "errorMessage",
+      blocks: e.errorMessage,
+      context: e.builderContext
+    }, null, 8, ["blocks", "context"])) : createCommentVNode("", !0),
+    e.submissionState() === "sending" ? (openBlock(), createBlock(a, {
+      key: 2,
+      path: "sendingMessage",
+      blocks: e.sendingMessage,
+      context: e.builderContext
+    }, null, 8, ["blocks", "context"])) : createCommentVNode("", !0),
+    e.submissionState() === "error" && e.responseData ? (openBlock(), createElementBlock("pre", _hoisted_2$2, "         " + toDisplayString(JSON.stringify(e.responseData, null, 2)) + `
+       `, 1)) : createCommentVNode("", !0),
+    e.submissionState() === "success" ? (openBlock(), createBlock(a, {
+      key: 4,
+      path: "successMessage",
+      blocks: e.successMessage,
+      context: e.builderContext
+    }, null, 8, ["blocks", "context"])) : createCommentVNode("", !0)
+  ], 16, _hoisted_1$4);
+}
+const Form = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a], ["__scopeId", "data-v-e7803f50"]]), componentInfo$4 = {
+  name: "Form:Input",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
+  inputs: [
+    {
+      name: "type",
+      type: "text",
+      enum: ["text", "number", "email", "url", "checkbox", "radio", "range", "date", "datetime-local", "search", "tel", "time", "file", "month", "week", "password", "color", "hidden"],
+      defaultValue: "text"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: !0,
+      helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there",
+      helperText: "Text to display when there is no value"
+    },
+    // TODO: handle value vs default value automatically like ng-model
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "value",
+      type: "string",
+      advanced: !0
+    },
+    {
+      name: "required",
+      type: "boolean",
+      helperText: "Is this input required to be filled out to submit a form",
+      defaultValue: !1
+    }
+  ],
+  noWrap: !0,
+  static: !0,
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  }
+}, _sfc_main$a = defineComponent({
+  name: "builder-form-input-component",
+  props: [
+    "attributes",
+    "defaultValue",
+    "placeholder",
+    "type",
+    "name",
+    "value",
+    "required"
+  ],
+  data() {
+    return { isEditing, filterAttrs };
+  }
+}), _hoisted_1$3 = ["placeholder", "type", "name", "value", "defaultValue", "required"];
+function _sfc_render$9(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("input", mergeProps({
+    key: e.isEditing() && e.defaultValue ? e.defaultValue : "default-key",
+    placeholder: e.placeholder,
+    type: e.type,
+    name: e.name,
+    value: e.value,
+    defaultValue: e.defaultValue,
+    required: e.required
+  }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), null, 16, _hoisted_1$3);
+}
+const FormInput = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9]]), componentInfo$3 = {
+  name: "Form:Select",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
+  defaultStyles: {
+    alignSelf: "flex-start"
+  },
+  inputs: [{
+    name: "options",
+    type: "list",
+    required: !0,
+    subFields: [{
+      name: "value",
+      type: "text",
+      required: !0
+    }, {
+      name: "name",
+      type: "text"
+    }],
+    defaultValue: [{
+      value: "option 1"
+    }, {
+      value: "option 2"
+    }]
+  }, {
+    name: "name",
+    type: "string",
+    required: !0,
+    helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: "defaultValue",
+    type: "string"
+  }, {
+    name: "value",
+    type: "string",
+    advanced: !0
+  }, {
+    name: "required",
+    type: "boolean",
+    defaultValue: !1
+  }],
+  static: !0,
+  noWrap: !0
+}, _sfc_main$9 = defineComponent({
+  name: "builder-select-component",
+  props: ["attributes", "value", "defaultValue", "name", "options"],
+  data() {
+    return { isEditing, filterAttrs };
+  }
+}), _hoisted_1$2 = ["value", "defaultValue", "name"], _hoisted_2$1 = ["value"];
+function _sfc_render$8(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("select", mergeProps({
+    value: e.value,
+    key: e.isEditing() && e.defaultValue ? e.defaultValue : "default-key",
+    defaultValue: e.defaultValue,
+    name: e.name
+  }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), [
+    (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.options, (i, a) => (openBlock(), createElementBlock("option", {
+      key: a,
+      value: i.value
+    }, toDisplayString(i.name || i.value), 9, _hoisted_2$1))), 128))
+  ], 16, _hoisted_1$2);
+}
+const FormSelect = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8]]), componentInfo$2 = {
+  name: "Form:SubmitButton",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#3898EC",
+    color: "white",
+    borderRadius: "4px",
+    cursor: "pointer"
+  },
+  inputs: [{
+    name: "text",
+    type: "text",
+    defaultValue: "Click me"
+  }],
+  static: !0,
+  noWrap: !0
+  // TODO: optional children? maybe as optional form input
+  // that only shows if advanced setting is flipped
+  // TODO: defaultChildren
+  // canHaveChildren: true,
+}, _sfc_main$8 = defineComponent({
+  name: "builder-submit-button",
+  props: ["attributes", "text"],
+  data() {
+    return { filterAttrs };
+  }
+});
+function _sfc_render$7(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("button", mergeProps({ type: "submit" }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), toDisplayString(e.text), 17);
+}
+const FormSubmitButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]), componentInfo$1 = {
+  // friendlyName?
+  name: "Raw:Img",
+  hideFromInsertMenu: !0,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
+  inputs: [{
+    name: "image",
+    bubble: !0,
+    type: "file",
+    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    required: !0
+  }],
+  noWrap: !0,
+  static: !0
+}, _sfc_main$7 = defineComponent({
+  name: "builder-img-component",
+  props: [
+    "backgroundSize",
+    "backgroundPosition",
+    "imgSrc",
+    "altText",
+    "image",
+    "attributes"
+  ],
+  data() {
+    return { isEditing, filterAttrs };
+  }
+}), _hoisted_1$1 = ["alt", "src"];
+function _sfc_render$6(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("img", mergeProps({
+    style: {
+      objectFit: e.backgroundSize || "cover",
+      objectPosition: e.backgroundPosition || "center"
+    },
+    key: e.isEditing() && e.imgSrc || "default-key",
+    alt: e.altText,
+    src: e.imgSrc || e.image
+  }, e.filterAttrs(e.attributes, "v-on:", !1), toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), null, 16, _hoisted_1$1);
+}
+const Img = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]), componentInfo = {
+  name: "Video",
+  canHaveChildren: !0,
+  defaultStyles: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+  inputs: [{
+    name: "video",
+    type: "file",
+    allowedFileTypes: ["mp4"],
+    bubble: !0,
+    defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+    required: !0
+  }, {
+    name: "posterImage",
+    type: "file",
+    allowedFileTypes: ["jpeg", "png"],
+    helperText: "Image to show before the video plays"
+  }, {
+    name: "autoPlay",
+    type: "boolean",
+    defaultValue: !0
+  }, {
+    name: "controls",
+    type: "boolean",
+    defaultValue: !1
+  }, {
+    name: "muted",
+    type: "boolean",
+    defaultValue: !0
+  }, {
+    name: "loop",
+    type: "boolean",
+    defaultValue: !0
+  }, {
+    name: "playsInline",
+    type: "boolean",
+    defaultValue: !0
+  }, {
+    name: "fit",
+    type: "text",
+    defaultValue: "cover",
+    enum: ["contain", "cover", "fill", "auto"]
+  }, {
+    name: "preload",
+    type: "text",
+    defaultValue: "metadata",
+    enum: ["auto", "metadata", "none"]
+  }, {
+    name: "fitContent",
+    type: "boolean",
+    helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
     defaultValue: !0,
     advanced: !0
   }, {
@@ -2216,7 +2845,7 @@ const Text = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]
   }
 };
 function _sfc_render$5(e, t, n, o, r, s) {
-  var i, a, l, c, d, u, p;
+  var i, a, l, c, p, d, u;
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createElementVNode("video", mergeProps({
       class: "builder-video",
@@ -2227,6 +2856,8 @@ function _sfc_render$5(e, t, n, o, r, s) {
         ...(i = e.attributes) == null ? void 0 : i.style,
         objectFit: e.fit,
         objectPosition: e.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
         zIndex: 2,
         borderRadius: "1px",
         ...e.aspectRatio ? {
@@ -2236,13 +2867,13 @@ function _sfc_render$5(e, t, n, o, r, s) {
       src: e.video || "no-src",
       poster: e.posterImage
     }, e.spreadProps), [
-      e.lazyLoad ? createCommentVNode("v-if", !0) : (openBlock(), createElementBlock("source", {
+      e.lazyLoad ? createCommentVNode("", !0) : (openBlock(), createElementBlock("source", {
         key: 0,
         type: "video/mp4",
         src: e.video
       }, null, 8, _hoisted_3))
     ], 16, _hoisted_2),
-    e.aspectRatio && !(e.fitContent && ((l = (a = e.builderBlock) == null ? void 0 : a.children) == null ? void 0 : l.length)) ? (openBlock(), createElementBlock("div", {
+    e.aspectRatio && !(e.fitContent && ((l = (a = e.builderBlock) == null ? void 0 : a.children) != null && l.length)) ? (openBlock(), createElementBlock("div", {
       key: 0,
       style: normalizeStyle({
         width: "100%",
@@ -2250,52 +2881,64 @@ function _sfc_render$5(e, t, n, o, r, s) {
         pointerEvents: "none",
         fontSize: "0px"
       })
-    }, null, 4)) : createCommentVNode("v-if", !0),
-    ((d = (c = e.builderBlock) == null ? void 0 : c.children) == null ? void 0 : d.length) && e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_4, [
+    }, null, 4)) : createCommentVNode("", !0),
+    (p = (c = e.builderBlock) == null ? void 0 : c.children) != null && p.length && e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_4, [
       renderSlot(e.$slots, "default")
-    ])) : createCommentVNode("v-if", !0),
-    ((p = (u = e.builderBlock) == null ? void 0 : u.children) == null ? void 0 : p.length) && !e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_5, [
+    ])) : createCommentVNode("", !0),
+    (u = (d = e.builderBlock) == null ? void 0 : d.children) != null && u.length && !e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_5, [
       renderSlot(e.$slots, "default")
-    ])) : createCommentVNode("v-if", !0)
+    ])) : createCommentVNode("", !0)
   ]);
 }
-const Video = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/video/video.vue"]]), getDefaultRegisteredComponents = () => [{
-  component: Button,
-  ...componentInfo$b
-}, {
-  component: Columns,
-  ...componentInfo$a
-}, {
+const Video = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5]]), getExtraComponents = () => [{
   component: customCode,
-  ...componentInfo$9
-}, {
-  component: embed,
-  ...componentInfo$8
-}, {
-  component: Fragment,
   ...componentInfo$7
 }, {
-  component: Image,
+  component: embed,
   ...componentInfo$6
 }, {
-  component: Img,
+  component: Form,
   ...componentInfo$5
 }, {
-  component: Section,
+  component: FormInput,
   ...componentInfo$4
 }, {
-  component: Symbol$1,
+  component: FormSubmitButton,
   ...componentInfo$2
 }, {
-  component: Text,
+  component: FormSelect,
+  ...componentInfo$3
+}, {
+  component: Img,
   ...componentInfo$1
 }, {
   component: Video,
   ...componentInfo
+}], getDefaultRegisteredComponents = () => [{
+  component: Button,
+  ...componentInfo$f
+}, {
+  component: Columns,
+  ...componentInfo$e
+}, {
+  component: Fragment,
+  ...componentInfo$d
+}, {
+  component: Image,
+  ...componentInfo$c
+}, {
+  component: Section,
+  ...componentInfo$b
 }, {
   component: Slot,
-  ...componentInfo$3
-}], components = [], createRegisterComponentMessage = (e) => ({
+  ...componentInfo$a
+}, {
+  component: Symbol$1,
+  ...componentInfo$9
+}, {
+  component: Text,
+  ...componentInfo$8
+}, ...getExtraComponents()], components = [], createRegisterComponentMessage = (e) => ({
   type: "builder.registerComponent",
   data: serializeComponentInfo(e)
 }), serializeFn = (e) => {
@@ -2424,7 +3067,7 @@ const Video = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5
   },
   name: "inlined-script",
   props: ["scriptStr", "id"]
-}), InlinedScript = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/inlined-script.vue"]]);
+});
 function getGlobalThis() {
   return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : globalThis;
 }
@@ -2481,42 +3124,42 @@ const DEFAULT_API_VERSION = "v3", BUILDER_SEARCHPARAMS_PREFIX = "builder.", BUIL
     includeRefs: a = !0,
     enrich: l,
     locale: c,
-    apiVersion: d = DEFAULT_API_VERSION,
-    fields: u,
-    omit: p,
-    offset: m,
-    cacheSeconds: f,
-    staleCacheSeconds: b,
-    sort: y,
-    includeUnpublished: S
+    apiVersion: p = DEFAULT_API_VERSION,
+    fields: d,
+    omit: u,
+    offset: f,
+    cacheSeconds: m,
+    staleCacheSeconds: g,
+    sort: k,
+    includeUnpublished: C
   } = e;
   if (!i)
     throw new Error("Missing API key");
-  if (!["v3"].includes(d))
-    throw new Error(`Invalid apiVersion: expected 'v3', received '${d}'`);
+  if (!["v3"].includes(p))
+    throw new Error(`Invalid apiVersion: expected 'v3', received '${p}'`);
   (e.limit === void 0 || e.limit > 1) && !("noTraverse" in e) && (t = !0);
-  const g = new URL(`https://cdn.builder.io/api/${d}/content/${s}?apiKey=${i}&limit=${n}&noTraverse=${t}&includeRefs=${a}${c ? `&locale=${c}` : ""}${l ? `&enrich=${l}` : ""}`);
-  if (g.searchParams.set("omit", p || "meta.componentsUsed"), u && g.searchParams.set("fields", u), Number.isFinite(m) && m > -1 && g.searchParams.set("offset", String(Math.floor(m))), typeof S == "boolean" && g.searchParams.set("includeUnpublished", String(S)), f && isPositiveNumber(f) && g.searchParams.set("cacheSeconds", String(f)), b && isPositiveNumber(b) && g.searchParams.set("staleCacheSeconds", String(b)), y) {
-    const k = flatten({
-      sort: y
+  const b = new URL(`https://cdn.builder.io/api/${p}/content/${s}?apiKey=${i}&limit=${n}&noTraverse=${t}&includeRefs=${a}${c ? `&locale=${c}` : ""}${l ? `&enrich=${l}` : ""}`);
+  if (b.searchParams.set("omit", u || "meta.componentsUsed"), d && b.searchParams.set("fields", d), Number.isFinite(f) && f > -1 && b.searchParams.set("offset", String(Math.floor(f))), typeof C == "boolean" && b.searchParams.set("includeUnpublished", String(C)), m && isPositiveNumber(m) && b.searchParams.set("cacheSeconds", String(m)), g && isPositiveNumber(g) && b.searchParams.set("staleCacheSeconds", String(g)), k) {
+    const y = flatten({
+      sort: k
     });
-    for (const C in k)
-      g.searchParams.set(C, JSON.stringify(k[C]));
+    for (const S in y)
+      b.searchParams.set(S, JSON.stringify(y[S]));
   }
   const I = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(e.options || {})
   }, v = flatten(I);
-  for (const k in v)
-    g.searchParams.set(k, String(v[k]));
-  if (o && g.searchParams.set("userAttributes", JSON.stringify(o)), r) {
-    const k = flatten({
+  for (const y in v)
+    b.searchParams.set(y, String(v[y]));
+  if (o && b.searchParams.set("userAttributes", JSON.stringify(o)), r) {
+    const y = flatten({
       query: r
     });
-    for (const C in k)
-      g.searchParams.set(C, JSON.stringify(k[C]));
+    for (const S in y)
+      b.searchParams.set(S, JSON.stringify(y[S]));
   }
-  return g;
+  return b;
 }, checkContentHasResults = (e) => "results" in e;
 async function fetchOneEntry(e) {
   const t = await fetchEntries({
@@ -2559,7 +3202,7 @@ async function fetchEntries(e) {
 }
 const getAllContent = fetchEntries;
 function isPreviewing() {
-  return !isBrowser() || isEditing() ? !1 : Boolean(location.search.indexOf("builder.preview=") !== -1);
+  return !isBrowser() || isEditing() ? !1 : location.search.indexOf("builder.preview=") !== -1;
 }
 function uuidv4() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
@@ -2685,7 +3328,7 @@ async function _track(e) {
     logger.error("Missing API key for track call. Please provide your API key.");
     return;
   }
-  if (!!e.canTrack && !isEditing() && !!(isBrowser() || TARGET === "reactNative"))
+  if (e.canTrack && !isEditing() && (isBrowser() || TARGET === "reactNative"))
     return fetch("https://cdn.builder.io/api/v1/track", {
       method: "POST",
       body: JSON.stringify({
@@ -2719,7 +3362,7 @@ const findParentElement = (e, t, n = !0) => {
   return null;
 }, findBuilderParent = (e) => findParentElement(e, (t) => {
   const n = t.getAttribute("builder-id") || t.id;
-  return Boolean((n == null ? void 0 : n.indexOf("builder-")) === 0);
+  return (n == null ? void 0 : n.indexOf("builder-")) === 0;
 }), computeOffset = ({
   event: e,
   target: t
@@ -2750,7 +3393,7 @@ function isFromTrustedHost(e, t) {
   const n = new URL(t.origin), o = n.hostname;
   return (e || DEFAULT_TRUSTED_HOSTS).findIndex((r) => r.startsWith("*.") ? o.endsWith(r.slice(1)) : r === o) > -1;
 }
-const SDK_VERSION = "0.13.1", registry = {};
+const SDK_VERSION = "0.13.3", registry = {};
 function register(e, t) {
   let n = registry[e];
   if (n || (n = registry[e] = []), n.push(t), isBrowser()) {
@@ -2800,6 +3443,8 @@ const setupBrowserForEditing = (e = {}) => {
       target: TARGET,
       version: SDK_VERSION,
       supportsPatchUpdates: !1,
+      // Supports builder-model="..." attribute which is needed to
+      // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0
     }
@@ -2815,35 +3460,35 @@ const setupBrowserForEditing = (e = {}) => {
     const {
       data: r
     } = o;
-    if (!!(r != null && r.type))
+    if (r != null && r.type)
       switch (r.type) {
         case "builder.evaluate": {
-          const a = r.data.text, l = r.data.arguments || [], c = r.data.id, d = new Function(a);
-          let u, p = null;
+          const a = r.data.text, l = r.data.arguments || [], c = r.data.id, p = new Function(a);
+          let d, u = null;
           try {
-            u = d.apply(null, l);
-          } catch (m) {
-            p = m;
+            d = p.apply(null, l);
+          } catch (f) {
+            u = f;
           }
-          p ? (s = window.parent) == null || s.postMessage({
+          u ? (s = window.parent) == null || s.postMessage({
             type: "builder.evaluateError",
             data: {
               id: c,
-              error: p.message
+              error: u.message
             }
-          }, "*") : u && typeof u.then == "function" ? u.then((m) => {
-            var f;
-            (f = window.parent) == null || f.postMessage({
+          }, "*") : d && typeof d.then == "function" ? d.then((f) => {
+            var m;
+            (m = window.parent) == null || m.postMessage({
               type: "builder.evaluateResult",
               data: {
                 id: c,
-                result: m
+                result: f
               }
             }, "*");
           }).catch(console.error) : (i = window.parent) == null || i.postMessage({
             type: "builder.evaluateResult",
             data: {
-              result: u,
+              result: d,
               id: c
             }
           }, "*");
@@ -3146,14 +3791,14 @@ const setupBrowserForEditing = (e = {}) => {
       });
     },
     runHttpRequests() {
-      var t, n, o;
-      const e = (o = (n = (t = this.builderContextSignal.content) == null ? void 0 : t.data) == null ? void 0 : n.httpRequests) != null ? o : {};
-      Object.entries(e).forEach(([r, s]) => {
-        if (s && (!this.httpReqsData[r] || isEditing())) {
-          const i = this.evalExpression(s);
+      var t, n;
+      const e = ((n = (t = this.builderContextSignal.content) == null ? void 0 : t.data) == null ? void 0 : n.httpRequests) ?? {};
+      Object.entries(e).forEach(([o, r]) => {
+        if (r && (!this.httpReqsData[o] || isEditing())) {
+          const s = this.evalExpression(r);
           this.handleRequest({
-            url: i,
-            key: r
+            url: s,
+            key: o
           });
         }
       });
@@ -3234,11 +3879,11 @@ function _sfc_render$4(e, t, n, o, r, s) {
       renderSlot(e.$slots, "default")
     ]),
     _: 3
-  }, 16, ["onClick", "builder-content-id", "builder-model", "class", "onIniteditingbldr", "onInitpreviewingbldr"])) : createCommentVNode("v-if", !0);
+  }, 16, ["onClick", "builder-content-id", "builder-model", "class", "onIniteditingbldr", "onInitpreviewingbldr"])) : createCommentVNode("", !0);
 }
-const EnableEditor = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/content/components/enable-editor.vue"]]), getCssFromFont = (e) => {
-  var s, i;
-  const t = e.family + (e.kind && !e.kind.includes("#") ? ", " + e.kind : ""), n = t.split(",")[0], o = (i = e.fileUrl) != null ? i : (s = e == null ? void 0 : e.files) == null ? void 0 : s.regular;
+const EnableEditor = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]), getCssFromFont = (e) => {
+  var s;
+  const t = e.family + (e.kind && !e.kind.includes("#") ? ", " + e.kind : ""), n = t.split(",")[0], o = e.fileUrl ?? ((s = e == null ? void 0 : e.files) == null ? void 0 : s.regular);
   let r = "";
   if (o && t && n && (r += `
 @font-face {
@@ -3248,16 +3893,16 @@ font-display: fallback;
 font-weight: 400;
 }
       `.trim()), e.files)
-    for (const a in e.files) {
-      if (!(String(Number(a)) === a))
+    for (const i in e.files) {
+      if (!(String(Number(i)) === i))
         continue;
-      const c = e.files[a];
-      c && c !== o && (r += `
+      const l = e.files[i];
+      l && l !== o && (r += `
 @font-face {
 font-family: "${t}";
-src: url('${c}') format('woff2');
+src: url('${l}') format('woff2');
 font-display: fallback;
-font-weight: ${a};
+font-weight: ${i};
 }
         `.trim());
     }
@@ -3272,7 +3917,7 @@ font-weight: ${a};
   contentId: t
 }) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "", _sfc_main$3 = defineComponent({
   name: "content-styles",
-  components: { InlinedStyles },
+  components: { InlinedStyles: _sfc_main$k },
   props: ["cssCode", "contentId", "customFonts"],
   data() {
     return {
@@ -3309,7 +3954,7 @@ function _sfc_render$3(e, t, n, o, r, s) {
   const i = resolveComponent("inlined-styles");
   return openBlock(), createBlock(i, { styles: e.injectedStyles }, null, 8, ["styles"]);
 }
-const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/content/components/styles.vue"]]), getRootStateInitialValue = ({
+const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]), getRootStateInitialValue = ({
   content: e,
   data: t,
   locale: n
@@ -3340,7 +3985,7 @@ const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_
   name: "content-component",
   components: {
     EnableEditor,
-    InlinedScript,
+    InlinedScript: _sfc_main$5,
     ContentStyles,
     Blocks
   },
@@ -3369,11 +4014,18 @@ const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_
     var e, t;
     return {
       scriptStr: getUpdateVariantVisibilityScript({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
         variationId: (e = this.content) == null ? void 0 : e.testVariationId,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
         contentId: (t = this.content) == null ? void 0 : t.id
       }),
       registeredComponents: [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
         ...components,
         ...this.customComponents || []
       ].reduce(
@@ -3403,6 +4055,11 @@ const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_
         apiVersion: this.apiVersion,
         componentInfos: [
           ...getDefaultRegisteredComponents(),
+          // While this `components` object is deprecated, we must maintain support for it.
+          // Since users are able to override our default components, we need to make sure that we do not break such
+          // existing usage.
+          // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+          // which is the new standard way of providing custom components, and must therefore take precedence.
           ...components,
           ...this.customComponents || []
         ].reduce(
@@ -3453,20 +4110,20 @@ function _sfc_render$2(e, t, n, o, r, s) {
     trustedHosts: e.trustedHosts
   }, {}), {
     default: withCtx(() => {
-      var d, u, p, m, f, b, y;
+      var p, d, u, f, m, g, k;
       return [
         e.isSsrAbTest ? (openBlock(), createBlock(i, {
           key: 0,
           scriptStr: e.scriptStr
-        }, null, 8, ["scriptStr"])) : createCommentVNode("v-if", !0),
+        }, null, 8, ["scriptStr"])) : createCommentVNode("", !0),
         e.TARGET !== "reactNative" ? (openBlock(), createBlock(a, {
           key: 1,
-          contentId: (d = e.builderContextSignal.content) == null ? void 0 : d.id,
-          cssCode: (p = (u = e.builderContextSignal.content) == null ? void 0 : u.data) == null ? void 0 : p.cssCode,
-          customFonts: (f = (m = e.builderContextSignal.content) == null ? void 0 : m.data) == null ? void 0 : f.customFonts
-        }, null, 8, ["contentId", "cssCode", "customFonts"])) : createCommentVNode("v-if", !0),
+          contentId: (p = e.builderContextSignal.content) == null ? void 0 : p.id,
+          cssCode: (u = (d = e.builderContextSignal.content) == null ? void 0 : d.data) == null ? void 0 : u.cssCode,
+          customFonts: (m = (f = e.builderContextSignal.content) == null ? void 0 : f.data) == null ? void 0 : m.customFonts
+        }, null, 8, ["contentId", "cssCode", "customFonts"])) : createCommentVNode("", !0),
         createVNode(l, {
-          blocks: (y = (b = e.builderContextSignal.content) == null ? void 0 : b.data) == null ? void 0 : y.blocks,
+          blocks: (k = (g = e.builderContextSignal.content) == null ? void 0 : g.data) == null ? void 0 : k.blocks,
           context: e.builderContextSignal,
           registeredComponents: e.registeredComponents,
           linkComponent: e.linkComponent
@@ -3476,11 +4133,11 @@ function _sfc_render$2(e, t, n, o, r, s) {
     _: 1
   }, 16, ["content", "data", "model", "context", "apiKey", "canTrack", "locale", "includeRefs", "enrich", "showContent", "builderContextSignal", "contentWrapper", "contentWrapperProps", "linkComponent", "trustedHosts"]);
 }
-const ContentComponent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/content/content.vue"]]), _sfc_main$1 = defineComponent({
+const ContentComponent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]), _sfc_main$1 = defineComponent({
   name: "content-variants",
   components: {
-    InlinedScript,
-    InlinedStyles,
+    InlinedScript: _sfc_main$5,
+    InlinedStyles: _sfc_main$k,
     ContentComponent
   },
   props: [
@@ -3550,16 +4207,16 @@ function _sfc_render$1(e, t, n, o, r, s) {
     !e.__isNestedRender && e.TARGET !== "reactNative" ? (openBlock(), createBlock(i, {
       key: 0,
       scriptStr: e.getScriptString()
-    }, null, 8, ["scriptStr"])) : createCommentVNode("v-if", !0),
+    }, null, 8, ["scriptStr"])) : createCommentVNode("", !0),
     e.shouldRenderVariants ? (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
       createVNode(a, {
         id: `variants-styles-${(c = e.content) == null ? void 0 : c.id}`,
         styles: e.hideVariantsStyleString
       }, null, 8, ["id", "styles"]),
       createVNode(i, { scriptStr: e.updateCookieAndStylesScriptStr }, null, 8, ["scriptStr"]),
-      (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.getVariants(e.content), (d, u) => (openBlock(), createBlock(l, {
-        key: d.testVariationId,
-        content: d,
+      (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.getVariants(e.content), (p, d) => (openBlock(), createBlock(l, {
+        key: p.testVariationId,
+        content: p,
         showContent: !1,
         model: e.model,
         data: e.data,
@@ -3579,7 +4236,7 @@ function _sfc_render$1(e, t, n, o, r, s) {
         contentWrapperProps: e.contentWrapperProps,
         trustedHosts: e.trustedHosts
       }, null, 8, ["content", "model", "data", "context", "apiKey", "apiVersion", "customComponents", "linkComponent", "canTrack", "locale", "includeRefs", "enrich", "isSsrAbTest", "blocksWrapper", "blocksWrapperProps", "contentWrapper", "contentWrapperProps", "trustedHosts"]))), 128))
-    ], 64)) : createCommentVNode("v-if", !0),
+    ], 64)) : createCommentVNode("", !0),
     createVNode(l, mergeProps({
       content: e.defaultContent,
       showContent: !0,
@@ -3605,11 +4262,12 @@ function _sfc_render$1(e, t, n, o, r, s) {
     }), null, 16, ["content", "model", "data", "context", "apiKey", "apiVersion", "customComponents", "linkComponent", "canTrack", "locale", "includeRefs", "enrich", "isSsrAbTest", "blocksWrapper", "blocksWrapperProps", "contentWrapper", "contentWrapperProps", "trustedHosts"])
   ], 64);
 }
-const Content = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/content-variants/content-variants.vue"]]), fetchSymbolContent = async ({
+const Content = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]), fetchSymbolContent = async ({
   builderContextValue: e,
   symbol: t
 }) => {
-  if ((t == null ? void 0 : t.model) && (e == null ? void 0 : e.apiKey))
+  if (t != null && t.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
+  (e != null && e.apiKey))
     return fetchOneEntry({
       model: t.model,
       apiKey: e.apiKey,
@@ -3626,7 +4284,6 @@ const Content = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render
   name: "builder-symbol",
   components: { ContentVariants: Content },
   props: [
-    "js",
     "attributes",
     "symbol",
     "dynamic",
@@ -3657,7 +4314,7 @@ const Content = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render
         this.attributes[getClassPropName()],
         "builder-symbol",
         (e = this.symbol) != null && e.inline ? "builder-inline-symbol" : void 0,
-        ((t = this.symbol) == null ? void 0 : t.dynamic) || this.dynamic ? "builder-dynamic-symbol" : void 0
+        (t = this.symbol) != null && t.dynamic || this.dynamic ? "builder-dynamic-symbol" : void 0
       ].filter(Boolean).join(" ");
     },
     onUpdateHook0() {
@@ -3678,7 +4335,7 @@ const Content = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render
   }
 });
 function _sfc_render(e, t, n, o, r, s) {
-  var a, l, c, d, u;
+  var a, l, c, p, d;
   const i = resolveComponent("content-variants");
   return openBlock(), createElementBlock("div", mergeProps({ class: e.className }, { ...e.filterAttrs(e.attributes, "v-on:", !1) }, toHandlers(e.filterAttrs(e.attributes, "v-on:", !0), !0)), [
     createVNode(i, {
@@ -3693,15 +4350,15 @@ function _sfc_render(e, t, n, o, r, s) {
       data: {
         ...(l = e.symbol) == null ? void 0 : l.data,
         ...e.builderContext.localState,
-        ...(d = (c = e.contentToUse) == null ? void 0 : c.data) == null ? void 0 : d.state
+        ...(p = (c = e.contentToUse) == null ? void 0 : c.data) == null ? void 0 : p.state
       },
-      model: (u = e.symbol) == null ? void 0 : u.model,
+      model: (d = e.symbol) == null ? void 0 : d.model,
       content: e.contentToUse,
       linkComponent: e.builderLinkComponent
     }, null, 8, ["apiVersion", "apiKey", "context", "customComponents", "data", "model", "content", "linkComponent"])
   ], 16);
 }
-const Symbol$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/blocks/symbol/symbol.vue"]]), RenderBlocks = Blocks, RenderContent = Content, settings = {};
+const Symbol$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]), RenderBlocks = Blocks, RenderContent = Content, settings = {};
 function setEditorSettings(e) {
   if (isBrowser()) {
     Object.assign(settings, e);
@@ -3741,28 +4398,28 @@ export {
   Fragment as F,
   getAllContent as G,
   getContent as H,
-  InlinedStyles as I,
+  Image as I,
   dynamicRenderer as J,
   block as K,
   RenderBlocks as R,
   Section as S,
   TARGET as T,
   Video as V,
-  _export_sfc as _,
+  _sfc_main$k as _,
   getSizesForBreakpoints as a,
   createCssClass as b,
   checkIsDefined as c,
   getMaxWidthQueryForSize as d,
-  evaluate as e,
-  getStyle as f,
+  _export_sfc as e,
+  evaluate as f,
   getProcessedBlock as g,
-  getClassPropName as h,
-  BuilderContext as i,
-  Blocks as j,
-  RenderContent as k,
-  Button as l,
-  Columns as m,
-  Image as n,
+  getStyle as h,
+  getClassPropName as i,
+  BuilderContext as j,
+  Blocks as k,
+  RenderContent as l,
+  Button as m,
+  Columns as n,
   Symbol$1 as o,
   Text as p,
   isEditing as q,