From f54bfc152d6a0ba12eaebf91b7d38e9dd5707eb5 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Mon, 6 Jan 2025 11:02:02 +0100
Subject: [PATCH] fix(react-formio): migrate FormBuilder to react hooks

---
 .../__fixtures__/form-wizard.fixture.json     | 2042 +++++++++
 .../form-builder/formBuilder.component.tsx    |  196 +-
 .../form-builder/formBuilder.stories.tsx      | 3701 +----------------
 .../form-builder/useFormBuilder.hook.ts       |  143 +
 .../form-edit/formEdit.component.tsx          |   41 +-
 .../components/form-edit/formEdit.stories.tsx |   57 +-
 .../form-edit/formParameters.component.tsx    |   12 +-
 .../components/form-edit/useFormEdit.hook.ts  |    2 +-
 packages/tailwind-formio/styles/form-edit.css |   34 +-
 stories/FormBuilder.mdx                       |   16 +-
 stories/FormEdit.mdx                          |    2 +-
 stories/Getting-started.mdx                   |    2 +-
 12 files changed, 2379 insertions(+), 3869 deletions(-)
 create mode 100644 packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json
 create mode 100644 packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts

diff --git a/packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json b/packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json
new file mode 100644
index 00000000..33258524
--- /dev/null
+++ b/packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json
@@ -0,0 +1,2042 @@
+{
+  "display": "wizard",
+  "components": [
+    {
+      "label": "Text Field",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": true,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textField",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "input": true,
+      "refreshOn": "",
+      "inputType": "text",
+      "id": "eqb1o4r",
+      "defaultValue": ""
+    },
+    {
+      "label": "Text Area",
+      "labelPosition": "top",
+      "placeholder": "Placeholder",
+      "description": "description",
+      "tooltip": "tooltip",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "editor": "",
+      "autoExpand": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "html",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "minWords": "",
+        "maxWords": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textArea",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "fixedSize": true,
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "attributes": {},
+      "type": "textarea",
+      "rows": 3,
+      "wysiwyg": false,
+      "input": true,
+      "refreshOn": "",
+      "allowMultipleMasks": false,
+      "mask": false,
+      "inputType": "text",
+      "inputMask": "",
+      "id": "e4jsrqc",
+      "defaultValue": ""
+    },
+    {
+      "label": "Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "delimiter": false,
+      "requireDecimal": false,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "min": "",
+        "max": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "step": "any",
+        "integer": ""
+      },
+      "errorLabel": "",
+      "key": "number",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "number",
+      "input": true,
+      "unique": false,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ex8zh8u",
+      "defaultValue": null
+    },
+    {
+      "label": "Password",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "case": "",
+      "redrawOn": "",
+      "clearOnHide": true,
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "password",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "password",
+      "input": true,
+      "multiple": false,
+      "defaultValue": null,
+      "protected": true,
+      "unique": false,
+      "persistent": true,
+      "refreshOn": "",
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "encrypted": false,
+      "allowMultipleMasks": false,
+      "inputType": "text",
+      "inputFormat": "plain",
+      "inputMask": "",
+      "id": "etqa5pm"
+    },
+    {
+      "label": "Checkbox",
+      "description": "description",
+      "tooltip": "tooltip",
+      "shortcut": "",
+      "inputType": "checkbox",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "defaultValue": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "checkbox",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "checkbox",
+      "name": "",
+      "value": "",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "labelPosition": "right",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "dataGridLabel": true,
+      "id": "em8ln2m"
+    },
+    {
+      "label": "Select Boxes",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        },
+        {
+          "label": "lol",
+          "value": "lol",
+          "shortcut": ""
+        }
+      ],
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "minSelectedCountMessage": "",
+      "maxSelectedCountMessage": "",
+      "key": "selectBoxes",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "selectboxes",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "checkbox",
+      "fieldSet": false,
+      "id": "esa4upt",
+      "defaultValue": {
+        "": false
+      }
+    },
+    {
+      "label": "Radio",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "data",
+          "value": "data",
+          "shortcut": ""
+        },
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        }
+      ],
+      "dataType": "",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "radio",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "radio",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "radio",
+      "fieldSet": false,
+      "id": "edh7o6o",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "label",
+            "value": "label"
+          },
+          {
+            "label": "save",
+            "value": "save"
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "ebqtqd6",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "html5",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "",
+            "value": ""
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select1",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "em8m4qk",
+      "defaultValue": ""
+    },
+    {
+      "label": "Email",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "kickbox": {
+        "enabled": false
+      },
+      "errorLabel": "",
+      "key": "email",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "email",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "email",
+      "inputMask": "",
+      "id": "epj8sj28",
+      "defaultValue": null
+    },
+    {
+      "label": "Url",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "url",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "url",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "url",
+      "inputMask": "",
+      "id": "exw9p4",
+      "defaultValue": null
+    },
+    {
+      "label": "Phone Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "(999) 999-9999",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "phoneNumber",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "phoneNumber",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "inputType": "tel",
+      "id": "e2c7lpl",
+      "defaultValue": null
+    },
+    {
+      "label": "Tags",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "delimeter": ",",
+      "maxTags": 0,
+      "storeas": "string",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "tags",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "tags",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "widget": {
+        "type": "input"
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ejc82t",
+      "defaultValue": null
+    },
+    {
+      "label": "Address",
+      "labelPosition": "top",
+      "enableManualMode": false,
+      "disableClearIcon": false,
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "provider": "google",
+      "manualModeViewString": "",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "address",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "address",
+      "switchToManualModeLabel": "Can't find address? Switch to manual mode.",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "tree": true,
+      "components": [
+        {
+          "label": "Address 1",
+          "tableView": false,
+          "key": "address1",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eecfg6h"
+        },
+        {
+          "label": "Address 2",
+          "tableView": false,
+          "key": "address2",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eajhpuu"
+        },
+        {
+          "label": "City",
+          "tableView": false,
+          "key": "city",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "efpnrca7"
+        },
+        {
+          "label": "State",
+          "tableView": false,
+          "key": "state",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eu3kksv"
+        },
+        {
+          "label": "Country",
+          "tableView": false,
+          "key": "country",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "el39cu9"
+        },
+        {
+          "label": "Zip Code",
+          "tableView": false,
+          "key": "zip",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "epyac4"
+        }
+      ],
+      "providerOptions": {
+        "params": {
+          "key": "fze",
+          "region": ""
+        }
+      },
+      "id": "er02e2gb",
+      "defaultValue": {}
+    },
+    {
+      "label": "Date / Time",
+      "labelPosition": "top",
+      "displayInTimezone": "viewer",
+      "useLocaleSettings": false,
+      "allowInput": true,
+      "format": "yyyy-MM-dd hh:mm a",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "enableDate": true,
+      "enableMinDateInput": false,
+      "datePicker": {
+        "minDate": null,
+        "maxDate": null,
+        "disable": "",
+        "disableFunction": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "showWeeks": true,
+        "startingDay": 0,
+        "initDate": "",
+        "minMode": "day",
+        "maxMode": "year",
+        "yearRows": 4,
+        "yearColumns": 5
+      },
+      "enableMaxDateInput": false,
+      "enableTime": true,
+      "timePicker": {
+        "showMeridian": true,
+        "hourStep": 1,
+        "minuteStep": 1,
+        "readonlyInput": false,
+        "mousewheel": true,
+        "arrowkeys": true
+      },
+      "multiple": false,
+      "defaultValue": "",
+      "defaultDate": "",
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "dateTime",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "datetime",
+      "timezone": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": {
+        "type": "calendar",
+        "displayInTimezone": "viewer",
+        "locale": "en",
+        "useLocaleSettings": false,
+        "allowInput": true,
+        "mode": "single",
+        "enableTime": true,
+        "noCalendar": false,
+        "format": "yyyy-MM-dd hh:mm a",
+        "hourIncrement": 1,
+        "minuteIncrement": 1,
+        "minDate": null,
+        "disabledDates": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "disableFunction": "",
+        "maxDate": null
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "datepickerMode": "day",
+      "id": "el9idgl"
+    },
+    {
+      "label": "Day",
+      "hideInputLabels": false,
+      "inputsLabelPosition": "top",
+      "description": "",
+      "useLocaleSettings": false,
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "fields": {
+        "day": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "month": {
+          "type": "select",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "year": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        }
+      },
+      "dayFirst": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "maxDate": "",
+      "minDate": "",
+      "unique": false,
+      "errorLabel": "",
+      "validate": {
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "required": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "key": "day",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "day",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "labelPosition": "top",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ecgefls",
+      "defaultValue": "00/00/0000"
+    },
+    {
+      "label": "Currency",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "currency": "USD",
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "min": "",
+        "max": "",
+        "step": "any",
+        "integer": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "currency",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "currency",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "delimiter": true,
+      "id": "em22wkd",
+      "defaultValue": null
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "size": "md",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": true,
+      "theme": "primary",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "customClass": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": null,
+      "protected": false,
+      "unique": false,
+      "persistent": false,
+      "hidden": false,
+      "clearOnHide": true,
+      "refreshOn": "",
+      "redrawOn": "",
+      "tableView": false,
+      "modalEdit": false,
+      "labelPosition": "top",
+      "description": "",
+      "errorLabel": "",
+      "tooltip": "",
+      "hideLabel": false,
+      "tabindex": "",
+      "disabled": false,
+      "autofocus": false,
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "widget": {
+        "type": "input"
+      },
+      "attributes": {},
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "custom": "",
+        "customPrivate": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": ""
+      },
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "allowCalculateOverride": false,
+      "encrypted": false,
+      "showCharCount": false,
+      "showWordCount": false,
+      "properties": {},
+      "allowMultipleMasks": false,
+      "leftIcon": "",
+      "rightIcon": "",
+      "dataGridLabel": true,
+      "id": "e08gq3l"
+    }
+  ]
+}
diff --git a/packages/react-formio/src/components/form-builder/formBuilder.component.tsx b/packages/react-formio/src/components/form-builder/formBuilder.component.tsx
index b0db0fdb..48a47338 100755
--- a/packages/react-formio/src/components/form-builder/formBuilder.component.tsx
+++ b/packages/react-formio/src/components/form-builder/formBuilder.component.tsx
@@ -1,177 +1,25 @@
-import AllComponents from "formiojs/components";
-import Components from "formiojs/components/Components";
-import FormioFormBuilder from "formiojs/FormBuilder";
-import cloneDeep from "lodash/cloneDeep";
-import noop from "lodash/noop";
-import { Component } from "react";
-
-import { ComponentType } from "../../interfaces";
-import { callLast } from "../../utils/callLast";
-
-Components.setComponents(AllComponents);
-
-const EVENTS = [
-  "addComponent",
-  "updateComponent",
-  "removeComponent",
-  "saveComponent",
-  "cancelComponent",
-  "moveComponent",
-  "editComponent",
-  "editJson",
-  "copyComponent",
-  "pasteComponent"
-];
-
-const EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
-
-async function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<void> {
-  const form = {
-    display,
-    components: [...components]
-  };
-
-  try {
-    const builder = await new FormioFormBuilder(el, form, { ...options }).ready;
-
-    const handleEvent = (event: string) => {
-      return (...args: any[]) => {
-        events[event] && events[event](...args);
-
-        if (EVENTS_CHANGE.includes(event)) {
-          onChange(builder.form.components);
-        }
-      };
-    };
-
-    EVENTS.forEach((event) => builder.on(event, callLast(handleEvent(event), 200)));
-
-    return builder;
-  } catch (er) {
-    console.error(er);
-  }
-}
-
-export interface FormBuilderProps {
-  components: ComponentType[];
-  display?: string;
-  options?: any;
-  builder?: any;
-  onChange?: (components: ComponentType[]) => void;
-  onAddComponent?: Function;
-  onUpdateComponent?: Function;
-  onRemoveComponent?: Function;
-  onSaveComponent?: Function;
-  onCancelComponent?: Function;
-  onMoveComponent?: Function;
-  onEditComponent?: Function;
-  onEditJson?: Function;
-  onCopyComponent?: Function;
-  onPasteComponent?: Function;
-}
-
-export class FormBuilder extends Component<FormBuilderProps, any> {
-  static defaultProps = {
-    options: {},
-    onChange: noop,
-    onReady: noop,
-    onDestroy: noop
-  };
-
-  private elRef: any;
-  private builderRef: any;
-
-  constructor(props: FormBuilderProps) {
-    super(props);
-
-    this.state = {
-      display: props.display,
-      components: cloneDeep(props.components)
-    };
-    this.elRef = null;
-    this.builderRef = null;
-  }
-
-  async componentDidMount(): Promise<void> {
-    await this.create(this.props);
-  }
-
-  async create(props: FormBuilderProps) {
-    const {
-      options,
-      display,
-      components,
-      onAddComponent,
-      onUpdateComponent,
-      onRemoveComponent,
-      onSaveComponent,
-      onCancelComponent,
-      onMoveComponent,
-      onEditComponent,
-      onEditJson,
-      onCopyComponent,
-      onPasteComponent
-    } = props;
-
-    this.builderRef = await createBuilder(this.elRef.firstChild, {
-      display,
-      options: { ...options },
-      components: cloneDeep(components),
-      onChange: this.whenComponentsChange.bind(this),
-      events: {
-        onAddComponent,
-        onUpdateComponent,
-        onRemoveComponent,
-        onSaveComponent,
-        onCancelComponent,
-        onMoveComponent,
-        onEditComponent,
-        onEditJson,
-        onCopyComponent,
-        onPasteComponent
-      }
-    });
-  }
-
-  componentWillUnmount(): void {
-    this.builderRef?.destroy();
-  }
-
-  // eslint-disable-next-line react/no-deprecated
-  async componentWillReceiveProps(nextProps: FormBuilderProps) {
-    if (this.builderRef) {
-      if (nextProps.display !== this.state.display) {
-        await this.create({
-          ...this.props,
-          display: nextProps.display
-        });
-      } else if (nextProps.components !== this.state.components) {
-        this.builderRef.form = {
-          display: this.state.display,
-          components: nextProps.components
-        };
-      }
-    }
-  }
-
-  whenComponentsChange(components: ComponentType[]) {
-    this.setState({ components }, () => {
-      this.props?.onChange && this.props.onChange(components);
-    });
-  }
-
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-  /* eslint-disable jsx-a11y/click-events-have-key-events */
-  render() {
-    return (
-      <div
-        ref={(ref) => {
-          this.elRef = ref;
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
+import type { CSSProperties } from "react";
+
+import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder.hook";
+
+export function FormBuilder({
+  className = "",
+  style = {},
+  ["data-testid"]: dataTestId = "formio-builder-container",
+  ...props
+}: UseFormBuilderProps & {
+  className?: string;
+  style?: CSSProperties;
+  ["data-testid"]?: string;
+}) {
+  const renderElement = useFormBuilder(props);
+
+  return (
+    <div style={style} className={className} data-testid={dataTestId}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+      <div ref={renderElement} onClick={(e) => e.stopPropagation()}>
         <div />
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx b/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx
index 58caf72e..7ad4e7cb 100644
--- a/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx
+++ b/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx
@@ -1,5 +1,17 @@
-import { FormBuilder } from "../../index";
+import type { Meta, StoryObj } from "@storybook/react";
 
+import form from "../__fixtures__/form.fixture.json";
+import formWizard from "../__fixtures__/form-wizard.fixture.json";
+import { FormBuilder } from "./formBuilder.component";
+
+/**
+ * The [FormBuilder](/story/reactformio-formbuilder--sandbox) class can be used to embed a form builder directly in your React application.
+ *
+ * Please note that you'll need to include the CSS for the form builder from formio.js as well.
+ *
+ * Please note that the [FormBuilder](/story/reactformio-formbuilder--sandbox) component does not load and save from/to an url.
+ * You must handle the form definition loading and saving yourself or use the [FormEdit](/docs/documentation-formedit--docs) component.
+ */
 export default {
   title: "@tsed/react-formio/FormBuilder",
   component: FormBuilder,
@@ -16,3650 +28,71 @@ export default {
       }
     },
     options: {
+      description:
+        "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
       control: {
         type: "object"
       }
     },
-    onSubmit: { action: "onSubmit" }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
+    onBuilderReady: {
+      description:
+        "A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance.",
+      action: "onBuilderReady"
+    },
+    onChange: {
+      description: "A callback function that gets called when the form being built has changed.",
+      action: "onChange"
+    },
+    onSaveComponent: {
+      description: "A callback function that gets called when a component is saved in the builder.",
+      action: "onSaveComponent"
+    },
+    onEditComponent: {
+      description: "A callback function that gets called when a component is edited in the builder.",
+      action: "onEditComponent"
+    },
+    onUpdateComponent: {
+      description: "A callback function that gets called when a component is updated in the builder.",
+      action: "onUpdateComponent"
+    },
+    onDeleteComponent: {
+      description: "A callback function that gets called when a component is deleted in the builder.",
+      action: "onDeleteComponent"
     }
-  }
-};
-
-export const Sandbox = {
-  render: ({ display, options, components }: any) => {
-    return <FormBuilder display={display} options={options} components={components} />;
   },
+  tags: ["autodocs"]
+} satisfies Meta<typeof FormBuilder>;
+
+type Story = StoryObj<typeof FormBuilder>;
+/**
+ * A traditional web form that is typically filled out by end-users from top to bottom
+ */
+export const WebForm: Story = {
   args: {
-    display: "form",
+    display: form.display as any,
     options: { template: "tailwind", iconset: "bx" },
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      },
-      {
-        label: "Text Area",
-        labelPosition: "top",
-        placeholder: "Placeholder",
-        description: "description",
-        tooltip: "tooltip",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        editor: "",
-        autoExpand: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "html",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          minWords: "",
-          maxWords: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textArea",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        fixedSize: true,
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        attributes: {},
-        type: "textarea",
-        rows: 3,
-        wysiwyg: false,
-        input: true,
-        refreshOn: "",
-        allowMultipleMasks: false,
-        mask: false,
-        inputType: "text",
-        inputMask: "",
-        id: "e4jsrqc",
-        defaultValue: ""
-      },
-      {
-        label: "Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        delimiter: false,
-        requireDecimal: false,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          min: "",
-          max: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          step: "any",
-          integer: ""
-        },
-        errorLabel: "",
-        key: "number",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "number",
-        input: true,
-        unique: false,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ex8zh8u",
-        defaultValue: null
-      },
-      {
-        label: "Password",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        case: "",
-        redrawOn: "",
-        clearOnHide: true,
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "password",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "password",
-        input: true,
-        multiple: false,
-        defaultValue: null,
-        protected: true,
-        unique: false,
-        persistent: true,
-        refreshOn: "",
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        encrypted: false,
-        allowMultipleMasks: false,
-        inputType: "text",
-        inputFormat: "plain",
-        inputMask: "",
-        id: "etqa5pm"
-      },
-      {
-        label: "Checkbox",
-        description: "description",
-        tooltip: "tooltip",
-        shortcut: "",
-        inputType: "checkbox",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        defaultValue: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "checkbox",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "checkbox",
-        name: "",
-        value: "",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        labelPosition: "right",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        dataGridLabel: true,
-        id: "em8ln2m"
-      },
-      {
-        label: "Select Boxes",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "label", value: "label", shortcut: "" },
-          { label: "lol", value: "lol", shortcut: "" }
-        ],
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        minSelectedCountMessage: "",
-        maxSelectedCountMessage: "",
-        key: "selectBoxes",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "selectboxes",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "checkbox",
-        fieldSet: false,
-        id: "esa4upt",
-        defaultValue: { "": false }
-      },
-      {
-        label: "Radio",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "data", value: "data", shortcut: "" },
-          { label: "label", value: "label", shortcut: "" }
-        ],
-        dataType: "",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "radio",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "radio",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "radio",
-        fieldSet: false,
-        id: "edh7o6o",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "choicesjs",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [
-            { label: "label", value: "label" },
-            { label: "save", value: "save" }
-          ],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "ebqtqd6",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "html5",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [{ label: "", value: "" }],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select1",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "em8m4qk",
-        defaultValue: ""
-      },
-      {
-        label: "Email",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        kickbox: { enabled: false },
-        errorLabel: "",
-        key: "email",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "email",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "email",
-        inputMask: "",
-        id: "epj8sj28",
-        defaultValue: null
-      },
-      {
-        label: "Url",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "url",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "url",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "url",
-        inputMask: "",
-        id: "exw9p4",
-        defaultValue: null
-      },
-      {
-        label: "Phone Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "(999) 999-9999",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          minLength: "",
-          maxLength: "",
-          pattern: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "phoneNumber",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "phoneNumber",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        inputType: "tel",
-        id: "e2c7lpl",
-        defaultValue: null
-      },
-      {
-        label: "Tags",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        delimeter: ",",
-        maxTags: 0,
-        storeas: "string",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "tags",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "tags",
-        input: true,
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        widget: { type: "input" },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ejc82t",
-        defaultValue: null
-      },
-      {
-        label: "Address",
-        labelPosition: "top",
-        enableManualMode: false,
-        disableClearIcon: false,
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        provider: "google",
-        manualModeViewString: "",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "address",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "address",
-        switchToManualModeLabel: "Can't find address? Switch to manual mode.",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        tree: true,
-        components: [
-          {
-            label: "Address 1",
-            tableView: false,
-            key: "address1",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eecfg6h"
-          },
-          {
-            label: "Address 2",
-            tableView: false,
-            key: "address2",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eajhpuu"
-          },
-          {
-            label: "City",
-            tableView: false,
-            key: "city",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "efpnrca7"
-          },
-          {
-            label: "State",
-            tableView: false,
-            key: "state",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eu3kksv"
-          },
-          {
-            label: "Country",
-            tableView: false,
-            key: "country",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "el39cu9"
-          },
-          {
-            label: "Zip Code",
-            tableView: false,
-            key: "zip",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "epyac4"
-          }
-        ],
-        providerOptions: { params: { key: "fze", region: "" } },
-        id: "er02e2gb",
-        defaultValue: {}
-      },
-      {
-        label: "Date / Time",
-        labelPosition: "top",
-        displayInTimezone: "viewer",
-        useLocaleSettings: false,
-        allowInput: true,
-        format: "yyyy-MM-dd hh:mm a",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        enableDate: true,
-        enableMinDateInput: false,
-        datePicker: {
-          minDate: null,
-          maxDate: null,
-          disable: "",
-          disableFunction: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          showWeeks: true,
-          startingDay: 0,
-          initDate: "",
-          minMode: "day",
-          maxMode: "year",
-          yearRows: 4,
-          yearColumns: 5
-        },
-        enableMaxDateInput: false,
-        enableTime: true,
-        timePicker: {
-          showMeridian: true,
-          hourStep: 1,
-          minuteStep: 1,
-          readonlyInput: false,
-          mousewheel: true,
-          arrowkeys: true
-        },
-        multiple: false,
-        defaultValue: "",
-        defaultDate: "",
-        customOptions: {},
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "dateTime",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "datetime",
-        timezone: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: {
-          type: "calendar",
-          displayInTimezone: "viewer",
-          locale: "en",
-          useLocaleSettings: false,
-          allowInput: true,
-          mode: "single",
-          enableTime: true,
-          noCalendar: false,
-          format: "yyyy-MM-dd hh:mm a",
-          hourIncrement: 1,
-          minuteIncrement: 1,
-          minDate: null,
-          disabledDates: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          disableFunction: "",
-          maxDate: null
-        },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        datepickerMode: "day",
-        id: "el9idgl"
-      },
-      {
-        label: "Day",
-        hideInputLabels: false,
-        inputsLabelPosition: "top",
-        description: "",
-        useLocaleSettings: false,
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        fields: {
-          day: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          month: {
-            type: "select",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          year: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          }
-        },
-        dayFirst: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        maxDate: "",
-        minDate: "",
-        unique: false,
-        errorLabel: "",
-        validate: {
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          required: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        key: "day",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "day",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        labelPosition: "top",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ecgefls",
-        defaultValue: "00/00/0000"
-      },
-      {
-        label: "Currency",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        currency: "USD",
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          min: "",
-          max: "",
-          step: "any",
-          integer: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "currency",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "currency",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        delimiter: true,
-        id: "em22wkd",
-        defaultValue: null
-      },
-      {
-        type: "button",
-        label: "Submit",
-        key: "submit",
-        size: "md",
-        block: false,
-        action: "submit",
-        disableOnInvalid: true,
-        theme: "primary",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        customClass: "",
-        suffix: "",
-        multiple: false,
-        defaultValue: null,
-        protected: false,
-        unique: false,
-        persistent: false,
-        hidden: false,
-        clearOnHide: true,
-        refreshOn: "",
-        redrawOn: "",
-        tableView: false,
-        modalEdit: false,
-        labelPosition: "top",
-        description: "",
-        errorLabel: "",
-        tooltip: "",
-        hideLabel: false,
-        tabindex: "",
-        disabled: false,
-        autofocus: false,
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        widget: { type: "input" },
-        attributes: {},
-        validateOn: "change",
-        validate: {
-          required: false,
-          custom: "",
-          customPrivate: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        conditional: { show: null, when: null, eq: "" },
-        overlay: { style: "", left: "", top: "", width: "", height: "" },
-        allowCalculateOverride: false,
-        encrypted: false,
-        showCharCount: false,
-        showWordCount: false,
-        properties: {},
-        allowMultipleMasks: false,
-        leftIcon: "",
-        rightIcon: "",
-        dataGridLabel: true,
-        id: "e08gq3l"
-      }
-    ]
+    components: form.components as any
   }
 };
