@builder.io/sdk-solid 1.0.23 → 1.0.24

package/lib/browser/index.js

@@ -1,4 +1,4 @@
-import { createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
+import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
 import { createContext, useContext, Show, For, createSignal, createMemo, onMount, createEffect, on } from 'solid-js';
 import { css } from 'solid-styled-components';
 
@@ -68,25 +68,29 @@ var getClassPropName = () => {
     case "vue":
     case "solid":
     case "qwik":
+    case "angular":
       return "class";
   }
 };
 
 // src/blocks/button/button.tsx
 function Button(props) {
+  function attrs() {
+    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"
+      }
+    };
+  }
   return createComponent(dynamic_renderer_default, {
     get attributes() {
-      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"
-        }
-      };
+      return attrs();
     },
     get TagName() {
       return props.link ? props.builderLinkComponent || "a" : "button";
@@ -707,6 +711,7 @@ function mapStyleObjToStrIfNeeded(style) {
     case "svelte":
     case "vue":
     case "solid":
+    case "angular":
       return convertStyleMapToCSSArray(style).join(" ");
     case "qwik":
     case "reactNative":
@@ -779,6 +784,12 @@ var getRepeatItemData = ({
   }));
   return repeatArray;
 };
+var shouldPassLinkComponent = (blockName) => {
+  return blockName && ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(blockName);
+};
+var shouldPassRegisteredComponents = (blockName) => {
+  return blockName && ["Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(blockName);
+};
 
 // src/constants/device-sizes.ts
 var SIZES = {
@@ -1035,21 +1046,24 @@ function BlockWrapper(props) {
 }
 var block_wrapper_default = BlockWrapper;
 function InteractiveElement(props) {
+  const attributes = createMemo(() => {
+    return props.includeBlockProps ? {
+      ...getBlockProperties({
+        block: props.block,
+        context: props.context
+      }),
+      ...getBlockActions({
+        block: props.block,
+        rootState: props.context.rootState,
+        rootSetState: props.context.rootSetState,
+        localState: props.context.localState,
+        context: props.context.context
+      })
+    } : {};
+  });
   return createComponent(Dynamic, mergeProps(() => props.wrapperProps, {
     get attributes() {
-      return memo(() => !!props.includeBlockProps)() ? {
-        ...getBlockProperties({
-          block: props.block,
-          context: props.context
-        }),
-        ...getBlockActions({
-          block: props.block,
-          rootState: props.context.rootState,
-          rootSetState: props.context.rootSetState,
-          localState: props.context.localState,
-          context: props.context.context
-        })
-      } : {};
+      return attributes();
     },
     get component() {
       return props.Wrapper;
@@ -1224,10 +1238,10 @@ function Block(props) {
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: props.context,
-        ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
+        ...shouldPassLinkComponent(blockComponent()?.name) ? {
           builderLinkComponent: props.linkComponent
         } : {},
-        ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
+        ...shouldPassRegisteredComponents(blockComponent()?.name) ? {
           builderComponents: props.registeredComponents
         } : {}
       },
@@ -1519,6 +1533,11 @@ function Blocks(props) {
 }
 var blocks_default = Blocks;
 
+// src/blocks/columns/helpers.ts
+var getColumnsClass = (id) => {
+  return `builder-columns ${id}-breakpoints`;
+};
+
 // src/blocks/columns/columns.tsx
 var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 function Columns(props) {
@@ -1526,6 +1545,9 @@ function Columns(props) {
   const [cols, setCols] = createSignal(props.columns || []);
   const [stackAt, setStackAt] = createSignal(props.stackColumnsAt || "tablet");
   const [flexDir, setFlexDir] = createSignal(props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column");
+  function getTagName(column) {
+    return column.link ? props.builderLinkComponent || "a" : "div";
+  }
   function getWidth(index) {
     return cols()[index]?.width || 100 / cols().length;
   }
@@ -1545,7 +1567,7 @@ function Columns(props) {
   }) {
     return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
-  const columnsCssVars = createMemo(() => {
+  function columnsCssVars() {
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -1553,7 +1575,7 @@ function Columns(props) {
         desktopStyle: "row"
       })
     };
-  });
+  }
   function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
@@ -1592,7 +1614,7 @@ function Columns(props) {
     const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
   }
-  const columnsStyles = createMemo(() => {
+  function columnsStyles() {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1618,12 +1640,22 @@ function Columns(props) {
           }
         },
       `;
-  });
+  }
+  function getAttributes(column, index) {
+    return {
+      ...{},
+      ...column.link ? {
+        href: column.link
+      } : {},
+      [getClassPropName()]: "builder-column",
+      style: mapStyleObjToStrIfNeeded(columnCssVars(index))
+    };
+  }
   return (() => {
     const _el$ = _tmpl$2();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return `builder-columns ${props.builderBlock.id}-breakpoints ` + css({
+        return getColumnsClass(props.builderBlock?.id) + " " + css({
           display: "flex",
           lineHeight: "normal"
         });
@@ -1652,18 +1684,11 @@ function Columns(props) {
         return createComponent(dynamic_renderer_default, {
           key: index,
           get TagName() {
-            return column.link ? props.builderLinkComponent || "a" : "div";
+            return getTagName(column);
           },
           actionAttributes: {},
           get attributes() {
-            return {
-              ...{},
-              ...column.link ? {
-                href: column.link
-              } : {},
-              [getClassPropName()]: "builder-column",
-              style: mapStyleObjToStrIfNeeded(columnCssVars(index))
-            };
+            return getAttributes(column, index);
           },
           get children() {
             return createComponent(blocks_default, {
@@ -1861,7 +1886,7 @@ function Image(props) {
     }
   }), createComponent(Show, {
     get when() {
-      return !props.fitContent && props.children;
+      return !props.fitContent && props.builderBlock?.children?.length;
     },
     get children() {
       const _el$5 = _tmpl$32();
@@ -2605,8 +2630,246 @@ var componentInfo7 = {
   }]
 };
 
-// src/blocks/text/component-info.ts
+// src/blocks/tabs/component-info.ts
+var 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"
+    }
+  }
+};
+var defaultElement = {
+  "@type": "@builder.io/sdk:Element",
+  responsiveStyles: {
+    large: {
+      height: "200px",
+      display: "flex",
+      marginTop: "20px",
+      flexDirection: "column"
+    }
+  },
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab content "
+    }
+  }
+};
 var componentInfo8 = {
+  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"
+    }]
+  }]
+};
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
+function Tabs(props) {
+  const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
+  function activeTabContent(active) {
+    return props.tabs && props.tabs[active].content;
+  }
+  function getActiveTabStyle(index) {
+    return activeTab() === index ? props.activeTabStyle : {};
+  }
+  return (() => {
+    const _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
+    _el$2.style.setProperty("display", "flex");
+    _el$2.style.setProperty("flex-direction", "row");
+    _el$2.style.setProperty("overflow", "auto");
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return props.tabs;
+      },
+      children: (tab, _index) => {
+        const index = _index();
+        return (() => {
+          const _el$4 = _tmpl$33();
+          _el$4.$$click = (event) => {
+            if (index === activeTab() && props.collapsible) {
+              setActiveTab(-1);
+            } else {
+              setActiveTab(index);
+            }
+          };
+          setAttribute(_el$4, "key", index);
+          insert(_el$4, createComponent(blocks_default, {
+            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;
+            }
+          }));
+          effect((_p$) => {
+            const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = getActiveTabStyle(index);
+            _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
+            _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
+            return _p$;
+          }, {
+            _v$: void 0,
+            _v$2: void 0
+          });
+          return _el$4;
+        })();
+      }
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return activeTabContent(activeTab());
+      },
+      get children() {
+        const _el$3 = _tmpl$7();
+        insert(_el$3, createComponent(blocks_default, {
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get path() {
+            return `component.options.tabs.${activeTab()}.content`;
+          },
+          get blocks() {
+            return activeTabContent(activeTab());
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          }
+        }));
+        return _el$3;
+      }
+    }), null);
+    effect(() => (props.tabHeaderLayout || "flex-start") != null ? _el$2.style.setProperty("justify-content", props.tabHeaderLayout || "flex-start") : _el$2.style.removeProperty("justify-content"));
+    return _el$;
+  })();
+}
+var tabs_default = Tabs;
+delegateEvents(["click"]);
+
+// src/blocks/text/component-info.ts
+var componentInfo9 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2625,10 +2888,10 @@ var componentInfo8 = {
     textAlign: "center"
   }
 };
-var _tmpl$7 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$7();
+    const _el$ = _tmpl$8();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2637,7 +2900,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/custom-code/component-info.ts
-var componentInfo9 = {
+var componentInfo10 = {
   name: "Custom Code",
   static: true,
   requiredPermissions: ["editCode"],
@@ -2660,7 +2923,7 @@ var componentInfo9 = {
     advanced: true
   }]
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2694,7 +2957,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$9();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -2712,7 +2975,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -2754,7 +3017,7 @@ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "applicati
 var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
-var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2791,7 +3054,7 @@ function Embed(props) {
   }
   createEffect(on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$9();
+    const _el$ = _tmpl$10();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -2801,7 +3064,7 @@ function Embed(props) {
 var embed_default = Embed;
 
 // src/blocks/form/form/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Form:Form",
   // editableTags: ['builder-form-error']
   defaults: {
@@ -3048,8 +3311,8 @@ var get = (obj, path, defaultValue) => {
 };
 
 // src/blocks/form/form/form.tsx
-var _tmpl$10 = /* @__PURE__ */ template(`<pre>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<pre>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<form>`);
 function FormComponent(props) {
   const [formState, setFormState] = createSignal("unsubmitted");
   const [responseData, setResponseData] = createSignal(null);
@@ -3235,7 +3498,7 @@ function FormComponent(props) {
   }
   let formRef;
   return (() => {
-    const _el$ = _tmpl$23();
+    const _el$ = _tmpl$24();
     _el$.addEventListener("submit", (event) => onSubmit(event));
     const _ref$ = formRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
@@ -3318,7 +3581,7 @@ function FormComponent(props) {
         return memo(() => submissionState() === "error")() && responseData();
       },
       get children() {
-        const _el$2 = _tmpl$10();
+        const _el$2 = _tmpl$11();
         insert(_el$2, () => JSON.stringify(responseData(), null, 2));
         effect(() => className(_el$2, "builder-form-error-text " + css({
           padding: "10px",
@@ -3350,7 +3613,7 @@ function FormComponent(props) {
 var form_default = FormComponent;
 
 // src/blocks/form/input/component-info.ts
-var componentInfo12 = {
+var componentInfo13 = {
   name: "Form:Input",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
@@ -3402,10 +3665,10 @@ var componentInfo12 = {
     borderColor: "#ccc"
   }
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<input>`);
 function FormInputComponent(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$12();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get key() {
         return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
@@ -3435,7 +3698,7 @@ function FormInputComponent(props) {
 var input_default = FormInputComponent;
 
 // src/blocks/form/select/component-info.ts
-var componentInfo13 = {
+var componentInfo14 = {
   name: "Form:Select",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
   defaultStyles: {
@@ -3478,11 +3741,11 @@ var componentInfo13 = {
   static: true,
   noWrap: true
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<select>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
 function SelectComponent(props) {
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$13();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get value() {
         return props.value;
@@ -3504,7 +3767,7 @@ function SelectComponent(props) {
       children: (option, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$24();
+          const _el$2 = _tmpl$25();
           insert(_el$2, () => option.name || option.value);
           effect(() => setAttribute(_el$2, "key", `${option.name}-${index}`));
           effect(() => _el$2.value = option.value);
@@ -3518,7 +3781,7 @@ function SelectComponent(props) {
 var select_default = SelectComponent;
 
 // src/blocks/form/submit-button/component-info.ts
-var componentInfo14 = {
+var componentInfo15 = {
   name: "Form:SubmitButton",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
   defaultStyles: {
@@ -3544,10 +3807,10 @@ var componentInfo14 = {
   // TODO: defaultChildren
   // canHaveChildren: true,
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<button type=submit>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<button type=submit>`);
 function SubmitButton(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     spread(_el$, mergeProps({}, () => props.attributes), false, true);
     insert(_el$, () => props.text);
     return _el$;
@@ -3556,7 +3819,7 @@ function SubmitButton(props) {
 var submit_button_default = SubmitButton;
 
 // src/blocks/img/component-info.ts
-var componentInfo15 = {
+var componentInfo16 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -3571,10 +3834,10 @@ var componentInfo15 = {
   noWrap: true,
   static: true
 };
-var _tmpl$14 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -3598,7 +3861,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo16 = {
+var componentInfo17 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -3680,9 +3943,9 @@ var componentInfo16 = {
     advanced: true
   }]
 };
-var _tmpl$15 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   const videoProps = createMemo(() => {
     return {
@@ -3709,7 +3972,7 @@ function Video(props) {
     };
   });
   return (() => {
-    const _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$34(), _el$2 = _el$.firstChild;
     _el$.style.setProperty("position", "relative");
     spread(_el$2, mergeProps(spreadProps, {
       get preload() {
@@ -3743,7 +4006,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$15();
+        const _el$3 = _tmpl$16();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -3753,7 +4016,7 @@ function Video(props) {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$25();
+        const _el$4 = _tmpl$26();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -3766,7 +4029,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$25();
+        const _el$5 = _tmpl$26();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -3779,7 +4042,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$25();
+        const _el$6 = _tmpl$26();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -3801,28 +4064,28 @@ var video_default = Video;
 // src/constants/extra-components.ts
 var getExtraComponents = () => [{
   component: custom_code_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: embed_default,
-  ...componentInfo10
+  ...componentInfo11
 }, ...TARGET === "rsc" ? [] : [{
   component: form_default,
-  ...componentInfo11
+  ...componentInfo12
 }, {
   component: input_default,
-  ...componentInfo12
+  ...componentInfo13
 }, {
   component: submit_button_default,
-  ...componentInfo14
+  ...componentInfo15
 }, {
   component: select_default,
-  ...componentInfo13
+  ...componentInfo14
 }], {
   component: img_default,
-  ...componentInfo15
+  ...componentInfo16
 }, {
   component: video_default,
-  ...componentInfo16
+  ...componentInfo17
 }];
 
 // src/constants/builder-registered-components.ts
@@ -3849,8 +4112,11 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo7
 }, {
   component: text_default,
+  ...componentInfo9
+}, ...TARGET === "rsc" ? [] : [{
+  component: tabs_default,
   ...componentInfo8
-}, ...getExtraComponents()];
+}], ...getExtraComponents()];
 
 // src/functions/register-component.ts
 var createRegisterComponentMessage = (info) => ({
@@ -3919,10 +4185,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$16 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$16();
+    const _el$ = _tmpl$17();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -4416,7 +4682,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.23";
+var SDK_VERSION = "1.0.24";
 
 // src/functions/register.ts
 var registry = {};
@@ -4612,6 +4878,85 @@ var subscribeToEditor = (model, callback, options) => {
   };
 };
 
+// src/components/content/components/styles.helpers.ts
+var getCssFromFont = (font) => {
+  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+  const name = family.split(",")[0];
+  const url = font.fileUrl ?? font?.files?.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;
+};
+var getFontCss = ({
+  customFonts
+}) => {
+  return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+};
+var getCss = ({
+  cssCode,
+  contentId
+}) => {
+  if (!cssCode) {
+    return "";
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
+};
+var 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;
+}
+`;
+var getDefaultStyles = (isNested) => {
+  return !isNested ? DEFAULT_STYLES : "";
+};
+var getWrapperClassName = (variationId) => {
+  return `variant-${variationId}`;
+};
+
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
@@ -4651,6 +4996,12 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
+  const showContentProps = createMemo(() => {
+    return props.showContent ? {} : {
+      hidden: true,
+      "aria-hidden": true
+    };
+  });
   function processMessage(event) {
     return createEditorListener({
       model: props.model,
@@ -4869,7 +5220,7 @@ function EnableEditor(props) {
         get children() {
           return createComponent(Dynamic, mergeProps({
             get ["class"]() {
-              return `variant-${props.content?.testVariationId || props.content?.id}`;
+              return getWrapperClassName(props.content?.testVariationId || props.content?.id);
             }
           }, {}, {
             ref(r$) {
@@ -4883,10 +5234,7 @@ function EnableEditor(props) {
             get ["builder-model"]() {
               return props.model;
             }
-          }, {}, () => props.showContent ? {} : {
-            hidden: true,
-            "aria-hidden": true
-          }, () => props.contentWrapperProps, {
+          }, {}, showContentProps, () => props.contentWrapperProps, {
             get component() {
               return ContentWrapper();
             },
@@ -4900,84 +5248,6 @@ function EnableEditor(props) {
   });
 }
 var enable_editor_default = EnableEditor;
-
-// src/components/content/components/styles.helpers.ts
-var getCssFromFont = (font) => {
-  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-  const name = family.split(",")[0];
-  const url = font.fileUrl ?? font?.files?.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;
-};
-var getFontCss = ({
-  customFonts
-}) => {
-  return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
-};
-var getCss = ({
-  cssCode,
-  contentId
-}) => {
-  if (!cssCode) {
-    return "";
-  }
-  if (!contentId) {
-    return cssCode;
-  }
-  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
-};
-var 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;
-}
-`;
-var getDefaultStyles = (isNested) => {
-  return !isNested ? DEFAULT_STYLES : "";
-};
-
-// src/components/content/components/styles.tsx
 function ContentStyles(props) {
   const [injectedStyles, setInjectedStyles] = createSignal(`
 ${getCss({
@@ -5396,9 +5666,15 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
+  const blocksWrapper = createMemo(() => {
+    return "div";
+  });
+  const contentWrapper = createMemo(() => {
+    return "div";
+  });
   const className = createMemo(() => {
     return [...[props.attributes[getClassPropName()]], "builder-symbol", props.symbol?.inline ? "builder-inline-symbol" : void 0, props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0].filter(Boolean).join(" ");
   });
@@ -5422,7 +5698,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$17();
+    const _el$ = _tmpl$18();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -5461,8 +5737,12 @@ function Symbol(props) {
       get linkComponent() {
         return props.builderLinkComponent;
       },
-      blocksWrapper: "div",
-      contentWrapper: "div"
+      get blocksWrapper() {
+        return blocksWrapper();
+      },
+      get contentWrapper() {
+        return contentWrapper();
+      }
     }));
     return _el$;
   })();