@builder.io/sdk-solid 1.0.27 → 1.0.29

package/lib/browser/dev.js

@@ -483,6 +483,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;
@@ -533,7 +536,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) {
@@ -586,7 +588,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";
       }
@@ -646,7 +648,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";
       }
@@ -659,9 +661,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]) => {
@@ -791,10 +790,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/constants/device-sizes.ts
@@ -923,7 +922,7 @@ function BlockStyles(props) {
         className: `${className}:hover`,
         styles: {
           ...hoverStyles,
-          transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+          transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(hoverAnimation.easing)}`,
           transitionDelay: hoverAnimation.delay ? `${hoverAnimation.delay}s` : "0s"
         }
       }) || "";
@@ -2130,8 +2129,320 @@ var handleABTesting = async ({
 // src/helpers/canTrack.ts
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
-// 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/helpers.ts
+var convertOrderNumberToString = (order) => {
+  return order.toString();
+};
+
+// src/blocks/accordion/accordion.tsx
+var _tmpl$6 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
+function Accordion(props) {
+  const [open, setOpen] = createSignal([]);
+  const onlyOneAtATime = createMemo(() => {
+    return Boolean(props.grid || props.oneAtATime);
+  });
+  const accordionStyles = createMemo(() => {
+    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 = createMemo(() => {
+    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 = createMemo(() => {
+    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 = createMemo(() => {
+    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 (() => {
+    const _el$ = _tmpl$6();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.items;
+      },
+      children: (item, _index) => {
+        const index = _index();
+        return [(() => {
+          const _el$2 = _tmpl$23();
+          _el$2.$$click = (event) => onClick(index);
+          setAttribute(_el$2, "data-index", index);
+          insert(_el$2, createComponent(blocks_default, {
+            get blocks() {
+              return item.title;
+            },
+            path: `items.${index}.title`,
+            get parent() {
+              return props.builderBlock.id;
+            },
+            get context() {
+              return props.builderContext;
+            },
+            get registeredComponents() {
+              return props.builderComponents;
+            },
+            get linkComponent() {
+              return props.builderLinkComponent;
+            }
+          }));
+          effect((_p$) => {
+            const _v$ = getAccordionTitleClassName(index), _v$2 = {
+              ...accordionTitleStyles(),
+              width: props.grid ? props.gridRowWidth : void 0,
+              ...{
+                order: openGridItemOrder() !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
+              }
+            };
+            _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+            _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
+            return _p$;
+          }, {
+            _v$: void 0,
+            _v$2: void 0
+          });
+          return _el$2;
+        })(), createComponent(Show, {
+          get when() {
+            return open().includes(index);
+          },
+          get children() {
+            const _el$3 = _tmpl$23();
+            insert(_el$3, createComponent(blocks_default, {
+              get blocks() {
+                return item.detail;
+              },
+              path: `items.${index}.detail`,
+              get parent() {
+                return props.builderBlock.id;
+              },
+              get context() {
+                return props.builderContext;
+              },
+              get registeredComponents() {
+                return props.builderComponents;
+              },
+              get linkComponent() {
+                return props.builderLinkComponent;
+              }
+            }));
+            effect((_p$) => {
+              const _v$3 = getAccordionDetailClassName(index), _v$4 = accordionDetailStyles();
+              _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
+              _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
+              return _p$;
+            }, {
+              _v$3: void 0,
+              _v$4: void 0
+            });
+            return _el$3;
+          }
+        })];
+      }
+    }));
+    effect((_$p) => style(_el$, accordionStyles(), _$p));
+    return _el$;
+  })();
+}
+var accordion_default = Accordion;
+delegateEvents(["click"]);
+
+// src/blocks/button/component-info.ts
+var componentInfo2 = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -2167,7 +2478,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,
@@ -2387,7 +2698,7 @@ var componentInfo2 = {
 };
 
 // src/blocks/fragment/component-info.ts
-var componentInfo3 = {
+var componentInfo4 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -2396,7 +2707,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",
@@ -2519,7 +2830,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",
@@ -2561,7 +2872,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",
@@ -2575,10 +2886,10 @@ var componentInfo6 = {
     defaultValue: "children"
   }]
 };
-var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
 function Slot(props) {
   return (() => {
-    const _el$ = _tmpl$6();
+    const _el$ = _tmpl$7();
     _el$.style.setProperty("pointer-events", "auto");
     spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
       "builder-slot": props.name
@@ -2603,7 +2914,7 @@ function Slot(props) {
 var slot_default = Slot;
 
 // src/blocks/symbol/component-info.ts
-var componentInfo7 = {
+var componentInfo8 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2679,7 +2990,7 @@ var defaultElement = {
     }
   }
 };
-var componentInfo8 = {
+var componentInfo9 = {
   name: "Builder: Tabs",
   inputs: [{
     name: "tabs",
@@ -2777,19 +3088,23 @@ var componentInfo8 = {
     }]
   }]
 };
-var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$24 = /* @__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 : {};
+  function onClick(index) {
+    if (index === activeTab() && props.collapsible) {
+      setActiveTab(-1);
+    } else {
+      setActiveTab(index);
+    }
   }
   return (() => {
-    const _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
     _el$2.style.setProperty("display", "flex");
     _el$2.style.setProperty("flex-direction", "row");
     _el$2.style.setProperty("overflow", "auto");
@@ -2801,13 +3116,7 @@ function Tabs(props) {
         const index = _index();
         return (() => {
           const _el$4 = _tmpl$33();
-          _el$4.$$click = (event) => {
-            if (index === activeTab() && props.collapsible) {
-              setActiveTab(-1);
-            } else {
-              setActiveTab(index);
-            }
-          };
+          _el$4.$$click = (event) => onClick(index);
           setAttribute(_el$4, "key", index);
           insert(_el$4, createComponent(blocks_default, {
             get parent() {
@@ -2828,7 +3137,9 @@ function Tabs(props) {
             }
           }));
           effect((_p$) => {
-            const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = getActiveTabStyle(index);
+            const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
+              ...activeTab() === index ? props.activeTabStyle : {}
+            };
             _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
             _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
             return _p$;
@@ -2845,7 +3156,7 @@ function Tabs(props) {
         return activeTabContent(activeTab());
       },
       get children() {
-        const _el$3 = _tmpl$7();
+        const _el$3 = _tmpl$8();
         insert(_el$3, createComponent(blocks_default, {
           get parent() {
             return props.builderBlock.id;
@@ -2877,7 +3188,7 @@ var tabs_default = Tabs;
 delegateEvents(["click"]);
 
 // src/blocks/text/component-info.ts
-var componentInfo9 = {
+var componentInfo10 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2896,10 +3207,10 @@ var componentInfo9 = {
     textAlign: "center"
   }
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$9();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2908,7 +3219,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"],
@@ -2931,7 +3242,7 @@ var componentInfo10 = {
     advanced: true
   }]
 };
-var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2966,7 +3277,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$9();
+    const _el$ = _tmpl$10();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -2984,7 +3295,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -3026,7 +3337,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$10 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -3064,7 +3375,7 @@ function Embed(props) {
   }
   createEffect(on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$10();
+    const _el$ = _tmpl$11();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -3074,7 +3385,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: {
@@ -3321,8 +3632,8 @@ var get = (obj, path, defaultValue) => {
 };
 
 // src/blocks/form/form/form.tsx
-var _tmpl$11 = /* @__PURE__ */ template(`<pre>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<pre>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<form>`);
 function FormComponent(props) {
   const [formState, setFormState] = createSignal("unsubmitted");
   const [responseData, setResponseData] = createSignal(null);
@@ -3351,11 +3662,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) {
@@ -3508,7 +3819,7 @@ function FormComponent(props) {
   }
   let formRef;
   return (() => {
-    const _el$ = _tmpl$24();
+    const _el$ = _tmpl$25();
     _el$.addEventListener("submit", (event) => onSubmit(event));
     const _ref$ = formRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
@@ -3525,7 +3836,7 @@ function FormComponent(props) {
       get name() {
         return props.name;
       }
-    }, {}, () => props.attributes), false, true);
+    }, {}, {}, () => props.attributes), false, true);
     insert(_el$, createComponent(Show, {
       get when() {
         return props.builderBlock && props.builderBlock.children;
@@ -3591,7 +3902,7 @@ function FormComponent(props) {
         return memo(() => submissionState() === "error")() && responseData();
       },
       get children() {
-        const _el$2 = _tmpl$11();
+        const _el$2 = _tmpl$12();
         insert(_el$2, () => JSON.stringify(responseData(), null, 2));
         effect(() => className(_el$2, "builder-form-error-text " + css({
           padding: "10px",
@@ -3623,7 +3934,7 @@ function FormComponent(props) {
 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: [
@@ -3675,10 +3986,10 @@ var componentInfo13 = {
     borderColor: "#ccc"
   }
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<input>`);
 function FormInputComponent(props) {
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$13();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get key() {
         return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
@@ -3708,7 +4019,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: {
@@ -3751,11 +4062,11 @@ var componentInfo14 = {
   static: true,
   noWrap: true
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<select>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<option>`);
 function SelectComponent(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get value() {
         return props.value;
@@ -3777,7 +4088,7 @@ function SelectComponent(props) {
       children: (option, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$25();
+          const _el$2 = _tmpl$26();
           insert(_el$2, () => option.name || option.value);
           effect(() => setAttribute(_el$2, "key", `${option.name}-${index}`));
           effect(() => _el$2.value = option.value);
@@ -3791,7 +4102,7 @@ function SelectComponent(props) {
 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: {
@@ -3817,10 +4128,10 @@ var componentInfo15 = {
   // TODO: defaultChildren
   // canHaveChildren: true,
 };
-var _tmpl$14 = /* @__PURE__ */ template(`<button type=submit>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<button type=submit>`);
 function SubmitButton(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({}, () => props.attributes), false, true);
     insert(_el$, () => props.text);
     return _el$;
@@ -3829,7 +4140,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,
@@ -3844,10 +4155,10 @@ var componentInfo16 = {
   noWrap: true,
   static: true
 };
-var _tmpl$15 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$15();
+    const _el$ = _tmpl$16();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -3871,7 +4182,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo17 = {
+var componentInfo18 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -3953,8 +4264,8 @@ var componentInfo17 = {
     advanced: true
   }]
 };
-var _tmpl$16 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$34 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   const videoProps = createMemo(() => {
@@ -4016,7 +4327,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$16();
+        const _el$3 = _tmpl$17();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -4026,7 +4337,7 @@ function Video(props) {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$26();
+        const _el$4 = _tmpl$27();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -4039,7 +4350,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$26();
+        const _el$5 = _tmpl$27();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -4052,7 +4363,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$26();
+        const _el$6 = _tmpl$27();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -4074,58 +4385,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
@@ -4195,10 +4509,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$17 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$17();
+    const _el$ = _tmpl$18();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -4709,7 +5023,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 = {};
@@ -5175,7 +5489,7 @@ function EnableEditor(props) {
       if (isPreviewing() && !isEditing()) {
         const searchParams = new URL(location.href).searchParams;
         const searchParamPreviewModel = searchParams.get("builder.preview");
-        const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
+        const searchParamPreviewId = searchParams.get(`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)) {
           fetchOneEntry({
@@ -5193,7 +5507,7 @@ function EnableEditor(props) {
   });
   onMount(() => {
     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.");
+      logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     }
     evaluateJsCode();
     runHttpRequests();
@@ -5695,7 +6009,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$18 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   const blocksWrapper = createMemo(() => {
@@ -5727,7 +6041,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$18();
+    const _el$ = _tmpl$19();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();