-
-export const Wizard = {
-  render: (args: any) => {
-    return <FormBuilder {...args} />;
-  },
-
+/**
+ * This form configuration allows users to progress through the form in bite-size sections instead of presenting the entire form to the user.
+ * If you are creating a form containing many fields, this is a great option to improve the user experience.
+ */
+export const Wizard: Story = {
   args: {
-    display: "wizard",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      },
-      {
-        label: "Text Area",
-        labelPosition: "top",
-        placeholder: "Placeholder",
-        description: "description",
-        tooltip: "tooltip",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        editor: "",
-        autoExpand: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "html",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          minWords: "",
-          maxWords: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textArea",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        fixedSize: true,
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        attributes: {},
-        type: "textarea",
-        rows: 3,
-        wysiwyg: false,
-        input: true,
-        refreshOn: "",
-        allowMultipleMasks: false,
-        mask: false,
-        inputType: "text",
-        inputMask: "",
-        id: "e4jsrqc",
-        defaultValue: ""
-      },
-      {
-        label: "Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        delimiter: false,
-        requireDecimal: false,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          min: "",
-          max: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          step: "any",
-          integer: ""
-        },
-        errorLabel: "",
-        key: "number",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "number",
-        input: true,
-        unique: false,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ex8zh8u",
-        defaultValue: null
-      },
-      {
-        label: "Password",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        case: "",
-        redrawOn: "",
-        clearOnHide: true,
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "password",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "password",
-        input: true,
-        multiple: false,
-        defaultValue: null,
-        protected: true,
-        unique: false,
-        persistent: true,
-        refreshOn: "",
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        encrypted: false,
-        allowMultipleMasks: false,
-        inputType: "text",
-        inputFormat: "plain",
-        inputMask: "",
-        id: "etqa5pm"
-      },
-      {
-        label: "Checkbox",
-        description: "description",
-        tooltip: "tooltip",
-        shortcut: "",
-        inputType: "checkbox",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        defaultValue: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "checkbox",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "checkbox",
-        name: "",
-        value: "",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        labelPosition: "right",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        dataGridLabel: true,
-        id: "em8ln2m"
-      },
-      {
-        label: "Select Boxes",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "label", value: "label", shortcut: "" },
-          { label: "lol", value: "lol", shortcut: "" }
-        ],
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        minSelectedCountMessage: "",
-        maxSelectedCountMessage: "",
-        key: "selectBoxes",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "selectboxes",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "checkbox",
-        fieldSet: false,
-        id: "esa4upt",
-        defaultValue: { "": false }
-      },
-      {
-        label: "Radio",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "data", value: "data", shortcut: "" },
-          { label: "label", value: "label", shortcut: "" }
-        ],
-        dataType: "",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "radio",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "radio",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "radio",
-        fieldSet: false,
-        id: "edh7o6o",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "choicesjs",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [
-            { label: "label", value: "label" },
-            { label: "save", value: "save" }
-          ],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "ebqtqd6",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "html5",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [{ label: "", value: "" }],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select1",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "em8m4qk",
-        defaultValue: ""
-      },
-      {
-        label: "Email",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        kickbox: { enabled: false },
-        errorLabel: "",
-        key: "email",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "email",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "email",
-        inputMask: "",
-        id: "epj8sj28",
-        defaultValue: null
-      },
-      {
-        label: "Url",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "url",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "url",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "url",
-        inputMask: "",
-        id: "exw9p4",
-        defaultValue: null
-      },
-      {
-        label: "Phone Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "(999) 999-9999",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          minLength: "",
-          maxLength: "",
-          pattern: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "phoneNumber",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "phoneNumber",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        inputType: "tel",
-        id: "e2c7lpl",
-        defaultValue: null
-      },
-      {
-        label: "Tags",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        delimeter: ",",
-        maxTags: 0,
-        storeas: "string",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "tags",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "tags",
-        input: true,
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        widget: { type: "input" },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ejc82t",
-        defaultValue: null
-      },
-      {
-        label: "Address",
-        labelPosition: "top",
-        enableManualMode: false,
-        disableClearIcon: false,
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        provider: "google",
-        manualModeViewString: "",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "address",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "address",
-        switchToManualModeLabel: "Can't find address? Switch to manual mode.",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        tree: true,
-        components: [
-          {
-            label: "Address 1",
-            tableView: false,
-            key: "address1",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eecfg6h"
-          },
-          {
-            label: "Address 2",
-            tableView: false,
-            key: "address2",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eajhpuu"
-          },
-          {
-            label: "City",
-            tableView: false,
-            key: "city",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "efpnrca7"
-          },
-          {
-            label: "State",
-            tableView: false,
-            key: "state",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eu3kksv"
-          },
-          {
-            label: "Country",
-            tableView: false,
-            key: "country",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "el39cu9"
-          },
-          {
-            label: "Zip Code",
-            tableView: false,
-            key: "zip",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "epyac4"
-          }
-        ],
-        providerOptions: { params: { key: "fze", region: "" } },
-        id: "er02e2gb",
-        defaultValue: {}
-      },
-      {
-        label: "Date / Time",
-        labelPosition: "top",
-        displayInTimezone: "viewer",
-        useLocaleSettings: false,
-        allowInput: true,
-        format: "yyyy-MM-dd hh:mm a",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        enableDate: true,
-        enableMinDateInput: false,
-        datePicker: {
-          minDate: null,
-          maxDate: null,
-          disable: "",
-          disableFunction: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          showWeeks: true,
-          startingDay: 0,
-          initDate: "",
-          minMode: "day",
-          maxMode: "year",
-          yearRows: 4,
-          yearColumns: 5
-        },
-        enableMaxDateInput: false,
-        enableTime: true,
-        timePicker: {
-          showMeridian: true,
-          hourStep: 1,
-          minuteStep: 1,
-          readonlyInput: false,
-          mousewheel: true,
-          arrowkeys: true
-        },
-        multiple: false,
-        defaultValue: "",
-        defaultDate: "",
-        customOptions: {},
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "dateTime",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "datetime",
-        timezone: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: {
-          type: "calendar",
-          displayInTimezone: "viewer",
-          locale: "en",
-          useLocaleSettings: false,
-          allowInput: true,
-          mode: "single",
-          enableTime: true,
-          noCalendar: false,
-          format: "yyyy-MM-dd hh:mm a",
-          hourIncrement: 1,
-          minuteIncrement: 1,
-          minDate: null,
-          disabledDates: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          disableFunction: "",
-          maxDate: null
-        },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        datepickerMode: "day",
-        id: "el9idgl"
-      },
-      {
-        label: "Day",
-        hideInputLabels: false,
-        inputsLabelPosition: "top",
-        description: "",
-        useLocaleSettings: false,
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        fields: {
-          day: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          month: {
-            type: "select",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          year: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          }
-        },
-        dayFirst: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        maxDate: "",
-        minDate: "",
-        unique: false,
-        errorLabel: "",
-        validate: {
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          required: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        key: "day",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "day",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        labelPosition: "top",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ecgefls",
-        defaultValue: "00/00/0000"
-      },
-      {
-        label: "Currency",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        currency: "USD",
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          min: "",
-          max: "",
-          step: "any",
-          integer: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "currency",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "currency",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        delimiter: true,
-        id: "em22wkd",
-        defaultValue: null
-      },
-      {
-        type: "button",
-        label: "Submit",
-        key: "submit",
-        size: "md",
-        block: false,
-        action: "submit",
-        disableOnInvalid: true,
-        theme: "primary",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        customClass: "",
-        suffix: "",
-        multiple: false,
-        defaultValue: null,
-        protected: false,
-        unique: false,
-        persistent: false,
-        hidden: false,
-        clearOnHide: true,
-        refreshOn: "",
-        redrawOn: "",
-        tableView: false,
-        modalEdit: false,
-        labelPosition: "top",
-        description: "",
-        errorLabel: "",
-        tooltip: "",
-        hideLabel: false,
-        tabindex: "",
-        disabled: false,
-        autofocus: false,
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        widget: { type: "input" },
-        attributes: {},
-        validateOn: "change",
-        validate: {
-          required: false,
-          custom: "",
-          customPrivate: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        conditional: { show: null, when: null, eq: "" },
-        overlay: { style: "", left: "", top: "", width: "", height: "" },
-        allowCalculateOverride: false,
-        encrypted: false,
-        showCharCount: false,
-        showWordCount: false,
-        properties: {},
-        allowMultipleMasks: false,
-        leftIcon: "",
-        rightIcon: "",
-        dataGridLabel: true,
-        id: "e08gq3l"
-      }
-    ],
+    display: formWizard.display as any,
+    components: formWizard.components as any,
+    options: { template: "tailwind", iconset: "bx" }
+  }
+};
+/**
+ * PDF-First forms allow users to upload a PDF form and add overlay fields to the form, modernizing the traditional old and clunky PDF form.
+ * For a more in-depth guide on the PDF forms please navigate to the [following documentation](https://help.form.io/userguide/forms/pdf#introduction).
+ */
+export const Pdf: Story = {
+  args: {
+    display: "pdf",
+    components: [],
     options: { template: "tailwind", iconset: "bx" }
   }
 };
