@builder.io/sdk-qwik 0.14.17 → 0.14.18

package/lib/browser/index.qwik.mjs

@@ -49,22 +49,26 @@ const getClassPropName = () => {
     case "vue":
     case "solid":
     case "qwik":
+    case "angular":
       return "class";
   }
 };
+const attrs = function attrs2(props, state) {
+  return {
+    ...props.attributes,
+    [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
+    ...props.link ? {
+      href: props.link,
+      target: props.openLinkInNewTab ? "_blank" : void 0,
+      role: "link"
+    } : {
+      role: "button"
+    }
+  };
+};
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxC(DynamicRenderer, {
-    attributes: {
-      ...props.attributes,
-      [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
-      ...props.link ? {
-        href: props.link,
-        target: props.openLinkInNewTab ? "_blank" : void 0,
-        role: "link"
-      } : {
-        role: "button"
-      }
-    },
+    attributes: attrs(props),
     get TagName() {
       return props.link ? props.builderLinkComponent || "a" : "button";
     },
@@ -564,6 +568,7 @@ function mapStyleObjToStrIfNeeded(style) {
     case "svelte":
     case "vue":
     case "solid":
+    case "angular":
       return convertStyleMapToCSSArray(style).join(" ");
     case "qwik":
     case "reactNative":
@@ -624,6 +629,23 @@ const getRepeatItemData = ({ block, context }) => {
   }));
   return repeatArray;
 };
+const shouldPassLinkComponent = (blockName) => {
+  return blockName && [
+    "Core:Button",
+    "Symbol",
+    "Columns",
+    "Form:Form",
+    "Builder: Tabs"
+  ].includes(blockName);
+};
+const shouldPassRegisteredComponents = (blockName) => {
+  return blockName && [
+    "Symbol",
+    "Columns",
+    "Form:Form",
+    "Builder: Tabs"
+  ].includes(blockName);
+};
 const SIZES = {
   small: {
     min: 320,
@@ -867,22 +889,35 @@ const BlockWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, 1, "87_1");
 }, "BlockWrapper_component_kOI0j0aW8Nw"));
 const InteractiveElement = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxC(props.Wrapper, {
-    ...props.wrapperProps,
-    attributes: props.includeBlockProps ? {
+  const attributes = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return props2.includeBlockProps ? {
       ...getBlockProperties({
-        block: props.block,
-        context: props.context
+        block: props2.block,
+        context: props2.context
       }),
       ...getBlockActions({
-        block: props.block,
-        rootState: props.context.rootState,
-        rootSetState: props.context.rootSetState,
-        localState: props.context.localState,
-        context: props.context.context
+        block: props2.block,
+        rootState: props2.context.rootState,
+        rootSetState: props2.context.rootSetState,
+        localState: props2.context.localState,
+        context: props2.context.context
       })
-    } : {},
-    children: /* @__PURE__ */ _jsxC(Slot$1, null, 3, "q0_0")
+    } : {};
+  }, "InteractiveElement_component_attributes_useComputed_0kUhl8Qa4CE", [
+    props
+  ]));
+  return /* @__PURE__ */ _jsxC(props.Wrapper, {
+    ...props.wrapperProps,
+    get attributes() {
+      return attributes.value;
+    },
+    children: /* @__PURE__ */ _jsxC(Slot$1, null, 3, "q0_0"),
+    [_IMMUTABLE]: {
+      attributes: _fnSignal((p0) => p0.value, [
+        attributes
+      ], "p0.value")
+    }
   }, 0, "q0_1");
 }, "InteractiveElement_component_0UqfJpjhn0g"));
 const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
