@bigbinary/neeto-form-frontend 3.10.26 → 3.11.0

package/dist/cjs/BuildForm.js

@@ -9,9 +9,9 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var ramda = require('ramda');
-var useFormApi = require('../useFormApi-JO7ZX1kT.js');
-var constants$1 = require('../constants-CN0KQk0z.js');
-var constants = require('../constants-DWy8qlgB.js');
+var constants = require('../constants-CkGU4abB.js');
+var constants$2 = require('../constants-CN0KQk0z.js');
+var constants$1 = require('../constants-CIKOBOUZ.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var dnd = require('@hello-pangea/dnd');
@@ -19,16 +19,16 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var reactI18next = require('react-i18next');
-var buildForm = require('../buildForm-ZqO8kJoo.js');
+var buildForm = require('../buildForm-nKLcTFON.js');
 var shallow = require('zustand/shallow');
 var Alert = require('@bigbinary/neetoui/Alert');
-var index = require('../index-2caW4Cx0.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Modal = require('@bigbinary/neetoui/Modal');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var index = require('../index-qEhecRV2.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var i18next = require('i18next');
 var uuid = require('uuid');
@@ -99,12 +99,12 @@ var DeleteAlert = function DeleteAlert(_ref) {
     selectedLanguage = _useBuildFormStore.selectedLanguage;
   var renderQuestionLabel = function renderQuestionLabel() {
     var questionKind = selectedQuestion.kind;
-    var independentLabel = constants.INDEPENDENT_LABELS_MAP[questionKind];
+    var independentLabel = constants$1.INDEPENDENT_LABELS_MAP[questionKind];
     if (neetoCist.isPresent(independentLabel)) return independentLabel;
-    var questionLabel = index.fieldWithFallback(selectedQuestion, "label");
+    var questionLabel = constants$1.buildDisplayLabel(selectedQuestion);
     return neetoCist.truncate(questionLabel, 40);
   };
-  var _useDeleteQuestion = useFormApi.useDeleteQuestion(selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.formId, selectedLanguage, {
+  var _useDeleteQuestion = constants.useDeleteQuestion(selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.formId, selectedLanguage, {
       onSuccess: function onSuccess() {
         utils.showThumbsUpToastr();
         onClose();
@@ -301,14 +301,12 @@ var Card = function Card(_ref) {
       allQuestionKinds: allQuestionKinds,
       item: question
     }),
-    kind = _getActiveKindDetails.kind,
     isSingular = _getActiveKindDetails.isSingular;
-  var label = index.fieldWithFallback(question, "label");
-  var questionLabel = constants.isRichTextQuestion(kind) ? constants.htmlToPlainText(label) : label;
+  var questionLabel = constants$1.buildDisplayLabel(question);
   React.useEffect(function () {
     var element = questionLabelRef.current;
     if (neetoCist.isNotPresent(element)) return;
-    setIsTooltipEnabled(constants.isElementOverflowing(element));
+    setIsTooltipEnabled(constants$1.isElementOverflowing(element));
   }, [questionLabel]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-cy": "neeto-form-engine-".concat(neetoCist.slugify(questionLabel)),
@@ -320,7 +318,7 @@ var Card = function Card(_ref) {
     },
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex min-w-0 flex-grow items-center gap-1",
-      children: [/*#__PURE__*/jsxRuntime.jsx(constants.Drag, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(constants$1.Drag, {
         className: "neeto-ui-text-gray-600 flex-shrink-0"
       }), /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
         content: questionLabel,
@@ -367,8 +365,8 @@ var Card = function Card(_ref) {
   });
 };
 
-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(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(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 Questions = function Questions(_ref) {
   var questions = _ref.questions,
     isDeletable = _ref.isDeletable,
@@ -385,7 +383,7 @@ var Questions = function Questions(_ref) {
       var droppableProps = _ref2.droppableProps,
         placeholder = _ref2.placeholder,
         innerRef = _ref2.innerRef;
-      return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$e(_objectSpread$e({}, droppableProps), {}, {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$g(_objectSpread$g({}, droppableProps), {}, {
         className: "space-y-2",
         ref: innerRef,
         children: [questions.map(function (question, index) {
@@ -398,7 +396,7 @@ var Questions = function Questions(_ref) {
             var draggableProps = _ref3.draggableProps,
               dragHandleProps = _ref3.dragHandleProps,
               innerRef = _ref3.innerRef;
-            return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$e(_objectSpread$e(_objectSpread$e({}, draggableProps), dragHandleProps), {}, {
+            return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$g(_objectSpread$g(_objectSpread$g({}, draggableProps), dragHandleProps), {}, {
               ref: innerRef,
               children: /*#__PURE__*/jsxRuntime.jsx(Card, {
                 allQuestionKinds: allQuestionKinds,
@@ -430,16 +428,16 @@ var arrayHelpers = {
   moveItem: moveItem
 };
 
-function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(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; }
 var isChoiceQuestion = function isChoiceQuestion(question) {
-  return ramda.includes(question === null || question === void 0 ? void 0 : question.kind, constants.SELECTABLE_KINDS);
+  return ramda.includes(question === null || question === void 0 ? void 0 : question.kind, constants$1.SELECTABLE_KINDS);
 };
 var underscoredWithoutSpecialCharacters = function underscoredWithoutSpecialCharacters(string) {
   return string.toLowerCase().replace(/[\s-]/g, "_").replace(/[\W]/gi, "").replace(/_+/g, "_").replace(/^_+|_+$/, "");
 };
 var addSuffixForReservedFieldCode = function addSuffixForReservedFieldCode(fieldCode) {
-  return constants.RESERVED_FIELD_CODES.includes(fieldCode) ? "".concat(fieldCode, "_field") : fieldCode;
+  return constants$1.RESERVED_FIELD_CODES.includes(fieldCode) ? "".concat(fieldCode, "_field") : fieldCode;
 };
 var getUniqueNumbersFromExistingFieldCodes = function getUniqueNumbersFromExistingFieldCodes(prefix, questions) {
   return questions.filter(function (question) {
@@ -450,7 +448,7 @@ var getUniqueNumbersFromExistingFieldCodes = function getUniqueNumbersFromExisti
 };
 var generateFieldCodePrefix = function generateFieldCodePrefix(label, kind) {
   var prefix;
-  if (constants.NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || ramda.isEmpty(label)) {
+  if (index.isNameQuestion(kind) || constants$1.NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || ramda.isEmpty(label)) {
     prefix = kind;
   } else {
     var sanitizedLabel = underscoredWithoutSpecialCharacters(label).slice(0, 30);
@@ -458,12 +456,18 @@ var generateFieldCodePrefix = function generateFieldCodePrefix(label, kind) {
   }
   return addSuffixForReservedFieldCode(prefix) || "";
 };
+var renameKey = ramda.curry(function (oldKey, newKey, obj) {
+  return ramda.assoc(newKey, ramda.prop(oldKey, obj), ramda.dissoc(oldKey, obj));
+});
 var modifyDefaultValues = function modifyDefaultValues(_ref) {
   var values = _ref.values,
     kind = _ref.kind,
     selectedLanguage = _ref.selectedLanguage,
     isUsingDefaultQuestionKinds = _ref.isUsingDefaultQuestionKinds;
-  if (!ramda.includes(kind, constants.SELECTABLE_KINDS) || constants.isDefaultLanguage(selectedLanguage) || !isUsingDefaultQuestionKinds) {
+  if (index.isNameQuestion(kind)) {
+    return renameKey(constants$1.LABEL_FIELDS.DEFAULT, constants$1.LABEL_FIELDS.FULL_NAME, values);
+  }
+  if (!ramda.includes(kind, constants$1.SELECTABLE_KINDS) || constants$1.isDefaultLanguage(selectedLanguage) || !isUsingDefaultQuestionKinds) {
     return values;
   }
   return ramda.evolve({
@@ -507,7 +511,7 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref4) {
   var nextItems = _toConsumableArray(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
   var orderedItems = nextItems.map(function (item, index) {
-    return _objectSpread$d(_objectSpread$d({}, item), {}, {
+    return _objectSpread$f(_objectSpread$f({}, item), {}, {
       displayOrder: index
     });
   });
@@ -529,7 +533,7 @@ var createFieldData = function createFieldData(_ref5) {
     selectedLanguage: selectedLanguage,
     isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds
   });
-  return _objectSpread$d(_objectSpread$d({}, modifiedDefaultValues), {}, {
+  return _objectSpread$f(_objectSpread$f({}, modifiedDefaultValues), {}, {
     metadata: metadata,
     isRequired: isRequired,
     kind: type,
@@ -554,10 +558,10 @@ var duplicateFieldData = function duplicateFieldData(_ref6) {
   var label = index.fieldWithFallback(item, "label");
   var defaultAttributeNames = ramda.keys(questionKind.defaults || {});
   var defaultAttributes = ramda.pick(defaultAttributeNames, item);
-  var newQuestionLabel = constants.isRichTextQuestion(kind) ? label : i18next.t("neetoForm.common.clonedElementLabel", {
+  var newQuestionLabel = constants$1.isRichTextQuestion(kind) ? label : i18next.t("neetoForm.common.clonedElementLabel", {
     label: label
   });
-  return _objectSpread$d(_objectSpread$d({}, defaultAttributes), {}, {
+  return _objectSpread$f(_objectSpread$f({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: newQuestionLabel,
@@ -579,7 +583,7 @@ var getAvailableQuestionKinds = function getAvailableQuestionKinds(_ref7) {
   if (ramda.isEmpty(activeQuestions)) return allQuestionKinds;
   return ramda.reject(function (kind) {
     var isSingularKind = kind.isSingular;
-    return constants.isAutoGeneratedQuestion(kind.type) || isSingularKind && isKindAlreadyActive({
+    return constants$1.isAutoGeneratedQuestion(kind.type) || isSingularKind && isKindAlreadyActive({
       activeQuestions: activeQuestions,
       kind: kind
     });
@@ -593,14 +597,14 @@ var AddFirstQuestion = function AddFirstQuestion(_ref) {
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var tooltipProps = constants.buildDisabledAddButtonTooltipProps(isDisabled, disabledAddButtonTooltipProps);
+  var tooltipProps = constants$1.buildDisabledAddButtonTooltipProps(isDisabled, disabledAddButtonTooltipProps);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex h-full flex-col items-center justify-center py-8",
     children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
       showTooltipWhenButtonDisabled: true,
       className: "min-h-80",
       title: t("neetoForm.questions.common.noData"),
-      primaryButtonProps: constants.buildAddQuestionButtonProps(onAdd, isDisabled, tooltipProps)
+      primaryButtonProps: constants$1.buildAddQuestionButtonProps(onAdd, isDisabled, tooltipProps)
     })
   });
 };
@@ -620,7 +624,7 @@ var NAME = constants.QUESTION_TYPES.NAME,
   FILE_UPLOAD$1 = constants.QUESTION_TYPES.FILE_UPLOAD,
   CAPTCHA$1 = constants.QUESTION_TYPES.CAPTCHA,
   SMS_REMINDER = constants.QUESTION_TYPES.SMS_REMINDER;
-var QUESTIONS_WITH_ADDITIONAL_DATA = [].concat(_toConsumableArray(constants.SELECTABLE_KINDS), [STAR_RATING$1, RATING$1, FILE_UPLOAD$1, CAPTCHA$1, EMAIL$1]);
+var QUESTIONS_WITH_ADDITIONAL_DATA = [].concat(_toConsumableArray(constants$1.SELECTABLE_KINDS), [STAR_RATING$1, RATING$1, FILE_UPLOAD$1, CAPTCHA$1, EMAIL$1]);
 var QUESTIONS_WITH_PLACEHOLDERS = [NAME, PHONE, EMAIL$1, ADDITIONAL_GUESTS, TEXT, TEXTAREA, RICH_TEXT, INTEGER, DECIMAL, DATE, SMS_REMINDER];
 var DEFAULT_PLACEHOLDERS = {
   CHECKBOX: i18next.t("neetoForm.questions.common.questionFields.field.labelExample", {
@@ -636,13 +640,14 @@ var DEFAULT_PLACEHOLDERS = {
 var INITIAL_VALUES = {
   kind: "",
   label: "",
-  fieldCode: ""
+  fieldCode: "",
+  isSplitMode: false
 };
 var VALID_FIELD_CODE_REGEX = /^[a-z0-9]+(_[a-z0-9]+)*$/;
 
 var _excluded$8 = ["label", "name"];
-function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(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; }
 var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -661,7 +666,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread$c({
+  return /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread$e({
     label: label,
     name: name,
     className: "neeto-form-nano-adaptive-input",
@@ -675,6 +680,132 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   }, otherProps));
 };
 
+function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
+  var kind = _ref.kind,
+    isLabelDisabled = _ref.isLabelDisabled,
+    handleLabelChange = _ref.handleLabelChange,
+    _ref$labelProps = _ref.labelProps,
+    labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps,
+    _ref$placeholderProps = _ref.placeholderProps,
+    placeholderProps = _ref$placeholderProps === void 0 ? {} : _ref$placeholderProps;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var shouldShowPlaceholder = ramda.includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$d({
+      required: true,
+      disabled: isLabelDisabled,
+      label: t("neetoForm.questions.common.questionFields.field.question"),
+      name: "label",
+      placeholder: DEFAULT_PLACEHOLDERS[kind],
+      onChange: utils.withEventTargetValue(handleLabelChange)
+    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$d({
+      className: "neeto-form-nano-placeholder-input neeto-form-nano-placeholder-input-".concat(kind),
+      name: "placeholder",
+      label: t("neetoForm.questions.common.questionFields.field.placeholder")
+    }, placeholderProps))]
+  });
+};
+
+function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Name = function Name(_ref) {
+  var isLabelDisabled = _ref.isLabelDisabled,
+    _handleLabelChange = _ref.handleLabelChange;
+  var _useFormikContext = formik.useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values.isSplitMode,
+    isSplitMode = _useFormikContext$val === void 0 ? false : _useFormikContext$val;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var usesCustomSubmissionComponent = buildForm.useBuildFormStore(ramda.path(["formState", "usesCustomSubmissionComponent"]));
+  var commonProps = {
+    kind: constants.QUESTION_TYPES.NAME,
+    isLabelDisabled: isLabelDisabled
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-4",
+    children: [!usesCustomSubmissionComponent && /*#__PURE__*/jsxRuntime.jsx(Switch, {
+      label: t("neetoForm.common.splitAsFirstAndLastNames"),
+      name: "isSplitMode"
+    }), isSplitMode && !usesCustomSubmissionComponent ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+        handleLabelChange: function handleLabelChange(value) {
+          return _handleLabelChange(value, constants$1.LABEL_FIELDS.FIRST_NAME);
+        },
+        labelProps: {
+          label: t("neetoForm.questions.common.questionFields.field.firstNameQuestion"),
+          name: constants$1.LABEL_FIELDS.FIRST_NAME
+        },
+        placeholderProps: {
+          label: t("neetoForm.questions.common.questionFields.field.firstNamePlaceholder"),
+          name: "firstNamePlaceholder"
+        }
+      })), /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+        handleLabelChange: function handleLabelChange(value) {
+          return _handleLabelChange(value, constants$1.LABEL_FIELDS.LAST_NAME);
+        },
+        labelProps: {
+          label: t("neetoForm.questions.common.questionFields.field.lastNameQuestion"),
+          name: constants$1.LABEL_FIELDS.LAST_NAME
+        },
+        placeholderProps: {
+          label: t("neetoForm.questions.common.questionFields.field.lastNamePlaceholder"),
+          name: "lastNamePlaceholder"
+        }
+      }))]
+    }) : /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+      labelProps: {
+        name: constants$1.LABEL_FIELDS.FULL_NAME
+      },
+      placeholderProps: {
+        name: "fullNamePlaceholder"
+      },
+      handleLabelChange: function handleLabelChange(value) {
+        return _handleLabelChange(value, constants$1.LABEL_FIELDS.FULL_NAME);
+      }
+    }))]
+  });
+};
+
+var Properties = function Properties(_ref) {
+  var kind = _ref.kind,
+    isLabelDisabled = _ref.isLabelDisabled,
+    handleLabelChange = _ref.handleLabelChange,
+    questionProps = _ref.questionProps;
+  var _useBuildFormStore = buildForm.useBuildFormStore(function (store) {
+      var _store$formState, _store$formState2;
+      return {
+        enableDomainWhitelisting: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["enableDomainWhitelisting"],
+        enableDomainBlacklisting: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["enableDomainBlacklisting"]
+      };
+    }, shallow.shallow),
+    enableDomainWhitelisting = _useBuildFormStore.enableDomainWhitelisting,
+    enableDomainBlacklisting = _useBuildFormStore.enableDomainBlacklisting;
+  var hasAdditionalData = ramda.includes(kind, QUESTIONS_WITH_ADDITIONAL_DATA);
+  if (index.isNameQuestion(kind)) {
+    return /*#__PURE__*/jsxRuntime.jsx(Name, {
+      handleLabelChange: handleLabelChange,
+      isLabelDisabled: isLabelDisabled
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, {
+      handleLabelChange: handleLabelChange,
+      isLabelDisabled: isLabelDisabled,
+      kind: kind
+    }), hasAdditionalData && renderAdditionalData({
+      kind: kind,
+      questionProps: questionProps,
+      enableDomainWhitelisting: enableDomainWhitelisting,
+      enableDomainBlacklisting: enableDomainBlacklisting
+    })]
+  });
+};
+
 var Block = function Block(_ref) {
   var title = _ref.title,
     children = _ref.children,
@@ -734,7 +865,7 @@ var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
     setEditorContent(initialValue);
     setFormData(ramda.modify("richTextFieldsToReset", ramda.without([fieldCode])));
   }
-  var _useFetchQuestions = useFormApi.useFetchQuestions({
+  var _useFetchQuestions = constants.useFetchQuestions({
       formId: formId,
       language: language
     }),
@@ -769,7 +900,7 @@ var Editor = function Editor() {
   var fieldName = "label";
   var _useField = formik.useField({
       name: fieldName,
-      validate: constants.validateEditorContent(editorRef)
+      validate: constants$1.validateEditorContent(editorRef)
     }),
     _useField2 = _slicedToArray(_useField, 3),
     value = _useField2[0].value,
@@ -844,7 +975,7 @@ var FieldCode = function FieldCode() {
     required: true,
     label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
     name: "fieldCode",
-    rejectCharsRegex: constants.FIELD_CODES_REJECT_CHARS_REGEX,
+    rejectCharsRegex: constants$1.FIELD_CODES_REJECT_CHARS_REGEX,
     helpText: helpDocUrl && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
       i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
       components: {
@@ -882,17 +1013,13 @@ var Form$1 = function Form(_ref) {
   var hideQuestionHelpDoc = buildForm.useBuildFormStore(ramda.path(["formState", "helpDocUrls", "hideQuestion"]));
   var readOnlyHelpDoc = buildForm.useBuildFormStore(ramda.path(["formState", "helpDocUrls", "readOnly"]));
   var _useBuildFormStore = buildForm.useBuildFormStore(function (store) {
-      var _store$formState, _store$formState2, _store$formState3, _store$formState4, _store$formState5;
+      var _store$formState, _store$formState2, _store$formState3;
       return {
-        enableDomainWhitelisting: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["enableDomainWhitelisting"],
-        enableDomainBlacklisting: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["enableDomainBlacklisting"],
-        showReadOnlySwitch: (_store$formState3 = store["formState"]) === null || _store$formState3 === void 0 ? void 0 : _store$formState3["showReadOnlySwitch"],
-        selectedLanguage: (_store$formState4 = store["formState"]) === null || _store$formState4 === void 0 ? void 0 : _store$formState4["selectedLanguage"],
-        isUsingDefaultQuestionKinds: (_store$formState5 = store["formState"]) === null || _store$formState5 === void 0 ? void 0 : _store$formState5["isUsingDefaultQuestionKinds"]
+        showReadOnlySwitch: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["showReadOnlySwitch"],
+        selectedLanguage: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["selectedLanguage"],
+        isUsingDefaultQuestionKinds: (_store$formState3 = store["formState"]) === null || _store$formState3 === void 0 ? void 0 : _store$formState3["isUsingDefaultQuestionKinds"]
       };
     }, shallow.shallow),
-    enableDomainWhitelisting = _useBuildFormStore.enableDomainWhitelisting,
-    enableDomainBlacklisting = _useBuildFormStore.enableDomainBlacklisting,
     showReadOnlySwitch = _useBuildFormStore.showReadOnlySwitch,
     selectedLanguage = _useBuildFormStore.selectedLanguage,
     isUsingDefaultQuestionKinds = _useBuildFormStore.isUsingDefaultQuestionKinds;
@@ -912,12 +1039,10 @@ var Form$1 = function Form(_ref) {
     questionProps = _ref2$questionProps === void 0 ? {} : _ref2$questionProps;
   var isRequired = questionKind && isRequiredField(questionKind);
   var isLabelDisabled = questionKind && isDisabledFieldLabel(questionKind);
-  var isImmutable = questionKind && constants.isImmutableField(questionKind);
-  var shouldShowPlaceholder = ramda.includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
-  var hasAdditionalData = ramda.includes(kind, QUESTIONS_WITH_ADDITIONAL_DATA);
-  var shouldShowFieldCode = enableFieldCode && !ramda.includes(kind, constants.QUESTIONS_WITHOUT_FIELD_CODE);
-  var shouldShowHideSwitch = !ramda.includes(kind, constants.NON_HIDEABLE_FIELDS);
-  var shouldShowReadOnlySwitch = showReadOnlySwitch && !ramda.includes(kind, constants.NON_READ_ONLY_FIELDS);
+  var isImmutable = questionKind && constants$1.isImmutableField(questionKind);
+  var shouldShowFieldCode = enableFieldCode && !ramda.includes(kind, constants$1.QUESTIONS_WITHOUT_FIELD_CODE);
+  var shouldShowHideSwitch = !ramda.includes(kind, constants$1.NON_HIDEABLE_FIELDS);
+  var shouldShowReadOnlySwitch = showReadOnlySwitch && !ramda.includes(kind, constants$1.NON_READ_ONLY_FIELDS);
   var isSettingsBlockVisible = !isRequired && (!isImmutable || shouldShowHideSwitch);
   var handleKindChange = function handleKindChange(option) {
     var data = buildQuestionData(option);
@@ -948,7 +1073,8 @@ var Form$1 = function Form(_ref) {
     setTouched({});
   };
   var handleLabelChange = function handleLabelChange(label) {
-    setFieldValue("label", label);
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : constants$1.LABEL_FIELDS.DEFAULT;
+    setFieldValue(name, label);
     if (isEdit) return;
     var uniqueFieldCode = generateUniqueFieldCode({
       questions: questions,
@@ -970,29 +1096,15 @@ var Form$1 = function Form(_ref) {
         options: buildKindOptions(questionKinds),
         label: t("neetoForm.questions.common.questionFields.field.questionType"),
         onChange: handleKindChange
-      }), constants.isRichTextQuestion(kind) ? /*#__PURE__*/jsxRuntime.jsx(Editor, {
+      }), constants$1.isRichTextQuestion(kind) ? /*#__PURE__*/jsxRuntime.jsx(Editor, {
         isLabelDisabled: isLabelDisabled
       }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "space-y-6",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, {
-            required: true,
-            disabled: isLabelDisabled,
-            name: "label",
-            placeholder: DEFAULT_PLACEHOLDERS[kind],
-            label: t("neetoForm.questions.common.questionFields.field.question"),
-            onChange: utils.withEventTargetValue(handleLabelChange)
-          }), shouldShowPlaceholder && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, {
-            className: "neeto-form-nano-placeholder-input neeto-form-nano-placeholder-input-".concat(kind),
-            name: "placeholder",
-            label: t("neetoForm.questions.common.questionFields.field.placeholder")
-          }), hasAdditionalData && renderAdditionalData({
-            kind: kind,
-            questionProps: questionProps,
-            enableDomainWhitelisting: enableDomainWhitelisting,
-            enableDomainBlacklisting: enableDomainBlacklisting
-          })]
+        children: [/*#__PURE__*/jsxRuntime.jsx(Properties, {
+          handleLabelChange: handleLabelChange,
+          isLabelDisabled: isLabelDisabled,
+          kind: kind,
+          questionProps: questionProps
         }), isSettingsBlockVisible && /*#__PURE__*/jsxRuntime.jsxs(Block, {
           dataCy: "settings-card",
           title: t("neetoForm.common.settings"),
@@ -1040,22 +1152,35 @@ var richTextFieldMissingErrorMessage = function richTextFieldMissingErrorMessage
     field: field
   });
 };
-var formValidationSchema = function formValidationSchema() {
-  var enableFieldCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+var buildLabelValidationSchema = function buildLabelValidationSchema(kind, schema) {
+  if (index.isNameQuestion(kind)) {
+    return schema.notRequired();
+  }
+  return ramda.includes(kind, constants$1.RICH_TEXT_QUESTIONS) ? schema.test("required", richTextFieldMissingErrorMessage(kind), function (value) {
+    return !utils$1.isEditorEmpty(value);
+  }) : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question"));
+};
+var buildNameLabelValidationSchema = function buildNameLabelValidationSchema(question, schema) {
+  var isFullName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isRequired = isFullName ? !question.isSplitMode : question.isSplitMode;
+  return index.isNameQuestion(question.kind) && isRequired ? requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question")) : schema.notRequired();
+};
+var stringSchema = yup__namespace.string();
+var formValidationSchema = function formValidationSchema(question) {
+  var enableFieldCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return yup__namespace.object().shape({
     kind: yup__namespace.string().trim().required(i18next.t("neetoForm.common.fieldReq", {
       field: i18next.t("neetoForm.questions.common.questionFields.field.questionType")
     })),
-    label: yup__namespace.string().when("kind", function (kind, schema) {
-      return ramda.includes(kind, constants.RICH_TEXT_QUESTIONS) ? schema.test("required", richTextFieldMissingErrorMessage(kind), function (value) {
-        return !utils$1.isEditorEmpty(value);
-      }) : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question"));
-    }),
-    fieldCode: yup__namespace.string().trim().notOneOf(constants.RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
-      return enableFieldCode && !ramda.includes(kind, constants.QUESTIONS_WITHOUT_FIELD_CODE) ? fieldCodeValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.fieldCode")) : schema.notRequired();
+    label: yup__namespace.string().when("kind", buildLabelValidationSchema),
+    fullNameLabel: buildNameLabelValidationSchema(question, stringSchema, true),
+    firstNameLabel: buildNameLabelValidationSchema(question, stringSchema),
+    lastNameLabel: buildNameLabelValidationSchema(question, stringSchema),
+    fieldCode: yup__namespace.string().trim().notOneOf(constants$1.RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
+      return enableFieldCode && !ramda.includes(kind, constants$1.QUESTIONS_WITHOUT_FIELD_CODE) ? fieldCodeValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.fieldCode")) : schema.notRequired();
     }),
     optionsAttributes: yup__namespace.array().when("kind", function (kind, schema) {
-      return ramda.includes(kind, constants.SELECTABLE_KINDS) ? schema.of(yup__namespace.object().shape({
+      return ramda.includes(kind, constants$1.SELECTABLE_KINDS) ? schema.of(yup__namespace.object().shape({
         label: yup__namespace.string().when("_destroy", {
           is: true,
           otherwise: requiredLabelValidation(yup__namespace.string(), i18next.t("neetoForm.questions.common.questionFields.field.option"))
@@ -1090,7 +1215,7 @@ var Add = function Add(_ref) {
     language = _useBuildFormStore.selectedLanguage;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useCreateQuestion = useFormApi.useCreateQuestion(formId, language, {
+  var _useCreateQuestion = constants.useCreateQuestion(formId, language, {
       onSuccess: function onSuccess() {
         utils.showThumbsUpToastr();
         onClose();
@@ -1126,7 +1251,7 @@ var Add = function Add(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Form$2, {
       formikProps: {
         initialValues: INITIAL_VALUES,
-        validationSchema: formValidationSchema(props["enableFieldCode"]),
+        validationSchema: formValidationSchema(INITIAL_VALUES, props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1163,7 +1288,7 @@ var Edit = function Edit(_ref) {
       };
     }, shallow.shallow),
     language = _useBuildFormStore.selectedLanguage;
-  var _useUpdateQuestion = useFormApi.useUpdateQuestion(question === null || question === void 0 ? void 0 : question.formId, language),
+  var _useUpdateQuestion = constants.useUpdateQuestion(question === null || question === void 0 ? void 0 : question.formId, language),
     updateQuestion = _useUpdateQuestion.mutate,
     isUpdating = _useUpdateQuestion.isPending;
   var handleSubmit = function handleSubmit(values, _ref2) {
@@ -1196,7 +1321,7 @@ var Edit = function Edit(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Form$2, {
       formikProps: {
         initialValues: question,
-        validationSchema: formValidationSchema(props["enableFieldCode"]),
+        validationSchema: formValidationSchema(question, props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1653,15 +1778,15 @@ var getAllowedFileTypes = function getAllowedFileTypes(_ref) {
     allowedFileTypes = _ref.allowedFileTypes;
   var fileTypes = buildFileTypesList(allowedFileTypes);
   if (isChecked) {
-    var fileTypesSet = new Set([].concat(_toConsumableArray(constants.FILE_TYPES_MAP[type]), _toConsumableArray(fileTypes)));
+    var fileTypesSet = new Set([].concat(_toConsumableArray(constants$1.FILE_TYPES_MAP[type]), _toConsumableArray(fileTypes)));
     return Array.from(fileTypesSet).join(", ");
   }
-  var newFileTypes = ramda.difference(fileTypes, constants.FILE_TYPES_MAP[type]);
+  var newFileTypes = ramda.difference(fileTypes, constants$1.FILE_TYPES_MAP[type]);
   return newFileTypes.join(", ");
 };
 var isFileTypeEnabled = function isFileTypeEnabled(type, allowedFileTypes) {
   var fileTypes = buildFileTypesList(allowedFileTypes);
-  return ramda.isEmpty(ramda.difference(constants.FILE_TYPES_MAP[type], fileTypes));
+  return ramda.isEmpty(ramda.difference(constants$1.FILE_TYPES_MAP[type], fileTypes));
 };
 
 var FileUpload = function FileUpload() {
@@ -1697,7 +1822,7 @@ var FileUpload = function FileUpload() {
         children: t("neetoForm.fileUpload.fileTypes")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex space-x-4",
-        children: constants.FILE_GROUPS.map(function (_ref2) {
+        children: constants$1.FILE_GROUPS.map(function (_ref2) {
           var name = _ref2.name,
             label = _ref2.label;
           return /*#__PURE__*/React.createElement(FileGroup, {
@@ -1758,8 +1883,8 @@ var Options = function Options(_ref) {
       draggable: !isManageOptionDisabled,
       isAddOptionEnabled: !isAddOptionDisabled,
       isDeleteOptionEnabled: !isRemoveOptionDisabled,
-      isNewItemsPrefilled: constants.isDefaultLanguage(selectedLanguage),
-      minOptions: constants.MINIMUM_OPTIONS,
+      isNewItemsPrefilled: constants$1.isDefaultLanguage(selectedLanguage),
+      minOptions: constants$1.MINIMUM_OPTIONS,
       shouldResetEmptyOptionOnBlur: false,
       onChange: setOptionsAttributes
     })]
@@ -1780,7 +1905,7 @@ var Rating = function Rating() {
       className: "w-full",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex gap-6",
-        children: constants.RATING_OPTIONS.map(function (_ref2) {
+        children: constants$1.RATING_OPTIONS.map(function (_ref2) {
           var Icon = _ref2.icon,
             name = _ref2.name,
             color = _ref2.color;
@@ -1817,7 +1942,7 @@ var StarRating = function StarRating() {
         "data-cy": "neeto-form-engine-star-rating-min-value",
         label: t("neetoForm.common.start"),
         name: "minValue",
-        options: constants.STAR_RATING_MIN_VALUE_OPTIONS,
+        options: constants$1.STAR_RATING_MIN_VALUE_OPTIONS,
         onChange: function onChange(option) {
           return setFieldValue("minValue", option === null || option === void 0 ? void 0 : option.value);
         }
@@ -1826,7 +1951,7 @@ var StarRating = function StarRating() {
         "data-cy": "neeto-form-engine-star-rating-max-value",
         label: t("neetoForm.common.end"),
         name: "maxValue",
-        options: constants.STAR_RATING_MAX_VALUE_OPTIONS,
+        options: constants$1.STAR_RATING_MAX_VALUE_OPTIONS,
         onChange: function onChange(option) {
           return setFieldValue("maxValue", option === null || option === void 0 ? void 0 : option.value);
         }
@@ -1835,7 +1960,7 @@ var StarRating = function StarRating() {
       children: t("neetoForm.common.shape")
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex gap-2",
-      children: Object.entries(constants.STAR_RATING_ICONS_MAP).map(function (_ref) {
+      children: Object.entries(constants$1.STAR_RATING_ICONS_MAP).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           name = _ref2[0],
           IconType = _ref2[1];
@@ -1899,7 +2024,7 @@ var renderAdditionalData = function renderAdditionalData(_ref2) {
   }
 };
 var resolveActionComponent = function resolveActionComponent(action) {
-  return ramda.equals(action, constants.QUESTION_ACTIONS.ADD) ? Add : Edit;
+  return ramda.equals(action, constants$1.QUESTION_ACTIONS.ADD) ? Add : Edit;
 };
 var getQuestionKind = function getQuestionKind(questionKinds, pattern) {
   var questionKind = neetoCist.findBy(pattern, questionKinds);
@@ -1983,15 +2108,15 @@ var AddQuestion = function AddQuestion(_ref) {
   var onAdd = _ref.onAdd,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
     isDisabled = _ref.isDisabled;
-  var tooltipProps = constants.buildDisabledAddButtonTooltipProps(isDisabled, disabledAddButtonTooltipProps);
+  var tooltipProps = constants$1.buildDisabledAddButtonTooltipProps(isDisabled, disabledAddButtonTooltipProps);
   return /*#__PURE__*/jsxRuntime.jsx(Tooltip, _objectSpread$2(_objectSpread$2({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$2({}, constants.buildAddQuestionButtonProps(onAdd, isDisabled)))
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$2({}, constants$1.buildAddQuestionButtonProps(onAdd, isDisabled)))
     })
   }));
 };
 
-var _excluded = ["questionKinds", "onValueChange", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange", "additionalActionOptions", "isReordering", "additionalQuestionKindPattern", "showActionBlock", "showReadOnlySwitch", "buildRequestArgs", "enableDomainBlacklisting", "enableDomainWhitelisting", "helpDocUrls", "hostSpecificData", "questionsHelpProps", "isUsingDefaultQuestionKinds"];
+var _excluded = ["questionKinds", "onValueChange", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange", "additionalActionOptions", "isReordering", "additionalQuestionKindPattern", "showActionBlock", "showReadOnlySwitch", "buildRequestArgs", "enableDomainBlacklisting", "enableDomainWhitelisting", "helpDocUrls", "hostSpecificData", "questionsHelpProps", "isUsingDefaultQuestionKinds", "usesCustomSubmissionComponent"];
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
@@ -2026,6 +2151,7 @@ var Form = function Form(_ref) {
     hostSpecificData = _ref.hostSpecificData,
     questionsHelpProps = _ref.questionsHelpProps,
     isUsingDefaultQuestionKinds = _ref.isUsingDefaultQuestionKinds,
+    usesCustomSubmissionComponent = _ref.usesCustomSubmissionComponent,
     formDomProps = _objectWithoutProperties(_ref, _excluded);
   var containerRef = React.useRef();
   var _useTranslation = reactI18next.useTranslation(),
@@ -2060,7 +2186,7 @@ var Form = function Form(_ref) {
     submitForm = formikContext.submitForm,
     resetForm = formikContext.resetForm;
   var setFormData = buildForm.useBuildFormStore(ramda.prop("setFormData"));
-  var _useCreateQuestion = useFormApi.useCreateQuestion(formId, selectedLanguage, {
+  var _useCreateQuestion = constants.useCreateQuestion(formId, selectedLanguage, {
       onSuccess: utils.showThumbsUpToastr
     }),
     createQuestion = _useCreateQuestion.mutate;
@@ -2081,19 +2207,20 @@ var Form = function Form(_ref) {
       enableDomainBlacklisting: enableDomainBlacklisting,
       enableDomainWhitelisting: enableDomainWhitelisting,
       isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
-      showReadOnlySwitch: showReadOnlySwitch
+      showReadOnlySwitch: showReadOnlySwitch,
+      usesCustomSubmissionComponent: usesCustomSubmissionComponent
     });
-  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds, showReadOnlySwitch]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds, showReadOnlySwitch, usesCustomSubmissionComponent]);
   var questions = values.questions;
   var handleSelect = function handleSelect(question) {
     setSelectedQuestion(question);
   };
   var handleAdd = function handleAdd() {
-    setSelectedAction(constants.QUESTION_ACTIONS.ADD);
+    setSelectedAction(constants$1.QUESTION_ACTIONS.ADD);
     setIsManageQuestionPaneOpen(true);
   };
   var handleEdit = function handleEdit() {
-    setSelectedAction(constants.QUESTION_ACTIONS.EDIT);
+    setSelectedAction(constants$1.QUESTION_ACTIONS.EDIT);
     setIsManageQuestionPaneOpen(true);
   };
   var handleClone = function handleClone() {
@@ -2148,7 +2275,7 @@ var Form = function Form(_ref) {
     onLanguageChange(code);
   };
   var richTextQuestions = neetoCist.filterBy({
-    kind: ramda.includes(ramda.__, constants.RICH_TEXT_QUESTIONS)
+    kind: ramda.includes(ramda.__, constants$1.RICH_TEXT_QUESTIONS)
   }, questions);
   var resetFormData = function resetFormData() {
     resetForm();
@@ -2275,7 +2402,7 @@ var BuildForm = function BuildForm(_ref) {
     _ref$isKindAlreadyAct = _ref.isKindAlreadyActive,
     isKindAlreadyActive = _ref$isKindAlreadyAct === void 0 ? isQuestionKindAlreadyActive : _ref$isKindAlreadyAct,
     _ref$getActiveKindDet = _ref.getActiveKindDetails,
-    getActiveKindDetails = _ref$getActiveKindDet === void 0 ? constants.getActiveQuestionKindDetails : _ref$getActiveKindDet,
+    getActiveKindDetails = _ref$getActiveKindDet === void 0 ? constants$1.getActiveQuestionKindDetails : _ref$getActiveKindDet,
     isQuestionDeletable = _ref.isQuestionDeletable,
     isFieldRequired = _ref.isFieldRequired,
     isFieldLabelDisabled = _ref.isFieldLabelDisabled,
@@ -2289,7 +2416,7 @@ var BuildForm = function BuildForm(_ref) {
     _ref$enableFieldCode = _ref.enableFieldCode,
     enableFieldCode = _ref$enableFieldCode === void 0 ? false : _ref$enableFieldCode,
     _ref$availableLanguag = _ref.availableLanguages,
-    availableLanguages = _ref$availableLanguag === void 0 ? constants.DEFAULT_AVAILABLE_LANGUAGES : _ref$availableLanguag,
+    availableLanguages = _ref$availableLanguag === void 0 ? constants$1.DEFAULT_AVAILABLE_LANGUAGES : _ref$availableLanguag,
     formDescription = _ref.formDescription,
     _ref$formTitle = _ref.formTitle,
     formTitle = _ref$formTitle === void 0 ? "" : _ref$formTitle,
@@ -2311,21 +2438,23 @@ var BuildForm = function BuildForm(_ref) {
     _ref$hostSpecificData = _ref.hostSpecificData,
     hostSpecificData = _ref$hostSpecificData === void 0 ? {} : _ref$hostSpecificData,
     _ref$showReadOnlySwit = _ref.showReadOnlySwitch,
-    showReadOnlySwitch = _ref$showReadOnlySwit === void 0 ? false : _ref$showReadOnlySwit;
+    showReadOnlySwitch = _ref$showReadOnlySwit === void 0 ? false : _ref$showReadOnlySwit,
+    _ref$usesCustomSubmis = _ref.usesCustomSubmissionComponent,
+    usesCustomSubmissionComponent = _ref$usesCustomSubmis === void 0 ? false : _ref$usesCustomSubmis;
   var queryClient = reactQuery.useQueryClient();
-  var _useReorderQuestions = useFormApi.useReorderQuestions(id, {
+  var _useReorderQuestions = constants.useReorderQuestions(id, {
       onSuccess: utils.showThumbsUpToastr
     }),
     reorderQuestions = _useReorderQuestions.mutate,
     isReordering = _useReorderQuestions.isPending;
-  var _useFetchQuestions = useFormApi.useFetchQuestions({
+  var _useFetchQuestions = constants.useFetchQuestions({
       formId: id,
       language: selectedLanguage
     }),
     data = _useFetchQuestions.data,
     isLoading = _useFetchQuestions.isLoading,
     isQuestionsPending = _useFetchQuestions.isPending;
-  var _ref2 = data || constants.QUESTIONS_INITIAL_VALUE,
+  var _ref2 = data || constants$1.QUESTIONS_INITIAL_VALUE,
     isFormEnabled = _ref2.enabled,
     savedTitle = _ref2.title,
     questions = _ref2.questions,
@@ -2346,7 +2475,7 @@ var BuildForm = function BuildForm(_ref) {
     var setSubmitting = _ref4.setSubmitting;
     var payload = {
       neetoFormQuestions: {
-        questions: constants.buildReorderPayload(questions)
+        questions: constants$1.buildReorderPayload(questions)
       }
     };
     reorderQuestions(payload, {
@@ -2356,10 +2485,10 @@ var BuildForm = function BuildForm(_ref) {
     });
   };
   var onValueChange = function onValueChange(questions) {
-    var _queryClient$getQuery = queryClient.getQueryState([useFormApi.QUERY_KEYS.QUESTIONS, id, selectedLanguage]),
+    var _queryClient$getQuery = queryClient.getQueryState([constants.QUERY_KEYS.QUESTIONS, id, selectedLanguage]),
       dataUpdateCount = _queryClient$getQuery.dataUpdateCount;
     if (dataUpdateCount > 0) {
-      queryClient.setQueryData([useFormApi.QUERY_KEYS.QUESTIONS, "preview/".concat(id), selectedLanguage], ramda.assoc("questions", questions));
+      queryClient.setQueryData([constants.QUERY_KEYS.QUESTIONS, "preview/".concat(id), selectedLanguage], ramda.assoc("questions", questions));
     }
   };
   var isDeletable = isQuestionDeletable !== null && isQuestionDeletable !== void 0 ? isQuestionDeletable : function (question) {
@@ -2367,14 +2496,14 @@ var BuildForm = function BuildForm(_ref) {
   };
   var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref5) {
     var kind = _ref5.kind;
-    return ramda.concat(constants.MANDATORY_KINDS, requiredFields).includes(kind);
+    return ramda.concat(constants$1.MANDATORY_KINDS, requiredFields).includes(kind);
   };
   var isDisabledFieldLabel = function isDisabledFieldLabel(field) {
-    return constants.isImmutableField(field) || (isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : ramda.F)(field);
+    return constants$1.isImmutableField(field) || (isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : ramda.F)(field);
   };
-  var defaultQuestionKinds = allowAdditionalGuests ? constants.QUESTION_KINDS : neetoCist.removeBy({
-    type: constants$1.QUESTION_KIND.ADDITIONAL_GUESTS.value
-  }, constants.QUESTION_KINDS);
+  var defaultQuestionKinds = allowAdditionalGuests ? constants$1.QUESTION_KINDS : neetoCist.removeBy({
+    type: constants$2.QUESTION_KIND.ADDITIONAL_GUESTS.value
+  }, constants$1.QUESTION_KINDS);
   var isUsingDefaultQuestionKinds = ramda.isNil(questionKinds);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: classnames("neeto-form-nano-form-outer-wrapper relative", className),
@@ -2417,7 +2546,8 @@ var BuildForm = function BuildForm(_ref) {
           selectedLanguage: selectedLanguage,
           showActionBlock: showActionBlock,
           showReadOnlySwitch: showReadOnlySwitch,
-          submitButtonProps: submitButtonProps
+          submitButtonProps: submitButtonProps,
+          usesCustomSubmissionComponent: usesCustomSubmissionComponent
         })), {}, {
           formId: id,
           questionKinds: isUsingDefaultQuestionKinds ? defaultQuestionKinds : questionKinds,