diff --git a/packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts b/packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts
new file mode 100644
index 00000000..2b03f980
--- /dev/null
+++ b/packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts
@@ -0,0 +1,143 @@
+import { FormBuilder as FormioFormBuilder } from "formiojs";
+import cloneDeep from "lodash/cloneDeep";
+import { useEffect, useRef, useState } from "react";
+
+import type { ComponentType, FormOptions, FormType } from "../../interfaces";
+
+interface BuilderConstructor {
+  new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;
+}
+
+const EVENTS = [
+  "addComponent",
+  "updateComponent",
+  "removeComponent",
+  "saveComponent",
+  "cancelComponent",
+  "moveComponent",
+  "editComponent",
+  "editJson",
+  "copyComponent",
+  "pasteComponent"
+];
+
+const EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
+
+async function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<FormioFormBuilder> {
+  const form = {
+    display,
+    components: [...components]
+  };
+
+  const builder = await new FormioFormBuilder(el, form, { ...options }).ready;
+
+  const handleEvent = (event: string) => {
+    return (...args: any[]) => {
+      events[event] && events[event](...args);
+
+      if (EVENTS_CHANGE.includes(event)) {
+        onChange(builder.form.components);
+      }
+    };
+  };
+
+  EVENTS.forEach((event) => builder.on(event, handleEvent(event)));
+
+  return builder;
+}
+export interface FormBuilderEvents {
+  onAddComponent?: Function;
+  onRemoveComponent?: Function;
+  onCancelComponent?: Function;
+  onMoveComponent?: Function;
+  onEditJson?: Function;
+  onCopyComponent?: Function;
+  onPasteComponent?: Function;
+  onBuilderReady?: (builder: FormioFormBuilder) => void;
+  onChange?: (components: ComponentType[]) => void;
+  onSaveComponent?: (
+    component: ComponentType,
+    original: ComponentType,
+    parent: ComponentType,
+    path: string,
+    index: number,
+    isNew: boolean,
+    originalComponentSchema: ComponentType
+  ) => void;
+  onEditComponent?: (component: ComponentType) => void;
+  onUpdateComponent?: (component: ComponentType) => void;
+  onDeleteComponent?: (component: ComponentType, parent: ComponentType, path: string, index: number) => void;
+}
+
+export interface UseFormBuilderProps extends FormBuilderEvents {
+  Builder?: BuilderConstructor;
+  components: ComponentType[];
+  display?: string;
+  options?: FormOptions;
+}
+
+export function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {
+  const renderElement = useRef<HTMLDivElement>(null);
+  const builderRef = useRef<FormioFormBuilder | null>(null);
+  const [currentComponents, setCurrentComponents] = useState<ComponentType[]>(cloneDeep(components));
+  const events = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("on")));
+
+  useEffect(() => {
+    async function initializeBuilder() {
+      if (!renderElement.current) {
+        console.warn("FormBuilder render element not found, cannot render builder.");
+        return;
+      }
+
+      builderRef.current = await createBuilder(renderElement.current.firstChild as Element, {
+        display,
+        options: { ...options },
+        components: cloneDeep(components),
+        onChange: handleComponentsChange,
+        events
+      });
+
+      onBuilderReady && onBuilderReady(builderRef.current);
+    }
+
+    initializeBuilder().catch((er) => {
+      console.error(er);
+    });
+
+    return () => {
+      builderRef.current?.destroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (builderRef.current) {
+      if (display !== builderRef.current.form.display) {
+        createBuilder(renderElement.current!.firstChild as Element, {
+          display,
+          options: { ...options },
+          components: cloneDeep(components),
+          onChange: handleComponentsChange,
+          events
+        })
+          .then((builder) => {
+            builderRef.current = builder;
+            onBuilderReady && onBuilderReady(builderRef.current);
+          })
+          .catch((er) => {
+            console.error(er);
+          });
+      } else if (components !== currentComponents) {
+        builderRef.current.form = {
+          display,
+          components
+        };
+      }
+    }
+  }, [display, components]);
+
+  const handleComponentsChange = (newComponents: ComponentType[]) => {
+    setCurrentComponents(newComponents);
+    onChange && onChange(newComponents);
+  };
+  return renderElement;
+}
diff --git a/packages/react-formio/src/components/form-edit/formEdit.component.tsx b/packages/react-formio/src/components/form-edit/formEdit.component.tsx
index b7771e7c..725d6a20 100644
--- a/packages/react-formio/src/components/form-edit/formEdit.component.tsx
+++ b/packages/react-formio/src/components/form-edit/formEdit.component.tsx
@@ -1,25 +1,46 @@
 import { FormOptions } from "../../interfaces/FormOptions";
 import { FormBuilder } from "../form-builder/formBuilder.component";