@@ -1060,7 +1095,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     repeatItem
   ]));
   const componentRefProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e;
     const [blockComponent2, processedBlock2, props2] = useLexicalScope();
     return {
       blockChildren: processedBlock2.value.children ?? [],
@@ -1068,10 +1103,10 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       componentOptions: {
         ...getBlockComponentOptions(processedBlock2.value),
         builderContext: props2.context,
-        ...((_b = blockComponent2.value) == null ? void 0 : _b.name) === "Core:Button" || ((_c = blockComponent2.value) == null ? void 0 : _c.name) === "Symbol" || ((_d = blockComponent2.value) == null ? void 0 : _d.name) === "Columns" || ((_e = blockComponent2.value) == null ? void 0 : _e.name) === "Form:Form" ? {
+        ...shouldPassLinkComponent((_b = blockComponent2.value) == null ? void 0 : _b.name) ? {
           builderLinkComponent: props2.linkComponent
         } : {},
-        ...((_f = blockComponent2.value) == null ? void 0 : _f.name) === "Symbol" || ((_g = blockComponent2.value) == null ? void 0 : _g.name) === "Columns" || ((_h = blockComponent2.value) == null ? void 0 : _h.name) === "Form:Form" ? {
+        ...shouldPassRegisteredComponents((_c = blockComponent2.value) == null ? void 0 : _c.name) ? {
           builderComponents: props2.registeredComponents
         } : {}
       },
@@ -1079,8 +1114,8 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       linkComponent: props2.linkComponent,
       registeredComponents: props2.registeredComponents,
       builderBlock: processedBlock2.value,
-      includeBlockProps: ((_i = blockComponent2.value) == null ? void 0 : _i.noWrap) === true,
-      isInteractive: !((_j = blockComponent2.value) == null ? void 0 : _j.isRSC)
+      includeBlockProps: ((_d = blockComponent2.value) == null ? void 0 : _d.noWrap) === true,
+      isInteractive: !((_e = blockComponent2.value) == null ? void 0 : _e.isRSC)
     };
   }, "Block_component_componentRefProps_useComputed_Ikbl8VO04ho", [
     blockComponent,
@@ -1317,7 +1352,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }, 1, "jN_4") : null
   }, 1, "jN_5");
 }, "Block_component_nnPv0RY0U0k"));
