@builder.io/sdk-solid 1.0.22 → 1.0.24

package/lib/node/dev.jsx

@@ -46,14 +46,15 @@ var getClassPropName = () => {
     case "vue":
     case "solid":
     case "qwik":
+    case "angular":
       return "class";
   }
 };
 
 // src/blocks/button/button.tsx
 function Button(props) {
-  return <Dynamic_renderer_default
-    attributes={{
+  function attrs() {
+    return {
       ...props.attributes,
       [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
       ...props.link ? {
@@ -63,7 +64,10 @@ function Button(props) {
       } : {
         role: "button"
       }
-    }}
+    };
+  }
+  return <Dynamic_renderer_default
+    attributes={attrs()}
     TagName={props.link ? props.builderLinkComponent || "a" : "button"}
     actionAttributes={{}}
   >{props.text}</Dynamic_renderer_default>;
@@ -71,7 +75,7 @@ function Button(props) {
 var button_default = Button;
 
 // src/blocks/columns/columns.tsx
-import { Show as Show6, For as For4, createSignal as createSignal6, createMemo as createMemo6 } from "solid-js";
+import { Show as Show6, For as For4, createSignal as createSignal7 } from "solid-js";
 import { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
@@ -99,7 +103,7 @@ import { createContext as createContext2 } from "solid-js";
 var components_context_default = createContext2({ registeredComponents: {} });
 
 // src/components/block/block.tsx
-import { Show as Show4, For as For2, onMount, createMemo as createMemo4 } from "solid-js";
+import { Show as Show4, For as For2, onMount, createMemo as createMemo5 } from "solid-js";
 
 // src/functions/get-block-component-options.ts
 function getBlockComponentOptions(block) {
@@ -516,7 +520,6 @@ function evaluate({
   enableCache
 }) {
   if (code === "") {
-    logger.warn("Skipping evaluation of empty code block.");
     return void 0;
   }
   const args = {
@@ -845,6 +848,7 @@ function mapStyleObjToStrIfNeeded(style) {
     case "svelte":
     case "vue":
     case "solid":
+    case "angular":
       return convertStyleMapToCSSArray(style).join(" ");
     case "qwik":
     case "reactNative":
@@ -920,6 +924,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/components/block/components/block-styles.tsx
 import { Show as Show2, createMemo } from "solid-js";
@@ -1163,15 +1173,15 @@ function BlockWrapper(props) {
 var Block_wrapper_default = BlockWrapper;
 
 // src/components/block/components/component-ref/component-ref.tsx
-import { Show as Show3, For, createSignal as createSignal2 } from "solid-js";
+import { Show as Show3, For, createSignal as createSignal3 } from "solid-js";
 import { Dynamic as Dynamic3 } from "solid-js/web";
 
 // src/components/block/components/interactive-element.tsx
+import { createMemo as createMemo2 } from "solid-js";
 import { Dynamic as Dynamic2 } from "solid-js/web";
 function InteractiveElement(props) {
-  return <Dynamic2
-    {...props.wrapperProps}
-    attributes={props.includeBlockProps ? {
+  const attributes = createMemo2(() => {
+    return props.includeBlockProps ? {
       ...getBlockProperties({
         block: props.block,
         context: props.context
@@ -1183,7 +1193,11 @@ function InteractiveElement(props) {
         localState: props.context.localState,
         context: props.context.context
       })
-    } : {}}
+    } : {};
+  });
+  return <Dynamic2
+    {...props.wrapperProps}
+    attributes={attributes()}
     component={props.Wrapper}
   >{props.children}</Dynamic2>;
 }
@@ -1224,7 +1238,7 @@ var getWrapperProps = ({
 
 // src/components/block/components/component-ref/component-ref.tsx
 function ComponentRef(props) {
-  const [Wrapper, setWrapper] = createSignal2(
+  const [Wrapper, setWrapper] = createSignal3(
     props.isInteractive ? interactive_element_default : props.componentRef
   );
   return <Show3 when={props.componentRef}><Dynamic3
@@ -1253,9 +1267,9 @@ function ComponentRef(props) {
 var Component_ref_default = ComponentRef;
 
 // src/components/block/components/repeated-block.tsx
-import { createSignal as createSignal3 } from "solid-js";
+import { createSignal as createSignal4 } from "solid-js";
 function RepeatedBlock(props) {
-  const [store, setStore] = createSignal3(props.repeatContext);
+  const [store, setStore] = createSignal4(props.repeatContext);
   return <builder_context_default.Provider value={store()}><Block_default
     block={props.block}
     context={store()}
@@ -1267,20 +1281,20 @@ var Repeated_block_default = RepeatedBlock;
 
 // src/components/block/block.tsx
 function Block(props) {
-  const blockComponent = createMemo4(() => {
+  const blockComponent = createMemo5(() => {
     return getComponent({
       block: props.block,
       context: props.context,
       registeredComponents: props.registeredComponents
     });
   });
-  const repeatItem = createMemo4(() => {
+  const repeatItem = createMemo5(() => {
     return getRepeatItemData({
       block: props.block,
       context: props.context
     });
   });
-  const processedBlock = createMemo4(() => {
+  const processedBlock = createMemo5(() => {
     return props.block.repeat?.collection ? props.block : getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -1290,14 +1304,14 @@ function Block(props) {
       shouldEvaluateBindings: true
     });
   });
-  const Tag = createMemo4(() => {
+  const Tag = createMemo5(() => {
     const shouldUseLink = props.block.tagName === "a" || processedBlock().properties?.href || processedBlock().href;
     if (shouldUseLink) {
       return props.linkComponent || "a";
     }
     return props.block.tagName || "div";
   });
-  const canShowBlock = createMemo4(() => {
+  const canShowBlock = createMemo5(() => {
     if (props.block.repeat?.collection) {
       if (repeatItem()?.length)
         return true;
@@ -1307,21 +1321,21 @@ function Block(props) {
     const shouldShow = "show" in processedBlock() ? processedBlock().show : true;
     return shouldShow && !shouldHide;
   });
-  const childrenWithoutParentComponent = createMemo4(() => {
+  const childrenWithoutParentComponent = createMemo5(() => {
     const shouldRenderChildrenOutsideRef = !blockComponent()?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? processedBlock().children ?? [] : [];
   });
-  const componentRefProps = createMemo4(() => {
+  const componentRefProps = createMemo5(() => {
     return {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
       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
         } : {}
       },
@@ -1405,11 +1419,11 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { createMemo as createMemo5 } from "solid-js";
+import { createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 import { css } from "solid-styled-components";
 function BlocksWrapper(props) {
-  const className = createMemo5(() => {
+  const className = createMemo6(() => {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   });
   function onClick() {
@@ -1483,16 +1497,24 @@ 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
 function Columns(props) {
-  const [gutterSize, setGutterSize] = createSignal6(
+  const [gutterSize, setGutterSize] = createSignal7(
     typeof props.space === "number" ? props.space || 0 : 20
   );
-  const [cols, setCols] = createSignal6(props.columns || []);
-  const [stackAt, setStackAt] = createSignal6(props.stackColumnsAt || "tablet");
-  const [flexDir, setFlexDir] = createSignal6(
+  const [cols, setCols] = createSignal7(props.columns || []);
+  const [stackAt, setStackAt] = createSignal7(props.stackColumnsAt || "tablet");
+  const [flexDir, setFlexDir] = createSignal7(
     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;
   }
@@ -1512,7 +1534,7 @@ function Columns(props) {
   }) {
     return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
-  const columnsCssVars = createMemo6(() => {
+  function columnsCssVars() {
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -1520,7 +1542,7 @@ function Columns(props) {
         desktopStyle: "row"
       })
     };
-  });
+  }
   function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
@@ -1561,7 +1583,7 @@ function Columns(props) {
     );
     return breakpointSizes[size].max;
   }
-  const columnsStyles = createMemo6(() => {
+  function columnsStyles() {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1587,9 +1609,19 @@ function Columns(props) {
           }
         },
       `;
-  });
+  }
+  function getAttributes(column, index) {
+    return {
+      ...{},
+      ...column.link ? {
+        href: column.link
+      } : {},
+      [getClassPropName()]: "builder-column",
+      style: mapStyleObjToStrIfNeeded(columnCssVars(index))
+    };
+  }
   return <div
-    class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css2({
+    class={getColumnsClass(props.builderBlock?.id) + " " + css2({
       display: "flex",
       lineHeight: "normal"
     })}
@@ -1604,16 +1636,9 @@ function Columns(props) {
       const index = _index();
       return <Dynamic_renderer_default
         key={index}
-        TagName={column.link ? props.builderLinkComponent || "a" : "div"}
+        TagName={getTagName(column)}
         actionAttributes={{}}
-        attributes={{
-          ...{},
-          ...column.link ? {
-            href: column.link
-          } : {},
-          [getClassPropName()]: "builder-column",
-          style: mapStyleObjToStrIfNeeded(columnCssVars(index))
-        }}
+        attributes={getAttributes(column, index)}
       ><Blocks_default
         path={`component.options.columns.${index}.blocks`}
         parent={props.builderBlock.id}
@@ -1637,7 +1662,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show7, createMemo as createMemo7 } from "solid-js";
+import { Show as Show7, createMemo as createMemo8 } from "solid-js";
 import { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
@@ -1689,7 +1714,7 @@ function getSrcSet(url) {
 
 // src/blocks/image/image.tsx
 function Image(props) {
-  const srcSetToUse = createMemo7(() => {
+  const srcSetToUse = createMemo8(() => {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
     if (!url || // We can auto add srcset for cdn.builder.io and shopify
@@ -1707,14 +1732,14 @@ function Image(props) {
     }
     return getSrcSet(url);
   });
-  const webpSrcSet = createMemo7(() => {
+  const webpSrcSet = createMemo8(() => {
     if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
     } else {
       return "";
     }
   });
-  const aspectRatioCss = createMemo7(() => {
+  const aspectRatioCss = createMemo8(() => {
     const aspectRatioStyles = {
       position: "absolute",
       height: "100%",
@@ -1759,7 +1784,7 @@ function Image(props) {
       }}
     /></Show7>
     <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-    <Show7 when={!props.fitContent && props.children}><div
+    <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div
       class={css3({
         display: "flex",
         flexDirection: "column",
@@ -1797,10 +1822,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo16, createSignal as createSignal16 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo18, createSignal as createSignal18 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show12, For as For7, onMount as onMount4, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
+import { Show as Show13, For as For8, onMount as onMount4, createSignal as createSignal17, createMemo as createMemo17 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1994,7 +2019,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show11, createSignal as createSignal14 } from "solid-js";
+import { Show as Show12, createSignal as createSignal16 } from "solid-js";
 
 // src/blocks/button/component-info.ts
 var componentInfo = {
@@ -2496,8 +2521,203 @@ 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"
+    }]
+  }]
+};
+
+// src/blocks/tabs/tabs.tsx
+import { Show as Show8, For as For5, createSignal as createSignal9 } from "solid-js";
+function Tabs(props) {
+  const [activeTab, setActiveTab] = createSignal9(
+    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 <div>
+    <div
+      class="builder-tabs-wrap"
+      style={{
+        display: "flex",
+        "flex-direction": "row",
+        "justify-content": props.tabHeaderLayout || "flex-start",
+        overflow: "auto"
+      }}
+    ><For5 each={props.tabs}>{(tab, _index) => {
+      const index = _index();
+      return <span
+        class={`builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`}
+        key={index}
+        style={getActiveTabStyle(index)}
+        onClick={(event) => {
+          if (index === activeTab() && props.collapsible) {
+            setActiveTab(-1);
+          } else {
+            setActiveTab(index);
+          }
+        }}
+      ><Blocks_default
+        parent={props.builderBlock.id}
+        path={`component.options.tabs.${index}.label`}
+        blocks={tab.label}
+        context={props.builderContext}
+        registeredComponents={props.builderComponents}
+        linkComponent={props.builderLinkComponent}
+      /></span>;
+    }}</For5></div>
+    <Show8 when={activeTabContent(activeTab())}><div><Blocks_default
+      parent={props.builderBlock.id}
+      path={`component.options.tabs.${activeTab()}.content`}
+      blocks={activeTabContent(activeTab())}
+      context={props.builderContext}
+      registeredComponents={props.builderComponents}
+      linkComponent={props.builderLinkComponent}
+    /></div></Show8>
+  </div>;
+}
+var tabs_default = Tabs;
+
+// src/blocks/text/component-info.ts
+var componentInfo9 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2530,7 +2750,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"],
@@ -2555,10 +2775,10 @@ var componentInfo9 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount2, createSignal as createSignal8 } from "solid-js";
+import { onMount as onMount2, createSignal as createSignal10 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal8([]);
-  const [scriptsRun, setScriptsRun] = createSignal8([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal10([]);
+  const [scriptsRun, setScriptsRun] = createSignal10([]);
   let elementRef;
   onMount2(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
@@ -2602,7 +2822,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -2640,7 +2860,7 @@ var componentInfo10 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on, createEffect, createMemo as createMemo9, createSignal as createSignal9 } from "solid-js";
+import { on, createEffect, createMemo as createMemo11, createSignal as createSignal11 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -2648,9 +2868,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal9([]);
-  const [scriptsRun, setScriptsRun] = createSignal9([]);
-  const [ranInitFn, setRanInitFn] = createSignal9(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
+  const [scriptsRun, setScriptsRun] = createSignal11([]);
+  const [ranInitFn, setRanInitFn] = createSignal11(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -2674,8 +2894,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo9(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo9(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo11(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo11(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -2690,7 +2910,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: {
@@ -2924,7 +3144,7 @@ var componentInfo11 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show8, For as For5, createSignal as createSignal10 } from "solid-js";
+import { Show as Show9, For as For6, createSignal as createSignal12 } from "solid-js";
 import { css as css4 } from "solid-styled-components";
 
 // src/functions/get-env.ts
@@ -2942,9 +3162,9 @@ var get = (obj, path, defaultValue) => {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal10("unsubmitted");
-  const [responseData, setResponseData] = createSignal10(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal10("");
+  const [formState, setFormState] = createSignal12("unsubmitted");
+  const [responseData, setResponseData] = createSignal12(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal12("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3140,7 +3360,7 @@ function FormComponent(props) {
     {...{}}
     {...props.attributes}
   >
-    <Show8 when={props.builderBlock && props.builderBlock.children}><For5 each={props.builderBlock?.children}>{(block, _index) => {
+    <Show9 when={props.builderBlock && props.builderBlock.children}><For6 each={props.builderBlock?.children}>{(block, _index) => {
       const idx = _index();
       return <Block_default
         key={`form-block-${idx}`}
@@ -3149,35 +3369,35 @@ function FormComponent(props) {
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
       />;
-    }}</For5></Show8>
-    <Show8 when={submissionState() === "error"}><Blocks_default
+    }}</For6></Show9>
+    <Show9 when={submissionState() === "error"}><Blocks_default
       path="errorMessage"
       blocks={props.errorMessage}
       context={props.builderContext}
-    /></Show8>
-    <Show8 when={submissionState() === "sending"}><Blocks_default
+    /></Show9>
+    <Show9 when={submissionState() === "sending"}><Blocks_default
       path="sendingMessage"
       blocks={props.sendingMessage}
       context={props.builderContext}
-    /></Show8>
-    <Show8 when={submissionState() === "error" && responseData()}><pre
+    /></Show9>
+    <Show9 when={submissionState() === "error" && responseData()}><pre
       class={"builder-form-error-text " + css4({
         padding: "10px",
         color: "red",
         textAlign: "center"
       })}
-    >{JSON.stringify(responseData(), null, 2)}</pre></Show8>
-    <Show8 when={submissionState() === "success"}><Blocks_default
+    >{JSON.stringify(responseData(), null, 2)}</pre></Show9>
+    <Show9 when={submissionState() === "success"}><Blocks_default
       path="successMessage"
       blocks={props.successMessage}
       context={props.builderContext}
-    /></Show8>
+    /></Show9>
   </form>;
 }
 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: [
@@ -3247,7 +3467,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: {
@@ -3292,7 +3512,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/select/select.tsx
-import { For as For6 } from "solid-js";
+import { For as For7 } from "solid-js";
 function SelectComponent(props) {
   return <select
     {...{}}
@@ -3301,15 +3521,15 @@ function SelectComponent(props) {
     key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
     defaultValue={props.defaultValue}
     name={props.name}
-  ><For6 each={props.options}>{(option, _index) => {
+  ><For7 each={props.options}>{(option, _index) => {
     const index = _index();
     return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
-  }}</For6></select>;
+  }}</For7></select>;
 }
 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: {
@@ -3343,7 +3563,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,
@@ -3376,7 +3596,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo16 = {
+var componentInfo17 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -3460,9 +3680,9 @@ var componentInfo16 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show9, createMemo as createMemo11 } from "solid-js";
+import { Show as Show10, createMemo as createMemo13 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo11(() => {
+  const videoProps = createMemo13(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3481,7 +3701,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo11(() => {
+  const spreadProps = createMemo13(() => {
     return {
       ...videoProps()
     };
@@ -3511,8 +3731,8 @@ function Video(props) {
       }}
       src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show9 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show9></video>
-    <Show9
+    ><Show10 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show10></video>
+    <Show10
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
       style={{
@@ -3521,15 +3741,15 @@ function Video(props) {
         "pointer-events": "none",
         "font-size": "0px"
       }}
-    /></Show9>
-    <Show9 when={props.builderBlock?.children?.length && props.fitContent}><div
+    /></Show10>
+    <Show10 when={props.builderBlock?.children?.length && props.fitContent}><div
       style={{
         display: "flex",
         "flex-direction": "column",
         "align-items": "stretch"
       }}
-    >{props.children}</div></Show9>
-    <Show9 when={props.builderBlock?.children?.length && !props.fitContent}><div
+    >{props.children}</div></Show10>
+    <Show10 when={props.builderBlock?.children?.length && !props.fitContent}><div
       style={{
         "pointer-events": "none",
         display: "flex",
@@ -3541,7 +3761,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show9>
+    >{props.children}</div></Show10>
   </div>;
 }
 var video_default = Video;
@@ -3549,28 +3769,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
@@ -3597,8 +3817,11 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo7
 }, {
   component: text_default,
+  ...componentInfo9
+}, ...TARGET === "rsc" ? [] : [{
+  component: tabs_default,
   ...componentInfo8
-}, ...getExtraComponents()];
+}], ...getExtraComponents()];
 
 // src/functions/register-component.ts
 var createRegisterComponentMessage = (info) => ({
@@ -3676,12 +3899,12 @@ var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
 import {
-  Show as Show10,
+  Show as Show11,
   onMount as onMount3,
   on as on2,
   createEffect as createEffect2,
-  createMemo as createMemo12,
-  createSignal as createSignal12
+  createMemo as createMemo14,
+  createSignal as createSignal14
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4169,7 +4392,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.22";
+var SDK_VERSION = "1.0.24";
 
 // src/functions/register.ts
 var registry = {};
@@ -4366,14 +4589,93 @@ 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] = createSignal12(
+  const [ContentWrapper, setContentWrapper] = createSignal14(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal12({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal12({});
-  const [clicked, setClicked] = createSignal12(false);
+  const [httpReqsData, setHttpReqsData] = createSignal14({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal14({});
+  const [clicked, setClicked] = createSignal14(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -4407,6 +4709,12 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
+  const showContentProps = createMemo14(() => {
+    return props.showContent ? {} : {
+      hidden: true,
+      "aria-hidden": true
+    };
+  });
   function processMessage(event) {
     return createEditorListener({
       model: props.model,
@@ -4592,14 +4900,14 @@ function EnableEditor(props) {
     runHttpRequests();
     emitStateUpdate();
   });
-  const onUpdateFn_0_props_content = createMemo12(() => props.content);
+  const onUpdateFn_0_props_content = createMemo14(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect2(on2(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo12(() => props.builderContextSignal.content?.data?.jsCode);
+  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo14(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_1() {
     evaluateJsCode();
   }
@@ -4609,7 +4917,7 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo12(() => props.builderContextSignal.content?.data?.httpRequests);
+  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo14(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_2() {
     runHttpRequests();
   }
@@ -4621,7 +4929,7 @@ function EnableEditor(props) {
       onUpdateFn_2
     )
   );
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo12(
+  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo14(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_3() {
@@ -4633,14 +4941,14 @@ function EnableEditor(props) {
       onUpdateFn_3
     )
   );
-  const onUpdateFn_4_props_data = createMemo12(() => props.data);
+  const onUpdateFn_4_props_data = createMemo14(() => props.data);
   function onUpdateFn_4() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect2(on2(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo12(() => props.locale);
+  const onUpdateFn_5_props_locale = createMemo14(() => props.locale);
   function onUpdateFn_5() {
     if (props.locale) {
       mergeNewRootState({
@@ -4649,106 +4957,27 @@ function EnableEditor(props) {
     }
   }
   createEffect2(on2(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
-    class={`variant-${props.content?.testVariationId || props.content?.id}`}
+  return <builder_context_default.Provider value={props.builderContextSignal}><Show11 when={props.builderContextSignal.content}><Dynamic5
+    class={getWrapperClassName(
+      props.content?.testVariationId || props.content?.id
+    )}
     {...{}}
     ref={elementRef}
     onClick={(event) => onClick(event)}
     builder-content-id={props.builderContextSignal.content?.id}
     builder-model={props.model}
     {...{}}
-    {...props.showContent ? {} : {
-      hidden: true,
-      "aria-hidden": true
-    }}
+    {...showContentProps()}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show10></builder_context_default.Provider>;
+  >{props.children}</Dynamic5></Show11></builder_context_default.Provider>;
 }
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal13 } from "solid-js";
-
-// 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
+import { createSignal as createSignal15 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal13(
+  const [injectedStyles, setInjectedStyles] = createSignal15(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -4805,7 +5034,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal14(
+  const [scriptStr, setScriptStr] = createSignal16(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -4813,7 +5042,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal14(
+  const [registeredComponents, setRegisteredComponents] = createSignal16(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -4828,7 +5057,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal14({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal16({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -4886,16 +5115,16 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show11 when={props.isSsrAbTest}><Inlined_script_default
+    <Show12 when={props.isSsrAbTest}><Inlined_script_default
       id="builderio-variant-visibility"
       scriptStr={scriptStr()}
-    /></Show11>
-    <Show11 when={TARGET !== "reactNative"}><Styles_default
+    /></Show12>
+    <Show12 when={TARGET !== "reactNative"}><Styles_default
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show11>
+    /></Show12>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
@@ -4908,13 +5137,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal15(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal17(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo15(() => {
+  const updateCookieAndStylesScriptStr = createMemo17(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -4923,10 +5152,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo15(() => {
+  const hideVariantsStyleString = createMemo17(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo15(() => {
+  const defaultContent = createMemo17(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -4939,11 +5168,11 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+    <Show13 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
-    /></Show12>
-    <Show12 when={shouldRenderVariants()}>
+    /></Show13>
+    <Show13 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"
         styles={hideVariantsStyleString()}
@@ -4952,7 +5181,7 @@ function ContentVariants(props) {
         id="builderio-variants-visibility"
         scriptStr={updateCookieAndStylesScriptStr()}
       />
-      <For7 each={getVariants(props.content)}>{(variant, _index) => {
+      <For8 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           isNestedRender={props.isNestedRender}
@@ -4976,8 +5205,8 @@ function ContentVariants(props) {
           contentWrapperProps={props.contentWrapperProps}
           trustedHosts={props.trustedHosts}
         />;
-      }}</For7>
-    </Show12>
+      }}</For8>
+    </Show13>
     <Content_default
       isNestedRender={props.isNestedRender}
       {...{}}
@@ -5030,8 +5259,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal16(props.symbol?.content);
-  const className = createMemo16(() => {
+  const [contentToUse, setContentToUse] = createSignal18(props.symbol?.content);
+  const blocksWrapper = createMemo18(() => {
+    return "div";
+  });
+  const contentWrapper = createMemo18(() => {
+    return "div";
+  });
+  const className = createMemo18(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5053,7 +5288,7 @@ function Symbol(props) {
   }
   onMount5(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo16(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo18(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }
@@ -5075,8 +5310,8 @@ function Symbol(props) {
     model={props.symbol?.model}
     content={contentToUse()}
     linkComponent={props.builderLinkComponent}
-    blocksWrapper="div"
-    contentWrapper="div"
+    blocksWrapper={blocksWrapper()}
+    contentWrapper={contentWrapper()}
   /></div>;
 }
 var symbol_default = Symbol;