+import { FormBuilderEvents } from "../form-builder/useFormBuilder.hook";
 import { FormEditCTAs } from "./formCtas.component";
 import { FormParameters } from "./formParameters.component";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit.hook";
 
-export interface FormEditProps extends UseFormEditHookProps {
-  builder?: any;
+export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
   options?: FormOptions;
 }
 
-export function FormEdit(props: FormEditProps) {
-  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit(props);
-  const { options = {}, builder } = props;
+export function FormEdit({
+  form: initialForm,
+  typeChoices,
+  displayChoices,
+  enableTags,
+  onSubmit: initialOnSubmit,
+  onCopy: initialOnCopy,
+  ...props
+}: FormEditProps) {
+  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({
+    form: initialForm,
+    typeChoices,
+    displayChoices,
+    enableTags,
+    onSubmit: initialOnSubmit,
+    onCopy: initialOnCopy
+  });
+
+  const { options = {} } = props;
 
   return (
-    <div>
+    <div className='form-edit-container'>
       <div className='form-edit'>
-        <FormParameters {...props} className={""} key={`form-settings-${form._id}`} form={form} onChange={setChange} />
+        <FormParameters
+          enableTags={enableTags}
+          typeChoices={typeChoices}
+          displayChoices={displayChoices}
+          key={`form-settings-${form._id}`}
+          form={form}
+          onChange={setChange}
+        />
         <FormEditCTAs
-          {...props}
-          className={""}
           key={`form-edit-ctas-${form._id}`}
           options={options}
           hasRedo={hasRedo}
@@ -34,11 +55,11 @@ export function FormEdit(props: FormEditProps) {
       </div>
 
       <FormBuilder
+        {...props}
         key={`form-builder-${form._id}`}
         components={form.components!}
         display={form.display}
         options={options}
-        builder={builder}
         onChange={(components) => {
           setChange("components", components);
         }}
diff --git a/packages/react-formio/src/components/form-edit/formEdit.stories.tsx b/packages/react-formio/src/components/form-edit/formEdit.stories.tsx
index 76299300..c6ecd810 100644
--- a/packages/react-formio/src/components/form-edit/formEdit.stories.tsx
+++ b/packages/react-formio/src/components/form-edit/formEdit.stories.tsx
@@ -1,3 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+
 import { FormEdit } from "./formEdit.component";
 import { defaultDisplayChoices } from "./formParameters.component";
 
@@ -21,6 +23,8 @@ export default {
       }
     },
     options: {
+      description:
+        "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
       control: {
         type: "object"
       }
@@ -31,8 +35,32 @@ export default {
       }
     },
     onSubmit: { action: "onSubmit" },
-    onChange: { action: "onChange" },
-    onCopy: { action: "onCopy" }
+    onCopy: { action: "onCopy" },
+    onBuilderReady: {
+      description:
+        "A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance.",
+      action: "onBuilderReady"
+    },
+    onChange: {
+      description: "A callback function that gets called when the form being built has changed.",
+      action: "onChange"
+    },
+    onSaveComponent: {
+      description: "A callback function that gets called when a component is saved in the builder.",
+      action: "onSaveComponent"
+    },
+    onEditComponent: {
+      description: "A callback function that gets called when a component is edited in the builder.",
+      action: "onEditComponent"
+    },
+    onUpdateComponent: {
+      description: "A callback function that gets called when a component is updated in the builder.",
+      action: "onUpdateComponent"
+    },
+    onDeleteComponent: {
+      description: "A callback function that gets called when a component is deleted in the builder.",
+      action: "onDeleteComponent"
+    }
   },
   parameters: {
     docs: {
@@ -41,12 +69,11 @@ export default {
       }
     }
   }
-};
+} satisfies Meta<typeof FormEdit>;
 
