@builder.io/sdk-solid 1.0.27 → 1.0.29

package/lib/browser/dev.jsx

@@ -470,6 +470,9 @@ function getProcessedBlock({
   }
 }
 
+// src/functions/camel-to-kebab-case.ts
+var camelToKebabCase = (str) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase() : "";
+
 // src/components/block/animator.ts
 function throttle(func, wait, options = {}) {
   let context;
@@ -520,7 +523,6 @@ function assign(target, ..._args) {
   }
   return to;
 }
-var camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : "";
 function bindAnimations(animations) {
   for (const animation of animations) {
     switch (animation.trigger) {
@@ -573,7 +575,7 @@ function triggerAnimation(animation) {
     element.style.transitionDelay = "0";
     assign(element.style, animation.steps[0].styles);
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay) {
         element.style.transitionDelay = animation.delay + "s";
       }
@@ -633,7 +635,7 @@ function bindScrollInViewAnimation(animation) {
     }
     attachDefaultState();
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay) {
         element.style.transitionDelay = animation.delay + "s";
       }
@@ -646,9 +648,6 @@ function bindScrollInViewAnimation(animation) {
   });
 }
 
-// src/functions/camel-to-kebab-case.ts
-var camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-
 // src/helpers/css.ts
 var convertStyleMapToCSSArray = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
