@bigbinary/neeto-form-frontend 1.2.54 → 1.2.56

package/dist/index.js

@@ -4,7 +4,7 @@ import { useFormikContext, useField, FieldArray, Form as Form$1, Formik, Field,
 import { noop as noop$4, findBy, slugify, filterBy, isNotEmpty, truncate, humanize, removeBy, isPresent as isPresent$1, isNotPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { withEventTargetValue, showThumbsUpToastr, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Tooltip, Dropdown as Dropdown$2, Alert, Typography, Button as Button$1, Label, Checkbox as Checkbox$1, Toastr, MultiEmailInput, DatePicker, Radio as Radio$1, Select, Textarea as Textarea$1, Input as Input$2, Spinner as Spinner$2 } from '@bigbinary/neetoui';
+import { Tooltip, Dropdown as Dropdown$2, Alert, Typography, Button as Button$1, Label, Checkbox as Checkbox$1, Toastr, MultiEmailInput, DatePicker, Input as Input$2, Radio as Radio$1, Select, Textarea as Textarea$1, Spinner as Spinner$2 } from '@bigbinary/neetoui';
 import { assoc, mergeLeft, prop, isEmpty, path, values, compose as compose$1, trim, useWith, split, either, isNil, equals, difference, reject, pluck, keys, pick, omit, isNotNil, insert, not, pipe as pipe$1, toLower, map, includes, identity, times, clamp as clamp$2, filter as filter$1 } from 'ramda';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$4 } from 'i18next';
@@ -586,8 +586,8 @@ var _excluded$c = ["formId", "preview", "language"],
   _excluded2$1 = ["formId", "language"],
   _excluded3$1 = ["page", "pageSize"],
   _excluded5 = ["formId", "submissionId"];
-function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useForm = function useForm(_ref) {
   var formId = _ref.formId,
     _ref$preview = _ref.preview,
@@ -597,7 +597,7 @@ var useForm = function useForm(_ref) {
     options = _objectWithoutProperties$1(_ref, _excluded$c);
   return useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language], function () {
     return neetoFormApi.getPublicQuestions(formId, language);
-  }, _objectSpread$j({
+  }, _objectSpread$l({
     keepPreviousData: true
   }, options));
 };
@@ -608,14 +608,14 @@ var useFetchQuestions = function useFetchQuestions(_ref2) {
     options = _objectWithoutProperties$1(_ref2, _excluded2$1);
   return useQuery([QUERY_KEYS.QUESTIONS, formId, language], function () {
     return neetoFormApi.getQuestions(formId, language);
-  }, _objectSpread$j({
+  }, _objectSpread$l({
     keepPreviousData: true
   }, options));
 };
 var useCreateForm = function useCreateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next.resolvedLanguage;
   var queryClient = useQueryClient();
-  return useMutation(neetoFormApi.createForm, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  return useMutation(neetoFormApi.createForm, _objectSpread$l(_objectSpread$l({}, options), {}, {
     onSuccess: function onSuccess(form) {
       var _options$onSuccess;
       queryClient.setQueryData(QUERY_KEYS.QUESTIONS, function (forms) {
@@ -635,7 +635,7 @@ var useUpdateForm = function useUpdateForm(options) {
     var id = _ref3.id,
       values = _ref3.values;
     return neetoFormApi.updateForm(id, values);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     onSuccess: function onSuccess(data, _ref4) {
       var id = _ref4.id;
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], assoc("title", data.title));
@@ -656,7 +656,7 @@ var useUpdateQuestions = function useUpdateQuestions(options, language) {
     var id = _ref5.id,
       values = _ref5.values;
     return neetoFormApi.updateQuestions(id, values);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -683,7 +683,7 @@ var useForms = function useForms() {
       page: page,
       pageSize: pageSize
     });
-  }, _objectSpread$j({
+  }, _objectSpread$l({
     keepPreviousData: true
   }, options));
 };
@@ -691,7 +691,7 @@ var useDeleteForm = function useDeleteForm(options) {
   return useMutationWithInvalidation(function (_ref7) {
     var id = _ref7.id;
     return neetoFormApi.destroyForm(id);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     keysToInvalidate: [[QUERY_KEYS.FORMS], function (_, _ref8) {
       var id = _ref8.id;
       return [QUERY_KEYS.QUESTIONS, id];
@@ -710,7 +710,7 @@ var useSubmission = function useSubmission(_ref11) {
     options = _objectWithoutProperties$1(_ref11, _excluded5);
   return useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
     return neetoFormApi.getPublicSubmission(formId, submissionId);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     keepPreviousData: true
   }));
 };
@@ -720,7 +720,7 @@ var useCreateSubmission = function useCreateSubmission(options) {
     var formId = _ref12.formId,
       values = _ref12.values;
     return neetoFormApi.submitPublicForm(formId, values);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission, _data$submission2;
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
@@ -741,7 +741,7 @@ var useUpdateSubmission = function useUpdateSubmission(options) {
     var formId = _ref13.formId,
       values = _ref13.values;
     return neetoFormApi.updatePublicSubmission(formId, values);
-  }, _objectSpread$j(_objectSpread$j({}, options), {}, {
+  }, _objectSpread$l(_objectSpread$l({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission3;
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
@@ -851,7 +851,7 @@ function _defineProperty$5(obj, key, value) {
   return obj;
 }
 
-function ownKeys$j(e, r) {
+function ownKeys$l(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -864,9 +864,9 @@ function ownKeys$j(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) {
       _defineProperty$5(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
@@ -9737,8 +9737,8 @@ const ConnectedDroppable = connect(makeMapStateToProps, mapDispatchToProps, (sta
 })(Droppable$1);
 var ConnectedDroppable$1 = ConnectedDroppable;
 
-function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultConfig = {
   strict: true,
   matchKey: "value"
@@ -9746,7 +9746,7 @@ var defaultConfig = {
 var findOptionByValue = function findOptionByValue(value) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var configObject = _objectSpread$i(_objectSpread$i({}, defaultConfig), config);
+  var configObject = _objectSpread$k(_objectSpread$k({}, defaultConfig), config);
   var matchKey = configObject.matchKey,
     strict = configObject.strict;
   return options.find(function (option) {
@@ -9760,7 +9760,7 @@ var filterOptionsByValues = function filterOptionsByValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var configObject = _objectSpread$i(_objectSpread$i({}, defaultConfig), config);
+  var configObject = _objectSpread$k(_objectSpread$k({}, defaultConfig), config);
   var matchKey = configObject.matchKey,
     strict = configObject.strict;
   return options.filter(function (option) {
@@ -9778,7 +9778,7 @@ var destroyFromList = function destroyFromList(items, index) {
     var nextItems = _toConsumableArray$1(items);
     nextItems.splice(index, 1);
     if (itemToRemove.id) {
-      nextItems.push(_objectSpread$i(_objectSpread$i({}, itemToRemove), {}, {
+      nextItems.push(_objectSpread$k(_objectSpread$k({}, itemToRemove), {}, {
         _destroy: true
       }));
     }
@@ -10661,6 +10661,40 @@ var MultipleChoice$1 = function MultipleChoice(_ref) {
   }));
 };
 
+var Name$1 = withT(function (_ref) {
+  var t = _ref.t,
+    name = _ref.name,
+    isRequired = _ref.isRequired,
+    isLabelDisabled = _ref.isLabelDisabled,
+    enableFieldCode = _ref.enableFieldCode;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-2"
+  }, /*#__PURE__*/React__default.createElement(TextAreaWithMaxLength, {
+    required: true,
+    disabled: isLabelDisabled,
+    name: "".concat(name, ".label"),
+    rows: 1,
+    label: t("neetoForm.questions.common.questionFields.field.question")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-2"
+  }, /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
+    name: "".concat(name, ".placeholder"),
+    label: t("neetoForm.questions.common.questionFields.field.placeholder")
+  }))), !isRequired && /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    id: "".concat(name, ".isRequired"),
+    name: "".concat(name, ".isRequired"),
+    label: t("neetoForm.questions.common.questionFields.field.required")
+  })), enableFieldCode && /*#__PURE__*/React__default.createElement(FieldCode, {
+    name: name
+  }));
+});
+
 var Phone$1 = withT(function (_ref) {
   var t = _ref.t,
     name = _ref.name,
@@ -11054,25 +11088,37 @@ var Terms$1 = function Terms(_ref) {
     }),
     _useField2 = _slicedToArray$3(_useField, 3),
     value = _useField2[0].value,
-    error = _useField2[1].error,
-    setValue = _useField2[2].setValue;
+    _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setTouched = _useField2$2.setTouched,
+    setValue = _useField2$2.setValue;
   useUpdateEditorContent(editorRef, fieldName, value);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
-    error: error,
+    className: "px-2 pb-2",
+    contentClassName: "border-none",
     disabled: isLabelDisabled,
+    error: touched ? error : "",
+    errorWrapperClassName: "border-none",
     id: "editor",
     initialValue: value,
     key: fieldName,
+    menuClassName: "border-none",
     name: fieldName,
     ref: editorRef,
+    onBlur: function onBlur() {
+      return setTouched(true);
+    },
     onChange: setValue
   }));
 };
 
 var Fields = {
   Email: Email$1,
+  Name: Name$1,
   Dropdown: Dropdown$1,
   ShortText: ShortText$1,
   LongText: LongText$1,
@@ -11129,6 +11175,7 @@ var Editor = function Editor(_ref) {
 };
 
 var Email = Fields.Email,
+  Name = Fields.Name,
   Dropdown = Fields.Dropdown,
   ShortText = Fields.ShortText,
   LongText = Fields.LongText,
@@ -11180,7 +11227,7 @@ var QUESTION_KINDS = [{
   isSingular: true,
   labelPlaceholder: t$4("neetoForm.common.name"),
   icon: Input,
-  component: ShortText,
+  component: Name,
   defaults: {
     label: ""
   }
@@ -11354,8 +11401,8 @@ var INDEPENDENT_LABELS_MAP = {
 };
 var PADDED_FIELDS = ["paragraph", "termsandcondition"];
 
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormField = function FormField(props) {
   var _INDEPENDENT_LABELS_M;
   var item = props.item,
@@ -11398,7 +11445,7 @@ var FormField = function FormField(props) {
     onToggle: function onToggle() {
       return onChangeExpanded(!isExpanded);
     }
-  }, /*#__PURE__*/React__default.createElement(FieldComponent, _objectSpread$h({
+  }, /*#__PURE__*/React__default.createElement(FieldComponent, _objectSpread$j({
     isRequired: isRequired
   }, props)));
 };
@@ -11525,8 +11572,8 @@ var arrayHelpers = {
   moveItem: moveItem
 };
 
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions) {
   var fieldCodes = pluck("fieldCode", filterBy({
     kind: type
@@ -11562,7 +11609,7 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref2) {
   var nextItems = _toConsumableArray$1(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
   var orderedItems = nextItems.map(function (item, index) {
-    return _objectSpread$g(_objectSpread$g({}, item), {}, {
+    return _objectSpread$i(_objectSpread$i({}, item), {}, {
       displayOrder: index
     });
   });
@@ -11576,7 +11623,7 @@ var createFieldData = function createFieldData(_ref3) {
     _ref3$isRequired = _ref3.isRequired,
     isRequired = _ref3$isRequired === void 0 ? undefined : _ref3$isRequired,
     questions = _ref3.questions;
-  return _objectSpread$g(_objectSpread$g({}, defaults), {}, {
+  return _objectSpread$i(_objectSpread$i({}, defaults), {}, {
     metadata: metadata,
     isRequired: isRequired,
     kind: type,
@@ -11597,7 +11644,7 @@ var duplicateFieldData = function duplicateFieldData(_ref4) {
     optionsAttributes = item.optionsAttributes;
   var defaultAttributeNames = keys(questionKind.defaults || {});
   var defaultAttributes = pick(defaultAttributeNames, item);
-  return _objectSpread$g(_objectSpread$g({}, defaultAttributes), {}, {
+  return _objectSpread$i(_objectSpread$i({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: label,
@@ -11699,8 +11746,8 @@ var List = function List(_ref) {
 };
 
 var _excluded$6 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange"];
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
   var questionKinds = _ref.questionKinds,
     showAddQuestionDivider = _ref.showAddQuestionDivider,
@@ -11798,7 +11845,7 @@ var Form = function Form(_ref) {
           questions: questions
         }), values.questions);
         setFieldValue("questions", newQuestions.map(function (question, index) {
-          return _objectSpread$f(_objectSpread$f({}, question), {}, {
+          return _objectSpread$h(_objectSpread$h({}, question), {}, {
             displayOrder: index + 1
           });
         }));
@@ -11917,10 +11964,10 @@ var Form = function Form(_ref) {
     className: "neeto-ui-border-gray-300 flex-shrink-0 border-t py-4"
   }, /*#__PURE__*/React__default.createElement(ActionBlock, {
     className: "space-x-2",
-    cancelButtonProps: _objectSpread$f({
+    cancelButtonProps: _objectSpread$h({
       label: t("neetoForm.common.reset")
     }, cancelButtonProps),
-    submitButtonProps: _objectSpread$f({
+    submitButtonProps: _objectSpread$h({
       disabled: isSubmitting || !dirty
     }, submitButtonProps)
   }))));
@@ -11995,8 +12042,8 @@ var formValidationSchema = object().shape({
   })).required()
 });
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BuildForm = function BuildForm(_ref) {
   var id = _ref.id,
     onUpdate = _ref.onUpdate,
@@ -12083,7 +12130,7 @@ var BuildForm = function BuildForm(_ref) {
     var setSubmitting = _ref2.setSubmitting;
     updateQuestions({
       id: id,
-      values: _objectSpread$e({
+      values: _objectSpread$g({
         language: selectedLanguage,
         neetoFormQuestion: payload
       }, buildRequestArgs)
@@ -12126,7 +12173,7 @@ var BuildForm = function BuildForm(_ref) {
   }, function (_ref4) {
     var errors = _ref4.errors,
       setFieldError = _ref4.setFieldError;
-    return /*#__PURE__*/React__default.createElement(Form, _extends$8({}, _objectSpread$e(_objectSpread$e({}, formDomProps), {}, {
+    return /*#__PURE__*/React__default.createElement(Form, _extends$8({}, _objectSpread$g(_objectSpread$g({}, formDomProps), {}, {
       availableLanguages: availableLanguages,
       cancelButtonProps: cancelButtonProps,
       disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
@@ -14336,9 +14383,9 @@ function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var DEFAULT_OPTIONS = {
@@ -14365,7 +14412,7 @@ var DEFAULT_OPTIONS = {
 function formatNumber(input, format, options, metadata) {
   // Apply default options.
   if (options) {
-    options = _objectSpread$d(_objectSpread$d({}, DEFAULT_OPTIONS), options);
+    options = _objectSpread$f(_objectSpread$f({}, DEFAULT_OPTIONS), options);
   } else {
     options = DEFAULT_OPTIONS;
   }
@@ -14510,9 +14557,9 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
   }
 }
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -14624,7 +14671,7 @@ var PhoneNumber = /*#__PURE__*/function () {
   }, {
     key: "format",
     value: function format(_format, options) {
-      return formatNumber(this, _format, options ? _objectSpread$c(_objectSpread$c({}, options), {}, {
+      return formatNumber(this, _format, options ? _objectSpread$e(_objectSpread$e({}, options), {}, {
         v2: true
       }) : {
         v2: true
@@ -15667,20 +15714,20 @@ function parsePhoneNumber(formattedPhoneNumber, defaultCountry, defaultCallingCo
   };
 }
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function parsePhoneNumberWithError$2(text, options, metadata) {
-  return parse$1(text, _objectSpread$b(_objectSpread$b({}, options), {}, {
+  return parse$1(text, _objectSpread$d(_objectSpread$d({}, options), {}, {
     v2: true
   }), metadata);
 }
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -15728,7 +15775,7 @@ function normalizeArguments(args) {
     }
 
     if (arg_2) {
-      options = _objectSpread$a({
+      options = _objectSpread$c({
         defaultCountry: arg_2
       }, options);
     }
@@ -15789,8 +15836,8 @@ var getInvalidTypeError = function getInvalidTypeError(label, type) {
 
 var _excluded$4 = ["kind", "label", "isRequired", "customValidator"];
 var _fieldKindValidatorMa;
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 yup.addMethod(yup.array, "unique", function () {
   var field, message;
   if (arguments.length > 1) {
@@ -15825,54 +15872,66 @@ var validateTextField = function validateTextField(_ref) {
     label = _ref.label,
     isRequired = _ref.isRequired;
   var schema = yup.string().typeError(getInvalidTypeError(label, "string"));
-  if (kind === QUESTION_KIND.EMAIL.value) {
-    schema = schema.email(getInvalidFieldError("Email"));
-  } else if (kind === QUESTION_KIND.PHONE.value) {
+  if (kind === QUESTION_KIND.PHONE.value) {
     schema = validation(getInvalidFieldError(t$4("neetoForm.common.phoneNumberValidation")));
   }
   if (isRequired) schema = schema.trim().required(getRequiredFieldError(label));
   return schema.trim();
 };
-var validateSingleChoiceField = function validateSingleChoiceField(_ref2) {
+var validateEmailField = function validateEmailField(_ref2) {
   var label = _ref2.label,
     isRequired = _ref2.isRequired;
+  var schema = yup.string().typeError(getInvalidTypeError(label, "string")).email(getInvalidFieldError("Email"));
+  if (isRequired) schema = schema.trim().required(getRequiredFieldError(label));
+  return schema.trim();
+};
+var validateNameField = function validateNameField(_ref3) {
+  var label = _ref3.label,
+    isRequired = _ref3.isRequired;
+  var schema = yup.string().typeError(getInvalidTypeError(label, "string"));
+  if (isRequired) schema = schema.trim().required(getRequiredFieldError(label));
+  return schema.trim();
+};
+var validateSingleChoiceField = function validateSingleChoiceField(_ref4) {
+  var label = _ref4.label,
+    isRequired = _ref4.isRequired;
   var schema = yup.string().typeError(getInvalidTypeError(label, "string"));
   if (isRequired) schema = schema.required(getSelectMinError("an"));
   return schema.trim();
 };
-var validateMultiChoiceField = function validateMultiChoiceField(_ref3) {
-  var isRequired = _ref3.isRequired;
+var validateMultiChoiceField = function validateMultiChoiceField(_ref5) {
+  var isRequired = _ref5.isRequired;
   var schema = yup.array().of(yup["boolean"]());
   if (isRequired) schema = schema.compact().min(1, getSelectMinError("an"));
   return schema;
 };
-var validateRatingField = function validateRatingField(_ref4) {
-  var label = _ref4.label,
-    isRequired = _ref4.isRequired;
+var validateRatingField = function validateRatingField(_ref6) {
+  var label = _ref6.label,
+    isRequired = _ref6.isRequired;
   var schema = yup.string().typeError(getInvalidTypeError(label, "string"));
   if (isRequired) schema = schema.required(getSelectMinError("an"));
   return schema.trim();
 };
-var validateStarRatingField = function validateStarRatingField(_ref5) {
-  var label = _ref5.label,
-    isRequired = _ref5.isRequired;
+var validateStarRatingField = function validateStarRatingField(_ref7) {
+  var label = _ref7.label,
+    isRequired = _ref7.isRequired;
   var schema = yup.string().typeError(getInvalidTypeError(label, "string"));
   if (isRequired) schema = schema.required(getSelectMinError("a", "rating"));
   return schema.trim();
 };
-var validateTermsField = function validateTermsField(_ref6) {
-  var _ref6$isRequired = _ref6.isRequired,
-    isRequired = _ref6$isRequired === void 0 ? true : _ref6$isRequired;
+var validateTermsField = function validateTermsField(_ref8) {
+  var _ref8$isRequired = _ref8.isRequired,
+    isRequired = _ref8$isRequired === void 0 ? true : _ref8$isRequired;
   return isRequired ? yup["boolean"]().oneOf([true], t$4("neetoForm.common.mustAcceptTermsAndConditions")) : yup["boolean"]().notRequired();
 };
-var validateConditionField = function validateConditionField(_ref7) {
-  var _ref7$isRequired = _ref7.isRequired,
-    isRequired = _ref7$isRequired === void 0 ? true : _ref7$isRequired;
+var validateConditionField = function validateConditionField(_ref9) {
+  var _ref9$isRequired = _ref9.isRequired,
+    isRequired = _ref9$isRequired === void 0 ? true : _ref9$isRequired;
   return isRequired ? yup["boolean"]().oneOf([true], t$4("neetoForm.common.mustAcceptCondition")) : yup["boolean"]().notRequired();
 };
-var validateDateField = function validateDateField(_ref8) {
-  var label = _ref8.label,
-    isRequired = _ref8.isRequired;
+var validateDateField = function validateDateField(_ref10) {
+  var label = _ref10.label,
+    isRequired = _ref10.isRequired;
   var schema = yup.string().test("is valid date", getInvalidTypeError(label, "date"), function (value) {
     return isNotPresent(value) || isValidDate(value);
   });
@@ -15881,8 +15940,8 @@ var validateDateField = function validateDateField(_ref8) {
   }
   return schema;
 };
-var validateMultiEmailField = function validateMultiEmailField(_ref9) {
-  var isRequired = _ref9.isRequired;
+var validateMultiEmailField = function validateMultiEmailField(_ref11) {
+  var isRequired = _ref11.isRequired;
   var schema = yup.array().of(yup.object().shape({
     value: yup.string().email(getInvalidFieldError("Email")).trim()
   })).nullable();
@@ -15894,17 +15953,17 @@ var validateMultiEmailField = function validateMultiEmailField(_ref9) {
 var editorHasValue = function editorHasValue(content) {
   return !isEditorEmpty(content);
 };
-var validateRichTextField = function validateRichTextField(_ref10) {
-  var isRequired = _ref10.isRequired;
+var validateRichTextField = function validateRichTextField(_ref12) {
+  var isRequired = _ref12.isRequired;
   var schema = yup.string();
   if (isRequired) {
     schema = schema.test("required", getRequiredFieldError("content"), editorHasValue);
   }
   return schema.trim();
 };
-var validateFileUploadField = function validateFileUploadField(_ref11) {
-  var isRequired = _ref11.isRequired,
-    multipleFilesAllowed = _ref11.multipleFilesAllowed;
+var validateFileUploadField = function validateFileUploadField(_ref13) {
+  var isRequired = _ref13.isRequired,
+    multipleFilesAllowed = _ref13.multipleFilesAllowed;
   var files_schema = yup.array();
   if (isRequired) {
     files_schema = files_schema.of(yup.object().shape({
@@ -15917,17 +15976,17 @@ var validateFileUploadField = function validateFileUploadField(_ref11) {
     files: files_schema
   });
 };
-var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DECIMAL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.INTEGER.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.FILE_UPLOAD.value, validateFileUploadField), _fieldKindValidatorMa);
-var validateFieldValue = function validateFieldValue(_ref12) {
-  var kind = _ref12.kind,
-    label = _ref12.label,
-    isRequired = _ref12.isRequired,
-    customValidator = _ref12.customValidator,
-    otherProps = _objectWithoutProperties$1(_ref12, _excluded$4);
+var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateEmailField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateNameField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DECIMAL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.INTEGER.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.FILE_UPLOAD.value, validateFileUploadField), _fieldKindValidatorMa);
+var validateFieldValue = function validateFieldValue(_ref14) {
+  var kind = _ref14.kind,
+    label = _ref14.label,
+    isRequired = _ref14.isRequired,
+    customValidator = _ref14.customValidator,
+    otherProps = _objectWithoutProperties$1(_ref14, _excluded$4);
   return function (value) {
     if (!(kind in fieldKindValidatorMap)) return;
     var validator = fieldKindValidatorMap[kind];
-    var schema = customValidator || validator(_objectSpread$9({
+    var schema = customValidator || validator(_objectSpread$b({
       kind: kind,
       label: label,
       isRequired: isRequired
@@ -15935,7 +15994,7 @@ var validateFieldValue = function validateFieldValue(_ref12) {
 
     // eslint-disable-next-line consistent-return, no-async-promise-executor
     return new Promise( /*#__PURE__*/function () {
-      var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
+      var _ref15 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -15957,7 +16016,7 @@ var validateFieldValue = function validateFieldValue(_ref12) {
         }, _callee, null, [[0, 6]]);
       }));
       return function (_x) {
-        return _ref13.apply(this, arguments);
+        return _ref15.apply(this, arguments);
       };
     }());
   };
@@ -16016,8 +16075,8 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
   }), _React$createElement))));
 };
 
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConditionField = function ConditionField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -16037,7 +16096,7 @@ var ConditionField = function ConditionField(_ref) {
   }, function (_ref2) {
     var meta = _ref2.meta,
       field = _ref2.field;
-    return /*#__PURE__*/React__default.createElement(Checkbox$1, _extends$8({}, _objectSpread$8(_objectSpread$8({}, field), {}, {
+    return /*#__PURE__*/React__default.createElement(Checkbox$1, _extends$8({}, _objectSpread$a(_objectSpread$a({}, field), {}, {
       label: label,
       name: name
     }), {
@@ -16048,8 +16107,8 @@ var ConditionField = function ConditionField(_ref) {
   });
 };
 
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toEmailValues = function toEmailValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return values.map(function (value) {
@@ -16142,7 +16201,7 @@ var generateInitValues = function generateInitValues(_ref7) {
   var valuesMap = {};
   if (initialValues) {
     valuesMap = initialValues.reduce(function (acc, answer) {
-      return _objectSpread$7(_objectSpread$7({}, acc), {}, _defineProperty$6({}, answer.questionId, {
+      return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$6({}, answer.questionId, {
         value: answer.value,
         optionIds: answer.optionIds
       }));
@@ -16368,8 +16427,8 @@ var renderButtonsInOrder = function renderButtonsInOrder(buttonsArray, shouldRev
 };
 
 var _excluded$3 = ["value"];
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 dayjs.extend(weekOfYear);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -16409,7 +16468,7 @@ var DateField = function DateField(_ref) {
       value = _ref2$field.value,
       field = _objectWithoutProperties$1(_ref2$field, _excluded$3),
       form = _ref2.form;
-    return /*#__PURE__*/React__default.createElement(DatePicker, _extends$8({}, _objectSpread$6(_objectSpread$6({}, field), {}, {
+    return /*#__PURE__*/React__default.createElement(DatePicker, _extends$8({}, _objectSpread$8(_objectSpread$8({}, field), {}, {
       type: type
     }), {
       dateFormat: "MMM D, YYYY",
@@ -16427,6 +16486,57 @@ var DateField = function DateField(_ref) {
   })));
 };
 
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var EmailField = function EmailField(_ref) {
+  var question = _ref.question,
+    showPrefixIcon = _ref.showPrefixIcon,
+    customValidator = _ref.customValidator,
+    autoComplete = _ref.autoComplete;
+  var name = question.id,
+    kind = question.kind,
+    isRequired = question.isRequired,
+    nodeId = question.nodeId;
+  var label = fieldWithFallback(question, "label");
+  var _QUESTION_KIND$kind$t = QUESTION_KIND[kind.toUpperCase()],
+    prefix = _QUESTION_KIND$kind$t.prefix,
+    type = _QUESTION_KIND$kind$t.type;
+  var _useField = useField({
+      name: name || nodeId,
+      validate: validateFieldValue({
+        kind: kind,
+        label: label,
+        isRequired: isRequired,
+        customValidator: customValidator
+      })
+    }),
+    _useField2 = _slicedToArray$3(_useField, 3),
+    field = _useField2[0],
+    _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setValue = _useField2$2.setValue,
+    setTouched = _useField2$2.setTouched;
+  var handleFieldChange = withEventTargetValue(setValue);
+  return /*#__PURE__*/React__default.createElement(Input$2, _extends$8({}, _objectSpread$7(_objectSpread$7({
+    type: type
+  }, field), {}, {
+    autoComplete: autoComplete,
+    label: label
+  }), {
+    error: touched ? error : "",
+    name: kind,
+    placeholder: fieldWithFallback(question, "placeholder"),
+    prefix: showPrefixIcon && prefix,
+    required: isRequired,
+    onBlur: function onBlur() {
+      return setTouched(true);
+    },
+    onChange: handleFieldChange
+  }));
+};
+
 var sparkMd5 = {
   exports: {}
 };
@@ -17917,9 +18027,9 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -17955,7 +18065,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread$5(_objectSpread$5({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread$6(_objectSpread$6({}, props), {}, {
     open: open
   })));
 });
@@ -18289,7 +18399,7 @@ var initialState = {
 function useDropzone() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$options = _objectSpread$5(_objectSpread$5({}, defaultProps), options),
+  var _defaultProps$options = _objectSpread$6(_objectSpread$6({}, defaultProps), options),
       accept = _defaultProps$options.accept,
       disabled = _defaultProps$options.disabled,
       getFilesFromEvent = _defaultProps$options.getFilesFromEvent,
@@ -18606,7 +18716,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties(_ref2, ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"]);
 
-      return _objectSpread$5(_objectSpread$5(_defineProperty({
+      return _objectSpread$6(_objectSpread$6(_defineProperty({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -18645,7 +18755,7 @@ function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread$5(_objectSpread$5({}, inputProps), rest);
+      return _objectSpread$6(_objectSpread$6({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
   var fileCount = draggedFiles.length;
@@ -18658,7 +18768,7 @@ function useDropzone() {
     maxFiles: maxFiles
   });
   var isDragReject = fileCount > 0 && !isDragAccept;
-  return _objectSpread$5(_objectSpread$5({}, state), {}, {
+  return _objectSpread$6(_objectSpread$6({}, state), {}, {
     isDragAccept: isDragAccept,
     isDragReject: isDragReject,
     isFocused: isFocused && !disabled,
@@ -18674,22 +18784,22 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case 'focus':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         isFocused: true
       });
 
     case 'blur':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         isFocused: false
       });
 
     case 'openDialog':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         isFileDialogActive: true
       });
 
     case 'closeDialog':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         isFileDialogActive: false
       });
 
@@ -18697,19 +18807,19 @@ function reducer(state, action) {
       /* eslint no-case-declarations: 0 */
       var isDragActive = action.isDragActive,
           draggedFiles = action.draggedFiles;
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         draggedFiles: draggedFiles,
         isDragActive: isDragActive
       });
 
     case 'setFiles':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
     case 'reset':
-      return _objectSpread$5(_objectSpread$5({}, state), {}, {
+      return _objectSpread$6(_objectSpread$6({}, state), {}, {
         isFileDialogActive: false,
         isDragActive: false,
         draggedFiles: [],
@@ -18722,8 +18832,8 @@ function reducer(state, action) {
   }
 }
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFileUpload = function useFileUpload(_ref) {
   var disabled = _ref.disabled,
     accept = _ref.accept,
@@ -18823,7 +18933,7 @@ var useFileUpload = function useFileUpload(_ref) {
                   var uploadedFile = findBy({
                     name: file.name
                   }, newFiles);
-                  return _objectSpread$4(_objectSpread$4({}, file), uploadedFile);
+                  return _objectSpread$5(_objectSpread$5({}, file), uploadedFile);
                 })
               });
             } else {
@@ -26472,6 +26582,58 @@ var FileUploadField = function FileUploadField(_ref) {
   }, error));
 };
 
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var NameField = function NameField(_ref) {
+  var question = _ref.question,
+    showPrefixIcon = _ref.showPrefixIcon,
+    customValidator = _ref.customValidator,
+    autoComplete = _ref.autoComplete;
+  var name = question.id,
+    kind = question.kind,
+    isRequired = question.isRequired,
+    nodeId = question.nodeId;
+  var label = fieldWithFallback(question, "label");
+  var _QUESTION_KIND$kind$t = QUESTION_KIND[kind.toUpperCase()],
+    prefix = _QUESTION_KIND$kind$t.prefix,
+    _QUESTION_KIND$kind$t2 = _QUESTION_KIND$kind$t.type,
+    type = _QUESTION_KIND$kind$t2 === void 0 ? "text" : _QUESTION_KIND$kind$t2;
+  var _useField = useField({
+      name: name || nodeId,
+      validate: validateFieldValue({
+        kind: kind,
+        label: label,
+        isRequired: isRequired,
+        customValidator: customValidator
+      })
+    }),
+    _useField2 = _slicedToArray$3(_useField, 3),
+    field = _useField2[0],
+    _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setValue = _useField2$2.setValue,
+    setTouched = _useField2$2.setTouched;
+  var handleFieldChange = withEventTargetValue(setValue);
+  return /*#__PURE__*/React__default.createElement(Input$2, _extends$8({}, _objectSpread$4(_objectSpread$4({
+    type: type
+  }, field), {}, {
+    autoComplete: autoComplete,
+    label: label
+  }), {
+    error: touched ? error : "",
+    name: kind,
+    placeholder: fieldWithFallback(question, "placeholder"),
+    prefix: showPrefixIcon && prefix,
+    required: isRequired,
+    onBlur: function onBlur() {
+      return setTouched(true);
+    },
+    onChange: handleFieldChange
+  }));
+};
+
 var Choices = function Choices(_ref) {
   var label = _ref.label,
     options = _ref.options,
@@ -26927,7 +27089,7 @@ var TextField = function TextField(_ref) {
     onKeyDown: onKeyDown
   }), {
     error: touched ? error : "",
-    name: ["email", "name"].includes(kind) ? kind : slugify(label),
+    name: slugify(label),
     placeholder: fieldWithFallback(question, "placeholder"),
     prefix: showPrefixIcon && prefix,
     required: isRequired,
@@ -26939,7 +27101,7 @@ var TextField = function TextField(_ref) {
 };
 
 var _QUESTION_TO_COMPONEN;
-var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
+var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
   return /*#__PURE__*/React__default.createElement(EditorContent, {
     content: isEmpty(question.label) ? question.labelFallback : question.label