-const onClick$1 = function onClick2(props, state) {
+const onClick$1 = function onClick2(props, state, className) {
   var _a, _b;
   if (isEditing() && !((_a = props.blocks) == null ? void 0 : _a.length))
     (_b = window.parent) == null ? void 0 : _b.postMessage({
@@ -1328,7 +1363,7 @@ const onClick$1 = function onClick2(props, state) {
       }
     }, "*");
 };
-const onMouseEnter = function onMouseEnter2(props, state) {
+const onMouseEnter = function onMouseEnter2(props, state, className) {
   var _a, _b;
   if (isEditing() && !((_a = props.blocks) == null ? void 0 : _a.length))
     (_b = window.parent) == null ? void 0 : _b.postMessage({
@@ -1363,23 +1398,26 @@ const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       return props.styleProp;
     },
     onClick$: /* @__PURE__ */ inlinedQrl((event) => {
-      const [props2, state2] = useLexicalScope();
+      const [className2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
     }, "BlocksWrapper_component_onClick_ufezvOupQrM", [
+      className,
       props,
       state
     ]),
     onKeyPress$: /* @__PURE__ */ inlinedQrl((event) => {
-      const [props2, state2] = useLexicalScope();
+      const [className2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
     }, "BlocksWrapper_component_onKeyPress_9bz8vCQc3kg", [
+      className,
       props,
       state
     ]),
     onMouseEnter$: /* @__PURE__ */ inlinedQrl((event) => {
-      const [props2, state2] = useLexicalScope();
+      const [className2, props2, state2] = useLexicalScope();
       return onMouseEnter(props2);
     }, "BlocksWrapper_component_onMouseEnter_j4FJjnLtraQ", [
+      className,
       props,
       state
     ]),
@@ -1492,6 +1530,12 @@ const Blocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
 function deoptSignal(value) {
   return value;
 }
+const getColumnsClass = (id) => {
+  return `builder-columns ${id}-breakpoints`;
+};
+const getTagName = function getTagName2(props, state, column) {
+  return column.link ? props.builderLinkComponent || "a" : "div";
+};
 const getWidth = function getWidth2(props, state, index) {
   var _a;
   return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
@@ -1506,6 +1550,15 @@ const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, de
 const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
   return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
+const columnsCssVars = function columnsCssVars2(props, state) {
+  return {
+    "--flex-dir": state.flexDir,
+    "--flex-dir-tablet": getTabletStyle(props, state, {
+      stackedStyle: state.flexDir,
+      desktopStyle: "row"
+    })
+  };
+};
 const columnCssVars = function columnCssVars2(props, state, index) {
   const gutter = index === 0 ? 0 : state.gutterSize;
   const width = getColumnCssWidth(props, state, index);
@@ -1545,90 +1598,68 @@ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, sta
   const breakpointSizes = getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
   return breakpointSizes[size].max;
 };
-const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  _jsxBranch();
-  const state = useStore({
-    cols: props.columns || [],
-    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
-    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
-    stackAt: props.stackColumnsAt || "tablet"
-  });
-  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
-  const columnsCssVars = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, state2] = useLexicalScope();
-    return {
-      "--flex-dir": state2.flexDir,
-      "--flex-dir-tablet": getTabletStyle(props2, state2, {
-        stackedStyle: state2.flexDir,
-        desktopStyle: "row"
-      })
-    };
-  }, "Columns_component_columnsCssVars_useComputed_adFEq2RWT9s", [
-    props,
-    state
-  ]));
-  const columnsStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, state2] = useLexicalScope();
-    return `
-        @media (max-width: ${getWidthForBreakpointSize(props2, state2, "medium")}px) {
-          .${props2.builderBlock.id}-breakpoints {
+const columnsStyles = function columnsStyles2(props, state) {
+  return `
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
           }
 
-          .${props2.builderBlock.id}-breakpoints > .builder-column {
+          .${props.builderBlock.id}-breakpoints > .builder-column {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props2, state2, "small")}px) {
-          .${props2.builderBlock.id}-breakpoints {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+          .${props.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
           }
 
-          .${props2.builderBlock.id}-breakpoints > .builder-column {
+          .${props.builderBlock.id}-breakpoints > .builder-column {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
         },
       `;
-  }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
-    props,
-    state
-  ]));
-  return /* @__PURE__ */ _jsxQ("div", null, {
-    class: _fnSignal((p0) => `builder-columns ${p0.builderBlock.id}-breakpoints div-Columns`, [
-      props
-    ], '`builder-columns ${p0.builderBlock.id}-breakpoints`+" div-Columns"'),
-    style: _fnSignal((p0) => p0.value, [
-      columnsCssVars
-    ], "p0.value")
-  }, [
+};
+const getAttributes = function getAttributes2(props, state, column, index) {
+  return {
+    ...column.link ? {
+      href: column.link
+    } : {},
+    [getClassPropName()]: "builder-column",
+    style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
+  };
+};
+const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  var _a;
+  _jsxBranch();
+  const state = useStore({
+    cols: props.columns || [],
+    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
+    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+    stackAt: props.stackColumnsAt || "tablet"
+  });
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  return /* @__PURE__ */ _jsxQ("div", {
+    class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
+    style: columnsCssVars(props, state)
+  }, null, [
     /* @__PURE__ */ _jsxC(InlinedStyles, {
       id: "builderio-columns",
-      get styles() {
-        return columnsStyles.value;
-      },
+      styles: columnsStyles(props, state),
       [_IMMUTABLE]: {
-        id: _IMMUTABLE,
-        styles: _fnSignal((p0) => p0.value, [
-          columnsStyles
-        ], "p0.value")
+        id: _IMMUTABLE
       }
     }, 3, "c0_0"),
     (props.columns || []).map((column, index) => {
       return /* @__PURE__ */ _jsxC(DynamicRenderer, {
-        TagName: column.link ? props.builderLinkComponent || "a" : "div",
+        TagName: getTagName(props, state, column),
         actionAttributes: {},
-        attributes: {
-          ...column.link ? {
-            href: column.link
-          } : {},
-          [getClassPropName()]: "builder-column",
-          style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
-        },
+        attributes: getAttributes(props, state, column, index),
         children: /* @__PURE__ */ _jsxC(Blocks, {
           path: `component.options.columns.${index}.blocks`,
           get parent() {
@@ -1736,7 +1767,7 @@ function getSrcSet(url) {
   return url;
 }
 const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   _jsxBranch();
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
   const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -1832,7 +1863,7 @@ const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         ], '{paddingTop:p0.aspectRatio*100+"%"}')
       }, null, 3, "0A_1") : null,
       ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ _jsxC(Slot$1, null, 3, "0A_2") : null,
-      !props.fitContent && props.children ? /* @__PURE__ */ _jsxQ("div", null, {
+      !props.fitContent && ((_f = (_e = props.builderBlock) == null ? void 0 : _e.children) == null ? void 0 : _f.length) ? /* @__PURE__ */ _jsxQ("div", null, {
         class: "div-Image-2"
       }, /* @__PURE__ */ _jsxC(Slot$1, null, 3, "0A_3"), 1, "0A_4") : null
     ]
@@ -2051,7 +2082,7 @@ const handleABTesting = async ({ item, canTrack }) => {
   };
 };
 const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
-const componentInfo$f = {
+const componentInfo$g = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -2089,7 +2120,7 @@ const componentInfo$f = {
   static: true,
   noWrap: true
 };
-const componentInfo$e = {
+const componentInfo$f = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: true,
@@ -2331,14 +2362,14 @@ const componentInfo$e = {
     }
   ]
 };
-const componentInfo$d = {
+const componentInfo$e = {
   name: "Fragment",
   static: true,
   hidden: true,
   canHaveChildren: true,
   noWrap: true
 };
-const componentInfo$c = {
+const componentInfo$d = {
   name: "Image",
   static: true,
   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",
@@ -2486,7 +2517,7 @@ const componentInfo$c = {
     }
   ]
 };
-const componentInfo$b = {
+const componentInfo$c = {
   name: "Core:Section",
   static: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2531,7 +2562,7 @@ const componentInfo$b = {
     }
   ]
 };
-const componentInfo$a = {
+const componentInfo$b = {
   name: "Slot",
   isRSC: true,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2586,7 +2617,7 @@ const Slot = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }
   }, 0, "B1_1");
 }, "Slot_component_WWgWgfV0bb0"));
-const componentInfo$9 = {
+const componentInfo$a = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2626,6 +2657,282 @@ const componentInfo$9 = {
     }
   ]
 };
+const 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"
+    }
+  }
+};
+const defaultElement = {
+  "@type": "@builder.io/sdk:Element",
+  responsiveStyles: {
+    large: {
+      height: "200px",
+      display: "flex",
+      marginTop: "20px",
+      flexDirection: "column"
+    }
+  },
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab content "
+    }
+  }
+};
+const componentInfo$9 = {
+  name: "Builder: Tabs",
+  inputs: [
+    {
+      name: "tabs",
+      type: "list",
+      broadcast: true,
+      subFields: [
+        {
+          name: "label",
+          type: "uiBlocks",
+          hideFromUI: true,
+          defaultValue: [
+            defaultTab
+          ]
+        },
+        {
+          name: "content",
+          type: "uiBlocks",
+          hideFromUI: true,
+          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: true
+    },
+    {
+      name: "collapsible",
+      type: "boolean",
+      helperText: "If on, clicking an open tab closes it so no tabs are active",
+      defaultValue: false,
+      advanced: true
+    },
+    {
+      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"
+        }
+      ]
+    }
+  ]
+};
+const activeTabContent = function activeTabContent2(props, state, active) {
+  return props.tabs && props.tabs[active].content;
+};
+const getActiveTabStyle = function getActiveTabStyle2(props, state, index) {
+  return state.activeTab === index ? props.activeTabStyle : {};
+};
+const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  const state = useStore({
+    activeTab: props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
+  });
+  return /* @__PURE__ */ _jsxQ("div", null, null, [
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "builder-tabs-wrap",
+      style: _fnSignal((p0) => ({
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: p0.tabHeaderLayout || "flex-start",
+        overflow: "auto"
+      }), [
+        props
+      ], '{display:"flex",flexDirection:"row",justifyContent:p0.tabHeaderLayout||"flex-start",overflow:"auto"}')
+    }, (props.tabs || []).map((tab, index) => {
+      return /* @__PURE__ */ _jsxQ("span", {
+        class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
+        onClick$: /* @__PURE__ */ inlinedQrl((event) => {
+          const [index2, props2, state2] = useLexicalScope();
+          if (index2 === state2.activeTab && props2.collapsible)
+            state2.activeTab = -1;
+          else
+            state2.activeTab = index2;
+        }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
+          index,
+          props,
+          state
+        ]),
+        style: getActiveTabStyle(props, state, index)
+      }, null, /* @__PURE__ */ _jsxC(Blocks, {
+        get parent() {
+          return props.builderBlock.id;
+        },
+        path: `component.options.tabs.${index}.label`,
+        get blocks() {
+          return tab.label;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        get registeredComponents() {
+          return props.builderComponents;
+        },
+        get linkComponent() {
+          return props.builderLinkComponent;
+        },
+        [_IMMUTABLE]: {
+          blocks: _wrapProp(tab, "label"),
+          context: _fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+            props
+          ], "p0.builderLinkComponent"),
+          parent: _fnSignal((p0) => p0.builderBlock.id, [
+            props
+          ], "p0.builderBlock.id"),
+          registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+            props
+          ], "p0.builderComponents")
+        }
+      }, 3, "6k_0"), 0, index);
+    }), 1, null),
+    activeTabContent(props, state, state.activeTab) ? /* @__PURE__ */ _jsxQ("div", null, null, /* @__PURE__ */ _jsxC(Blocks, {
+      get parent() {
+        return props.builderBlock.id;
+      },
+      get path() {
+        return `component.options.tabs.${state.activeTab}.content`;
+      },
+      blocks: activeTabContent(props, state, state.activeTab),
+      get context() {
+        return props.builderContext;
+      },
+      get registeredComponents() {
+        return props.builderComponents;
+      },
+      get linkComponent() {
+        return props.builderLinkComponent;
+      },
+      [_IMMUTABLE]: {
+        context: _fnSignal((p0) => p0.builderContext, [
+          props
+        ], "p0.builderContext"),
+        linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+          props
+        ], "p0.builderLinkComponent"),
+        parent: _fnSignal((p0) => p0.builderBlock.id, [
+          props
+        ], "p0.builderBlock.id"),
+        path: _fnSignal((p0) => `component.options.tabs.${p0.activeTab}.content`, [
+          state
+        ], "`component.options.tabs.${p0.activeTab}.content`"),
+        registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+          props
+        ], "p0.builderComponents")
+      }
+    }, 3, "6k_1"), 1, "6k_2") : null
+  ], 1, "6k_3");
+}, "Tabs_component_MhWcxXy0lMY"));
 const componentInfo$8 = {
   name: "Text",
   static: true,
@@ -3905,36 +4212,42 @@ const getExtraComponents = () => [
 const getDefaultRegisteredComponents = () => [
   {
     component: Button,
-    ...componentInfo$f
+    ...componentInfo$g
   },
   {
     component: Columns,
-    ...componentInfo$e
+    ...componentInfo$f
   },
   {
     component: FragmentComponent,
-    ...componentInfo$d
+    ...componentInfo$e
   },
   {
     component: Image,
-    ...componentInfo$c
+    ...componentInfo$d
   },
   {
     component: SectionComponent,
-    ...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()
 ];
 const createRegisterComponentMessage = (info) => ({
@@ -4380,7 +4693,7 @@ function isFromTrustedHost(trustedHosts, e) {
   const url = new URL(e.origin), hostname = url.hostname;
   return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }
-const SDK_VERSION = "0.14.17";
+const SDK_VERSION = "0.14.18";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -4563,7 +4876,75 @@ const subscribeToEditor = (model, callback, options) => {
     window.removeEventListener("message", listener);
   };
 };
-const mergeNewRootState = function mergeNewRootState22(props, state, elementRef, newData) {
+const getCssFromFont = (font) => {
+  var _a;
+  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+  const name = family.split(",")[0];
+  const url = font.fileUrl ?? ((_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular);
+  let str = "";
+  if (url && family && name)
+    str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+  if (font.files)
+    for (const weight in font.files) {
+      const isNumber = String(Number(weight)) === weight;
+      if (!isNumber)
+        continue;
+      const weightUrl = font.files[weight];
+      if (weightUrl && weightUrl !== url)
+        str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+    }
+  return str;
+};
+const getFontCss = ({ customFonts }) => {
+  var _a;
+  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+const getCss = ({ cssCode, contentId }) => {
+  if (!cssCode)
+    return "";
+  if (!contentId)
+    return cssCode;
+  return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+const 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;
+}
+`;
+const getDefaultStyles = (isNested) => {
+  return !isNested ? DEFAULT_STYLES : "";
+};
+const getWrapperClassName = (variationId) => {
+  return `variant-${variationId}`;
+};
+const mergeNewRootState = function mergeNewRootState22(props, state, showContentProps, elementRef, newData) {
   var _a, _b;
   const combinedState = {
     ...props.builderContextSignal.rootState,
@@ -4574,7 +4955,7 @@ const mergeNewRootState = function mergeNewRootState22(props, state, elementRef,
   else
     props.builderContextSignal.rootState = combinedState;
 };
-const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
+const mergeNewContent = function mergeNewContent2(props, state, showContentProps, elementRef, newContent) {
   var _a, _b, _c, _d, _e;
   const newContentValue = {
     ...props.builderContextSignal.content,
@@ -4591,7 +4972,7 @@ const mergeNewContent = function mergeNewContent2(props, state, elementRef, newC
   };
   props.builderContextSignal.content = newContentValue;
 };
-const processMessage = function processMessage2(props, state, elementRef, event) {
+const processMessage = function processMessage2(props, state, showContentProps, elementRef, event) {
   return createEditorListener({
     model: props.model,
     trustedHosts: props.trustedHosts,
@@ -4602,7 +4983,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         if (!contentId || contentId !== ((_a = props.builderContextSignal.content) == null ? void 0 : _a.id))
           return;
         if (breakpoints)
-          mergeNewContent(props, state, elementRef, {
+          mergeNewContent(props, state, showContentProps, elementRef, {
             meta: {
               breakpoints
             }
@@ -4612,12 +4993,12 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         triggerAnimation(animation);
       },
       contentUpdate: (newContent) => {
-        mergeNewContent(props, state, elementRef, newContent);
+        mergeNewContent(props, state, showContentProps, elementRef, newContent);
       }
     }
   })(event);
 };
-const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
+const evaluateJsCode = function evaluateJsCode2(props, state, showContentProps, elementRef) {
   var _a, _b;
   const jsCode = (_b = (_a = props.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode;
   if (jsCode)
@@ -4633,7 +5014,7 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
       enableCache: false
     });
 };
-const onClick = function onClick22(props, state, elementRef, event) {
+const onClick = function onClick22(props, state, showContentProps, elementRef, event) {
   var _a, _b;
   if (props.builderContextSignal.content) {
     const variationId = (_a = props.builderContextSignal.content) == null ? void 0 : _a.testVariationId;
@@ -4651,7 +5032,7 @@ const onClick = function onClick22(props, state, elementRef, event) {
   if (!state.clicked)
     state.clicked = true;
 };
-const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
+const runHttpRequests = function runHttpRequests2(props, state, showContentProps, elementRef) {
   var _a, _b;
   const requests = ((_b = (_a = props.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.httpRequests) ?? {};
   Object.entries(requests).forEach(([key, url]) => {
@@ -4671,7 +5052,7 @@ const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
       enableCache: true
     })));
     fetch$1(evaluatedUrl).then((response) => response.json()).then((json) => {
-      mergeNewRootState(props, state, elementRef, {
+      mergeNewRootState(props, state, showContentProps, elementRef, {
         [key]: json
       });
       state.httpReqsData[key] = true;
@@ -4682,7 +5063,7 @@ const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
     });
   });
 };
-const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
+const emitStateUpdate = function emitStateUpdate2(props, state, showContentProps, elementRef) {
   if (isEditing())
     window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
       detail: {
@@ -4694,7 +5075,17 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
     }));
 };
 const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  var _a, _b;
   _jsxBranch();
+  const showContentProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return props2.showContent ? {} : {
+      hidden: true,
+      "aria-hidden": true
+    };
+  }, "EnableEditor_component_showContentProps_useComputed_aHr3V0Y8sNs", [
+    props
+  ]));
   const elementRef = useSignal();
   const state = useStore({
     ContentWrapper: props.contentWrapper || "div",
@@ -4705,8 +5096,8 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     deep: true
   });
   useOn("initeditingbldr", /* @__PURE__ */ inlinedQrl((event, element) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
-    window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
+    window.addEventListener("message", processMessage.bind(null, props2, state2, showContentProps2, elementRef2));
     registerInsertMenu();
     setupBrowserForEditing({
       ...props2.locale ? {
@@ -4720,18 +5111,19 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       } : {}
     });
     Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-      var _a;
+      var _a2;
       const message = createRegisterComponentMessage(registeredComponent);
-      (_a = window.parent) == null ? void 0 : _a.postMessage(message, "*");
+      (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
     });
-    window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
+    window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, showContentProps2, elementRef2));
   }, "EnableEditor_component_useOn_Qs8c0yql2i0", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useOn("initpreviewingbldr", /* @__PURE__ */ inlinedQrl((event, element) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     const searchParams = new URL(location.href).searchParams;
     const searchParamPreviewModel = searchParams.get("builder.preview");
     const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
@@ -4743,23 +5135,24 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         apiVersion: props2.builderContextSignal.apiVersion
       }).then((content) => {
         if (content)
-          mergeNewContent(props2, state2, elementRef2, content);
+          mergeNewContent(props2, state2, showContentProps2, elementRef2, content);
       });
   }, "EnableEditor_component_useOn_1_F94YipmknvI", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useOn("qvisible", /* @__PURE__ */ inlinedQrl((event, element) => {
-    var _a, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (isBrowser()) {
       if (isEditing()) {
         if (element)
           element.dispatchEvent(new CustomEvent("initeditingbldr"));
       }
-      const shouldTrackImpression = ((_a = element.attributes.getNamedItem("shouldTrack")) == null ? void 0 : _a.value) === "true";
+      const shouldTrackImpression = ((_a2 = element.attributes.getNamedItem("shouldTrack")) == null ? void 0 : _a2.value) === "true";
       if (shouldTrackImpression) {
-        const variationId = (_b = element.attributes.getNamedItem("variationId")) == null ? void 0 : _b.value;
+        const variationId = (_b2 = element.attributes.getNamedItem("variationId")) == null ? void 0 : _b2.value;
         const contentId = (_c = element.attributes.getNamedItem("contentId")) == null ? void 0 : _c.value;
         const apiKeyProp = (_d = element.attributes.getNamedItem("apiKey")) == null ? void 0 : _d.value;
         _track({
@@ -4778,80 +5171,87 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, "EnableEditor_component_useOn_2_FyR0YPSlJlw"));
   useContextProvider(builderContext, props.builderContextSignal);
   useTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     if (!props2.apiKey)
       logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     evaluateJsCode(props2);
-    runHttpRequests(props2, state2, elementRef2);
+    runHttpRequests(props2, state2, showContentProps2, elementRef2);
     emitStateUpdate(props2);
   }, "EnableEditor_component_useTask_Nb2VI04qp0M", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => props2.content);
     if (props2.content)
-      mergeNewContent(props2, state2, elementRef2, props2.content);
+      mergeNewContent(props2, state2, showContentProps2, elementRef2, props2.content);
   }, "EnableEditor_component_useTask_1_m0y1Z9vk4eQ", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => {
-      var _a, _b;
-      return (_b = (_a = props2.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode;
+      var _a2, _b2;
+      return (_b2 = (_a2 = props2.builderContextSignal.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
     });
     evaluateJsCode(props2);
   }, "EnableEditor_component_useTask_2_xVyv0tDqZLs", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => {
-      var _a, _b;
-      return (_b = (_a = props2.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.httpRequests;
+      var _a2, _b2;
+      return (_b2 = (_a2 = props2.builderContextSignal.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests;
     });
-    runHttpRequests(props2, state2, elementRef2);
+    runHttpRequests(props2, state2, showContentProps2, elementRef2);
   }, "EnableEditor_component_useTask_3_bQ0e5LHZwWE", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => props2.builderContextSignal.rootState);
     emitStateUpdate(props2);
   }, "EnableEditor_component_useTask_4_moHYZG8uNVU", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => props2.data);
     if (props2.data)
-      mergeNewRootState(props2, state2, elementRef2, props2.data);
+      mergeNewRootState(props2, state2, showContentProps2, elementRef2, props2.data);
   }, "EnableEditor_component_useTask_5_24QxS0r0KF8", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [elementRef2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     track2(() => props2.locale);
     if (props2.locale)
-      mergeNewRootState(props2, state2, elementRef2, {
+      mergeNewRootState(props2, state2, showContentProps2, elementRef2, {
         locale: props2.locale
       });
   }, "EnableEditor_component_useTask_6_0CaFTUOgv08", [
     elementRef,
     props,
+    showContentProps,
     state
   ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
@@ -4860,69 +5260,58 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         return props.apiKey;
       },
       get contentId() {
-        var _a;
-        return (_a = props.builderContextSignal.content) == null ? void 0 : _a.id;
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.id;
       },
       get variationId() {
-        var _a;
-        return (_a = props.builderContextSignal.content) == null ? void 0 : _a.testVariationId;
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.testVariationId;
       },
       onClick$: /* @__PURE__ */ inlinedQrl((event) => {
-        const [elementRef2, props2, state2] = useLexicalScope();
-        return onClick(props2, state2, elementRef2, event);
+        const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
+        return onClick(props2, state2, showContentProps2, elementRef2, event);
       }, "EnableEditor_component__Fragment_onClick_b4nYT3DrjEk", [
         elementRef,
         props,
+        showContentProps,
         state
       ]),
       ref: elementRef,
       shouldTrack: String(props.builderContextSignal.content && getDefaultCanTrack(props.canTrack)),
       get "builder-content-id"() {
-        var _a;
-        return (_a = props.builderContextSignal.content) == null ? void 0 : _a.id;
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.id;
       },
       get "builder-model"() {
         return props.model;
       },
-      ...props.showContent ? {} : {
-        hidden: true,
-        "aria-hidden": true
-      },
+      ...showContentProps.value,
       ...props.contentWrapperProps,
-      get class() {
-        var _a, _b;
-        return `variant-${((_a = props.content) == null ? void 0 : _a.testVariationId) || ((_b = props.content) == null ? void 0 : _b.id)}`;
-      },
       children: /* @__PURE__ */ _jsxC(Slot$1, null, 3, "06_0"),
+      class: getWrapperClassName(((_a = props.content) == null ? void 0 : _a.testVariationId) || ((_b = props.content) == null ? void 0 : _b.id)),
       [_IMMUTABLE]: {
         apiKey: _fnSignal((p0) => p0.apiKey, [
           props
         ], "p0.apiKey"),
         "builder-content-id": _fnSignal((p0) => {
-          var _a;
-          return (_a = p0.builderContextSignal.content) == null ? void 0 : _a.id;
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.id;
         }, [
           props
         ], "p0.builderContextSignal.content?.id"),
         "builder-model": _fnSignal((p0) => p0.model, [
           props
         ], "p0.model"),
-        class: _fnSignal((p0) => {
-          var _a, _b;
-          return `variant-${((_a = p0.content) == null ? void 0 : _a.testVariationId) || ((_b = p0.content) == null ? void 0 : _b.id)}`;
-        }, [
-          props
-        ], "`variant-${p0.content?.testVariationId||p0.content?.id}`"),
         contentId: _fnSignal((p0) => {
-          var _a;
-          return (_a = p0.builderContextSignal.content) == null ? void 0 : _a.id;
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.id;
         }, [
           props
         ], "p0.builderContextSignal.content?.id"),
         ref: _IMMUTABLE,
         variationId: _fnSignal((p0) => {
-          var _a;
-          return (_a = p0.builderContextSignal.content) == null ? void 0 : _a.testVariationId;
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.testVariationId;
         }, [
           props
         ], "p0.builderContextSignal.content?.testVariationId")
@@ -4930,71 +5319,6 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     }, 0, "06_1") : null
   }, 1, "06_2");
 }, "EnableEditor_component_ko1mO8oaj8k"));
-const getCssFromFont = (font) => {
-  var _a;
-  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-  const name = family.split(",")[0];
-  const url = font.fileUrl ?? ((_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular);
-  let str = "";
-  if (url && family && name)
-    str += `
-@font-face {
-font-family: "${family}";
-src: local("${name}"), url('${url}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim();
-  if (font.files)
-    for (const weight in font.files) {
-      const isNumber = String(Number(weight)) === weight;
-      if (!isNumber)
-        continue;
-      const weightUrl = font.files[weight];
-      if (weightUrl && weightUrl !== url)
-        str += `
-@font-face {
-font-family: "${family}";
-src: url('${weightUrl}') format('woff2');
-font-display: fallback;
-font-weight: ${weight};
-}
-        `.trim();
-    }
-  return str;
-};
-const getFontCss = ({ customFonts }) => {
-  var _a;
-  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
-};
-const getCss = ({ cssCode, contentId }) => {
-  if (!cssCode)
-    return "";
-  if (!contentId)
-    return cssCode;
-  return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
-};
-const 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;
-}
-`;
-const getDefaultStyles = (isNested) => {
-  return !isNested ? DEFAULT_STYLES : "";
-};
 const ContentStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const state = useStore({
     injectedStyles: `
@@ -5599,7 +5923,7 @@ const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     });
   return void 0;
 };
-const setContent = function setContent2(props, state) {
+const setContent = function setContent2(props, state, blocksWrapper, contentWrapper, className) {
   if (state.contentToUse)
     return;
   fetchSymbolContent({
@@ -5612,6 +5936,12 @@ const setContent = function setContent2(props, state) {
 };
 const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   var _a;
+  const blocksWrapper = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    return "div";
+  }, "Symbol_component_blocksWrapper_useComputed_B5dlF985gMM"));
+  const contentWrapper = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    return "div";
+  }, "Symbol_component_contentWrapper_useComputed_EvmPpPj8JTo"));
   const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     var _a2, _b;
     const [props2] = useLexicalScope();
@@ -5628,10 +5958,13 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     contentToUse: (_a = props.symbol) == null ? void 0 : _a.content
   });
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [props2, state2] = useLexicalScope();
+    const [blocksWrapper2, className2, contentWrapper2, props2, state2] = useLexicalScope();
     track2(() => props2.symbol);
     setContent(props2, state2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
+    blocksWrapper,
+    className,
+    contentWrapper,
     props,
     state
   ]));
@@ -5673,8 +6006,12 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       get linkComponent() {
         return props.builderLinkComponent;
       },
-      blocksWrapper: "div",
-      contentWrapper: "div",
+      get blocksWrapper() {
+        return blocksWrapper.value;
+      },
+      get contentWrapper() {
+        return contentWrapper.value;
+      },
       [_IMMUTABLE]: {
         apiKey: _fnSignal((p0) => p0.builderContext.apiKey, [
           props
@@ -5682,11 +6019,15 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         apiVersion: _fnSignal((p0) => p0.builderContext.apiVersion, [
           props
         ], "p0.builderContext.apiVersion"),
-        blocksWrapper: _IMMUTABLE,
+        blocksWrapper: _fnSignal((p0) => p0.value, [
+          blocksWrapper
+        ], "p0.value"),
         content: _fnSignal((p0) => p0.contentToUse, [
           state
         ], "p0.contentToUse"),
-        contentWrapper: _IMMUTABLE,
+        contentWrapper: _fnSignal((p0) => p0.value, [
+          contentWrapper
+        ], "p0.value"),
         context: _fnSignal((p0) => {
           var _a2;
           return {