@builder.io/sdk-solid 1.0.28 → 1.0.29

package/lib/browser/dev.jsx

@@ -1873,1010 +1873,1010 @@ var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : tru
 // src/components/content/content.tsx
 import { Show as Show13, createSignal as createSignal17 } from "solid-js";
 
-// src/blocks/button/component-info.ts
-var componentInfo = {
-  name: "Core:Button",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    // TODO: make min width more intuitive and set one
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
+// 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"
+    }
   },
-  inputs: [{
-    name: "text",
-    type: "text",
-    defaultValue: "Click me!",
-    bubble: true
-  }, {
-    name: "link",
-    type: "url",
-    bubble: true
-  }, {
-    name: "openLinkInNewTab",
-    type: "boolean",
-    defaultValue: false,
-    friendlyName: "Open link in new tab"
-  }],
-  static: true,
-  noWrap: true
-};
-
-// src/blocks/columns/component-info.ts
-var componentInfo2 = {
-  // TODO: ways to statically preprocess JSON for references, functions, etc
-  name: "Columns",
-  isRSC: true,
-  inputs: [{
-    name: "columns",
-    type: "array",
-    broadcast: true,
-    subFields: [{
-      name: "blocks",
-      type: "array",
-      hideFromUI: true,
-      defaultValue: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }, {
-      name: "width",
-      type: "number",
-      hideFromUI: true,
-      helperText: "Width %, e.g. set to 50 to fill half of the space"
-    }, {
-      name: "link",
-      type: "url",
-      helperText: "Optionally set a url that clicking this column will link to"
-    }],
-    defaultValue: [{
-      blocks: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }, {
-      blocks: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }],
-    onChange: (options) => {
-      function clearWidths() {
-        columns.forEach((col) => {
-          col.delete("width");
-        });
+  children: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column"
       }
-      const columns = options.get("columns");
-      if (Array.isArray(columns)) {
-        const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
-        if (containsColumnWithWidth) {
-          const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-          if (containsColumnWithoutWidth) {
-            clearWidths();
-          } else {
-            const sumWidths = columns.reduce((memo, col) => {
-              return memo + col.get("width");
-            }, 0);
-            const widthsDontAddUp = sumWidths !== 100;
-            if (widthsDontAddUp) {
-              clearWidths();
-            }
-          }
-        }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "I am an accordion title. Click me!"
       }
     }
-  }, {
-    name: "space",
-    type: "number",
-    defaultValue: 20,
-    helperText: "Size of gap between columns",
-    advanced: true
-  }, {
-    name: "stackColumnsAt",
-    type: "string",
-    defaultValue: "tablet",
-    helperText: "Convert horizontal columns to vertical at what device size",
-    enum: ["tablet", "mobile", "never"],
-    advanced: true
-  }, {
-    name: "reverseColumnsWhenStacked",
-    type: "boolean",
-    defaultValue: false,
-    helperText: "When stacking columns for mobile devices, reverse the ordering",
-    advanced: true
   }]
 };
-
-// src/blocks/fragment/component-info.ts
-var componentInfo3 = {
-  name: "Fragment",
-  static: true,
-  hidden: true,
-  canHaveChildren: true,
-  noWrap: true
-};
-
-// src/blocks/image/component-info.ts
-var componentInfo4 = {
-  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",
-  defaultStyles: {
-    position: "relative",
-    minHeight: "20px",
-    minWidth: "20px",
-    overflow: "hidden"
+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"
+    }
   },
-  canHaveChildren: true,
-  inputs: [{
-    name: "image",
-    type: "file",
-    bubble: true,
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
-    required: true,
-    defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
-    onChange: (options) => {
-      const DEFAULT_ASPECT_RATIO = 0.7041;
-      options.delete("srcset");
-      options.delete("noWebp");
-      function loadImage(url, timeout = 6e4) {
-        return new Promise((resolve, reject) => {
-          const img = document.createElement("img");
-          let loaded = false;
-          img.onload = () => {
-            loaded = true;
-            resolve(img);
-          };
-          img.addEventListener("error", (event) => {
-            console.warn("Image load failed", event.error);
-            reject(event.error);
-          });
-          img.src = url;
-          setTimeout(() => {
-            if (!loaded) {
-              reject(new Error("Image load timed out"));
-            }
-          }, timeout);
-        });
-      }
-      function round2(num) {
-        return Math.round(num * 1e3) / 1e3;
+  children: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        paddingTop: "50px",
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column",
+        paddingBottom: "50px"
       }
-      const value = options.get("image");
-      const aspectRatio = options.get("aspectRatio");
-      fetch(value).then((res) => res.blob()).then((blob) => {
-        if (blob.type.includes("svg")) {
-          options.set("noWebp", true);
-        }
-      });
-      if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-        return loadImage(value).then((img) => {
-          const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-          if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
-            if (img.width && img.height) {
-              options.set("aspectRatio", round2(img.height / img.width));
-              options.set("height", img.height);
-              options.set("width", img.width);
-            }
-          }
-        });
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "I am an accordion detail, hello!"
       }
     }