-export const Sandbox = {
-  render: ({ form, typeChoices, displayChoices, enableTags, options }: any) => {
-    return <FormEdit form={form} typeChoices={typeChoices} displayChoices={displayChoices} enableTags={enableTags} options={options} />;
-  },
+type Story = StoryObj<typeof FormEdit>;
+
+export const EditWebForm: Story = {
   args: {
     typeChoices: [
       { label: "Form", value: "form" },
@@ -151,14 +178,11 @@ export const Sandbox = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    }
+    } as any
   }
 };
 
-export const WithoutTypeChoices = {
-  render: (args: any) => {
-    return <FormEdit {...args} />;
-  },
+export const WithoutTypeChoices: Story = {
   args: {
     form: {
       type: "form",
@@ -256,17 +280,14 @@ export const WithoutTypeChoices = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    },
+    } as any,
     displayChoices: defaultDisplayChoices,
     enableTags: true,
     options: { template: "tailwind", iconset: "bx" }
   }
 };
 
-export const WithoutTags = {
-  render: (args: any) => {
-    return <FormEdit {...args} />;
-  },
+export const WithoutTags: Story = {
   args: {
     form: {
       type: "form",
@@ -364,7 +385,7 @@ export const WithoutTags = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    },
+    } as any,
     displayChoices: defaultDisplayChoices,
     enableTags: false,
     options: { template: "tailwind", iconset: "bx" }
diff --git a/packages/react-formio/src/components/form-edit/formParameters.component.tsx b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
index dc07c4e6..bbc55577 100644
--- a/packages/react-formio/src/components/form-edit/formParameters.component.tsx
+++ b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
@@ -36,7 +36,7 @@ export function FormParameters({
 
   return (
     <div className={`form-edit__settings ${className}`}>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Title"}
           placeholder='Enter the form title'
@@ -47,7 +47,7 @@ export function FormParameters({
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Name"}
           placeholder='Enter the form machine name'
@@ -58,7 +58,7 @@ export function FormParameters({
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Path"}
           placeholder='example'
@@ -77,7 +77,7 @@ export function FormParameters({
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <Select
           label={"Display as"}
           name={"display"}
@@ -88,12 +88,12 @@ export function FormParameters({
         />
       </div>
       {hasTypeChoices && (
-        <div className={"w-1/3"}>
+        <div>
           <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
-        <div className={"w-1/3"}>
+        <div>
           <InputTags label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
         </div>
       )}
diff --git a/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts b/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts
index 2638fe38..016e90a6 100644
--- a/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts
+++ b/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts
@@ -1,7 +1,7 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useReducer } from "react";
 
-import { FormType } from "../../interfaces/FormType";
+import type { FormType } from "../../interfaces";
 import { createInitialState, hasChanged, reducer } from "./formEdit.reducer";
 
 export interface UseFormEditHookProps extends Record<string, unknown> {
diff --git a/packages/tailwind-formio/styles/form-edit.css b/packages/tailwind-formio/styles/form-edit.css
index 67794212..f4c23822 100644
--- a/packages/tailwind-formio/styles/form-edit.css
+++ b/packages/tailwind-formio/styles/form-edit.css
@@ -1,17 +1,16 @@
+.form-edit-container {
+  @apply flex flex-col space-y-5;
+}
+
 .form-edit {
-  @apply border-b-1 border-solid border-gray-200 sm:flex mb-5;
+  @apply flex space-y-5 space-x-5 pb-5;
+  @apply border-b-1 border-solid border-gray-200;
 
   &__settings {
-    @apply flex-1 flex flex-wrap -mx-2;
-
+    @apply flex-1 grid grid-cols-3 gap-5;
     > div {
       > .form-group {
-        @apply pb-0 px-2 w-full sm:w-auto;
-        min-width: 25%;
-
-        &:last-child {
-          @apply mb-5;
-        }
+        @apply pb-0 w-full sm:w-auto;
 
         .form-text {
           @apply p-0 h-0 -mb-1;
@@ -21,24 +20,17 @@
   }
 
   &__actions {
-    @apply flex flex-col justify-end mb-2;
+    @apply flex flex-col justify-center;
+
     .btn-save {
-     @apply mb-4 leading-normal;
+     @apply leading-normal;
     }
 
     > div {
-      @apply flex flex-col pl-5;
-
-      > * {
-        @apply mb-3;
-      }
+      @apply flex flex-col space-y-5;
 
       > div {
-        @apply flex flex-row -mx-2;
-
-        > * {
-          @apply mx-2;
-        }
+        @apply flex flex-row space-x-3;
       }
     }
   }
diff --git a/stories/FormBuilder.mdx b/stories/FormBuilder.mdx
index 2b10290f..aacf469c 100644
--- a/stories/FormBuilder.mdx
+++ b/stories/FormBuilder.mdx
@@ -28,7 +28,7 @@ You must handle the form definition loading and saving yourself or use the [Form
 | Name      | Type   | Default | Description                                                                                                                                  |
 |-----------|--------|---------|----------------------------------------------------------------------------------------------------------------------------------------------|
 | `form`    | object |         | This is the form definition object. It should at least have a `display` property set to form, wizard or pdf.                                 |
-| `options` | object |         | an options object that can pass options to the formio.js Form that is rendered. There are many options to be found in the formio.js library. |
+| `options` | object |         | The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details. |
 
 ## Event Props
 
@@ -50,15 +50,25 @@ import { FormBuilder } from "@tsed/react-formio";
 
 
 ReactDOM.render(
-  <FormBuilder form={{ display: "form" }} onChange={(schema) => console.log(schema)} />,
+  <FormBuilder components={[]} display={"form"} onChange={(schema) => console.log(schema)} />,
   document.getElementById("builder")
 );
 ```
 
 Will render the following:
 
-<Canvas of={FormBuilderStories.Sandbox} />
+<Canvas of={FormBuilderStories.WebForm} />
 
 ## Example of a wizard form
 
+This form configuration allows users to progress through the form in bite-size sections instead of presenting the entire form to the user.
+If you are creating a form containing many fields, this is a great option to improve the user experience.
+
 <Canvas of={FormBuilderStories.Wizard} />
+
+## Example of a pdf form
+
+PDF-First forms allow users to upload a PDF form and add overlay fields to the form, modernizing the traditional old and clunky PDF form.
+For a more in-depth guide on the PDF forms please navigate to the [following documentation](https://help.form.io/userguide/forms/pdf#introduction).
+
+<Canvas of={FormBuilderStories.Pdf} />
diff --git a/stories/FormEdit.mdx b/stories/FormEdit.mdx
index e94c0ee6..088cc567 100644
--- a/stories/FormEdit.mdx
+++ b/stories/FormEdit.mdx
@@ -38,4 +38,4 @@ adds the title, display, name and path fields at the top along with a save butto
 
 ## Example
 
-<Canvas of={FormEditStories.Sandbox} />
+<Canvas of={FormEditStories.EditWebForm} />
diff --git a/stories/Getting-started.mdx b/stories/Getting-started.mdx
index 2debf95e..31be64b2 100644
--- a/stories/Getting-started.mdx
+++ b/stories/Getting-started.mdx
@@ -102,7 +102,7 @@ function App() {
 export default App;
 ```
 
-<Canvas of={FormBuilderStories.Sandbox} />
+<Canvas of={FormBuilderStories.WebForm} />
 
 ## Contributors