@builder.io/sdk-vue 1.0.23 → 1.0.24

package/lib/node/{index-Bc6eCrlT.js → index-212Z9gZB.js}

@@ -14,7 +14,7 @@ function filterAttrs(e = {}, t, n) {
   }
   return o;
 }
-const _sfc_main$p = defineComponent({
+const _sfc_main$r = defineComponent({
   name: "dynamic-renderer",
   props: ["TagName", "attributes", "actionAttributes"],
   data() {
@@ -26,7 +26,7 @@ const _sfc_main$p = defineComponent({
     n[o] = r;
   return n;
 };
-function _sfc_render$n(e, t, n, o, r, s) {
+function _sfc_render$p(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(() => [
@@ -41,7 +41,7 @@ function _sfc_render$n(e, t, n, o, r, s) {
     }, 16))
   ], 64));
 }
-const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$n]]), dynamicRenderer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$p]]), dynamicRenderer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: DynamicRenderer
 }, Symbol.toStringTag, { value: "Module" })), TARGET = "vue", getClassPropName = () => {
@@ -54,9 +54,10 @@ const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sf
     case "vue":
     case "solid":
     case "qwik":
+    case "angular":
       return "class";
   }
-}, _sfc_main$o = defineComponent({
+}, _sfc_main$q = defineComponent({
   name: "builder-button",
   components: { DynamicRenderer },
   props: [
@@ -67,23 +68,28 @@ const DynamicRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sf
     "text"
   ],
   data() {
-    return { getClassPropName, filterAttrs };
+    return { filterAttrs };
+  },
+  methods: {
+    attrs() {
+      return {
+        ...filterAttrs(this.attributes, "v-on:", !1),
+        [getClassPropName()]: `${this.link ? "" : "builder-button"} ${this.attributes[getClassPropName()] || ""}`,
+        ...this.link ? {
+          href: this.link,
+          target: this.openLinkInNewTab ? "_blank" : void 0,
+          role: "link"
+        } : {
+          role: "button"
+        }
+      };
+    }
   }
 });
-function _sfc_render$m(e, t, n, o, r, s) {
+function _sfc_render$o(e, t, n, o, r, s) {
   const i = resolveComponent("dynamic-renderer");
   return openBlock(), createBlock(i, {
-    attributes: {
-      ...e.filterAttrs(e.attributes, "v-on:", !1),
-      [e.getClassPropName()]: `${e.link ? "" : "builder-button"} ${e.attributes[e.getClassPropName()] || ""}`,
-      ...e.link ? {
-        href: e.link,
-        target: e.openLinkInNewTab ? "_blank" : void 0,
-        role: "link"
-      } : {
-        role: "button"
-      }
-    },
+    attributes: e.attrs(),
     TagName: e.link ? e.builderLinkComponent || "a" : "button",
     actionAttributes: e.filterAttrs(e.attributes, "v-on:", !0)
   }, {
@@ -93,7 +99,7 @@ function _sfc_render$m(e, t, n, o, r, s) {
     _: 1
   }, 8, ["attributes", "TagName", "actionAttributes"]);
 }
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$m]]), key$1 = Symbol(), BuilderContext = {
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$o]]), key$1 = Symbol(), BuilderContext = {
   Builder: {
     content: null,
     context: {},
@@ -340,17 +346,17 @@ const getIvm = () => {
   const a = getIvm(), l = fastClone({
     ...i,
     ...r
-  }), c = getFunctionArguments({
+  }), d = getFunctionArguments({
     builder: t,
     context: n,
     event: o,
     state: l
-  }), u = getIsolateContext(), d = u.global;
-  d.setSync("global", d.derefInto()), d.setSync("log", function(...m) {
+  }), p = getIsolateContext(), c = p.global;
+  c.setSync("global", c.derefInto()), c.setSync("log", function(...m) {
     console.log(...m);
-  }), d.setSync(BUILDER_SET_STATE_NAME, function(m, b) {
+  }), c.setSync(BUILDER_SET_STATE_NAME, function(m, b) {
     set(i, m, b), s == null || s(i);
-  }), c.forEach(([m, b]) => {
+  }), d.forEach(([m, b]) => {
     const S = typeof b == "object" ? new a.Reference(
       // workaround: methods with default values for arguments is not being cloned over
       m === "builder" ? {
@@ -358,12 +364,12 @@ const getIvm = () => {
         getUserAttributes: () => b.getUserAttributes()
       } : b
     ) : null;
-    d.setSync(getSyncValName(m), S);
-  }), d.setSync(INJECTED_IVM_GLOBAL, a);
-  const p = processCode({
+    c.setSync(getSyncValName(m), S);
+  }), c.setSync(INJECTED_IVM_GLOBAL, a);
+  const u = processCode({
     code: e,
-    args: c
-  }), f = u.evalSync(p);
+    args: d
+  }), f = p.evalSync(u);
   try {
     return JSON.parse(f);
   } catch {
@@ -424,19 +430,19 @@ function evaluate({
     localState: n
   };
   if (a) {
-    const c = EvalCache.getCacheKey(l), u = EvalCache.getCachedValue(c);
-    if (u)
-      return u.value;
+    const d = EvalCache.getCacheKey(l), p = EvalCache.getCachedValue(d);
+    if (p)
+      return p.value;
   }
   try {
-    const c = chooseBrowserOrServerEval(l);
+    const d = chooseBrowserOrServerEval(l);
     if (a) {
-      const u = EvalCache.getCacheKey(l);
-      EvalCache.setCachedValue(u, c);
+      const p = EvalCache.getCacheKey(l);
+      EvalCache.setCachedValue(p, d);
     }
-    return c;
-  } catch (c) {
-    logger.error("Failed code evaluation: " + c.message, {
+    return d;
+  } catch (d) {
+    logger.error("Failed code evaluation: " + d.message, {
       code: e
     });
     return;
@@ -464,7 +470,7 @@ const evaluateBindings = ({
     }
   };
   for (const a in e.bindings) {
-    const l = e.bindings[a], c = evaluate({
+    const l = e.bindings[a], d = evaluate({
       code: l,
       localState: n,
       rootState: o,
@@ -472,7 +478,7 @@ const evaluateBindings = ({
       context: t,
       enableCache: !0
     });
-    set(i, a, c);
+    set(i, a, d);
   }
   return i;
 };
@@ -499,10 +505,10 @@ function throttle(e, t, n = {}) {
     a = n.leading === !1 ? 0 : Date.now(), i = null, s = e.apply(o, r), i || (o = r = null);
   };
   return function() {
-    const c = Date.now();
-    !a && n.leading === !1 && (a = c);
-    const u = t - (c - a);
-    return o = this, r = arguments, u <= 0 || u > t ? (i && (clearTimeout(i), i = null), a = c, s = e.apply(o, r), i || (o = r = null)) : !i && n.trailing !== !1 && (i = setTimeout(l, u)), s;
+    const d = Date.now();
+    !a && n.leading === !1 && (a = d);
+    const p = t - (d - a);
+    return o = this, r = arguments, p <= 0 || p > t ? (i && (clearTimeout(i), i = null), a = d, s = e.apply(o, r), i || (o = r = null)) : !i && n.trailing !== !1 && (i = setTimeout(l, p)), s;
   };
 }
 function assign(e, ...t) {
@@ -576,15 +582,15 @@ function bindScrollInViewAnimation(e) {
     const i = throttle(s, 200, {
       leading: !1
     });
-    function a(u) {
-      const d = u.getBoundingClientRect(), p = window.innerHeight, m = (e.thresholdPercent || 0) / 100 * p;
-      return d.bottom > m && d.top < p - m;
+    function a(p) {
+      const c = p.getBoundingClientRect(), u = window.innerHeight, m = (e.thresholdPercent || 0) / 100 * u;
+      return c.bottom > m && c.top < u - m;
     }
     const l = e.steps[0].styles;
-    function c() {
+    function d() {
       assign(n.style, l);
     }
-    c(), setTimeout(() => {
+    d(), setTimeout(() => {
       n.style.transition = `all ${e.duration}s ${camelCaseToKebabCase(e.easing)}`, e.delay && (n.style.transitionDelay = e.delay + "s");
     }), document.addEventListener("scroll", i, {
       capture: !0,
@@ -626,6 +632,7 @@ function mapStyleObjToStrIfNeeded(e) {
     case "svelte":
     case "vue":
     case "solid":
+    case "angular":
       return convertStyleMapToCSSArray(e).join(" ");
     case "qwik":
     case "reactNative":
@@ -677,46 +684,52 @@ const getComponent = ({
   if (!Array.isArray(r))
     return;
   const s = n.collection.split(".").pop(), i = n.itemName || (s ? s + "Item" : "item");
-  return r.map((l, c) => ({
+  return r.map((l, d) => ({
     context: {
       ...t,
       localState: {
         ...t.localState,
-        $index: c,
+        $index: d,
         $item: l,
         [i]: l,
-        [`$${i}Index`]: c
+        [`$${i}Index`]: d
       }
     },
     block: o
   }));
-}, BlockStyles = () => import("./block-styles-FYc9WmuJ.js").then((e) => e.default).catch((e) => {
+}, shouldPassLinkComponent = (e) => e && ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(e), shouldPassRegisteredComponents = (e) => e && ["Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(e), BlockStyles = () => import("./block-styles-uqse0ofP.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-NWQoMvJs.js").then((e) => e.default).catch((e) => {
+}), BlockWrapper = () => import("./block-wrapper-ZmFcs2zF.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-jqz9fyL1.js").then((e) => e.default).catch((e) => {
+}), ComponentRef = () => import("./component-ref-abcMmzlU.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-sdoj-hCY.js").then((e) => e.default).catch((e) => {
+}), RepeatedBlock = () => import("./repeated-block-AjtTJdbQ.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$n = defineComponent({
+}), DynamicDiv$1 = () => Promise.resolve().then(() => dynamicDiv).then((e) => e.default).catch((e) => {
+  throw console.error(
+    "Error while attempting to dynamically import component DynamicDiv at ../dynamic-div.vue",
+    e
+  ), e;
+}), _sfc_main$p = defineComponent({
   name: "block",
   components: {
     BlockStyles: defineAsyncComponent(BlockStyles),
     ComponentRef: defineAsyncComponent(ComponentRef),
     RepeatedBlock: defineAsyncComponent(RepeatedBlock),
-    BlockWrapper: defineAsyncComponent(BlockWrapper)
+    BlockWrapper: defineAsyncComponent(BlockWrapper),
+    DynamicDiv: defineAsyncComponent(DynamicDiv$1)
   },
   props: ["block", "context", "registeredComponents", "linkComponent"],
   mounted() {
@@ -769,17 +782,17 @@ const getComponent = ({
       return !((t = this.blockComponent) != null && t.component) && !this.repeatItem ? this.processedBlock.children ?? [] : [];
     },
     componentRefProps() {
-      var e, t, n, o, r, s, i, a, l, c;
+      var e, t, n, o, r;
       return {
         blockChildren: this.processedBlock.children ?? [],
         componentRef: (e = this.blockComponent) == null ? void 0 : e.component,
         componentOptions: {
           ...getBlockComponentOptions(this.processedBlock),
           builderContext: this.context,
-          ...((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" ? {
+          ...shouldPassLinkComponent((t = this.blockComponent) == null ? void 0 : t.name) ? {
             builderLinkComponent: this.linkComponent
           } : {},
-          ...((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" ? {
+          ...shouldPassRegisteredComponents((n = this.blockComponent) == null ? void 0 : n.name) ? {
             builderComponents: this.registeredComponents
           } : {}
         },
@@ -787,21 +800,21 @@ const getComponent = ({
         linkComponent: this.linkComponent,
         registeredComponents: this.registeredComponents,
         builderBlock: this.processedBlock,
-        includeBlockProps: ((l = this.blockComponent) == null ? void 0 : l.noWrap) === !0,
-        isInteractive: !((c = this.blockComponent) != null && c.isRSC)
+        includeBlockProps: ((o = this.blockComponent) == null ? void 0 : o.noWrap) === !0,
+        isInteractive: !((r = this.blockComponent) != null && r.isRSC)
       };
     }
   }
 });
-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"), u = resolveComponent("repeated-block");
+function _sfc_render$n(e, t, n, o, r, s) {
+  var c;
+  const i = resolveComponent("block-styles"), a = resolveComponent("component-ref"), l = resolveComponent("block", !0), d = 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"]),
-    (d = e.blockComponent) != null && d.noWrap ? (openBlock(), createBlock(a, {
+    (c = e.blockComponent) != null && c.noWrap ? (openBlock(), createBlock(a, {
       key: 1,
       componentRef: e.componentRefProps.componentRef,
       componentOptions: e.componentRefProps.componentOptions,
@@ -813,13 +826,13 @@ function _sfc_render$l(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, f) => (openBlock(), createBlock(u, {
+      e.repeatItem ? (openBlock(!0), createElementBlock(Fragment$1, { key: 1 }, renderList(e.repeatItem, (u, f) => (openBlock(), createBlock(p, {
         key: f,
-        repeatContext: p.context,
-        block: p.block,
+        repeatContext: u.context,
+        block: u.block,
         registeredComponents: e.registeredComponents,
         linkComponent: e.linkComponent
-      }, null, 8, ["repeatContext", "block", "registeredComponents", "linkComponent"]))), 128)) : (openBlock(), createBlock(c, {
+      }, null, 8, ["repeatContext", "block", "registeredComponents", "linkComponent"]))), 128)) : (openBlock(), createBlock(d, {
         key: 0,
         Wrapper: e.Tag,
         block: e.processedBlock,
@@ -838,9 +851,9 @@ function _sfc_render$l(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, f) => (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,
             registeredComponents: e.registeredComponents,
             linkComponent: e.linkComponent,
             context: e.context
@@ -851,10 +864,10 @@ function _sfc_render$l(e, t, n, o, r, s) {
     ], 64))
   ], 64)) : createCommentVNode("", !0);
 }
-const Block = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l]]), block = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Block = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$n]]), block = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Block
-}, Symbol.toStringTag, { value: "Module" })), _sfc_main$m = defineComponent({
+}, Symbol.toStringTag, { value: "Module" })), _sfc_main$o = defineComponent({
   name: "builder-blocks-wrapper",
   props: [
     "blocks",
@@ -899,9 +912,9 @@ const Block = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l
     }
   }
 });
-function _sfc_render$k(e, t, n, o, r, s) {
+function _sfc_render$m(e, t, n, o, r, s) {
   return openBlock(), createBlock(resolveDynamicComponent(e.BlocksWrapper), mergeProps({
-    class: e.className + " component-1o2kztlxdt6",
+    class: e.className + " component-178o76acnws",
     "builder-path": e.path,
     "builder-parent-id": e.parent,
     style: e.styleProp,
@@ -915,7 +928,7 @@ function _sfc_render$k(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$m, [["render", _sfc_render$k], ["__scopeId", "data-v-9724ab41"]]), _sfc_main$l = defineComponent({
+const BlocksWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$m], ["__scopeId", "data-v-a5b13ef9"]]), _sfc_main$n = defineComponent({
   name: "builder-blocks",
   components: { BlocksWrapper, Block },
   props: [
@@ -932,8 +945,8 @@ const BlocksWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_
     componentsContext: ComponentsContext.key
   }
 });
-function _sfc_render$j(e, t, n, o, r, s) {
-  var l, c;
+function _sfc_render$l(e, t, n, o, r, s) {
+  var l, d;
   const i = resolveComponent("block"), a = resolveComponent("blocks-wrapper");
   return openBlock(), createBlock(a, {
     blocks: e.blocks,
@@ -941,12 +954,12 @@ function _sfc_render$j(e, t, n, o, r, s) {
     path: e.path,
     styleProp: e.styleProp,
     BlocksWrapper: ((l = e.context) == null ? void 0 : l.BlocksWrapper) || e.builderContext.BlocksWrapper,
-    BlocksWrapperProps: ((c = e.context) == null ? void 0 : c.BlocksWrapperProps) || e.builderContext.BlocksWrapperProps
+    BlocksWrapperProps: ((d = e.context) == null ? void 0 : d.BlocksWrapperProps) || e.builderContext.BlocksWrapperProps
   }, {
     default: withCtx(() => [
-      e.blocks ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList(e.blocks, (u, d) => (openBlock(), createBlock(i, {
-        key: u.id,
-        block: u,
+      e.blocks ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList(e.blocks, (p, c) => (openBlock(), createBlock(i, {
+        key: p.id,
+        block: p,
         linkComponent: e.linkComponent,
         context: e.context || e.builderContext,
         registeredComponents: e.registeredComponents || e.componentsContext.registeredComponents
@@ -955,7 +968,7 @@ function _sfc_render$j(e, t, n, o, r, s) {
     _: 1
   }, 8, ["blocks", "parent", "path", "styleProp", "BlocksWrapper", "BlocksWrapperProps"]);
 }
-const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$j]]), _sfc_main$k = defineComponent({
+const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l]]), _sfc_main$m = defineComponent({
   render() {
     return h("style", {
       innerHTML: this.styles,
@@ -1006,21 +1019,34 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$
     min: s,
     default: s + 1
   }, n;
-}, _sfc_main$j = defineComponent({
+}, getColumnsClass = (e) => `builder-columns ${e}-breakpoints`, _sfc_main$l = defineComponent({
+  name: "dynamic-div",
+  props: []
+});
+function _sfc_render$k(e, t, n, o, r, s) {
+  return openBlock(), createElementBlock("div", null, [
+    renderSlot(e.$slots, "default")
+  ]);
+}
+const DynamicDiv = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$k]]), dynamicDiv = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: DynamicDiv
+}, Symbol.toStringTag, { value: "Module" })), _sfc_main$k = defineComponent({
   name: "builder-columns",
   components: {
-    InlinedStyles: _sfc_main$k,
+    InlinedStyles: _sfc_main$m,
     DynamicRenderer,
-    Blocks
+    Blocks,
+    DynamicDiv
   },
   props: [
     "space",
     "columns",
     "stackColumnsAt",
+    "builderLinkComponent",
     "reverseColumnsWhenStacked",
     "builderContext",
     "builderBlock",
-    "builderLinkComponent",
     "builderComponents"
   ],
   data() {
@@ -1030,49 +1056,13 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$
       stackAt: this.stackColumnsAt || "tablet",
       flexDir: this.stackColumnsAt === "never" ? "row" : this.reverseColumnsWhenStacked ? "column-reverse" : "column",
       TARGET,
-      getClassPropName,
-      mapStyleObjToStrIfNeeded
+      getColumnsClass
     };
   },
-  computed: {
-    columnsCssVars() {
-      return {
-        "--flex-dir": this.flexDir,
-        "--flex-dir-tablet": this.getTabletStyle({
-          stackedStyle: this.flexDir,
-          desktopStyle: "row"
-        })
-      };
-    },
-    columnsStyles() {
-      return `
-        @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
-          .${this.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${this.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-
-        @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
-          .${this.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${this.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-    }
-  },
   methods: {
+    getTagName(e) {
+      return e.link ? this.builderLinkComponent || "a" : "div";
+    },
     getWidth(e) {
       var t;
       return ((t = this.cols[e]) == null ? void 0 : t.width) || 100 / this.cols.length;
@@ -1093,6 +1083,15 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$
     }) {
       return this.stackAt === "never" ? t : e;
     },
+    columnsCssVars() {
+      return {
+        "--flex-dir": this.flexDir,
+        "--flex-dir-tablet": this.getTabletStyle({
+          stackedStyle: this.flexDir,
+          desktopStyle: "row"
+        })
+      };
+    },
     columnCssVars(e) {
       const t = e === 0 ? 0 : this.gutterSize, n = this.getColumnCssWidth(e), o = `${t}px`, r = "100%", s = 0;
       return {
@@ -1126,35 +1125,66 @@ const Blocks = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$
       return getSizesForBreakpoints(
         ((o = (n = this.builderContext.content) == null ? void 0 : n.meta) == null ? void 0 : o.breakpoints) || {}
       )[e].max;
+    },
+    columnsStyles() {
+      return `
+        @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+    },
+    getAttributes(e, t) {
+      return {
+        ...e.link ? {
+          href: e.link
+        } : {},
+        [getClassPropName()]: "builder-column",
+        style: mapStyleObjToStrIfNeeded(this.columnCssVars(t))
+      };
     }
   }
 });
-function _sfc_render$i(e, t, n, o, r, s) {
+function _sfc_render$j(e, t, n, o, r, s) {
+  var d;
   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-2fnk003dqad`,
-    style: e.columnsCssVars
+    class: e.getColumnsClass((d = e.builderBlock) == null ? void 0 : d.id) + " div-t9spj7joih",
+    style: e.columnsCssVars()
   }, {}), [
     e.TARGET !== "reactNative" ? (openBlock(), createBlock(i, {
       key: 0,
       id: "builderio-columns",
-      styles: e.columnsStyles
+      styles: e.columnsStyles()
     }, null, 8, ["styles"])) : createCommentVNode("", !0),
-    (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.columns, (c, u) => (openBlock(), createBlock(l, {
-      key: u,
-      TagName: c.link ? e.builderLinkComponent || "a" : "div",
+    (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.columns, (p, c) => (openBlock(), createBlock(l, {
+      key: c,
+      TagName: e.getTagName(p),
       actionAttributes: {},
-      attributes: {
-        ...c.link ? {
-          href: c.link
-        } : {},
-        [e.getClassPropName()]: "builder-column",
-        style: e.mapStyleObjToStrIfNeeded(e.columnCssVars(u))
-      }
+      attributes: e.getAttributes(p, c)
     }, {
       default: withCtx(() => [
         createVNode(a, {
-          path: `component.options.columns.${u}.blocks`,
+          path: `component.options.columns.${c}.blocks`,
           parent: e.builderBlock.id,
           styleProp: {
             flexGrow: "1"
@@ -1162,23 +1192,23 @@ function _sfc_render$i(e, t, n, o, r, s) {
           context: e.builderContext,
           registeredComponents: e.builderComponents,
           linkComponent: e.builderLinkComponent,
-          blocks: c.blocks
+          blocks: p.blocks
         }, null, 8, ["path", "parent", "context", "registeredComponents", "linkComponent", "blocks"])
       ]),
       _: 2
     }, 1032, ["TagName", "attributes"]))), 128))
   ], 16);
 }
-const Columns = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$i], ["__scopeId", "data-v-6caab097"]]), _sfc_main$i = defineComponent({
+const Columns = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$j], ["__scopeId", "data-v-4878b55f"]]), _sfc_main$j = defineComponent({
   name: "builder-fragment-component",
   props: []
 });
-function _sfc_render$h(e, t, n, o, r, s) {
+function _sfc_render$i(e, t, n, o, r, s) {
   return openBlock(), createElementBlock("span", null, [
     renderSlot(e.$slots, "default")
   ]);
 }
-const Fragment = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$h]]);
+const Fragment = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$i]]);
 function removeProtocol(e) {
   return e.replace(/http(s)?:/, "");
 }
@@ -1209,7 +1239,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$h = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "builder-image",
   props: [
     "image",
@@ -1255,19 +1285,19 @@ const _sfc_main$h = defineComponent({
       return this.aspectRatio ? e : void 0;
     }
   }
-}), _hoisted_1$8 = ["srcset"], _hoisted_2$3 = ["alt", "role", "src", "srcset", "sizes"], _hoisted_3$1 = {
+}), _hoisted_1$9 = ["srcset"], _hoisted_2$4 = ["alt", "role", "src", "srcset", "sizes"], _hoisted_3$1 = {
   key: 2,
-  class: "div-1be3j8m9ewb-2"
+  class: "div-20351ewpue7-2"
 };
-function _sfc_render$g(e, t, n, o, r, s) {
-  var i, a, l, c;
+function _sfc_render$h(e, t, n, o, r, s) {
+  var i, a, l, d, p, c;
   return openBlock(), createElementBlock(Fragment$1, null, [
     createElementVNode("picture", null, [
       e.webpSrcSet ? (openBlock(), createElementBlock("source", {
         key: 0,
         type: "image/webp",
         srcset: e.webpSrcSet
-      }, null, 8, _hoisted_1$8)) : createCommentVNode("", !0),
+      }, null, 8, _hoisted_1$9)) : createCommentVNode("", !0),
       createElementVNode("img", {
         loading: "lazy",
         alt: e.altText,
@@ -1278,34 +1308,34 @@ function _sfc_render$g(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-20351ewpue7"
         ),
         src: e.image,
         srcset: e.srcSetToUse,
         sizes: e.sizes
-      }, null, 14, _hoisted_2$3)
+      }, null, 14, _hoisted_2$4)
     ]),
     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-20351ewpue7",
       style: normalizeStyle({
         paddingTop: e.aspectRatio * 100 + "%"
       })
     }, 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, [
+    (d = (l = e.builderBlock) == null ? void 0 : l.children) != null && d.length && e.fitContent ? renderSlot(e.$slots, "default", { key: 1 }, void 0, !0) : createCommentVNode("", !0),
+    !e.fitContent && ((c = (p = e.builderBlock) == null ? void 0 : p.children) != null && c.length) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
       renderSlot(e.$slots, "default", {}, void 0, !0)
     ])) : createCommentVNode("", !0)
   ], 64);
 }
-const Image = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$g], ["__scopeId", "data-v-dde76a35"]]), _sfc_main$g = defineComponent({
+const Image = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$h], ["__scopeId", "data-v-5dee860d"]]), _sfc_main$h = defineComponent({
   name: "builder-section-component",
   props: ["attributes", "maxWidth"],
   data() {
     return { filterAttrs };
   }
 });
-function _sfc_render$f(e, t, n, o, r, s) {
+function _sfc_render$g(e, t, n, o, r, s) {
   return openBlock(), createElementBlock("section", mergeProps({
     style: {
       width: "100%",
@@ -1323,7 +1353,7 @@ function _sfc_render$f(e, t, n, o, r, s) {
     renderSlot(e.$slots, "default")
   ], 16);
 }
-const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$f]]), getTopLevelDomain = (e) => {
+const Section = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$g]]), getTopLevelDomain = (e) => {
   if (e === "localhost" || e === "127.0.0.1")
     return e;
   const t = e.split(".");
@@ -1458,7 +1488,7 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
     ...e,
     ...r
   };
-}, getDefaultCanTrack = (e) => checkIsDefined(e) ? e : !0, componentInfo$f = {
+}, getDefaultCanTrack = (e) => checkIsDefined(e) ? e : !0, componentInfo$g = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -1491,7 +1521,7 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
   }],
   static: !0,
   noWrap: !0
-}, componentInfo$e = {
+}, componentInfo$f = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: !0,
@@ -1692,13 +1722,13 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
     helperText: "When stacking columns for mobile devices, reverse the ordering",
     advanced: !0
   }]
-}, componentInfo$d = {
+}, componentInfo$e = {
   name: "Fragment",
   static: !0,
   hidden: !0,
   canHaveChildren: !0,
   noWrap: !0
-}, componentInfo$c = {
+}, componentInfo$d = {
   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",
@@ -1719,15 +1749,15 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
     onChange: (e) => {
       e.delete("srcset"), e.delete("noWebp");
       function n(i, a = 6e4) {
-        return new Promise((l, c) => {
-          const u = document.createElement("img");
-          let d = !1;
-          u.onload = () => {
-            d = !0, l(u);
-          }, u.addEventListener("error", (p) => {
-            console.warn("Image load failed", p.error), c(p.error);
-          }), u.src = i, setTimeout(() => {
-            d || c(new Error("Image load timed out"));
+        return new Promise((l, d) => {
+          const p = document.createElement("img");
+          let c = !1;
+          p.onload = () => {
+            c = !0, l(p);
+          }, p.addEventListener("error", (u) => {
+            console.warn("Image load failed", u.error), d(u.error);
+          }), p.src = i, setTimeout(() => {
+            c || d(new Error("Image load timed out"));
           }, a);
         });
       }
@@ -1798,7 +1828,7 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
     advanced: !0,
     defaultValue: 0.7041
   }]
-}, componentInfo$b = {
+}, componentInfo$c = {
   name: "Core:Section",
   static: !0,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -1837,7 +1867,7 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
       }
     }
   }]
-}, componentInfo$a = {
+}, componentInfo$b = {
   name: "Slot",
   isRSC: !0,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -1850,13 +1880,13 @@ const Section = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render
     required: !0,
     defaultValue: "children"
   }]
-}, _sfc_main$f = defineComponent({
+}, _sfc_main$g = defineComponent({
   name: "builder-slot",
   components: { Blocks },
   props: ["builderContext", "name"]
 });
-function _sfc_render$e(e, t, n, o, r, s) {
-  var a, l, c;
+function _sfc_render$f(e, t, n, o, r, s) {
+  var a, l, d;
   const i = resolveComponent("blocks");
   return openBlock(), createElementBlock("div", mergeProps(
     { style: {
@@ -1870,11 +1900,11 @@ function _sfc_render$e(e, t, n, o, r, s) {
       parent: (l = e.builderContext.context) == null ? void 0 : l.symbolId,
       path: `symbol.data.${e.name}`,
       context: e.builderContext,
-      blocks: (c = e.builderContext.rootState) == null ? void 0 : c[e.name]
+      blocks: (d = e.builderContext.rootState) == null ? void 0 : d[e.name]
     }, null, 8, ["parent", "path", "context", "blocks"])
   ], 16);
 }
-const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e]]), componentInfo$9 = {
+const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$f]]), componentInfo$a = {
   name: "Symbol",
   noWrap: !0,
   static: !0,
@@ -1907,7 +1937,210 @@ const Slot = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e]
     hideFromUI: !0,
     type: "boolean"
   }]
-}, componentInfo$8 = {
+}, defaultTab = {
+  "@type": "@builder.io/sdk:Element",
+  responsiveStyles: {
+    large: {
+      paddingLeft: "20px",
+      paddingRight: "20px",
+      paddingTop: "10px",
+      paddingBottom: "10px",
+      minWidth: "100px",
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      cursor: "pointer",
+      userSelect: "none"
+    }
+  },
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab"
+    }
+  }
+}, defaultElement = {
+  "@type": "@builder.io/sdk:Element",
+  responsiveStyles: {
+    large: {
+      height: "200px",
+      display: "flex",
+      marginTop: "20px",
+      flexDirection: "column"
+    }
+  },
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab content "
+    }
+  }
+}, componentInfo$9 = {
+  name: "Builder: Tabs",
+  inputs: [{
+    name: "tabs",
+    type: "list",
+    broadcast: !0,
+    subFields: [{
+      name: "label",
+      type: "uiBlocks",
+      hideFromUI: !0,
+      defaultValue: [defaultTab]
+    }, {
+      name: "content",
+      type: "uiBlocks",
+      hideFromUI: !0,
+      defaultValue: [defaultElement]
+    }],
+    defaultValue: [{
+      label: [{
+        ...defaultTab,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 1"
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 1 content"
+          }
+        }
+      }]
+    }, {
+      label: [{
+        ...defaultTab,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 2"
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 2 content"
+          }
+        }
+      }]
+    }]
+  }, {
+    name: "activeTabStyle",
+    type: "uiStyle",
+    helperText: "CSS styles for the active tab",
+    defaultValue: {
+      backgroundColor: "rgba(0, 0, 0, 0.1)"
+    }
+  }, {
+    name: "defaultActiveTab",
+    type: "number",
+    helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
+    defaultValue: 1,
+    advanced: !0
+  }, {
+    name: "collapsible",
+    type: "boolean",
+    helperText: "If on, clicking an open tab closes it so no tabs are active",
+    defaultValue: !1,
+    advanced: !0
+  }, {
+    name: "tabHeaderLayout",
+    type: "enum",
+    helperText: "Change the layout of the tab headers (uses justify-content)",
+    defaultValue: "flex-start",
+    enum: [{
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Space between",
+      value: "space-between"
+    }, {
+      label: "Space around",
+      value: "space-around"
+    }, {
+      label: "Left",
+      value: "flex-start"
+    }, {
+      label: "Right",
+      value: "flex-end"
+    }]
+  }]
+}, _sfc_main$f = defineComponent({
+  name: "builder-tabs",
+  components: { Blocks },
+  props: [
+    "defaultActiveTab",
+    "tabs",
+    "activeTabStyle",
+    "tabHeaderLayout",
+    "collapsible",
+    "builderBlock",
+    "builderContext",
+    "builderComponents",
+    "builderLinkComponent"
+  ],
+  data() {
+    return { activeTab: this.defaultActiveTab ? this.defaultActiveTab - 1 : 0 };
+  },
+  methods: {
+    activeTabContent(e) {
+      return this.tabs && this.tabs[e].content;
+    },
+    getActiveTabStyle(e) {
+      return this.activeTab === e ? this.activeTabStyle : {};
+    }
+  }
+}), _hoisted_1$8 = ["onClick"], _hoisted_2$3 = { key: 0 };
+function _sfc_render$e(e, t, n, o, r, s) {
+  const i = resolveComponent("blocks");
+  return openBlock(), createElementBlock("div", null, [
+    createElementVNode("div", {
+      class: "builder-tabs-wrap",
+      style: normalizeStyle({
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: e.tabHeaderLayout || "flex-start",
+        overflow: "auto"
+      })
+    }, [
+      (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.tabs, (a, l) => (openBlock(), createElementBlock("span", {
+        key: l,
+        class: normalizeClass(`builder-tab-wrap ${e.activeTab === l ? "builder-tab-active" : ""}`),
+        style: normalizeStyle(e.getActiveTabStyle(l)),
+        onClick: (d) => {
+          l === e.activeTab && e.collapsible ? e.activeTab = -1 : e.activeTab = l;
+        }
+      }, [
+        createVNode(i, {
+          parent: e.builderBlock.id,
+          path: `component.options.tabs.${l}.label`,
+          blocks: a.label,
+          context: e.builderContext,
+          registeredComponents: e.builderComponents,
+          linkComponent: e.builderLinkComponent
+        }, null, 8, ["parent", "path", "blocks", "context", "registeredComponents", "linkComponent"])
+      ], 14, _hoisted_1$8))), 128))
+    ], 4),
+    e.activeTabContent(e.activeTab) ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+      createVNode(i, {
+        parent: e.builderBlock.id,
+        path: `component.options.tabs.${e.activeTab}.content`,
+        blocks: e.activeTabContent(e.activeTab),
+        context: e.builderContext,
+        registeredComponents: e.builderComponents,
+        linkComponent: e.builderLinkComponent
+      }, null, 8, ["parent", "path", "blocks", "context", "registeredComponents", "linkComponent"])
+    ])) : createCommentVNode("", !0)
+  ]);
+}
+const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e]]), componentInfo$8 = {
   name: "Text",
   static: !0,
   isRSC: !0,
@@ -2376,75 +2609,75 @@ const embed = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b
         let s;
         const i = new FormData(o), a = Array.from(
           e.currentTarget.querySelectorAll("input,select,textarea")
-        ).filter((d) => !!d.name).map((d) => {
-          let p;
-          const f = d.name;
-          if (d instanceof HTMLInputElement)
-            if (d.type === "radio") {
-              if (d.checked)
-                return p = d.name, {
+        ).filter((c) => !!c.name).map((c) => {
+          let u;
+          const f = c.name;
+          if (c instanceof HTMLInputElement)
+            if (c.type === "radio") {
+              if (c.checked)
+                return u = c.name, {
                   key: f,
-                  value: p
+                  value: u
                 };
-            } else if (d.type === "checkbox")
-              p = d.checked;
-            else if (d.type === "number" || d.type === "range") {
-              const m = d.valueAsNumber;
-              isNaN(m) || (p = m);
+            } else if (c.type === "checkbox")
+              u = c.checked;
+            else if (c.type === "number" || c.type === "range") {
+              const m = c.valueAsNumber;
+              isNaN(m) || (u = m);
             } else
-              d.type === "file" ? p = d.files : p = d.value;
+              c.type === "file" ? u = c.files : u = c.value;
           else
-            p = d.value;
+            u = c.value;
           return {
             key: f,
-            value: p
+            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");
+        if (this.sendSubmissionsTo === "email" && (l = "multipart/form-data"), Array.from(a).forEach(({ value: c }) => {
+          (c instanceof File || Array.isArray(c) && c[0] instanceof File || c instanceof FileList) && (l = "multipart/form-data");
         }), l !== "application/json")
           s = i;
         else {
-          const d = {};
-          Array.from(a).forEach(({ value: p, key: f }) => {
-            set(d, f, p);
-          }), s = JSON.stringify(d);
+          const c = {};
+          Array.from(a).forEach(({ value: u, key: f }) => {
+            set(c, f, u);
+          }), s = JSON.stringify(c);
         }
         l && l !== "multipart/form-data" && (t && ((n = this.action) != null && n.includes("zapier.com")) || (r["content-type"] = l));
-        const c = new CustomEvent("presubmit", {
+        const d = new CustomEvent("presubmit", {
           detail: {
             body: s
           }
         });
-        if (this.$refs.formRef && (this.$refs.formRef.dispatchEvent(c), c.defaultPrevented))
+        if (this.$refs.formRef && (this.$refs.formRef.dispatchEvent(d), d.defaultPrevented))
           return;
         this.formState = "sending";
-        const u = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${this.builderContext.apiKey}&to=${btoa(
+        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" ? u : this.action,
+          this.sendSubmissionsTo === "email" ? p : this.action,
           {
             body: s,
             headers: r,
             method: this.method || "post"
           }
         ).then(
-          async (d) => {
-            let p;
-            const f = d.headers.get("content-type");
-            if (f && f.indexOf("application/json") !== -1 ? p = await d.json() : p = await d.text(), !d.ok && this.errorMessagePath) {
-              let m = get(p, this.errorMessagePath);
+          async (c) => {
+            let u;
+            const f = c.headers.get("content-type");
+            if (f && f.indexOf("application/json") !== -1 ? u = await c.json() : u = await c.text(), !c.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 = p, this.formState = d.ok ? "success" : "error", d.ok) {
+            if (this.responseData = u, this.formState = c.ok ? "success" : "error", c.ok) {
               const m = new CustomEvent("submit:success", {
                 detail: {
-                  res: d,
-                  body: p
+                  res: c,
+                  body: u
                 }
               });
               if (this.$refs.formRef) {
@@ -2464,13 +2697,13 @@ const embed = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b
                   location.href = this.successUrl;
             }
           },
-          (d) => {
-            const p = new CustomEvent("submit:error", {
+          (c) => {
+            const u = new CustomEvent("submit:error", {
               detail: {
-                error: d
+                error: c
               }
             });
-            this.$refs.formRef && (this.$refs.formRef.dispatchEvent(p), p.defaultPrevented) || (this.responseData = d, this.formState = "error");
+            this.$refs.formRef && (this.$refs.formRef.dispatchEvent(u), u.defaultPrevented) || (this.responseData = c, this.formState = "error");
           }
         );
       }
@@ -2478,7 +2711,7 @@ const embed = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b
   }
 }), _hoisted_1$4 = ["validate", "action", "method", "name"], _hoisted_2$2 = {
   key: 3,
-  class: "builder-form-error-text pre-5vz8uirn7sc"
+  class: "builder-form-error-text pre-3i4ezorcfhi"
 };
 function _sfc_render$a(e, t, n, o, r, s) {
   var l;
@@ -2489,11 +2722,11 @@ function _sfc_render$a(e, t, n, o, r, s) {
     action: !e.sendWithJs && e.action,
     method: e.method,
     name: e.name,
-    onSubmit: t[0] || (t[0] = (c) => e.onSubmit(c))
+    onSubmit: t[0] || (t[0] = (d) => e.onSubmit(d))
   }, 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, u) => (openBlock(), createBlock(i, {
+    e.builderBlock && e.builderBlock.children ? (openBlock(!0), createElementBlock(Fragment$1, { key: 0 }, renderList((l = e.builderBlock) == null ? void 0 : l.children, (d, p) => (openBlock(), createBlock(i, {
       key: `form-block-${e.idx}`,
-      block: c,
+      block: d,
       context: e.builderContext,
       registeredComponents: e.builderComponents,
       linkComponent: e.builderLinkComponent
@@ -2519,7 +2752,7 @@ function _sfc_render$a(e, t, n, o, r, s) {
     }, 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-83a4b1d9"]]), componentInfo$4 = {
+const Form = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a], ["__scopeId", "data-v-1573388b"]]), componentInfo$4 = {
   name: "Form:Input",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
@@ -2882,7 +3115,7 @@ const Img = /* @__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, u, d, p;
+  var i, a, l, d, p, c, u;
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createElementVNode("video", mergeProps({
       class: "builder-video",
@@ -2919,10 +3152,10 @@ function _sfc_render$5(e, t, n, o, r, s) {
         fontSize: "0px"
       })
     }, null, 4)) : createCommentVNode("", !0),
-    (u = (c = e.builderBlock) == null ? void 0 : c.children) != null && u.length && e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_4, [
+    (p = (d = e.builderBlock) == null ? void 0 : d.children) != null && p.length && e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_4, [
       renderSlot(e.$slots, "default")
     ])) : createCommentVNode("", !0),
-    (p = (d = e.builderBlock) == null ? void 0 : d.children) != null && p.length && !e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_5, [
+    (u = (c = e.builderBlock) == null ? void 0 : c.children) != null && u.length && !e.fitContent ? (openBlock(), createElementBlock("div", _hoisted_5, [
       renderSlot(e.$slots, "default")
     ])) : createCommentVNode("", !0)
   ]);
@@ -2953,28 +3186,31 @@ const Video = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5
   ...componentInfo
 }], getDefaultRegisteredComponents = () => [{
   component: Button,
-  ...componentInfo$f
+  ...componentInfo$g
 }, {
   component: Columns,
-  ...componentInfo$e
+  ...componentInfo$f
 }, {
   component: Fragment,
-  ...componentInfo$d
+  ...componentInfo$e
 }, {
   component: Image,
-  ...componentInfo$c
+  ...componentInfo$d
 }, {
   component: Section,
-  ...componentInfo$b
+  ...componentInfo$c
 }, {
   component: Slot,
-  ...componentInfo$a
+  ...componentInfo$b
 }, {
   component: Symbol$1,
-  ...componentInfo$9
+  ...componentInfo$a
 }, {
   component: Text,
   ...componentInfo$8
+}, {
+  component: Tabs,
+  ...componentInfo$9
 }, ...getExtraComponents()], createRegisterComponentMessage = (e) => ({
   type: "builder.registerComponent",
   data: serializeComponentInfo(e)
@@ -3156,10 +3392,10 @@ const DEFAULT_API_VERSION = "v3", BUILDER_SEARCHPARAMS_PREFIX = "builder.", BUIL
     enrich: i,
     locale: a,
     apiVersion: l = DEFAULT_API_VERSION,
-    fields: c,
-    omit: u,
-    offset: d,
-    cacheSeconds: p,
+    fields: d,
+    omit: p,
+    offset: c,
+    cacheSeconds: u,
     staleCacheSeconds: f,
     sort: m,
     includeUnpublished: b
@@ -3169,19 +3405,19 @@ const DEFAULT_API_VERSION = "v3", BUILDER_SEARCHPARAMS_PREFIX = "builder.", BUIL
   if (!["v3"].includes(l))
     throw new Error(`Invalid apiVersion: expected 'v3', received '${l}'`);
   const S = t !== 1, g = new URL(`https://cdn.builder.io/api/${l}/content/${r}`);
-  if (g.searchParams.set("apiKey", s), g.searchParams.set("limit", String(t)), g.searchParams.set("noTraverse", String(S)), g.searchParams.set("includeRefs", String(!0)), a && g.searchParams.set("locale", a), i && g.searchParams.set("enrich", String(i)), g.searchParams.set("omit", u || "meta.componentsUsed"), c && g.searchParams.set("fields", c), Number.isFinite(d) && d > -1 && g.searchParams.set("offset", String(Math.floor(d))), typeof b == "boolean" && g.searchParams.set("includeUnpublished", String(b)), p && isPositiveNumber(p) && g.searchParams.set("cacheSeconds", String(p)), f && isPositiveNumber(f) && g.searchParams.set("staleCacheSeconds", String(f)), m) {
+  if (g.searchParams.set("apiKey", s), g.searchParams.set("limit", String(t)), g.searchParams.set("noTraverse", String(S)), g.searchParams.set("includeRefs", String(!0)), a && g.searchParams.set("locale", a), i && g.searchParams.set("enrich", String(i)), g.searchParams.set("omit", p || "meta.componentsUsed"), d && g.searchParams.set("fields", d), Number.isFinite(c) && c > -1 && g.searchParams.set("offset", String(Math.floor(c))), typeof b == "boolean" && g.searchParams.set("includeUnpublished", String(b)), u && isPositiveNumber(u) && g.searchParams.set("cacheSeconds", String(u)), f && isPositiveNumber(f) && g.searchParams.set("staleCacheSeconds", String(f)), m) {
     const k = flatten({
       sort: m
     });
     for (const C in k)
       g.searchParams.set(C, JSON.stringify(k[C]));
   }
-  const T = {
+  const I = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(e.options || {})
-  }, I = flatten(T);
-  for (const k in I)
-    g.searchParams.set(k, String(I[k]));
+  }, T = flatten(I);
+  for (const k in T)
+    g.searchParams.set(k, String(T[k]));
   if (n && g.searchParams.set("userAttributes", JSON.stringify(n)), o) {
     const k = flatten({
       query: o
@@ -3423,7 +3659,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 = "1.0.23", registry = {};
+const SDK_VERSION = "1.0.24", registry = {};
 function register(e, t) {
   let n = registry[e];
   if (n || (n = registry[e] = []), n.push(t), isBrowser()) {
@@ -3493,33 +3729,33 @@ const setupBrowserForEditing = (e = {}) => {
     if (r != null && r.type)
       switch (r.type) {
         case "builder.evaluate": {
-          const a = r.data.text, l = r.data.arguments || [], c = r.data.id, u = new Function(a);
-          let d, p = null;
+          const a = r.data.text, l = r.data.arguments || [], d = r.data.id, p = new Function(a);
+          let c, u = null;
           try {
-            d = u.apply(null, l);
+            c = p.apply(null, l);
           } catch (f) {
-            p = 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
+              id: d,
+              error: u.message
             }
-          }, "*") : d && typeof d.then == "function" ? d.then((f) => {
+          }, "*") : c && typeof c.then == "function" ? c.then((f) => {
             var m;
             (m = window.parent) == null || m.postMessage({
               type: "builder.evaluateResult",
               data: {
-                id: c,
+                id: d,
                 result: f
               }
             }, "*");
           }).catch(console.error) : (i = window.parent) == null || i.postMessage({
             type: "builder.evaluateResult",
             data: {
-              result: d,
-              id: c
+              result: c,
+              id: d
             }
           }, "*");
           break;
@@ -3571,8 +3807,60 @@ const setupBrowserForEditing = (e = {}) => {
   return window.addEventListener("message", o), () => {
     window.removeEventListener("message", o);
   };
-}, _sfc_main$4 = defineComponent({
+}, 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 {
+font-family: "${t}";
+src: local("${n}"), url('${o}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim()), e.files)
+    for (const i in e.files) {
+      if (!(String(Number(i)) === i))
+        continue;
+      const l = e.files[i];
+      l && l !== o && (r += `
+@font-face {
+font-family: "${t}";
+src: url('${l}') format('woff2');
+font-display: fallback;
+font-weight: ${i};
+}
+        `.trim());
+    }
+  return r;
+}, getFontCss = ({
+  customFonts: e
+}) => {
+  var t;
+  return ((t = e == null ? void 0 : e.map((n) => getCssFromFont(n))) == null ? void 0 : t.join(" ")) || "";
+}, getCss = ({
+  cssCode: e,
+  contentId: t
+}) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "", DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`, getDefaultStyles = (e) => e ? "" : DEFAULT_STYLES, getWrapperClassName = (e) => `variant-${e}`, _sfc_main$4 = defineComponent({
   name: "enable-editor",
+  components: { DynamicDiv },
   props: [
     "builderContextSignal",
     "canTrack",
@@ -3583,9 +3871,9 @@ const setupBrowserForEditing = (e = {}) => {
     "model",
     "content",
     "data",
+    "showContent",
     "contentWrapper",
     "context",
-    "showContent",
     "contentWrapperProps"
   ],
   data() {
@@ -3594,7 +3882,8 @@ const setupBrowserForEditing = (e = {}) => {
       httpReqsData: {},
       httpReqsPending: {},
       clicked: !1,
-      builderContext: BuilderContext
+      builderContext: BuilderContext,
+      getWrapperClassName
     };
   },
   provide() {
@@ -3676,6 +3965,12 @@ const setupBrowserForEditing = (e = {}) => {
     ));
   },
   computed: {
+    showContentProps() {
+      return this.showContent ? {} : {
+        hidden: !0,
+        "aria-hidden": !0
+      };
+    },
     onUpdateHook0() {
       return {
         0: this.content
@@ -3876,79 +4171,22 @@ function _sfc_render$4(e, t, n, o, r, s) {
   return e.builderContextSignal.content ? (openBlock(), createBlock(resolveDynamicComponent(e.ContentWrapper), mergeProps({
     key: 0,
     ref: "elementRef",
-    onClick: (c) => e.onClick(c),
+    onClick: (d) => e.onClick(d),
     "builder-content-id": (i = e.builderContextSignal.content) == null ? void 0 : i.id,
     "builder-model": e.model,
-    class: `variant-${((a = e.content) == null ? void 0 : a.testVariationId) || ((l = e.content) == null ? void 0 : l.id)}`,
-    onIniteditingbldr: (c) => e.elementRef_onIniteditingbldr(c),
-    onInitpreviewingbldr: (c) => e.elementRef_onInitpreviewingbldr(c)
-  }, {
-    ...e.showContent ? {} : {
-      hidden: !0,
-      "aria-hidden": !0
-    },
-    ...e.contentWrapperProps
-  }), {
+    class: e.getWrapperClassName(((a = e.content) == null ? void 0 : a.testVariationId) || ((l = e.content) == null ? void 0 : l.id)),
+    onIniteditingbldr: (d) => e.elementRef_onIniteditingbldr(d),
+    onInitpreviewingbldr: (d) => e.elementRef_onInitpreviewingbldr(d)
+  }, { ...e.showContentProps, ...e.contentWrapperProps }), {
     default: withCtx(() => [
       renderSlot(e.$slots, "default")
     ]),
     _: 3
   }, 16, ["onClick", "builder-content-id", "builder-model", "class", "onIniteditingbldr", "onInitpreviewingbldr"])) : createCommentVNode("", !0);
 }
-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 {
-font-family: "${t}";
-src: local("${n}"), url('${o}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim()), e.files)
-    for (const i in e.files) {
-      if (!(String(Number(i)) === i))
-        continue;
-      const l = e.files[i];
-      l && l !== o && (r += `
-@font-face {
-font-family: "${t}";
-src: url('${l}') format('woff2');
-font-display: fallback;
-font-weight: ${i};
-}
-        `.trim());
-    }
-  return r;
-}, getFontCss = ({
-  customFonts: e
-}) => {
-  var t;
-  return ((t = e == null ? void 0 : e.map((n) => getCssFromFont(n))) == null ? void 0 : t.join(" ")) || "";
-}, getCss = ({
-  cssCode: e,
-  contentId: t
-}) => e ? t ? (e == null ? void 0 : e.replace(/&/g, `div[builder-content-id="${t}"]`)) || "" : e : "", DEFAULT_STYLES = `
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
-`, getDefaultStyles = (e) => e ? "" : DEFAULT_STYLES, _sfc_main$3 = defineComponent({
+const EnableEditor = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]), _sfc_main$3 = defineComponent({
   name: "content-styles",
-  components: { InlinedStyles: _sfc_main$k },
+  components: { InlinedStyles: _sfc_main$m },
   props: ["cssCode", "contentId", "customFonts", "isNestedRender"],
   data() {
     return {
@@ -4005,7 +4243,8 @@ const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_
     EnableEditor,
     InlinedScript: _sfc_main$5,
     ContentStyles,
-    Blocks
+    Blocks,
+    DynamicDiv
   },
   props: [
     "content",
@@ -4097,8 +4336,8 @@ const ContentStyles = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_
   }
 });
 function _sfc_render$2(e, t, n, o, r, s) {
-  const i = resolveComponent("inlined-script"), a = resolveComponent("content-styles"), l = resolveComponent("blocks"), c = resolveComponent("enable-editor");
-  return openBlock(), createBlock(c, mergeProps({
+  const i = resolveComponent("inlined-script"), a = resolveComponent("content-styles"), l = resolveComponent("blocks"), d = resolveComponent("enable-editor");
+  return openBlock(), createBlock(d, mergeProps({
     content: e.content,
     data: e.data,
     model: e.model,
@@ -4115,7 +4354,7 @@ function _sfc_render$2(e, t, n, o, r, s) {
     trustedHosts: e.trustedHosts
   }, {}), {
     default: withCtx(() => {
-      var u, d, p, f, m, b, S;
+      var p, c, u, f, m, b, S;
       return [
         e.isSsrAbTest ? (openBlock(), createBlock(i, {
           key: 0,
@@ -4125,8 +4364,8 @@ function _sfc_render$2(e, t, n, o, r, s) {
         e.TARGET !== "reactNative" ? (openBlock(), createBlock(a, {
           key: 1,
           isNestedRender: e.isNestedRender,
-          contentId: (u = e.builderContextSignal.content) == null ? void 0 : u.id,
-          cssCode: (p = (d = e.builderContextSignal.content) == null ? void 0 : d.data) == null ? void 0 : p.cssCode,
+          contentId: (p = e.builderContextSignal.content) == null ? void 0 : p.id,
+          cssCode: (u = (c = e.builderContextSignal.content) == null ? void 0 : c.data) == null ? void 0 : u.cssCode,
           customFonts: (m = (f = e.builderContextSignal.content) == null ? void 0 : f.data) == null ? void 0 : m.customFonts
         }, null, 8, ["isNestedRender", "contentId", "cssCode", "customFonts"])) : createCommentVNode("", !0),
         createVNode(l, {
@@ -4144,7 +4383,7 @@ const ContentComponent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _s
   name: "content-variants",
   components: {
     InlinedScript: _sfc_main$5,
-    InlinedStyles: _sfc_main$k,
+    InlinedStyles: _sfc_main$m,
     ContentComponent
   },
   props: [
@@ -4222,10 +4461,10 @@ function _sfc_render$1(e, t, n, o, r, s) {
         id: "builderio-variants-visibility",
         scriptStr: e.updateCookieAndStylesScriptStr
       }, null, 8, ["scriptStr"]),
-      (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.getVariants(e.content), (c, u) => (openBlock(), createBlock(l, {
-        key: c.testVariationId,
+      (openBlock(!0), createElementBlock(Fragment$1, null, renderList(e.getVariants(e.content), (d, p) => (openBlock(), createBlock(l, {
+        key: d.testVariationId,
         isNestedRender: e.isNestedRender,
-        content: c,
+        content: d,
         showContent: !1,
         model: e.model,
         data: e.data,
@@ -4290,7 +4529,7 @@ const ContentVariants = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sf
     });
 }, _sfc_main = defineComponent({
   name: "builder-symbol",
-  components: { ContentVariants },
+  components: { ContentVariants, DynamicDiv },
   props: [
     "symbol",
     "attributes",
@@ -4316,6 +4555,12 @@ const ContentVariants = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sf
     }
   },
   computed: {
+    blocksWrapper() {
+      return "div";
+    },
+    contentWrapper() {
+      return "div";
+    },
     className() {
       var e, t;
       return [
@@ -4343,7 +4588,7 @@ const ContentVariants = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sf
   }
 });
 function _sfc_render(e, t, n, o, r, s) {
-  var a, l, c, u, d;
+  var a, l, d, p, c;
   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, {
@@ -4358,14 +4603,14 @@ function _sfc_render(e, t, n, o, r, s) {
       data: {
         ...(l = e.symbol) == null ? void 0 : l.data,
         ...e.builderContext.localState,
-        ...(u = (c = e.contentToUse) == null ? void 0 : c.data) == null ? void 0 : u.state
+        ...(p = (d = e.contentToUse) == null ? void 0 : d.data) == null ? void 0 : p.state
       },
-      model: (d = e.symbol) == null ? void 0 : d.model,
+      model: (c = e.symbol) == null ? void 0 : c.model,
       content: e.contentToUse,
       linkComponent: e.builderLinkComponent,
-      blocksWrapper: "div",
-      contentWrapper: "div"
-    }, null, 8, ["apiVersion", "apiKey", "context", "customComponents", "data", "model", "content", "linkComponent"])
+      blocksWrapper: e.blocksWrapper,
+      contentWrapper: e.contentWrapper
+    }, null, 8, ["apiVersion", "apiKey", "context", "customComponents", "data", "model", "content", "linkComponent", "blocksWrapper", "contentWrapper"])
   ], 16);
 }
 const Symbol$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]), settings = {};
@@ -4412,7 +4657,7 @@ export {
   Section as S,
   TARGET as T,
   Video as V,
-  _sfc_main$k as _,
+  _sfc_main$m as _,
   getSizesForBreakpoints as a,
   createCssClass as b,
   checkIsDefined as c,