-  }, {
-    name: "backgroundSize",
-    type: "text",
-    defaultValue: "cover",
-    enum: [{
-      label: "contain",
-      value: "contain",
-      helperText: "The image should never get cropped"
-    }, {
-      label: "cover",
-      value: "cover",
-      helperText: "The image should fill it's box, cropping when needed"
-    }]
-  }, {
-    name: "backgroundPosition",
-    type: "text",
-    defaultValue: "center",
-    enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
-  }, {
-    name: "altText",
-    type: "string",
-    helperText: "Text to display when the user has images off"
-  }, {
-    name: "height",
-    type: "number",
-    hideFromUI: true
-  }, {
-    name: "width",
-    type: "number",
-    hideFromUI: true
-  }, {
-    name: "sizes",
-    type: "string",
-    hideFromUI: true
-  }, {
-    name: "srcset",
-    type: "string",
-    hideFromUI: true
-  }, {
-    name: "lazy",
-    type: "boolean",
-    defaultValue: true,
-    hideFromUI: true
-  }, {
-    name: "fitContent",
-    type: "boolean",
-    helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
-    defaultValue: true
-  }, {
-    name: "aspectRatio",
-    type: "number",
-    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
-    advanced: true,
-    defaultValue: 0.7041
   }]
 };
-
-// src/blocks/section/component-info.ts
-var componentInfo5 = {
-  name: "Core:Section",
-  static: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
+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: "maxWidth",
-    type: "number",
-    defaultValue: 1200
+    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: "lazyLoad",
+    name: "oneAtATime",
+    helperText: "Only allow opening one at a time (collapse all others when new item openned)",
     type: "boolean",
-    defaultValue: false,
+    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,
-    description: "Only render this section when in view"
-  }],
-  defaultStyles: {
-    paddingLeft: "20px",
-    paddingRight: "20px",
-    paddingTop: "50px",
-    paddingBottom: "50px",
-    marginTop: "0px",
-    width: "100vw",
-    marginLeft: "calc(50% - 50vw)"
-  },
-  canHaveChildren: true,
-  defaultChildren: [{
-    "@type": "@builder.io/sdk:Element",
-    responsiveStyles: {
-      large: {
-        textAlign: "center"
-      }
-    },
-    component: {
-      name: "Text",
-      options: {
-        text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
+    defaultValue: false,
+    onChange: (options) => {
+      if (options.get("useChildrenForItems") === true) {
+        options.set("items", []);
       }
     }
   }]
 };
 
-// src/blocks/slot/component-info.ts
-var componentInfo6 = {
-  name: "Slot",
-  isRSC: true,
-  description: "Allow child blocks to be inserted into this content when used as a Symbol",
-  docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
-  // Maybe wrap this for canHaveChildren so bind children to this hm
-  inputs: [{
-    name: "name",
-    type: "string",
-    required: true,
-    defaultValue: "children"
-  }]
+// 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/slot/slot.tsx
-function Slot(props) {
-  return <div
-    style={{
-      "pointer-events": "auto"
-    }}
-    {...!props.builderContext.context?.symbolId && {
-      "builder-slot": props.name
-    }}
-  ><Blocks_default
-    parent={props.builderContext.context?.symbolId}
-    path={`symbol.data.${props.name}`}
-    context={props.builderContext}
-    blocks={props.builderContext.rootState?.[props.name]}
-  /></div>;
+// 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 slot_default = Slot;
+var accordion_default = Accordion;
 
-// src/blocks/symbol/component-info.ts
-var componentInfo7 = {
-  name: "Symbol",
-  noWrap: true,
-  static: true,
-  isRSC: true,
+// src/blocks/button/component-info.ts
+var componentInfo2 = {
+  name: "Core:Button",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
   inputs: [{
-    name: "symbol",
-    type: "uiSymbol"
-  }, {
-    name: "dataOnly",
-    helperText: "Make this a data symbol that doesn't display any UI",
-    type: "boolean",
-    defaultValue: false,
-    advanced: true,
-    hideFromUI: true
-  }, {
-    name: "inheritState",
-    helperText: "Inherit the parent component state and data",
-    type: "boolean",
-    defaultValue: false,
-    advanced: true
+    name: "text",
+    type: "text",
+    defaultValue: "Click me!",
+    bubble: true
   }, {
-    name: "renderToLiquid",
-    helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+    name: "link",
+    type: "url",
+    bubble: true
+  }, {
+    name: "openLinkInNewTab",
     type: "boolean",
     defaultValue: false,
-    advanced: true,
-    hideFromUI: true
-  }, {
-    name: "useChildren",
-    hideFromUI: true,
-    type: "boolean"
-  }]
+    friendlyName: "Open link in new tab"
+  }],
+  static: true,
+  noWrap: true
 };
 
-// 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",
+// src/blocks/columns/component-info.ts
+var componentInfo3 = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: "Columns",
+  isRSC: true,
   inputs: [{
-    name: "tabs",
-    type: "list",
+    name: "columns",
+    type: "array",
     broadcast: true,
     subFields: [{
-      name: "label",
-      type: "uiBlocks",
+      name: "blocks",
+      type: "array",
       hideFromUI: true,
-      defaultValue: [defaultTab]
+      defaultValue: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
+        },
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
+        }
+      }]
     }, {
-      name: "content",
-      type: "uiBlocks",
+      name: "width",
+      type: "number",
       hideFromUI: true,
-      defaultValue: [defaultElement]
+      helperText: "Width %, e.g. set to 50 to fill half of the space"
+    }, {
+      name: "link",
+      type: "url",
+      helperText: "Optionally set a url that clicking this column will link to"
     }],
     defaultValue: [{
-      label: [{
-        ...defaultTab,
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
+        },
         component: {
-          name: "Text",
+          name: "Image",
           options: {
-            text: "Tab 1"
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
           }
         }
-      }],
-      content: [{
-        ...defaultElement,
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
         component: {
           name: "Text",
           options: {
-            text: "Tab 1 content"
+            text: "<p>Enter some text...</p>"
           }
         }
       }]
     }, {
-      label: [{
-        ...defaultTab,
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
+        },
         component: {
-          name: "Text",
+          name: "Image",
           options: {
-            text: "Tab 2"
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
           }
         }
-      }],
-      content: [{
-        ...defaultElement,
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
         component: {
           name: "Text",
           options: {
-            text: "Tab 2 content"
+            text: "<p>Enter some text...</p>"
           }
         }
       }]
