@builder.io/sdk-react-native 0.0.1-22 → 0.0.1-26

package/src/blocks/columns.lite.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext } from "react";
-import RenderBlocks from "../components/render-blocks.lite";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useContext } from 'react';
+import RenderBlocks from '../components/render-blocks.lite';
 
 export default function Columns(props) {
   function getGutterSize() {
-    return typeof props.space === "number" ? props.space || 0 : 20;
+    return typeof props.space === 'number' ? props.space || 0 : 20;
   }
 
   function getColumns() {
@@ -26,7 +26,7 @@ export default function Columns(props) {
 
   return (
     <View className="builder-columns" style={styles.view1}>
-      {props.columns?.map((column) => (
+      {props.columns?.map(column => (
         <View className="builder-column" style={styles.view2}>
           <RenderBlocks blocks={column.blocks} />
         </View>
@@ -36,6 +36,6 @@ export default function Columns(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: { display: "flex", alignItems: "stretch" },
+  view1: { display: 'flex', alignItems: 'stretch' },
   view2: { flexGrow: 1 },
 });

package/src/blocks/custom-code.js

@@ -1,56 +1,82 @@
 import { registerComponent } from '../functions/register-component';
 
-        import * as React from "react";
-import { View } from "react-native";
-import { useState, useRef, useEffect } from "react";
+import * as React from 'react';
+import { View } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
 function CustomCode(props) {
-const [scriptsInserted, setScriptsInserted] = useState(() => []);
-const [scriptsRun, setScriptsRun] = useState(() => []);
-function findAndRunScripts() {
-  if (elem.current && typeof window !== "undefined") {
-    const scripts = elem.current.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);
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+  function findAndRunScripts() {
+    if (elem.current && typeof window !== 'undefined') {
+      const scripts = elem.current.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);
+          }
         }
       }
     }
   }
+  const elem = useRef();
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+  return /* @__PURE__ */ React.createElement(View, {
+    ref: elem,
+    className: 'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''),
+    dangerouslySetInnerHTML: { __html: 'props.code' },
+  });
 }
-const elem = useRef();
-useEffect(() => {
-  findAndRunScripts();
-}, []);
-return /* @__PURE__ */ React.createElement(View, {
-  ref: elem,
-  className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
-  dangerouslySetInnerHTML: { __html: "props.code" }
-});
-}
-export {
-CustomCode as default
-};
-
+export { CustomCode as default };
 
-        registerComponent(CustomCode, {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}]});
+registerComponent(CustomCode, {
+  name: 'Custom Code',
+  static: true,
+  builtIn: 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,
+    },
+  ],
+});

package/src/blocks/custom-code.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useContext, useRef, useEffect } from 'react';
 
 export default function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -9,9 +9,9 @@ export default function CustomCode(props) {
 
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== "undefined") {
+    if (elem.current && typeof window !== 'undefined') {
       /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName("script");
+      const scripts = elem.current.getElementsByTagName('script');
 
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -22,17 +22,15 @@ export default function CustomCode(props) {
           }
 
           scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
+          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)
+          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
+            script.type
+          )
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
@@ -42,7 +40,7 @@ export default function CustomCode(props) {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
           } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
+            console.warn('`CustomCode`: Error running script:', error);
           }
         }
       }
@@ -58,10 +56,8 @@ export default function CustomCode(props) {
   return (
     <View
       ref={elem}
-      className={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      dangerouslySetInnerHTML={{ __html: "props.code" }}
+      className={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}
+      dangerouslySetInnerHTML={{ __html: 'props.code' }}
     />
   );
 }

package/src/blocks/embed.js

@@ -1,56 +1,75 @@
 import { registerComponent } from '../functions/register-component';
 
-        import * as React from "react";
-import { View } from "react-native";
-import { useState, useRef, useEffect } from "react";
+import * as React from 'react';
+import { View } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
 function Embed(props) {
-const [scriptsInserted, setScriptsInserted] = useState(() => []);
-const [scriptsRun, setScriptsRun] = useState(() => []);
-function findAndRunScripts() {
-  if (elem.current && typeof window !== "undefined") {
-    const scripts = elem.current.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("`Embed`: Error running script:", error);
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+  function findAndRunScripts() {
+    if (elem.current && typeof window !== 'undefined') {
+      const scripts = elem.current.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('`Embed`: Error running script:', error);
+          }
         }
       }
     }
   }
+  const elem = useRef();
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+  return /* @__PURE__ */ React.createElement(View, {
+    className: 'builder-embed',
+    ref: elem,
+    dangerouslySetInnerHTML: { __html: 'props.content' },
+  });
 }
-const elem = useRef();
-useEffect(() => {
-  findAndRunScripts();
-}, []);
-return /* @__PURE__ */ React.createElement(View, {
-  className: "builder-embed",
-  ref: elem,
-  dangerouslySetInnerHTML: { __html: "props.content" }
-});
-}
-export {
-Embed as default
-};
-
+export { Embed as default };
 
-        registerComponent(Embed, {name:'Embed',static:true,inputs:[{name:'url',type:'url',required:true,defaultValue:'',helperText:'e.g. enter a youtube url, google map, etc',onChange:"        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          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}]});
+registerComponent(Embed, {
+  name: 'Embed',
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: 'url',
+      type: 'url',
+      required: true,
+      defaultValue: '',
+      helperText: 'e.g. enter a youtube url, google map, etc',
+      onChange:
+        "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          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,
+    },
+  ],
+});

package/src/blocks/embed.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useContext, useRef, useEffect } from 'react';
 
 export default function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -9,9 +9,9 @@ export default function Embed(props) {
 
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== "undefined") {
+    if (elem.current && typeof window !== 'undefined') {
       /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName("script");
+      const scripts = elem.current.getElementsByTagName('script');
 
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -22,17 +22,15 @@ export default function Embed(props) {
           }
 
           scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
+          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)
+          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
+            script.type
+          )
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
@@ -42,7 +40,7 @@ export default function Embed(props) {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
           } catch (error) {
-            console.warn("`Embed`: Error running script:", error);
+            console.warn('`Embed`: Error running script:', error);
           }
         }
       }
@@ -59,7 +57,7 @@ export default function Embed(props) {
     <View
       className="builder-embed"
       ref={elem}
-      dangerouslySetInnerHTML={{ __html: "props.content" }}
+      dangerouslySetInnerHTML={{ __html: 'props.content' }}
     />
   );
 }

package/src/blocks/form.js

@@ -1,229 +1,467 @@
 import { registerComponent } from '../functions/register-component';
 
