@builder.io/sdk-react-native 0.5.9 → 0.6.0

package/lib/browser/commonjs/blocks/embed/component-info.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentInfo = void 0;
+const componentInfo = {
+  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
+  }]
+};
+exports.componentInfo = componentInfo;
+//# sourceMappingURL=component-info.js.map

package/lib/browser/commonjs/blocks/embed/component-info.js.flow

@@ -0,0 +1,37 @@
+const componentInfo = {
+  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
+  }]
+};
+export { componentInfo }

package/lib/browser/commonjs/blocks/embed/component-info.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["componentInfo","name","static","inputs","type","required","defaultValue","helperText","onChange","options","url","get","set","apiKey","fetch","then","res","json","data","html","catch","_err","delete","hideFromUI","exports"],"sourceRoot":"../../../../../src","sources":["blocks/embed/component-info.js"],"mappings":";;;;;;AAAA,MAAMA,aAAa,GAAG;EACpBC,IAAI,EAAE,OAAO;EACbC,MAAM,EAAE,IAAI;EACZC,MAAM,EAAE,CAAC;IACPF,IAAI,EAAE,KAAK;IACXG,IAAI,EAAE,KAAK;IACXC,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,2CAA2C;IACvDC,QAAQ,EAAEC,OAAO,IAAI;MACnB,MAAMC,GAAG,GAAGD,OAAO,CAACE,GAAG,CAAC,KAAK,CAAC;MAC9B,IAAID,GAAG,EAAE;QACPD,OAAO,CAACG,GAAG,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,MAAMC,MAAM,GAAG,wBAAwB;QACvC,OAAOC,KAAK,CAAE,sCAAqCJ,GAAI,YAAWG,MAAO,EAAC,CAAC,CAACE,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAAC,CAAC,CAAC,CAACF,IAAI,CAACG,IAAI,IAAI;UAC/G,IAAIT,OAAO,CAACE,GAAG,CAAC,KAAK,CAAC,KAAKD,GAAG,EAAE;YAC9B,IAAIQ,IAAI,CAACC,IAAI,EAAE;cACbV,OAAO,CAACG,GAAG,CAAC,SAAS,EAAEM,IAAI,CAACC,IAAI,CAAC;YACnC,CAAC,MAAM;cACLV,OAAO,CAACG,GAAG,CAAC,SAAS,EAAE,iCAAiC,CAAC;YAC3D;UACF;QACF,CAAC,CAAC,CAACQ,KAAK,CAACC,IAAI,IAAI;UACfZ,OAAO,CAACG,GAAG,CAAC,SAAS,EAAE,wEAAwE,CAAC;QAClG,CAAC,CAAC;MACJ,CAAC,MAAM;QACLH,OAAO,CAACa,MAAM,CAAC,SAAS,CAAC;MAC3B;IACF;EACF,CAAC,EAAE;IACDrB,IAAI,EAAE,SAAS;IACfG,IAAI,EAAE,MAAM;IACZE,YAAY,EAAE,2EAA2E;IACzFiB,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAACC,OAAA,CAAAxB,aAAA,GAAAA,aAAA"}

package/lib/browser/commonjs/blocks/embed/embed.js

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _helpers = require("./helpers.js");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Embed(props) {
+  const elem = (0, React.useRef)(null);
+  const [scriptsInserted, setScriptsInserted] = (0, React.useState)(() => []);
+  const [scriptsRun, setScriptsRun] = (0, React.useState)(() => []);
+  const [ranInitFn, setRanInitFn] = (0, React.useState)(() => false);
+  function findAndRunScripts() {
+    if (!elem.current || !elem.current.getElementsByTagName) return;
+    const scripts = elem.current.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 ((0, _helpers.isJsScript)(script) && !scriptsRun.includes(script.innerText)) {
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
+        }
+      }
+    }
+  }
+  (0, React.useEffect)(() => {
+    if (elem.current && !ranInitFn) {
+      setRanInitFn(true);
+      findAndRunScripts();
+    }
+  }, [elem.current, ranInitFn]);
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    ref: elem,
+    dangerouslySetInnerHTML: {
+      __html: props.content
+    }
+  });
+}
+var _default = Embed;
+exports.default = _default;
+//# sourceMappingURL=embed.js.map

package/lib/browser/commonjs/blocks/embed/embed.js.flow

@@ -0,0 +1,56 @@
+"use client";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import { useState, useRef, useEffect } from "react";
+import { isJsScript } from "./helpers.js";
+
+function Embed(props) {
+  const elem = useRef(null);
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+
+  const [ranInitFn, setRanInitFn] = useState(() => false);
+
+  function findAndRunScripts() {
+    if (!elem.current || !elem.current.getElementsByTagName) return;
+    const scripts = elem.current.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);
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (elem.current && !ranInitFn) {
+      setRanInitFn(true);
+      findAndRunScripts();
+    }
+  }, [elem.current, ranInitFn]);
+
+  return (
+    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
+  );
+}
+
+export default Embed;

package/lib/browser/commonjs/blocks/embed/embed.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Object","defineProperty","exports","value","default","React","_interopRequireWildcard","require","_reactNative","_helpers","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","cache","has","get","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Embed","props","elem","useRef","scriptsInserted","setScriptsInserted","useState","scriptsRun","setScriptsRun","ranInitFn","setRanInitFn","findAndRunScripts","current","getElementsByTagName","scripts","i","length","script","src","includes","push","newScript","document","createElement","async","head","appendChild","isJsScript","innerText","Function","error","console","warn","useEffect","View","ref","dangerouslySetInnerHTML","__html","content","_default"],"sourceRoot":"../../../../../src","sources":["blocks/embed/embed.jsx"],"mappings":"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"}

package/lib/browser/commonjs/blocks/embed/helpers.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isJsScript = void 0;
+const SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
+const isJsScript = script => SCRIPT_MIME_TYPES.includes(script.type);
+exports.isJsScript = isJsScript;
+//# sourceMappingURL=helpers.js.map

package/lib/browser/commonjs/blocks/embed/helpers.js.flow

@@ -0,0 +1,3 @@
+const SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
+const isJsScript = script => SCRIPT_MIME_TYPES.includes(script.type);
+export { isJsScript }

package/lib/browser/commonjs/blocks/embed/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SCRIPT_MIME_TYPES","isJsScript","script","includes","type","exports"],"sourceRoot":"../../../../../src","sources":["blocks/embed/helpers.js"],"mappings":";;;;;;AAAA,MAAMA,iBAAiB,GAAG,CAAC,iBAAiB,EAAE,wBAAwB,EAAE,wBAAwB,CAAC;AACjG,MAAMC,UAAU,GAAGC,MAAM,IAAIF,iBAAiB,CAACG,QAAQ,CAACD,MAAM,CAACE,IAAI,CAAC;AAACC,OAAA,CAAAJ,UAAA,GAAAA,UAAA"}

package/lib/browser/commonjs/blocks/form/component-info.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentInfo = void 0;
+const componentInfo = {
+  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"
+      }
+    }
+  }]
+};
+exports.componentInfo = componentInfo;
+//# sourceMappingURL=component-info.js.map

package/lib/browser/commonjs/blocks/form/component-info.js.flow

@@ -0,0 +1,223 @@
+const componentInfo = {
+  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"
+      }
+    }
+  }]
+};
+export { componentInfo }