-    }]
-  }, {
-    name: "activeTabStyle",
-    type: "uiStyle",
-    helperText: "CSS styles for the active tab",
-    defaultValue: {
-      backgroundColor: "rgba(0, 0, 0, 0.1)"
+    }],
+    onChange: (options) => {
+      function clearWidths() {
+        columns.forEach((col) => {
+          col.delete("width");
+        });
+      }
+      const columns = options.get("columns");
+      if (Array.isArray(columns)) {
+        const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+        if (containsColumnWithWidth) {
+          const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+          if (containsColumnWithoutWidth) {
+            clearWidths();
+          } else {
+            const sumWidths = columns.reduce((memo, col) => {
+              return memo + col.get("width");
+            }, 0);
+            const widthsDontAddUp = sumWidths !== 100;
+            if (widthsDontAddUp) {
+              clearWidths();
+            }
+          }
+        }
+      }
     }
   }, {
-    name: "defaultActiveTab",
+    name: "space",
     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,
+    defaultValue: 20,
+    helperText: "Size of gap between columns",
     advanced: true
   }, {
-    name: "collapsible",
+    name: "stackColumnsAt",
+    type: "string",
+    defaultValue: "tablet",
+    helperText: "Convert horizontal columns to vertical at what device size",
+    enum: ["tablet", "mobile", "never"],
+    advanced: true
+  }, {
+    name: "reverseColumnsWhenStacked",
     type: "boolean",
-    helperText: "If on, clicking an open tab closes it so no tabs are active",
     defaultValue: false,
+    helperText: "When stacking columns for mobile devices, reverse the ordering",
     advanced: true
+  }]
+};
+
+// src/blocks/fragment/component-info.ts
+var componentInfo4 = {
+  name: "Fragment",
+  static: true,
+  hidden: true,
+  canHaveChildren: true,
+  noWrap: true
+};
+
+// src/blocks/image/component-info.ts
+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",
+  defaultStyles: {
+    position: "relative",
+    minHeight: "20px",
+    minWidth: "20px",
+    overflow: "hidden"
+  },
+  canHaveChildren: true,
+  inputs: [{
+    name: "image",
+    type: "file",
+    bubble: true,
+    allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+    required: true,
+    defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
+    onChange: (options) => {
+      const DEFAULT_ASPECT_RATIO = 0.7041;
+      options.delete("srcset");
+      options.delete("noWebp");
+      function loadImage(url, timeout = 6e4) {
+        return new Promise((resolve, reject) => {
+          const img = document.createElement("img");
+          let loaded = false;
+          img.onload = () => {
+            loaded = true;
+            resolve(img);
+          };
+          img.addEventListener("error", (event) => {
+            console.warn("Image load failed", event.error);
+            reject(event.error);
+          });
+          img.src = url;
+          setTimeout(() => {
+            if (!loaded) {
+              reject(new Error("Image load timed out"));
+            }
+          }, timeout);
+        });
+      }
+      function round2(num) {
+        return Math.round(num * 1e3) / 1e3;
+      }
+      const value = options.get("image");
+      const aspectRatio = options.get("aspectRatio");
+      fetch(value).then((res) => res.blob()).then((blob) => {
+        if (blob.type.includes("svg")) {
+          options.set("noWebp", true);
+        }
+      });
+      if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+        return loadImage(value).then((img) => {
+          const possiblyUpdatedAspectRatio = options.get("aspectRatio");
+          if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+            if (img.width && img.height) {
+              options.set("aspectRatio", round2(img.height / img.width));
+              options.set("height", img.height);
+              options.set("width", img.width);
+            }
+          }
+        });
+      }
+    }
   }, {
-    name: "tabHeaderLayout",
-    type: "enum",
-    helperText: "Change the layout of the tab headers (uses justify-content)",
-    defaultValue: "flex-start",
+    name: "backgroundSize",
+    type: "text",
+    defaultValue: "cover",
     enum: [{
-      label: "Center",
-      value: "center"
-    }, {
-      label: "Space between",
-      value: "space-between"
-    }, {
-      label: "Space around",
-      value: "space-around"
-    }, {
-      label: "Left",
-      value: "flex-start"
+      label: "contain",
+      value: "contain",
+      helperText: "The image should never get cropped"
     }, {
-      label: "Right",
-      value: "flex-end"
+      label: "cover",
+      value: "cover",
+      helperText: "The image should fill it's box, cropping when needed"
     }]
+  }, {
+    name: "backgroundPosition",
+    type: "text",
+    defaultValue: "center",
+    enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
+  }, {
+    name: "altText",
+    type: "string",
+    helperText: "Text to display when the user has images off"
+  }, {
+    name: "height",
+    type: "number",
+    hideFromUI: true
+  }, {
+    name: "width",
+    type: "number",
+    hideFromUI: true
+  }, {
+    name: "sizes",
+    type: "string",
+    hideFromUI: true
+  }, {
+    name: "srcset",
+    type: "string",
+    hideFromUI: true
+  }, {
+    name: "lazy",
+    type: "boolean",
+    defaultValue: true,
+    hideFromUI: true
+  }, {
+    name: "fitContent",
+    type: "boolean",
+    helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+    defaultValue: true
+  }, {
+    name: "aspectRatio",
+    type: "number",
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
   }]
 };
 