@@ -778,10 +777,10 @@ var getRepeatItemData = ({
   return repeatArray;
 };
 var shouldPassLinkComponent = (block) => {
-  return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(block.name));
+  return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name));
 };
 var shouldPassRegisteredComponents = (block) => {
-  return block && (block.isRSC || ["Symbol", "Columns", "Form:Form", "Builder: Tabs"].includes(block.name));
+  return block && (block.isRSC || ["Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name));
 };
 
 // src/components/block/components/block-styles.tsx
@@ -910,7 +909,7 @@ function BlockStyles(props) {
         className: `${className}:hover`,
         styles: {
           ...hoverStyles,
-          transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(
+          transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
             hoverAnimation.easing
           )}`,
           transitionDelay: hoverAnimation.delay ? `${hoverAnimation.delay}s` : "0s"
@@ -1675,10 +1674,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 createMemo18, createSignal as createSignal18 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show13, For as For8, onMount as onMount4, createSignal as createSignal17, createMemo as createMemo17 } from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1872,10 +1871,286 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show12, createSignal as createSignal16 } from "solid-js";
+import { Show as Show13, createSignal as createSignal17 } from "solid-js";
 
-// src/blocks/button/component-info.ts
+// src/blocks/accordion/component-info.ts
+var defaultTitle = {
+  "@type": "@builder.io/sdk:Element",
+  layerName: "Accordion item title",
+  responsiveStyles: {
+    large: {
+      marginTop: "10px",
+      position: "relative",
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      paddingBottom: "10px"
+    }
+  },
+  children: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "I am an accordion title. Click me!"
+      }
+    }
+  }]
+};
+var defaultDetail = {
+  "@type": "@builder.io/sdk:Element",
+  layerName: "Accordion item detail",
+  responsiveStyles: {
+    large: {
+      position: "relative",
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      marginTop: "10px",
+      paddingBottom: "10px"
+    }
+  },
+  children: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        paddingTop: "50px",
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column",
+        paddingBottom: "50px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "I am an accordion detail, hello!"
+      }
+    }
+  }]
+};
 var componentInfo = {
+  name: "Builder:Accordion",
+  canHaveChildren: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
+  defaultStyles: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  },
+  inputs: [{
+    name: "items",
+    type: "list",
+    broadcast: true,
+    subFields: [{
+      name: "title",
+      type: "uiBlocks",
+      hideFromUI: true,
+      defaultValue: [defaultTitle]
+    }, {
+      name: "detail",
+      type: "uiBlocks",
+      hideFromUI: true,
+      defaultValue: [defaultDetail]
+    }],
+    defaultValue: [{
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }, {
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }],
+    showIf: (options) => !options.get("useChildrenForItems")
+  }, {
+    name: "oneAtATime",
+    helperText: "Only allow opening one at a time (collapse all others when new item openned)",
+    type: "boolean",
+    defaultValue: false
+  }, {
+    name: "grid",
+    helperText: "Display as a grid",
+    type: "boolean",
+    defaultValue: false
+  }, {
+    name: "gridRowWidth",
+    helperText: "Display as a grid",
+    type: "string",
+    showIf: (options) => options.get("grid"),
+    defaultValue: "25%"
+  }, {
+    name: "useChildrenForItems",
+    type: "boolean",
+    helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
+    advanced: true,
+    defaultValue: false,
+    onChange: (options) => {
+      if (options.get("useChildrenForItems") === true) {
+        options.set("items", []);
+      }
+    }
+  }]
+};
+
+// src/blocks/accordion/accordion.tsx
+import { Show as Show8, For as For5, createSignal as createSignal9, createMemo as createMemo9 } from "solid-js";
+
+// src/blocks/accordion/helpers.ts
+var convertOrderNumberToString = (order) => {
+  return order.toString();
+};
+
+// src/blocks/accordion/accordion.tsx
+function Accordion(props) {
+  const [open, setOpen] = createSignal9([]);
+  const onlyOneAtATime = createMemo9(() => {
+    return Boolean(props.grid || props.oneAtATime);
+  });
+  const accordionStyles = createMemo9(() => {
+    const styles = {
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      ...props.grid && {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        flexWrap: "wrap"
+      }
+    };
+    return Object.fromEntries(
+      Object.entries(styles).map(([key, value]) => [
+        camelToKebabCase(key),
+        value
+      ])
+    );
+  });
+  const accordionTitleStyles = createMemo9(() => {
+    const shared = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    const styles = Object.fromEntries(
+      Object.entries({
+        ...shared,
+        alignItems: "stretch",
+        cursor: "pointer"
+      }).map(([key, value]) => [camelToKebabCase(key), value])
+    );
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== void 0)
+    );
+  });
+  function getAccordionTitleClassName(index) {
+    return `builder-accordion-title builder-accordion-title-${open().includes(index) ? "open" : "closed"}`;
+  }
+  function getAccordionDetailClassName(index) {
+    return `builder-accordion-detail builder-accordion-detail-${open().includes(index) ? "open" : "closed"}`;
+  }
+  const openGridItemOrder = createMemo9(() => {
+    let itemOrder = null;
+    const getOpenGridItemPosition = props.grid && open().length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = open()[0];
+      const openItem = document.querySelector(
+        `.builder-accordion-title[data-index="${openItemIndex}"]`
+      );
+      let subjectItem = openItem;
+      itemOrder = openItemIndex;
+      if (subjectItem) {
+        let prevItemRect = subjectItem.getBoundingClientRect();
+        while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
+          if (subjectItem) {
+            if (subjectItem.classList.contains("builder-accordion-detail")) {
+              continue;
+            }
+            const subjectItemRect = subjectItem.getBoundingClientRect();
+            if (subjectItemRect.left > prevItemRect.left) {
+              const index = parseInt(
+                subjectItem.getAttribute("data-index") || "",
+                10
+              );
+              if (!isNaN(index)) {
+                prevItemRect = subjectItemRect;
+                itemOrder = index;
+              }
+            } else {
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (typeof itemOrder === "number") {
+      itemOrder = itemOrder + 1;
+    }
+    return itemOrder;
+  });
+  const accordionDetailStyles = createMemo9(() => {
+    const styles = {
+      ...{
+        order: typeof openGridItemOrder() === "number" ? openGridItemOrder() : void 0
+      },
+      ...props.grid && {
+        width: "100%"
+      }
+    };
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== void 0)
+    );
+  });
+  function onClick(index) {
+    if (open().includes(index)) {
+      setOpen(onlyOneAtATime() ? [] : open().filter((item) => item !== index));
+    } else {
+      setOpen(onlyOneAtATime() ? [index] : open().concat(index));
+    }
+  }
+  return <div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
+    const index = _index();
+    return <>
+      <div
+        class={getAccordionTitleClassName(index)}
+        style={{
+          ...accordionTitleStyles(),
+          width: props.grid ? props.gridRowWidth : void 0,
+          ...{
+            order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
+          }
+        }}
+        data-index={index}
+        onClick={(event) => onClick(index)}
+      ><Blocks_default
+        blocks={item.title}
+        path={`items.${index}.title`}
+        parent={props.builderBlock.id}
+        context={props.builderContext}
+        registeredComponents={props.builderComponents}
+        linkComponent={props.builderLinkComponent}
+      /></div>
+      <Show8 when={open().includes(index)}><div
+        class={getAccordionDetailClassName(index)}
+        style={accordionDetailStyles()}
+      ><Blocks_default
+        blocks={item.detail}
+        path={`items.${index}.detail`}
+        parent={props.builderBlock.id}
+        context={props.builderContext}
+        registeredComponents={props.builderComponents}
+        linkComponent={props.builderLinkComponent}
+      /></div></Show8>
+    </>;
+  }}</For5></div>;
+}
+var accordion_default = Accordion;
+
+// src/blocks/button/component-info.ts
+var componentInfo2 = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -1911,7 +2186,7 @@ var componentInfo = {
 };
 
 // src/blocks/columns/component-info.ts
-var componentInfo2 = {
+var componentInfo3 = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: true,
@@ -2131,7 +2406,7 @@ var componentInfo2 = {
 };
 
 // src/blocks/fragment/component-info.ts
-var componentInfo3 = {
+var componentInfo4 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -2140,7 +2415,7 @@ var componentInfo3 = {
 };
 
 // src/blocks/image/component-info.ts
-var componentInfo4 = {
+var componentInfo5 = {
   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",
@@ -2263,7 +2538,7 @@ var componentInfo4 = {
 };
 
 // src/blocks/section/component-info.ts
-var componentInfo5 = {
+var componentInfo6 = {
   name: "Core:Section",
   static: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2305,7 +2580,7 @@ var componentInfo5 = {
 };
 
 // src/blocks/slot/component-info.ts
-var componentInfo6 = {
+var componentInfo7 = {
   name: "Slot",
   isRSC: true,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2339,7 +2614,7 @@ function Slot(props) {
 var slot_default = Slot;
 
 // src/blocks/symbol/component-info.ts
-var componentInfo7 = {
+var componentInfo8 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2415,7 +2690,7 @@ var defaultElement = {
     }
   }
 };
-var componentInfo8 = {
+var componentInfo9 = {
   name: "Builder: Tabs",
   inputs: [{
     name: "tabs",
@@ -2515,16 +2790,20 @@ var componentInfo8 = {
 };
 
 // src/blocks/tabs/tabs.tsx
-import { Show as Show8, For as For5, createSignal as createSignal9 } from "solid-js";
+import { Show as Show9, For as For6, createSignal as createSignal10 } from "solid-js";
 function Tabs(props) {
-  const [activeTab, setActiveTab] = createSignal9(
+  const [activeTab, setActiveTab] = createSignal10(
     props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
   );
   function activeTabContent(active) {
     return props.tabs && props.tabs[active].content;
   }
-  function getActiveTabStyle(index) {
-    return activeTab() === index ? props.activeTabStyle : {};
+  function onClick(index) {
+    if (index === activeTab() && props.collapsible) {
+      setActiveTab(-1);
+    } else {
+      setActiveTab(index);
+    }
   }
   return <div>
     <div
@@ -2535,19 +2814,15 @@ function Tabs(props) {
         "justify-content": props.tabHeaderLayout || "flex-start",
         overflow: "auto"
       }}
-    ><For5 each={props.tabs}>{(tab, _index) => {
+    ><For6 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);
-          }
+        style={{
+          ...activeTab() === index ? props.activeTabStyle : {}
         }}
+        onClick={(event) => onClick(index)}
       ><Blocks_default
         parent={props.builderBlock.id}
         path={`component.options.tabs.${index}.label`}
@@ -2556,21 +2831,21 @@ function Tabs(props) {
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
       /></span>;
-    }}</For5></div>
-    <Show8 when={activeTabContent(activeTab())}><div><Blocks_default
+    }}</For6></div>
+    <Show9 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></Show9>
   </div>;
 }
 var tabs_default = Tabs;
 
 // src/blocks/text/component-info.ts
-var componentInfo9 = {
+var componentInfo10 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2603,7 +2878,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/custom-code/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Custom Code",
   static: true,
   requiredPermissions: ["editCode"],
@@ -2628,10 +2903,10 @@ var componentInfo10 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount2, createSignal as createSignal10 } from "solid-js";
+import { onMount as onMount2, createSignal as createSignal11 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal10([]);
-  const [scriptsRun, setScriptsRun] = createSignal10([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
+  const [scriptsRun, setScriptsRun] = createSignal11([]);
   let elementRef;
   onMount2(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
@@ -2675,7 +2950,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -2713,7 +2988,7 @@ var componentInfo11 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on, createEffect, createMemo as createMemo11, createSignal as createSignal11 } from "solid-js";
+import { on, createEffect, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -2721,9 +2996,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
-  const [scriptsRun, setScriptsRun] = createSignal11([]);
-  const [ranInitFn, setRanInitFn] = createSignal11(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
+  const [ranInitFn, setRanInitFn] = createSignal12(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -2747,8 +3022,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo11(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo11(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo12(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -2763,7 +3038,7 @@ function Embed(props) {
 var embed_default = Embed;
 
 // src/blocks/form/form/component-info.ts
-var componentInfo12 = {
+var componentInfo13 = {
   name: "Form:Form",
   // editableTags: ['builder-form-error']
   defaults: {
@@ -2997,7 +3272,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show9, For as For6, createSignal as createSignal12 } from "solid-js";
+import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
 import { css as css4 } from "solid-styled-components";
 
 // src/functions/get-env.ts
@@ -3015,9 +3290,9 @@ var get = (obj, path, defaultValue) => {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal12("unsubmitted");
-  const [responseData, setResponseData] = createSignal12(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal12("");
+  const [formState, setFormState] = createSignal13("unsubmitted");
+  const [responseData, setResponseData] = createSignal13(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3042,13 +3317,11 @@ function FormComponent(props) {
         return;
       }
       event.preventDefault();
-      const el = event.currentTarget;
+      const el = event.currentTarget || event.target;
       const headers = props.customHeaders || {};
       let body;
       const formData = new FormData(el);
-      const formPairs = Array.from(
-        event.currentTarget.querySelectorAll("input,select,textarea")
-      ).filter((el2) => !!el2.name).map((el2) => {
+      const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
         let value;
         const key = el2.name;
         if (el2 instanceof HTMLInputElement) {
@@ -3211,9 +3484,10 @@ function FormComponent(props) {
     name={props.name}
     onSubmit={(event) => onSubmit(event)}
     {...{}}
+    {...{}}
     {...props.attributes}
   >
-    <Show9 when={props.builderBlock && props.builderBlock.children}><For6 each={props.builderBlock?.children}>{(block, _index) => {
+    <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
       const idx = _index();
       return <Block_default
         key={`form-block-${idx}`}
@@ -3222,35 +3496,35 @@ function FormComponent(props) {
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
       />;
-    }}</For6></Show9>
-    <Show9 when={submissionState() === "error"}><Blocks_default
+    }}</For7></Show10>
+    <Show10 when={submissionState() === "error"}><Blocks_default
       path="errorMessage"
       blocks={props.errorMessage}
       context={props.builderContext}
-    /></Show9>
-    <Show9 when={submissionState() === "sending"}><Blocks_default
+    /></Show10>
+    <Show10 when={submissionState() === "sending"}><Blocks_default
       path="sendingMessage"
       blocks={props.sendingMessage}
       context={props.builderContext}
-    /></Show9>
-    <Show9 when={submissionState() === "error" && responseData()}><pre
+    /></Show10>
+    <Show10 when={submissionState() === "error" && responseData()}><pre
       class={"builder-form-error-text " + css4({
         padding: "10px",
         color: "red",
         textAlign: "center"
       })}
-    >{JSON.stringify(responseData(), null, 2)}</pre></Show9>
-    <Show9 when={submissionState() === "success"}><Blocks_default
+    >{JSON.stringify(responseData(), null, 2)}</pre></Show10>
+    <Show10 when={submissionState() === "success"}><Blocks_default
       path="successMessage"
       blocks={props.successMessage}
       context={props.builderContext}
-    /></Show9>
+    /></Show10>
   </form>;
 }
 var form_default = FormComponent;
 
 // src/blocks/form/input/component-info.ts
-var componentInfo13 = {
+var componentInfo14 = {
   name: "Form:Input",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
@@ -3320,7 +3594,7 @@ function FormInputComponent(props) {
 var input_default = FormInputComponent;
 
 // src/blocks/form/select/component-info.ts
-var componentInfo14 = {
+var componentInfo15 = {
   name: "Form:Select",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
   defaultStyles: {
@@ -3365,7 +3639,7 @@ var componentInfo14 = {
 };
 
 // src/blocks/form/select/select.tsx
-import { For as For7 } from "solid-js";
+import { For as For8 } from "solid-js";
 function SelectComponent(props) {
   return <select
     {...{}}
@@ -3374,15 +3648,15 @@ function SelectComponent(props) {
     key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
     defaultValue={props.defaultValue}
     name={props.name}
-  ><For7 each={props.options}>{(option, _index) => {
+  ><For8 each={props.options}>{(option, _index) => {
     const index = _index();
     return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
-  }}</For7></select>;
+  }}</For8></select>;
 }
 var select_default = SelectComponent;
 
 // src/blocks/form/submit-button/component-info.ts
-var componentInfo15 = {
+var componentInfo16 = {
   name: "Form:SubmitButton",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
   defaultStyles: {
@@ -3416,7 +3690,7 @@ function SubmitButton(props) {
 var submit_button_default = SubmitButton;
 
 // src/blocks/img/component-info.ts
-var componentInfo16 = {
+var componentInfo17 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -3449,7 +3723,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo17 = {
+var componentInfo18 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -3533,9 +3807,9 @@ var componentInfo17 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show10, createMemo as createMemo13 } from "solid-js";
+import { Show as Show11, createMemo as createMemo14 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo13(() => {
+  const videoProps = createMemo14(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3554,7 +3828,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo13(() => {
+  const spreadProps = createMemo14(() => {
     return {
       ...videoProps()
     };
@@ -3584,8 +3858,8 @@ function Video(props) {
       }}
       src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show10 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show10></video>
-    <Show10
+    ><Show11 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show11></video>
+    <Show11
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
       style={{
@@ -3594,15 +3868,15 @@ function Video(props) {
         "pointer-events": "none",
         "font-size": "0px"
       }}
-    /></Show10>
-    <Show10 when={props.builderBlock?.children?.length && props.fitContent}><div
+    /></Show11>
+    <Show11 when={props.builderBlock?.children?.length && props.fitContent}><div
       style={{
         display: "flex",
         "flex-direction": "column",
         "align-items": "stretch"
       }}
-    >{props.children}</div></Show10>
-    <Show10 when={props.builderBlock?.children?.length && !props.fitContent}><div
+    >{props.children}</div></Show11>
+    <Show11 when={props.builderBlock?.children?.length && !props.fitContent}><div
       style={{
         "pointer-events": "none",
         display: "flex",
@@ -3614,7 +3888,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show10>
+    >{props.children}</div></Show11>
   </div>;
 }
 var video_default = Video;
@@ -3622,58 +3896,61 @@ var video_default = Video;
 // src/constants/extra-components.ts
 var getExtraComponents = () => [{
   component: custom_code_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: embed_default,
-  ...componentInfo11
+  ...componentInfo12
 }, ...TARGET === "rsc" ? [] : [{
   component: form_default,
-  ...componentInfo12
+  ...componentInfo13
 }, {
   component: input_default,
-  ...componentInfo13
+  ...componentInfo14
 }, {
   component: submit_button_default,
-  ...componentInfo15
+  ...componentInfo16
 }, {
   component: select_default,
-  ...componentInfo14
+  ...componentInfo15
 }], {
   component: img_default,
-  ...componentInfo16
+  ...componentInfo17
 }, {
   component: video_default,
-  ...componentInfo17
+  ...componentInfo18
 }];
 
 // src/constants/builder-registered-components.ts
 var getDefaultRegisteredComponents = () => [{
   component: button_default,
-  ...componentInfo
+  ...componentInfo2
 }, {
   component: columns_default,
-  ...componentInfo2
+  ...componentInfo3
 }, {
   component: fragment_default,
-  ...componentInfo3
+  ...componentInfo4
 }, {
   component: image_default,
-  ...componentInfo4
+  ...componentInfo5
 }, {
   component: section_default,
-  ...componentInfo5
+  ...componentInfo6
 }, {
   component: slot_default,
-  ...componentInfo6
+  ...componentInfo7
 }, {
   component: symbol_default,
-  ...componentInfo7
+  ...componentInfo8
 }, {
   component: text_default,
-  ...componentInfo9
+  ...componentInfo10
 }, ...TARGET === "rsc" ? [] : [{
   component: tabs_default,
-  ...componentInfo8
+  ...componentInfo9
+}, {
+  component: accordion_default,
+  ...componentInfo
 }], ...getExtraComponents()];
 
 // src/functions/register-component.ts
@@ -3752,12 +4029,12 @@ var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
 import {
-  Show as Show11,
+  Show as Show12,
   onMount as onMount3,
   on as on2,
   createEffect as createEffect2,
-  createMemo as createMemo14,
-  createSignal as createSignal14
+  createMemo as createMemo15,
+  createSignal as createSignal15
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4257,7 +4534,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.27";
+var SDK_VERSION = "1.0.29";
 
 // src/functions/register.ts
 var registry = {};
@@ -4535,12 +4812,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal14(
+  const [ContentWrapper, setContentWrapper] = createSignal15(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal14({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal14({});
-  const [clicked, setClicked] = createSignal14(false);
+  const [httpReqsData, setHttpReqsData] = createSignal15({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
+  const [clicked, setClicked] = createSignal15(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -4574,7 +4851,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo14(() => {
+  const showContentProps = createMemo15(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -4738,7 +5015,7 @@ function EnableEditor(props) {
         const searchParams = new URL(location.href).searchParams;
         const searchParamPreviewModel = searchParams.get("builder.preview");
         const searchParamPreviewId = searchParams.get(
-          `builder.preview.${searchParamPreviewModel}`
+          `builder.overrides.${searchParamPreviewModel}`
         );
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
         if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
@@ -4758,21 +5035,21 @@ function EnableEditor(props) {
   onMount3(() => {
     if (!props.apiKey) {
       logger.error(
-        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
       );
     }
     evaluateJsCode();
     runHttpRequests();
     emitStateUpdate();
   });
-  const onUpdateFn_0_props_content = createMemo14(() => props.content);
+  const onUpdateFn_0_props_content = createMemo15(() => 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 = createMemo14(() => props.builderContextSignal.content?.data?.jsCode);
+  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo15(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_1() {
     evaluateJsCode();
   }
@@ -4782,7 +5059,7 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo14(() => props.builderContextSignal.content?.data?.httpRequests);
+  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo15(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_2() {
     runHttpRequests();
   }
@@ -4794,7 +5071,7 @@ function EnableEditor(props) {
       onUpdateFn_2
     )
   );
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo14(
+  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo15(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_3() {
@@ -4806,14 +5083,14 @@ function EnableEditor(props) {
       onUpdateFn_3
     )
   );
-  const onUpdateFn_4_props_data = createMemo14(() => props.data);
+  const onUpdateFn_4_props_data = createMemo15(() => props.data);
   function onUpdateFn_4() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect2(on2(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo14(() => props.locale);
+  const onUpdateFn_5_props_locale = createMemo15(() => props.locale);
   function onUpdateFn_5() {
     if (props.locale) {
       mergeNewRootState({
@@ -4822,7 +5099,7 @@ function EnableEditor(props) {
     }
   }
   createEffect2(on2(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show11 when={props.builderContextSignal.content}><Dynamic5
+  return <builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
     class={getWrapperClassName(
       props.content?.testVariationId || props.content?.id
     )}
@@ -4835,14 +5112,14 @@ function EnableEditor(props) {
     {...showContentProps()}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show11></builder_context_default.Provider>;
+  >{props.children}</Dynamic5></Show12></builder_context_default.Provider>;
 }
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal15 } from "solid-js";
+import { createSignal as createSignal16 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal15(
+  const [injectedStyles, setInjectedStyles] = createSignal16(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -4899,7 +5176,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal16(
+  const [scriptStr, setScriptStr] = createSignal17(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -4907,7 +5184,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal16(
+  const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -4922,7 +5199,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal16({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -4980,16 +5257,16 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show12 when={props.isSsrAbTest}><Inlined_script_default
+    <Show13 when={props.isSsrAbTest}><Inlined_script_default
       id="builderio-variant-visibility"
       scriptStr={scriptStr()}
-    /></Show12>
-    <Show12 when={TARGET !== "reactNative"}><Styles_default
+    /></Show13>
+    <Show13 when={TARGET !== "reactNative"}><Styles_default
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show12>
+    /></Show13>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
@@ -5002,13 +5279,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal17(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo17(() => {
+  const updateCookieAndStylesScriptStr = createMemo18(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -5017,10 +5294,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo17(() => {
+  const hideVariantsStyleString = createMemo18(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo17(() => {
+  const defaultContent = createMemo18(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5033,11 +5310,11 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show13 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+    <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
-    /></Show13>
-    <Show13 when={shouldRenderVariants()}>
+    /></Show14>
+    <Show14 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"
         styles={hideVariantsStyleString()}
@@ -5046,7 +5323,7 @@ function ContentVariants(props) {
         id="builderio-variants-visibility"
         scriptStr={updateCookieAndStylesScriptStr()}
       />
-      <For8 each={getVariants(props.content)}>{(variant, _index) => {
+      <For9 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           isNestedRender={props.isNestedRender}
@@ -5070,8 +5347,8 @@ function ContentVariants(props) {
           contentWrapperProps={props.contentWrapperProps}
           trustedHosts={props.trustedHosts}
         />;
-      }}</For8>
-    </Show13>
+      }}</For9>
+    </Show14>
     <Content_default
       isNestedRender={props.isNestedRender}
       {...{}}
@@ -5124,14 +5401,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal18(props.symbol?.content);
-  const blocksWrapper = createMemo18(() => {
+  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
+  const blocksWrapper = createMemo19(() => {
     return "div";
   });
-  const contentWrapper = createMemo18(() => {
+  const contentWrapper = createMemo19(() => {
     return "div";
   });
-  const className = createMemo18(() => {
+  const className = createMemo19(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5153,7 +5430,7 @@ function Symbol(props) {
   }
   onMount5(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo18(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }