@builder.io/sdk-solid 0.13.1 → 0.13.3

package/lib/edge/dev.js

@@ -3965,7 +3965,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css4() {
+  function css5() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -4002,12 +4002,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css4();
+          return css5();
         }
       });
     }
@@ -4342,10 +4342,10 @@ function Block(props) {
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: props.context,
-        ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
+        ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
           builderLinkComponent: props.linkComponent
         } : {},
-        ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
+        ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" || blockComponent()?.name === "Form:Form" ? {
           builderComponents: props.registeredComponents
         } : {}
       },
@@ -5472,172 +5472,8 @@ var componentInfo2 = {
   }]
 };
 
-// src/blocks/custom-code/component-info.ts
-var componentInfo3 = {
-  name: "Custom Code",
-  static: true,
-  requiredPermissions: ["editCode"],
-  inputs: [{
-    name: "code",
-    type: "html",
-    required: true,
-    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-    code: true
-  }, {
-    name: "replaceNodes",
-    type: "boolean",
-    helperText: "Preserve server rendered dom nodes",
-    advanced: true
-  }, {
-    name: "scriptsClientOnly",
-    type: "boolean",
-    defaultValue: false,
-    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-    advanced: true
-  }]
-};
-var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
-function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal([]);
-  const [scriptsRun, setScriptsRun] = createSignal([]);
-  let elementRef;
-  onMount(() => {
-    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
-      return;
-    }
-    const scripts = elementRef.getElementsByTagName("script");
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-      if (script.src) {
-        if (scriptsInserted().includes(script.src)) {
-          continue;
-        }
-        scriptsInserted().push(script.src);
-        const newScript = document.createElement("script");
-        newScript.async = true;
-        newScript.src = script.src;
-        document.head.appendChild(newScript);
-      } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
-        if (scriptsRun().includes(script.innerText)) {
-          continue;
-        }
-        try {
-          scriptsRun().push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
-        }
-      }
-    }
-  });
-  return (() => {
-    const _el$ = _tmpl$6();
-    const _ref$ = elementRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
-    effect((_p$) => {
-      const _v$ = "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), _v$2 = props.code;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && (_el$.innerHTML = _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0
-    });
-    return _el$;
-  })();
-}
-var custom_code_default = CustomCode;
-
-// src/blocks/embed/component-info.ts
-var componentInfo4 = {
-  name: "Embed",
-  static: true,
-  inputs: [{
-    name: "url",
-    type: "url",
-    required: true,
-    defaultValue: "",
-    helperText: "e.g. enter a youtube url, google map, etc",
-    onChange: (options) => {
-      const url = options.get("url");
-      if (url) {
-        options.set("content", "Loading...");
-        const apiKey = "ae0e60e78201a3f2b0de4b";
-        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
-          if (options.get("url") === url) {
-            if (data.html) {
-              options.set("content", data.html);
-            } else {
-              options.set("content", "Invalid url, please try another");
-            }
-          }
-        }).catch((_err) => {
-          options.set("content", "There was an error embedding this URL, please try again or another URL");
-        });
-      } else {
-        options.delete("content");
-      }
-    }
-  }, {
-    name: "content",
-    type: "html",
-    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-    hideFromUI: true
-  }]
-};
-
-// src/blocks/embed/helpers.ts
-var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
-var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-
-// src/blocks/embed/embed.tsx
-var _tmpl$7 = /* @__PURE__ */ template(`<div class=builder-embed>`);
-function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal([]);
-  const [scriptsRun, setScriptsRun] = createSignal([]);
-  const [ranInitFn, setRanInitFn] = createSignal(false);
-  function findAndRunScripts() {
-    if (!elem || !elem.getElementsByTagName)
-      return;
-    const scripts = elem.getElementsByTagName("script");
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-      if (script.src && !scriptsInserted().includes(script.src)) {
-        scriptsInserted().push(script.src);
-        const newScript = document.createElement("script");
-        newScript.async = true;
-        newScript.src = script.src;
-        document.head.appendChild(newScript);
-      } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
-        try {
-          scriptsRun().push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`Embed`: Error running script:", error);
-        }
-      }
-    }
-  }
-  let elem;
-  function onUpdateFn_0() {
-    if (elem && !ranInitFn()) {
-      setRanInitFn(true);
-      findAndRunScripts();
-    }
-  }
-  createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
-  return (() => {
-    const _el$ = _tmpl$7();
-    const _ref$ = elem;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
-    effect(() => _el$.innerHTML = props.content);
-    return _el$;
-  })();
-}
-var embed_default = Embed;
-
 // src/blocks/fragment/component-info.ts
-var componentInfo5 = {
+var componentInfo3 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -5646,7 +5482,7 @@ var componentInfo5 = {
 };
 
 // src/blocks/image/component-info.ts
-var componentInfo6 = {
+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",
@@ -5746,30 +5582,1099 @@ var componentInfo6 = {
     type: "string",
     hideFromUI: true
   }, {
-    name: "srcset",
+    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",
+  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 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"
+  }]
+};
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+function Slot(props) {
+  return (() => {
+    const _el$ = _tmpl$6();
+    _el$.style.setProperty("pointer-events", "auto");
+    spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }), false, true);
+    insert(_el$, createComponent(blocks_default, {
+      get parent() {
+        return props.builderContext.context?.symbolId;
+      },
+      get path() {
+        return `symbol.data.${props.name}`;
+      },
+      get context() {
+        return props.builderContext;
+      },
+      get blocks() {
+        return props.builderContext.rootState?.[props.name];
+      }
+    }));
+    return _el$;
+  })();
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo7 = {
+  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/text/component-info.ts
+var componentInfo8 = {
+  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"
+  }
+};
+var _tmpl$7 = /* @__PURE__ */ template(`<div class=builder-text>`);
+function Text(props) {
+  return (() => {
+    const _el$ = _tmpl$7();
+    _el$.style.setProperty("outline", "none");
+    effect(() => _el$.innerHTML = props.text?.toString() || "");
+    return _el$;
+  })();
+}
+var text_default = Text;
+
+// src/blocks/custom-code/component-info.ts
+var componentInfo9 = {
+  name: "Custom Code",
+  static: true,
+  requiredPermissions: ["editCode"],
+  inputs: [{
+    name: "code",
+    type: "html",
+    required: true,
+    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+    code: true
+  }, {
+    name: "replaceNodes",
+    type: "boolean",
+    helperText: "Preserve server rendered dom nodes",
+    advanced: true
+  }, {
+    name: "scriptsClientOnly",
+    type: "boolean",
+    defaultValue: false,
+    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+    advanced: true
+  }]
+};
+var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+function CustomCode(props) {
+  const [scriptsInserted, setScriptsInserted] = createSignal([]);
+  const [scriptsRun, setScriptsRun] = createSignal([]);
+  let elementRef;
+  onMount(() => {
+    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+      return;
+    }
+    const scripts = elementRef.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (scriptsInserted().includes(script.src)) {
+          continue;
+        }
+        scriptsInserted().push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
+        if (scriptsRun().includes(script.innerText)) {
+          continue;
+        }
+        try {
+          scriptsRun().push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$8();
+    const _ref$ = elementRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
+    effect((_p$) => {
+      const _v$ = "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), _v$2 = props.code;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$.innerHTML = _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+var custom_code_default = CustomCode;
+
+// src/blocks/embed/component-info.ts
+var componentInfo10 = {
+  name: "Embed",
+  static: true,
+  inputs: [{
+    name: "url",
+    type: "url",
+    required: true,
+    defaultValue: "",
+    helperText: "e.g. enter a youtube url, google map, etc",
+    onChange: (options) => {
+      const url = options.get("url");
+      if (url) {
+        options.set("content", "Loading...");
+        const apiKey = "ae0e60e78201a3f2b0de4b";
+        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+          if (options.get("url") === url) {
+            if (data.html) {
+              options.set("content", data.html);
+            } else {
+              options.set("content", "Invalid url, please try another");
+            }
+          }
+        }).catch((_err) => {
+          options.set("content", "There was an error embedding this URL, please try again or another URL");
+        });
+      } else {
+        options.delete("content");
+      }
+    }
+  }, {
+    name: "content",
+    type: "html",
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: true
+  }]
+};
+
+// src/blocks/embed/helpers.ts
+var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
+var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+
+// src/blocks/embed/embed.tsx
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+function Embed(props) {
+  const [scriptsInserted, setScriptsInserted] = createSignal([]);
+  const [scriptsRun, setScriptsRun] = createSignal([]);
+  const [ranInitFn, setRanInitFn] = createSignal(false);
+  function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName)
+      return;
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src && !scriptsInserted().includes(script.src)) {
+        scriptsInserted().push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
+        try {
+          scriptsRun().push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
+        }
+      }
+    }
+  }
+  let elem;
+  function onUpdateFn_0() {
+    if (elem && !ranInitFn()) {
+      setRanInitFn(true);
+      findAndRunScripts();
+    }
+  }
+  createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
+  return (() => {
+    const _el$ = _tmpl$9();
+    const _ref$ = elem;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
+    effect(() => _el$.innerHTML = props.content);
+    return _el$;
+  })();
+}
+var embed_default = Embed;
+
+// src/blocks/form/form/component-info.ts
+var componentInfo11 = {
+  name: "Form:Form",
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: "15px",
+        paddingBottom: "15px"
+      }
+    }
+  },
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
+  inputs: [{
+    name: "sendSubmissionsTo",
+    type: "string",
+    // TODO: save to builder data and user can download as csv
+    // TODO: easy for mode too or computed add/remove fields form mode
+    // so you can edit details and high level mode at same time...
+    // Later - more integrations like mailchimp
+    // /api/v1/form-submit?to=mailchimp
+    enum: [{
+      label: "Send to email",
+      value: "email",
+      helperText: "Send form submissions to the email address of your choosing"
+    }, {
+      label: "Custom",
+      value: "custom",
+      helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
+    }],
+    defaultValue: "email"
+  }, {
+    name: "sendSubmissionsToEmail",
+    type: "string",
+    required: true,
+    // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+    defaultValue: "your@email.com",
+    showIf: 'options.get("sendSubmissionsTo") === "email"'
+  }, {
+    name: "sendWithJs",
+    type: "boolean",
+    helperText: "Set to false to use basic html form action",
+    defaultValue: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "name",
+    type: "string",
+    defaultValue: "My form"
+    // advanced: true
+  }, {
+    name: "action",
+    type: "string",
+    helperText: "URL to send the form data to",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "contentType",
+    type: "string",
+    defaultValue: "application/json",
+    advanced: true,
+    // TODO: do automatically if file input
+    enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }, {
+    name: "method",
+    type: "string",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    defaultValue: "POST",
+    advanced: true
+  }, {
+    name: "previewState",
+    type: "string",
+    // TODO: persist: false flag
+    enum: ["unsubmitted", "sending", "success", "error"],
+    defaultValue: "unsubmitted",
+    helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "successUrl",
+    type: "url",
+    helperText: "Optional URL to redirect the user to on form submission success",
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "resetFormOnSubmit",
+    type: "boolean",
+    showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+    advanced: true
+  }, {
+    name: "successMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Thanks!</span>"
+        }
+      }
+    }]
+  }, {
+    name: "validate",
+    type: "boolean",
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: "errorMessagePath",
+    type: "text",
+    advanced: true,
+    helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
+  }, {
+    name: "errorMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      bindings: {
+        "component.options.text": "state.formErrorMessage || block.component.options.text"
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Form submission error :( Please check your answers and try again</span>"
+        }
+      }
+    }]
+  }, {
+    name: "sendingMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          marginTop: "10px"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "<span>Sending...</span>"
+        }
+      }
+    }]
+  }, {
+    name: "customHeaders",
+    type: "map",
+    valueType: {
+      type: "string"
+    },
+    advanced: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }],
+  noWrap: true,
+  canHaveChildren: true,
+  defaultChildren: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your name</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "name",
+        placeholder: "Jane Doe"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your email</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "email",
+        placeholder: "jane@doe.com"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:SubmitButton",
+      options: {
+        text: "Submit"
+      }
+    }
+  }]
+};
+
+// src/functions/get-env.ts
+var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
+var getEnv = () => {
+  const env = "development";
+  return validEnvList.includes(env) ? env : "production";
+};
+
+// src/functions/get.ts
+var get = (obj, path, defaultValue) => {
+  const result = String.prototype.split.call(path, /[,[\].]+?/).filter(Boolean).reduce((res, key) => res !== null && res !== void 0 ? res[key] : res, obj);
+  return result === void 0 || result === obj ? defaultValue : result;
+};
+
+// src/blocks/form/form/form.tsx
+var _tmpl$10 = /* @__PURE__ */ template(`<pre>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<form>`);
+function FormComponent(props) {
+  const [formState, setFormState] = createSignal("unsubmitted");
+  const [responseData, setResponseData] = createSignal(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal("");
+  function mergeNewRootState(newData) {
+    const combinedState = {
+      ...props.builderContext.rootState,
+      ...newData
+    };
+    if (props.builderContext.rootSetState) {
+      props.builderContext.rootSetState?.(combinedState);
+    } else {
+      props.builderContext.rootState = combinedState;
+    }
+  }
+  function submissionState() {
+    return isEditing() && props.previewState || formState();
+  }
+  function onSubmit(event) {
+    const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
+    if (props.sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJsProp) {
+      if (!(props.action || props.sendSubmissionsTo === "email")) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const el = event.currentTarget;
+      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) => {
+        let value;
+        const key = el2.name;
+        if (el2 instanceof HTMLInputElement) {
+          if (el2.type === "radio") {
+            if (el2.checked) {
+              value = el2.name;
+              return {
+                key,
+                value
+              };
+            }
+          } else if (el2.type === "checkbox") {
+            value = el2.checked;
+          } else if (el2.type === "number" || el2.type === "range") {
+            const num = el2.valueAsNumber;
+            if (!isNaN(num)) {
+              value = num;
+            }
+          } else if (el2.type === "file") {
+            value = el2.files;
+          } else {
+            value = el2.value;
+          }
+        } else {
+          value = el2.value;
+        }
+        return {
+          key,
+          value
+        };
+      });
+      let formContentType = props.contentType;
+      if (props.sendSubmissionsTo === "email") {
+        formContentType = "multipart/form-data";
+      }
+      Array.from(formPairs).forEach(({
+        value
+      }) => {
+        if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
+          formContentType = "multipart/form-data";
+        }
+      });
+      if (formContentType !== "application/json") {
+        body = formData;
+      } else {
+        const json = {};
+        Array.from(formPairs).forEach(({
+          value,
+          key
+        }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
+      if (formContentType && formContentType !== "multipart/form-data") {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */
+          !(sendWithJsProp && props.action?.includes("zapier.com"))
+        ) {
+          headers["content-type"] = formContentType;
+        }
+      }
+      const presubmitEvent = new CustomEvent("presubmit", {
+        detail: {
+          body
+        }
+      });
+      if (formRef) {
+        formRef.dispatchEvent(presubmitEvent);
+        if (presubmitEvent.defaultPrevented) {
+          return;
+        }
+      }
+      setFormState("sending");
+      const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
+      fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action, {
+        body,
+        headers,
+        method: props.method || "post"
+      }).then(async (res) => {
+        let body2;
+        const contentType = res.headers.get("content-type");
+        if (contentType && contentType.indexOf("application/json") !== -1) {
+          body2 = await res.json();
+        } else {
+          body2 = await res.text();
+        }
+        if (!res.ok && props.errorMessagePath) {
+          let message = get(body2, props.errorMessagePath);
+          if (message) {
+            if (typeof message !== "string") {
+              message = JSON.stringify(message);
+            }
+            setFormErrorMessage(message);
+            mergeNewRootState({
+              formErrorMessage: message
+            });
+          }
+        }
+        setResponseData(body2);
+        setFormState(res.ok ? "success" : "error");
+        if (res.ok) {
+          const submitSuccessEvent = new CustomEvent("submit:success", {
+            detail: {
+              res,
+              body: body2
+            }
+          });
+          if (formRef) {
+            formRef.dispatchEvent(submitSuccessEvent);
+            if (submitSuccessEvent.defaultPrevented) {
+              return;
+            }
+            if (props.resetFormOnSubmit !== false) {
+              formRef.reset();
+            }
+          }
+          if (props.successUrl) {
+            if (formRef) {
+              const event2 = new CustomEvent("route", {
+                detail: {
+                  url: props.successUrl
+                }
+              });
+              formRef.dispatchEvent(event2);
+              if (!event2.defaultPrevented) {
+                location.href = props.successUrl;
+              }
+            } else {
+              location.href = props.successUrl;
+            }
+          }
+        }
+      }, (err) => {
+        const submitErrorEvent = new CustomEvent("submit:error", {
+          detail: {
+            error: err
+          }
+        });
+        if (formRef) {
+          formRef.dispatchEvent(submitErrorEvent);
+          if (submitErrorEvent.defaultPrevented) {
+            return;
+          }
+        }
+        setResponseData(err);
+        setFormState("error");
+      });
+    }
+  }
+  let formRef;
+  return (() => {
+    const _el$ = _tmpl$23();
+    _el$.addEventListener("submit", (event) => onSubmit(event));
+    const _ref$ = formRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
+    spread(_el$, mergeProps({
+      get validate() {
+        return props.validate;
+      },
+      get action() {
+        return !props.sendWithJs && props.action;
+      },
+      get method() {
+        return props.method;
+      },
+      get name() {
+        return props.name;
+      }
+    }, {}, () => props.attributes), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.builderBlock && props.builderBlock.children;
+      },
+      get children() {
+        return createComponent(For, {
+          get each() {
+            return props.builderBlock?.children;
+          },
+          children: (block, _index) => {
+            const idx = _index();
+            return createComponent(block_default, {
+              key: `form-block-${idx}`,
+              block,
+              get context() {
+                return props.builderContext;
+              },
+              get registeredComponents() {
+                return props.builderComponents;
+              },
+              get linkComponent() {
+                return props.builderLinkComponent;
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return submissionState() === "error";
+      },
+      get children() {
+        return createComponent(blocks_default, {
+          path: "errorMessage",
+          get blocks() {
+            return props.errorMessage;
+          },
+          get context() {
+            return props.builderContext;
+          }
+        });
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return submissionState() === "sending";
+      },
+      get children() {
+        return createComponent(blocks_default, {
+          path: "sendingMessage",
+          get blocks() {
+            return props.sendingMessage;
+          },
+          get context() {
+            return props.builderContext;
+          }
+        });
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => submissionState() === "error")() && responseData();
+      },
+      get children() {
+        const _el$2 = _tmpl$10();
+        insert(_el$2, () => JSON.stringify(responseData(), null, 2));
+        effect(() => className(_el$2, "builder-form-error-text " + css({
+          padding: "10px",
+          color: "red",
+          textAlign: "center"
+        })));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return submissionState() === "success";
+      },
+      get children() {
+        return createComponent(blocks_default, {
+          path: "successMessage",
+          get blocks() {
+            return props.successMessage;
+          },
+          get context() {
+            return props.builderContext;
+          }
+        });
+      }
+    }), null);
+    return _el$;
+  })();
+}
+var form_default = FormComponent;
+
+// src/blocks/form/input/component-info.ts
+var componentInfo12 = {
+  name: "Form:Input",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
+  inputs: [
+    {
+      name: "type",
+      type: "text",
+      enum: ["text", "number", "email", "url", "checkbox", "radio", "range", "date", "datetime-local", "search", "tel", "time", "file", "month", "week", "password", "color", "hidden"],
+      defaultValue: "text"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there",
+      helperText: "Text to display when there is no value"
+    },
+    // TODO: handle value vs default value automatically like ng-model
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "value",
+      type: "string",
+      advanced: true
+    },
+    {
+      name: "required",
+      type: "boolean",
+      helperText: "Is this input required to be filled out to submit a form",
+      defaultValue: false
+    }
+  ],
+  noWrap: true,
+  static: true,
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  }
+};
+var _tmpl$11 = /* @__PURE__ */ template(`<input>`);
+function FormInputComponent(props) {
+  return (() => {
+    const _el$ = _tmpl$11();
+    spread(_el$, mergeProps({}, () => props.attributes, {
+      get key() {
+        return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
+      },
+      get placeholder() {
+        return props.placeholder;
+      },
+      get type() {
+        return props.type;
+      },
+      get name() {
+        return props.name;
+      },
+      get value() {
+        return props.value;
+      },
+      get defaultValue() {
+        return props.defaultValue;
+      },
+      get required() {
+        return props.required;
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+var input_default = FormInputComponent;
+
+// src/blocks/form/select/component-info.ts
+var componentInfo13 = {
+  name: "Form:Select",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
+  defaultStyles: {
+    alignSelf: "flex-start"
+  },
+  inputs: [{
+    name: "options",
+    type: "list",
+    required: true,
+    subFields: [{
+      name: "value",
+      type: "text",
+      required: true
+    }, {
+      name: "name",
+      type: "text"
+    }],
+    defaultValue: [{
+      value: "option 1"
+    }, {
+      value: "option 2"
+    }]
+  }, {
+    name: "name",
+    type: "string",
+    required: true,
+    helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: "defaultValue",
+    type: "string"
+  }, {
+    name: "value",
     type: "string",
-    hideFromUI: true
-  }, {
-    name: "lazy",
-    type: "boolean",
-    defaultValue: true,
-    hideFromUI: true
+    advanced: true
   }, {
-    name: "fitContent",
+    name: "required",
     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
-  }]
+    defaultValue: false
+  }],
+  static: true,
+  noWrap: true
+};
+var _tmpl$12 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<option>`);
+function SelectComponent(props) {
+  return (() => {
+    const _el$ = _tmpl$12();
+    spread(_el$, mergeProps({}, () => props.attributes, {
+      get value() {
+        return props.value;
+      },
+      get key() {
+        return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
+      },
+      get defaultValue() {
+        return props.defaultValue;
+      },
+      get name() {
+        return props.name;
+      }
+    }), false, true);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: (option, _index) => {
+        _index();
+        return (() => {
+          const _el$2 = _tmpl$24();
+          insert(_el$2, () => option.name || option.value);
+          effect(() => _el$2.value = option.value);
+          return _el$2;
+        })();
+      }
+    }));
+    return _el$;
+  })();
+}
+var select_default = SelectComponent;
+
+// src/blocks/form/submit-button/component-info.ts
+var componentInfo14 = {
+  name: "Form:SubmitButton",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#3898EC",
+    color: "white",
+    borderRadius: "4px",
+    cursor: "pointer"
+  },
+  inputs: [{
+    name: "text",
+    type: "text",
+    defaultValue: "Click me"
+  }],
+  static: true,
+  noWrap: true
+  // TODO: optional children? maybe as optional form input
+  // that only shows if advanced setting is flipped
+  // TODO: defaultChildren
+  // canHaveChildren: true,
 };
+var _tmpl$13 = /* @__PURE__ */ template(`<button type=submit>`);
+function SubmitButton(props) {
+  return (() => {
+    const _el$ = _tmpl$13();
+    spread(_el$, mergeProps({}, () => props.attributes), false, true);
+    insert(_el$, () => props.text);
+    return _el$;
+  })();
+}
+var submit_button_default = SubmitButton;
 
 // src/blocks/img/component-info.ts
-var componentInfo7 = {
+var componentInfo15 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -5784,10 +6689,10 @@ var componentInfo7 = {
   noWrap: true,
   static: true
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$14();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -5810,159 +6715,8 @@ function ImgComponent(props) {
 }
 var img_default = ImgComponent;
 
-// src/blocks/section/component-info.ts
-var componentInfo8 = {
-  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 componentInfo9 = {
-  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"
-  }]
-};
-var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
-function Slot(props) {
-  return (() => {
-    const _el$ = _tmpl$9();
-    _el$.style.setProperty("pointer-events", "auto");
-    spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
-      "builder-slot": props.name
-    }), false, true);
-    insert(_el$, createComponent(blocks_default, {
-      get parent() {
-        return props.builderContext.context?.symbolId;
-      },
-      get path() {
-        return `symbol.data.${props.name}`;
-      },
-      get context() {
-        return props.builderContext;
-      },
-      get blocks() {
-        return props.builderContext.rootState?.[props.name];
-      }
-    }));
-    return _el$;
-  })();
-}
-var slot_default = Slot;
-
-// src/blocks/symbol/component-info.ts
-var componentInfo10 = {
-  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/text/component-info.ts
-var componentInfo11 = {
-  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"
-  }
-};
-var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
-function Text(props) {
-  return (() => {
-    const _el$ = _tmpl$10();
-    _el$.style.setProperty("outline", "none");
-    effect(() => _el$.innerHTML = props.text?.toString() || "");
-    return _el$;
-  })();
-}
-var text_default = Text;
-
 // src/blocks/video/component-info.ts
-var componentInfo12 = {
+var componentInfo16 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -6044,8 +6798,8 @@ var componentInfo12 = {
     advanced: true
   }]
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   function videoProps() {
@@ -6107,7 +6861,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$11();
+        const _el$3 = _tmpl$15();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -6117,7 +6871,7 @@ function Video(props) {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$23();
+        const _el$4 = _tmpl$25();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -6130,7 +6884,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$23();
+        const _el$5 = _tmpl$25();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -6143,7 +6897,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$23();
+        const _el$6 = _tmpl$25();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -6162,6 +6916,33 @@ function Video(props) {
 }
 var video_default = Video;
 
+// src/constants/extra-components.ts
+var getExtraComponents = () => [{
+  component: custom_code_default,
+  ...componentInfo9
+}, {
+  component: embed_default,
+  ...componentInfo10
+}, ...TARGET === "rsc" ? [] : [{
+  component: form_default,
+  ...componentInfo11
+}, {
+  component: input_default,
+  ...componentInfo12
+}, {
+  component: submit_button_default,
+  ...componentInfo14
+}, {
+  component: select_default,
+  ...componentInfo13
+}], {
+  component: img_default,
+  ...componentInfo15
+}, {
+  component: video_default,
+  ...componentInfo16
+}];
+
 // src/constants/builder-registered-components.ts
 var getDefaultRegisteredComponents = () => [{
   component: button_default,
@@ -6170,36 +6951,24 @@ var getDefaultRegisteredComponents = () => [{
   component: columns_default,
   ...componentInfo2
 }, {
-  component: custom_code_default,
+  component: fragment_default,
   ...componentInfo3
 }, {
-  component: embed_default,
+  component: image_default,
   ...componentInfo4
 }, {
-  component: fragment_default,
+  component: section_default,
   ...componentInfo5
 }, {
-  component: image_default,
+  component: slot_default,
   ...componentInfo6
-}, {
-  component: img_default,
-  ...componentInfo7
-}, {
-  component: section_default,
-  ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo10
+  ...componentInfo7
 }, {
   component: text_default,
-  ...componentInfo11
-}, {
-  component: video_default,
-  ...componentInfo12
-}, {
-  component: slot_default,
-  ...componentInfo9
-}];
+  ...componentInfo8
+}, ...getExtraComponents()];
 
 // src/functions/register-component.ts
 var components = [];
@@ -6269,10 +7038,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$12 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$16();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -6779,7 +7548,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.13.1";
+var SDK_VERSION = "0.13.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -7782,7 +8551,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 function Symbol2(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
@@ -7808,7 +8577,7 @@ function Symbol2(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$17();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();