-// 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 onClick(index) {
-    if (index === activeTab() && props.collapsible) {
-      setActiveTab(-1);
-    } else {
-      setActiveTab(index);
-    }
-  }
-  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={{
-          ...activeTab() === index ? props.activeTabStyle : {}
-        }}
-        onClick={(event) => onClick(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",
+// src/blocks/section/component-info.ts
+var componentInfo6 = {
+  name: "Core:Section",
   static: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
+  inputs: [{
+    name: "maxWidth",
+    type: "number",
+    defaultValue: 1200
+  }, {
+    name: "lazyLoad",
+    type: "boolean",
+    defaultValue: false,
+    advanced: true,
+    description: "Only render this section when in view"
+  }],
+  defaultStyles: {
+    paddingLeft: "20px",
+    paddingRight: "20px",
+    paddingTop: "50px",
+    paddingBottom: "50px",
+    marginTop: "0px",
+    width: "100vw",
+    marginLeft: "calc(50% - 50vw)"
+  },
+  canHaveChildren: true,
+  defaultChildren: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        textAlign: "center"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
+      }
+    }
+  }]
+};
+
+// src/blocks/slot/component-info.ts
+var componentInfo7 = {
+  name: "Slot",
   isRSC: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  description: "Allow child blocks to be inserted into this content when used as a Symbol",
+  docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
+  // Maybe wrap this for canHaveChildren so bind children to this hm
   inputs: [{
-    name: "text",
-    type: "html",
+    name: "name",
+    type: "string",
     required: true,
-    autoFocus: true,
-    bubble: true,
-    defaultValue: "Enter some text..."
-  }],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
+    defaultValue: "children"
+  }]
 };
 
-// src/blocks/text/text.tsx
-function Text(props) {
+// src/blocks/slot/slot.tsx
+function Slot(props) {
   return <div
-    class="builder-text"
-    innerHTML={props.text?.toString() || ""}
     style={{
-      outline: "none"
+      "pointer-events": "auto"
     }}
-  />;
+    {...!props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }}
+  ><Blocks_default
+    parent={props.builderContext.context?.symbolId}
+    path={`symbol.data.${props.name}`}
+    context={props.builderContext}
+    blocks={props.builderContext.rootState?.[props.name]}
+  /></div>;
 }
-var text_default = Text;
-
-// src/blocks/accordion/accordion.tsx
-import { Show as Show9, For as For6, createSignal as createSignal10, createMemo as createMemo10 } from "solid-js";
+var slot_default = Slot;
 
-// src/blocks/accordion/helpers.ts
-var convertOrderNumberToString = (order) => {
-  return order.toString();
+// src/blocks/symbol/component-info.ts
+var componentInfo8 = {
+  name: "Symbol",
+  noWrap: true,
+  static: true,
+  isRSC: true,
+  inputs: [{
+    name: "symbol",
+    type: "uiSymbol"
+  }, {
+    name: "dataOnly",
+    helperText: "Make this a data symbol that doesn't display any UI",
+    type: "boolean",
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: "inheritState",
+    helperText: "Inherit the parent component state and data",
+    type: "boolean",
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: "renderToLiquid",
+    helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+    type: "boolean",
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: "useChildren",
+    hideFromUI: true,
+    type: "boolean"
+  }]
 };
 
-// src/blocks/accordion/accordion.tsx
-function Accordion(props) {
-  const [open, setOpen] = createSignal10([]);
-  const onlyOneAtATime = createMemo10(() => {
-    return Boolean(props.grid || props.oneAtATime);
-  });
-  const accordionStyles = createMemo10(() => {
-    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 = createMemo10(() => {
-    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 = createMemo10(() => {
-    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 = createMemo10(() => {
-    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()}><For6 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>
-      <Show9 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></Show9>
-    </>;
-  }}</For6></div>;
-}
-var accordion_default = Accordion;
-
-// src/blocks/accordion/component-info.ts
-var defaultTitle = {
+// src/blocks/tabs/component-info.ts
+var defaultTab = {
   "@type": "@builder.io/sdk:Element",
-  layerName: "Accordion item title",
   responsiveStyles: {
     large: {
-      marginTop: "10px",
-      position: "relative",
+      paddingLeft: "20px",
+      paddingRight: "20px",
+      paddingTop: "10px",
+      paddingBottom: "10px",
+      minWidth: "100px",
+      textAlign: "center",
       display: "flex",
-      alignItems: "stretch",
       flexDirection: "column",
-      paddingBottom: "10px"
+      cursor: "pointer",
+      userSelect: "none"
     }
   },
-  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!"
-      }
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab"
     }
-  }]
+  }
 };
-var defaultDetail = {
+var defaultElement = {
   "@type": "@builder.io/sdk:Element",
-  layerName: "Accordion item detail",
   responsiveStyles: {
     large: {
-      position: "relative",
+      height: "200px",
       display: "flex",
-      alignItems: "stretch",
-      flexDirection: "column",
-      marginTop: "10px",
-      paddingBottom: "10px"
+      marginTop: "20px",
+      flexDirection: "column"
     }
   },
-  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!"
-      }
+  component: {
+    name: "Text",
+    options: {
+      text: "New tab content "
     }
-  }]
+  }
 };
-var componentInfo10 = {
-  name: "Builder:Accordion",
-  canHaveChildren: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
-  defaultStyles: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch"
-  },
+var componentInfo9 = {
+  name: "Builder: Tabs",
   inputs: [{
-    name: "items",
+    name: "tabs",
     type: "list",
     broadcast: true,
     subFields: [{
-      name: "title",
+      name: "label",
       type: "uiBlocks",
       hideFromUI: true,
-      defaultValue: [defaultTitle]
+      defaultValue: [defaultTab]
     }, {
-      name: "detail",
+      name: "content",
       type: "uiBlocks",
       hideFromUI: true,
-      defaultValue: [defaultDetail]
+      defaultValue: [defaultElement]
     }],
     defaultValue: [{
-      title: [defaultTitle],
-      detail: [defaultDetail]
+      label: [{
+        ...defaultTab,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 1"
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 1 content"
+          }
+        }
+      }]
     }, {
-      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
+      label: [{
+        ...defaultTab,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 2"
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: "Text",
+          options: {
+            text: "Tab 2 content"
+          }
+        }
+      }]
+    }]
   }, {
-    name: "grid",
-    helperText: "Display as a grid",
-    type: "boolean",
-    defaultValue: false
+    name: "activeTabStyle",
+    type: "uiStyle",
+    helperText: "CSS styles for the active tab",
+    defaultValue: {
+      backgroundColor: "rgba(0, 0, 0, 0.1)"
+    }
   }, {
-    name: "gridRowWidth",
-    helperText: "Display as a grid",
-    type: "string",
-    showIf: (options) => options.get("grid"),
-    defaultValue: "25%"
+    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: "useChildrenForItems",
+    name: "collapsible",
     type: "boolean",
-    helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
-    advanced: true,
+    helperText: "If on, clicking an open tab closes it so no tabs are active",
     defaultValue: false,
-    onChange: (options) => {
-      if (options.get("useChildrenForItems") === true) {
-        options.set("items", []);
-      }
-    }
+    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 Show9, For as For6, createSignal as createSignal10 } from "solid-js";
+function Tabs(props) {
+  const [activeTab, setActiveTab] = createSignal10(
+    props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
+  );
+  function activeTabContent(active) {
+    return props.tabs && props.tabs[active].content;
+  }
+  function onClick(index) {
+    if (index === activeTab() && props.collapsible) {
+      setActiveTab(-1);
+    } else {
+      setActiveTab(index);
+    }
+  }
+  return <div>
+    <div
+      class="builder-tabs-wrap"
+      style={{
+        display: "flex",
+        "flex-direction": "row",
+        "justify-content": props.tabHeaderLayout || "flex-start",
+        overflow: "auto"
+      }}
+    ><For6 each={props.tabs}>{(tab, _index) => {
+      const index = _index();
+      return <span
+        class={`builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`}
+        key={index}
+        style={{
+          ...activeTab() === index ? props.activeTabStyle : {}
+        }}
+        onClick={(event) => onClick(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>;
+    }}</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></Show9>
+  </div>;
+}
+var tabs_default = Tabs;
+
+// src/blocks/text/component-info.ts
+var componentInfo10 = {
+  name: "Text",
+  static: true,
+  isRSC: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  inputs: [{
+    name: "text",
+    type: "html",
+    required: true,
+    autoFocus: true,
+    bubble: true,
+    defaultValue: "Enter some text..."
+  }],
+  defaultStyles: {
+    lineHeight: "normal",
+    height: "auto",
+    textAlign: "center"
+  }
+};
+
+// src/blocks/text/text.tsx
+function Text(props) {
+  return <div
+    class="builder-text"
+    innerHTML={props.text?.toString() || ""}
+    style={{
+      outline: "none"
+    }}
+  />;
+}
+var text_default = Text;
+
 // src/blocks/custom-code/component-info.ts
 var componentInfo11 = {
   name: "Custom Code",
@@ -3317,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) {
@@ -3486,6 +3484,7 @@ function FormComponent(props) {
     name={props.name}
     onSubmit={(event) => onSubmit(event)}
     {...{}}
+    {...{}}
     {...props.attributes}
   >
     <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
@@ -3924,34 +3923,34 @@ var getExtraComponents = () => [{
 // 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,
-  ...componentInfo10
+  ...componentInfo
 }], ...getExtraComponents()];
 
 // src/functions/register-component.ts
@@ -4535,7 +4534,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.28";
+var SDK_VERSION = "1.0.29";
 
 // src/functions/register.ts
 var registry = {};
@@ -5016,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)) {