-        var __defProp = Object.defineProperty;
+var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key, value) =>
+  key in obj
+    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
+    : (obj[key] = value);
 var __spreadValues = (a, b) => {
-for (var prop in b || (b = {}))
-  if (__hasOwnProp.call(b, prop))
-    __defNormalProp(a, prop, b[prop]);
-if (__getOwnPropSymbols)
-  for (var prop of __getOwnPropSymbols(b)) {
-    if (__propIsEnum.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  }
-return a;
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
-return new Promise((resolve, reject) => {
-  var fulfilled = (value) => {
-    try {
-      step(generator.next(value));
-    } catch (e) {
-      reject(e);
-    }
-  };
-  var rejected = (value) => {
-    try {
-      step(generator.throw(value));
-    } catch (e) {
-      reject(e);
-    }
-  };
-  var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-  step((generator = generator.apply(__this, __arguments)).next());
-});
+  return new Promise((resolve, reject) => {
+    var fulfilled = value => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = value => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = x =>
+      x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
 };
-import * as React from "react";
-import { View, StyleSheet, Text } from "react-native";
-import { useState, useRef } from "react";
-import { Builder, builder } from "@builder.io/sdk";
-import { BuilderBlocks } from "@dummy";
-import { set } from "@dummy";
-import { get } from "@dummy";
+import * as React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { useState, useRef } from 'react';
+import RenderBlock from '../components/render-block';
 function FormComponent(props) {
-var _a, _b;
-const [state, setState] = useState(() => "unsubmitted");
-const [responseData, setResponseData] = useState(() => null);
-const [formErrorMessage, setFormErrorMessage] = useState(() => "");
-function submissionState() {
-  return Builder.isEditing && props.previewState || state;
-}
-function onSubmit(event) {
-  var _a2;
-  const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-  if (props.sendSubmissionsTo === "zapier") {
-    event.preventDefault();
-  } else if (sendWithJs) {
-    if (!(props.action || props.sendSubmissionsTo === "email")) {
+  var _a, _b;
+  const [state, setState] = useState(() => 'unsubmitted');
+  const [responseData, setResponseData] = useState(() => null);
+  const [formErrorMessage, setFormErrorMessage] = useState(() => '');
+  function submissionState() {
+    return (Builder.isEditing && props.previewState) || state;
+  }
+  function onSubmit(event) {
+    var _a2;
+    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === 'email';
+    if (props.sendSubmissionsTo === 'zapier') {
       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;
+    } else if (sendWithJs) {
+      if (!(props.action || props.sendSubmissionsTo === 'email')) {
+        event.preventDefault();
+        return;
       }
-      return {
-        key,
-        value
-      };
-    });
-    let contentType = props.contentType;
-    if (props.sendSubmissionsTo === "email") {
-      contentType = "multipart/form-data";
-    }
-    Array.from(formPairs).forEach(({ value }) => {
-      if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
-        contentType = "multipart/form-data";
+      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 contentType = props.contentType;
+      if (props.sendSubmissionsTo === 'email') {
+        contentType = 'multipart/form-data';
       }
-    });
-    if (contentType !== "application/json") {
-      body = formData;
-    } else {
-      const json = {};
-      Array.from(formPairs).forEach(({ value, key }) => {
-        set(json, key, value);
+      Array.from(formPairs).forEach(({ value }) => {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
+          contentType = 'multipart/form-data';
+        }
       });
-      body = JSON.stringify(json);
-    }
-    if (contentType && contentType !== "multipart/form-data") {
-      if (!(sendWithJs && ((_a2 = props.action) == null ? void 0 : _a2.includes("zapier.com")))) {
-        headers["content-type"] = contentType;
-      }
-    }
-    const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-    if (formRef.current) {
-      formRef.current.dispatchEvent(presubmitEvent);
-      if (presubmitEvent.defaultPrevented) {
-        return;
-      }
-    }
-    setState("sending");
-    const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-    fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action, { body, headers, method: props.method || "post" }).then((res) => __async(this, null, function* () {
-      let body2;
-      const contentType2 = res.headers.get("content-type");
-      if (contentType2 && contentType2.indexOf("application/json") !== -1) {
-        body2 = yield res.json();
+      if (contentType !== 'application/json') {
+        body = formData;
       } else {
-        body2 = yield res.text();
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
       }
-      if (!res.ok && props.errorMessagePath) {
-        let message = get(body2, props.errorMessagePath);
-        if (message) {
-          if (typeof message !== "string") {
-            message = JSON.stringify(message);
-          }
-          setFormErrorMessage(message);
+      if (contentType && contentType !== 'multipart/form-data') {
+        if (!(sendWithJs && ((_a2 = props.action) == null ? void 0 : _a2.includes('zapier.com')))) {
+          headers['content-type'] = contentType;
         }
       }
-      setResponseData(body2);
-      setState(res.ok ? "success" : "error");
-      if (res.ok) {
-        const submitSuccessEvent = new CustomEvent("submit:success", {
-          detail: { res, body: body2 }
-        });
-        if (formRef.current) {
-          formRef.current.dispatchEvent(submitSuccessEvent);
-          if (submitSuccessEvent.defaultPrevented) {
-            return;
-          }
-          if (props.resetFormOnSubmit !== false) {
-            formRef.current.reset();
-          }
+      const presubmitEvent = new CustomEvent('presubmit', { detail: { body } });
+      if (formRef.current) {
+        formRef.current.dispatchEvent(presubmitEvent);
+        if (presubmitEvent.defaultPrevented) {
+          return;
         }
-        if (props.successUrl) {
+      }
+      setState('sending');
+      const formUrl = `${
+        builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'
+      }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
+        props.sendSubmissionsToEmail || ''
+      )}&name=${encodeURIComponent(props.name || '')}`;
+      fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action, {
+        body,
+        headers,
+        method: props.method || 'post',
+      }).then(
+        res =>
+          __async(this, null, function* () {
+            let body2;
+            const contentType2 = res.headers.get('content-type');
+            if (contentType2 && contentType2.indexOf('application/json') !== -1) {
+              body2 = yield res.json();
+            } else {
+              body2 = yield 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);
+              }
+            }
+            setResponseData(body2);
+            setState(res.ok ? 'success' : 'error');
+            if (res.ok) {
+              const submitSuccessEvent = new CustomEvent('submit:success', {
+                detail: { res, body: body2 },
+              });
+              if (formRef.current) {
+                formRef.current.dispatchEvent(submitSuccessEvent);
+                if (submitSuccessEvent.defaultPrevented) {
+                  return;
+                }
+                if (props.resetFormOnSubmit !== false) {
+                  formRef.current.reset();
+                }
+              }
+              if (props.successUrl) {
+                if (formRef.current) {
+                  const event2 = new CustomEvent('route', {
+                    detail: { url: props.successUrl },
+                  });
+                  formRef.current.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.current) {
-            const event2 = new CustomEvent("route", {
-              detail: { url: props.successUrl }
-            });
-            formRef.current.dispatchEvent(event2);
-            if (!event2.defaultPrevented) {
-              location.href = props.successUrl;
+            formRef.current.dispatchEvent(submitErrorEvent);
+            if (submitErrorEvent.defaultPrevented) {
+              return;
             }
-          } else {
-            location.href = props.successUrl;
           }
+          setResponseData(err);
+          setState('error');
         }
-      }
-    }), (err) => {
-      const submitErrorEvent = new CustomEvent("submit:error", {
-        detail: { error: err }
-      });
-      if (formRef.current) {
-        formRef.current.dispatchEvent(submitErrorEvent);
-        if (submitErrorEvent.defaultPrevented) {
-          return;
-        }
-      }
-      setResponseData(err);
-      setState("error");
-    });
+      );
+    }
   }
-}
-const formRef = useRef();
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  validate: props.validate,
-  ref: formRef,
-  action: !props.sendWithJs && props.action,
-  method: props.method,
-  name: props.name,
-  onSubmit: (event) => onSubmit(event)
-}), " ", props.builderBlock && props.builderBlock.children && /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(BuilderBlockComponent, {
-  block
-}))), " ", submissionState() === "error" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-  dataPath: "errorMessage",
-  blocks: props.errorMessage
-})), " ", submissionState() === "sending" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-  dataPath: "sendingMessage",
-  blocks: props.sendingMessage
-})), " ", submissionState() === "error" && responseData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-  className: "builder-form-error-text",
-  style: styles.view1
-}, " ", /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)), " ")), " ", submissionState() === "success" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-  dataPath: "successMessage",
-  blocks: props.successMessage
-})), " ");
+  const formRef = useRef();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    __spreadProps(__spreadValues({}, props.attributes), {
+      validate: props.validate,
+      ref: formRef,
+      action: !props.sendWithJs && props.action,
+      method: props.method,
+      name: props.name,
+      onSubmit: event => onSubmit(event),
+    }),
+    ' ',
+    props.builderBlock && props.builderBlock.children
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null
+            ? void 0
+            : _b.map(block =>
+                /* @__PURE__ */ React.createElement(RenderBlock, {
+                  block,
+                })
+              )
+        )
+      : null,
+    ' ',
+    submissionState() === 'error'
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          /* @__PURE__ */ React.createElement(BuilderBlocks, {
+            dataPath: 'errorMessage',
+            blocks: props.errorMessage,
+          })
+        )
+      : null,
+    ' ',
+    submissionState() === 'sending'
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          /* @__PURE__ */ React.createElement(BuilderBlocks, {
+            dataPath: 'sendingMessage',
+            blocks: props.sendingMessage,
+          })
+        )
+      : null,
+    ' ',
+    submissionState() === 'error' && responseData
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          /* @__PURE__ */ React.createElement(
+            View,
+            {
+              className: 'builder-form-error-text',
+              style: styles.view1,
+            },
+            ' ',
+            /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)),
+            ' '
+          )
+        )
+      : null,
+    ' ',
+    submissionState() === 'success'
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          /* @__PURE__ */ React.createElement(BuilderBlocks, {
+            dataPath: 'successMessage',
+            blocks: props.successMessage,
+          })
+        )
+      : null,
+    ' '
+  );
 }
 const styles = StyleSheet.create({
-view1: { padding: 10, color: "red", textAlign: "center" }
+  view1: { padding: 10, color: 'red', textAlign: 'center' },
 });
-export {
-FormComponent as default
-};
-
+export { FormComponent as default };
 
-        registerComponent(FormComponent, {name:'Form:Form',defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',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,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'},{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,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',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'}}}]});
+registerComponent(FormComponent, {
+  name: 'Form:Form',
+  builtIn: true,
+  defaults: { responsiveStyles: { large: { marginTop: '15px', paddingBottom: '15px' } } },
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+  inputs: [
+    {
+      name: 'sendSubmissionsTo',
+      type: 'string',
+      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,
+      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' },
+    {
+      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,
+      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',
+      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' } },
+    },
+  ],
+});