@itcase/forms 1.1.55 → 1.1.57

package/dist/itcase-forms.esm.js

@@ -4,40 +4,38 @@ import { setIn, FORM_ERROR, getIn } from 'final-form';
 import { useForm, Field, Form, FormSpy } from 'react-final-form';
 export { Field, useForm, useFormState } from 'react-final-form';
 import clsx from 'clsx';
-import { Checkbox } from '@itcase/ui/components/Checkbox';
+import { Checkbox } from '@itcase/ui-web/components/Checkbox';
 import camelCase from 'lodash/camelCase';
 import snakeCase from 'lodash/snakeCase';
-import { Divider } from '@itcase/ui/components/Divider';
-import { Text } from '@itcase/ui/components/Text';
-import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
-import { useStyles } from '@itcase/ui/hooks/useStyles';
-import { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
-import { Choice } from '@itcase/ui/components/Choice';
-import { Code } from '@itcase/ui/components/Code';
-import { Icon } from '@itcase/ui/components/Icon';
-import { Dadata } from '@itcase/ui/components/Dadata';
-import { DatePickerInput } from '@itcase/ui/components/DatePicker';
-import { useDevicePropsGenerator } from '@itcase/ui/hooks/useDevicePropsGenerator';
+import { Divider } from '@itcase/ui-web/components/Divider';
+import { Text } from '@itcase/ui-web/components/Text';
+import { useDeviceTargetClass, useStyles, useDevicePropsGenerator } from '@itcase/ui-core/hooks';
 import axios from 'axios';
+import createDecorator from 'final-form-focus';
+import { ChipsGroup, Chips } from '@itcase/ui-web/components/Chips';
+import { Choice } from '@itcase/ui-web/components/Choice';
+import { Code } from '@itcase/ui-web/components/Code';
+import { Icon } from '@itcase/ui-web/components/Icon';
+import { Dadata } from '@itcase/ui-web/components/Dadata';
+import { DatePickerInput } from '@itcase/ui-web/components/DatePicker';
 import { fromEvent } from 'file-selector';
 import castArray from 'lodash/castArray';
 import { useDropzone, ErrorCode } from 'react-dropzone';
 import { createFileFromDataURL } from '@itcase/common';
-import { Button } from '@itcase/ui/components/Button';
-import { Loader } from '@itcase/ui/components/Loader';
-import { Title } from '@itcase/ui/components/Title';
-import { Input } from '@itcase/ui/components/Input';
-import { InputNumber } from '@itcase/ui/components/InputNumber';
+import { Button } from '@itcase/ui-web/components/Button';
+import { Loader } from '@itcase/ui-web/components/Loader';
+import { Title } from '@itcase/ui-web/components/Title';
+import { Input } from '@itcase/ui-web/components/Input';
+import { InputNumber } from '@itcase/ui-web/components/InputNumber';
 import { useIMask } from 'react-imask';
-import { InputPassword } from '@itcase/ui/components/InputPassword';
-import { Radio } from '@itcase/ui/components/Radio';
-import { Segmented } from '@itcase/ui/components/Segmented';
-import { Select } from '@itcase/ui/components/Select';
-import { Switch } from '@itcase/ui/components/Switch';
-import { Textarea } from '@itcase/ui/components/Textarea';
-import { Group } from '@itcase/ui/components/Group';
-import { Notification } from '@itcase/ui/components/Notification';
-import createDecorator from 'final-form-focus';
+import { InputPassword } from '@itcase/ui-web/components/InputPassword';
+import { Radio } from '@itcase/ui-web/components/Radio';
+import { Segmented } from '@itcase/ui-web/components/Segmented';
+import { Select } from '@itcase/ui-web/components/Select';
+import { Switch } from '@itcase/ui-web/components/Switch';
+import { Textarea } from '@itcase/ui-web/components/Textarea';
+import { Group } from '@itcase/ui-web/components/Group';
+import { Notification } from '@itcase/ui-web/components/Notification';
 
 var phoneValidation = function phoneValidation(value) {
   if (!value) {
@@ -474,9 +472,9 @@ var defaultFieldSizeXL = Object.assign({
 }, defaultFieldProps);
 
 function FieldWrapperBase(props) {
-  var _React$createElement, _React$createElement2;
   var id = props.id,
     className = props.className,
+    dataTestId = props.dataTestId,
     dataTour = props.dataTour,
     type = props.type,
     label = props.label,
@@ -513,7 +511,7 @@ function FieldWrapperBase(props) {
     showDivider = props.showDivider,
     showMessage = props.showMessage,
     _props$tag = props.tag,
-    Tag = _props$tag === void 0 ? "div" : _props$tag,
+    Tag = _props$tag === void 0 ? 'div' : _props$tag,
     before = props.before,
     after = props.after,
     isDisabled = props.isDisabled,
@@ -523,38 +521,38 @@ function FieldWrapperBase(props) {
     isValidState = props.isValidState,
     children = props.children;
   var formFieldClass = useMemo(function () {
-    return clsx(className, isValidState && "form__item_state_success", isRequired && "form__item_state_required", isDisabled && "form__item_state_disabled", metaActive && "form__item_state_focus", inputValue && "form__item_state_filled", isErrorState && "form__item_state_" + errorKey);
+    return clsx(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && "form__item_state_" + errorKey);
   }, [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
   var fieldClass = useMemo(function () {
     return clsx(fieldClassName, isValidState && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled", isDisabled && fieldClassName + "_state_disabled", isErrorState && fieldClassName + "_state_" + errorKey);
   }, [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
   var sizeClass = useDeviceTargetClass(props, {
-    prefix: "form-field_size_",
-    propsKey: "size"
+    prefix: 'form-field_size_',
+    propsKey: 'size'
   });
   var fillClass = useDeviceTargetClass(props, {
-    prefix: "fill_",
-    propsKey: "fill"
+    prefix: 'fill_',
+    propsKey: 'fill'
   });
   var inputFillClass = useDeviceTargetClass(props, {
-    prefix: "fill_",
-    propsKey: "inputFill"
+    prefix: 'fill_',
+    propsKey: 'inputFill'
   });
   var shapeClass = useDeviceTargetClass(props, {
-    prefix: "form-field_shape_",
-    propsKey: "shape"
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
   });
   var inputShapeClass = useDeviceTargetClass(props, {
-    prefix: "form-field__item-value_shape_",
-    propsKey: "inputShape"
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
   });
   var directionClass = useDeviceTargetClass(props, {
-    prefix: "direction_",
-    propsKey: "direction"
+    prefix: 'direction_',
+    propsKey: 'direction'
   });
   var widthClass = useDeviceTargetClass(props, {
-    prefix: "width_",
-    propsKey: "width"
+    prefix: 'width_',
+    propsKey: 'width'
   });
   var _useStyles = useStyles(props),
     formFieldStyles = _useStyles.styles;
@@ -562,13 +560,13 @@ function FieldWrapperBase(props) {
   var errorTextColor = props[errorKey + "MessageTextColor"];
   var errorTextWeight = props[errorKey + "MessageTextWeight"];
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, "form__item", "form-field", type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
-    "data-testid": inputName + "-field",
+    className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
+    "data-testid": dataTestId,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
-    className: clsx("form-field__label"),
-    "data-testid": inputName + "-field-label",
+    className: clsx('form-field__label'),
+    "data-testid": dataTestId + "Label",
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -578,15 +576,15 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && "\xA0")), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
-    "data-testid": inputName + "-field-desc"
+    "data-testid": dataTestId + "Desc"
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
     textWeight: descTextWeight
   }, desc)), /*#__PURE__*/React.createElement("div", {
-    className: clsx("form-field__content", inputFillClass, inputShapeClass)
+    className: clsx('form-field__content', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React.createElement("div", {
-    className: clsx("form-field__content-inner", fieldClass)
+    className: clsx('form-field__content-inner', fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "form-field__item-divider",
     width: dividerWidth,
@@ -596,16 +594,23 @@ function FieldWrapperBase(props) {
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
     "data-testid": inputName + "-field-message"
-  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, (_React$createElement = {
+  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
     id: inputName + "-error",
     className: "form-field__message-item form-field__message-item_type-error",
-    dataTestId: inputName + "FieldMessageError"
-  }, _React$createElement["dataTestId"] = inputName + "-field-message-error", _React$createElement.size = errorTextSize, _React$createElement.textColor = errorTextColor, _React$createElement.textWeight = errorTextWeight, _React$createElement), errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, (_React$createElement2 = {
+    dataTestId: dataTestId + "MessageError",
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight
+  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: inputName + "FieldMessageHelpText"
-  }, _React$createElement2["dataTestId"] = inputName + "-field-message-help-text", _React$createElement2.size = helpTextSize, _React$createElement2.textColor = isValidState ? helpTextColorSuccess : helpTextColor, _React$createElement2.textWeight = helpTextWeight, _React$createElement2.sizeMobile = helpTextSizeMobile, _React$createElement2), helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
+    dataTestId: dataTestId + "MessageHelpText",
+    size: helpTextSize,
+    textColor: isValidState ? helpTextColorSuccess : helpTextColor,
+    textWeight: helpTextWeight,
+    sizeMobile: helpTextSizeMobile
+  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: inputName + "field-message-help-text",
+    dataTestId: dataTestId + "MessageHelpText",
     size: messageTextSize
   }, "\xA0")), after);
 }
@@ -622,16 +627,150 @@ function FieldWrapper(props) {
   return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
 }
 
+var focusOnError = function focusOnError(formElementsList, errors) {
+  var selectsIds = Object.keys(errors).map(function (fieldName) {
+    if (fieldName === FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return "react-select-id_" + fieldName + "-input";
+  });
+  var errorFieldElement = formElementsList.find(function (element) {
+    if (element.name) {
+      return getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  var errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    var errorElement;
+    try {
+      var fieldName = errorsList[0];
+      if (fieldName === FORM_ERROR) {
+        errorElement = document.querySelector('notification__item_status_error');
+      } else {
+        errorElement = document.querySelector("#" + fieldName + "-error");
+        if (!errorElement) {
+          errorElement = document.querySelector("#id_" + fieldName);
+        }
+      }
+    } catch (err) {
+      console.warn(err);
+    }
+    if (errorElement) {
+      errorElement.scrollIntoView({
+        block: 'center'
+      }); // , behavior: 'smooth'
+    }
+  }
+
+  // The field is covered by the header because header is "sticky",
+  // that's we scroll manually so that the field falls into the center of the visible area
+  if (errorFieldElement) {
+    errorFieldElement.scrollIntoView({
+      block: 'center'
+    });
+  }
+  return null;
+};
+var focusOnErrorDecorator = createDecorator(null, focusOnError);
+var setErrorsMutator = function setErrorsMutator(args, state) {
+  var fieldName = args[0],
+    data = args[1];
+  var submitError = data.submitError;
+  var fieldError = data.error;
+  if (fieldName === 'non_field_errors' || fieldName === FORM_ERROR) {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    state.fields[fieldName].touched = true;
+
+    // TODO: make clear error not by empty string check
+    if (fieldError || fieldError === '') {
+      var _Object$assign;
+      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+
+    // TODO: make clear error not by empty string check
+    if (submitError || submitError === '') {
+      var _Object$assign2;
+      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
+      state.fields[fieldName].submitFailed = true;
+      state.fields[fieldName].submitSucceeded = false;
+      state.fields[fieldName].submitError = submitError;
+      state.formState.submitErrors = submitErrorsState;
+      state.formState.submitFailed = true;
+      state.formState.submitSucceeded = false;
+      state.formState.lastSubmittedValues = state.formState.values;
+    }
+  }
+};
+var sendFormDataToServer = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, data) {
+    var response, _error$response, _error$response2, formErrors, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return axios({
+            url: url,
+            method: 'POST',
+            data: data
+          });
+        case 1:
+          response = _context.v;
+          return _context.a(2, {
+            response: response,
+            success: true
+          });
+        case 2:
+          _context.p = 2;
+          _t = _context.v;
+          formErrors = {};
+          if (typeof ((_error$response = _t.response) == null ? void 0 : _error$response.data) === 'string') {
+            formErrors[FORM_ERROR] = 'Something went wrong';
+          }
+          if (typeof ((_error$response2 = _t.response) == null ? void 0 : _error$response2.data) === 'object') {
+            Object.entries(_t.response.data).forEach(function (_ref2) {
+              var fieldName = _ref2[0],
+                errorsList = _ref2[1];
+              formErrors[fieldName] = errorsList[0];
+            });
+          }
+          return _context.a(2, {
+            error: _t,
+            formErrors: formErrors,
+            success: false
+          });
+      }
+    }, _callee, null, [[0, 2]]);
+  }));
+  return function sendFormDataToServer(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var createDataTestIdField = function createDataTestIdField(fieldname, dataTestId) {
+  var dataTestIdField = dataTestId + fieldname[0].toUpperCase() + fieldname.slice(1) + 'Field';
+  return dataTestIdField;
+};
+
 var FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
-    isDisabled = props.isDisabled,
     classNameGroupItem = props.classNameGroupItem,
     _props$fieldProps = props.fieldProps,
     fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
     _props$inputProps = props.inputProps,
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired,
     onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
@@ -661,35 +800,37 @@ var FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-checkbox",
       inputName: input.name,
       inputValue: input.checked,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
       tag: "label",
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Checkbox, Object.assign({
       type: "checkbox",
       name: input.name,
-      isDisabled: isDisabled,
       autoComplete: "nope",
       checked: input.checked,
       isActive: input.checked,
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -710,7 +851,8 @@ var defaultChipsProps = {
 };
 
 function FormFieldChips(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     emptyMessage = props.emptyMessage,
@@ -773,8 +915,10 @@ function FormFieldChips(props) {
       }
       return emptyOptionsList;
     }, [input.value]);
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-chips",
@@ -823,7 +967,8 @@ var defaultChoiceProps = {
 };
 
 var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     label = props.label,
     messageType = props.messageType,
@@ -846,8 +991,8 @@ var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
     }
   }, [change, onChange]);
   return /*#__PURE__*/React.createElement(Field, {
-    initialValue: initialValue,
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render(_ref) {
     var input = _ref.input,
       meta = _ref.meta;
@@ -859,8 +1004,8 @@ var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
      */
     var activeOption = useMemo(function () {
       var emptyOption = {
-        value: null,
-        label: null
+        label: null,
+        value: null
       };
       if (input.value) {
         var currentOption = options.find(function (option) {
@@ -877,27 +1022,29 @@ var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
+      dataTestId: dataTestIdField,
       label: label,
       messageType: messageType,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
@@ -925,17 +1072,18 @@ var defaultCodeProps = {
 };
 
 var FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     label = props.label,
     messageType = props.messageType,
-    isDisabled = props.isDisabled,
     classNameGroupItem = props.classNameGroupItem,
     _props$fieldProps = props.fieldProps,
     fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
     _props$inputProps = props.inputProps,
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -957,32 +1105,34 @@ var FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
+      dataTestId: dataTestIdField,
       label: label,
       messageType: messageType,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
       showMessage: showMessage,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
       name: input.name,
       initialValue: input.value,
-      isDisabled: isDisabled,
       autoComplete: "nope",
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -991,24 +1141,25 @@ var FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
 });
 
 var FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
-  var Component = props.Component,
-    isDisabled = props.isDisabled,
-    isRequired = props.isRequired,
+  var dataTestId = props.dataTestId,
     name = props.name,
     initialValue = props.initialValue,
-    _props$fieldProps = props.fieldProps,
-    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
     classNameGroupItem = props.classNameGroupItem,
-    showMessage = props.showMessage,
     clearIcon = props.clearIcon,
     clearIconFill = props.clearIconFill,
     clearIconFillHover = props.clearIconFillHover,
     clearIconShape = props.clearIconShape,
     clearIconSize = props.clearIconSize,
+    Component = props.Component,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
     onClickClearIcon = props.onClickClearIcon;
   return /*#__PURE__*/React.createElement(Field, {
-    initialValue: initialValue,
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render(_ref) {
     var input = _ref.input,
       meta = _ref.meta;
@@ -1024,40 +1175,42 @@ var FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
         input: input,
         meta: meta
       }),
-      isErrorState = _useFieldValidationSt.isErrorState,
-      isValidState = _useFieldValidationSt.isValidState,
       errorKey = _useFieldValidationSt.errorKey,
-      errorMessage = _useFieldValidationSt.errorMessage;
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
       // For "Custom" field we pass all props. Can contain some special props, we don't known.
-      inputProps: props
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_custom', 'form__item_custom', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-custom',
       inputName: input.name,
       inputValue: input.value,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
       isDisabled: isDisabled,
       isErrorState: isErrorState,
       isRequired: isRequired,
-      isValidState: isValidState,
-      metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, updatedInputProps, {
       input: input,
-      isDisabled: isDisabled,
-      meta: meta
+      meta: meta,
+      isDisabled: isDisabled
     })), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
+      size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
       imageSrc: clearIcon,
       shape: clearIconShape,
-      size: clearIconSize,
       SvgImage: clearIcon,
       onClick: onClickClearIcon
     }));
@@ -1076,15 +1229,16 @@ var defaultDadataInputProps = {
 };
 
 var FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
-    isDisabled = props.isDisabled,
     classNameGroupItem = props.classNameGroupItem,
     fieldProps = props.fieldProps,
     inputProps = props.inputProps,
     parse = props.parse,
     showMessage = props.showMessage,
     token = props.token,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired,
     onDadataAutocomplete = props.onDadataAutocomplete;
   if (process.env.NODE_ENV === 'development') {
@@ -1119,25 +1273,27 @@ var FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input-dadata', 'form__item_input-dadata', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-dadata",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Dadata
@@ -1150,8 +1306,8 @@ var FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput
       input: input,
       inputProps: updatedInputProps,
       meta: meta,
-      setValue: onDadataAutocomplete,
-      token: token
+      token: token,
+      setValue: onDadataAutocomplete
     }));
   });
 });
@@ -1170,8 +1326,8 @@ var defaultDatepickerProps = {
 };
 
 function FormFieldDatePicker(props) {
-  var name = props.name,
-    isDisabled = props.isDisabled,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     classNameGroupItem = props.classNameGroupItem,
     datePickerProps = props.datePickerProps,
     _props$fieldProps = props.fieldProps,
@@ -1179,6 +1335,7 @@ function FormFieldDatePicker(props) {
     _props$inputProps = props.inputProps,
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired,
     onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
@@ -1216,34 +1373,36 @@ function FormFieldDatePicker(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-datepicker",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
       name: input.name,
-      isDisabled: isDisabled,
       datePickerProps: datePickerProps,
       endValue: datePickerProps.selectsRange ? input.value.endDate : null,
       inputProps: updatedInputProps,
       value: datePickerProps.selectsRange ? input.value.startDate : input.value,
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -1717,23 +1876,24 @@ function setFileDataURL(file, resolve) {
 
 var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(props) {
   var className = props.className,
+    dataTestId = props.dataTestId,
     name = props.name,
     width = props.width,
     maxFiles = props.maxFiles,
     maxSize = props.maxSize,
     label = props.label,
-    fileErrorText = props.fileErrorText,
     classNameGroupItem = props.classNameGroupItem,
     dropzoneProps = props.dropzoneProps,
     fieldProps = props.fieldProps,
+    fileErrorText = props.fileErrorText,
     hintDescription = props.hintDescription,
     hintTitle = props.hintTitle,
     showFilename = props.showFilename,
     showMessage = props.showMessage,
     isPreviews = props.isPreviews,
     isRequired = props.isRequired,
-    onAddFiles = props.onAddFiles,
     onClickPreview = props.onClickPreview,
+    onAddFiles = props.onAddFiles,
     onDeleteFile = props.onDeleteFile;
   var propsGenerator = useDevicePropsGenerator(props);
   var size = propsGenerator.size,
@@ -1796,25 +1956,27 @@ var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(pro
       inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
 
     /** TODO:
      * REFACTOR PROPERTIES
      */
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+      dataTestId: dataTestIdField,
       width: width,
       label: label,
       labelTextColor: labelTextColor,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
       fieldClassName: "form-dropzone",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       metaTouched: meta.touched,
       showMessage: showMessage,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
@@ -1828,12 +1990,11 @@ var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(pro
       borderColorHover: borderColorHover,
       borderType: borderType,
       borderWidth: borderWidth,
+      dropzoneProps: dropzoneProps,
       errorMessageTextColor: errorMessageTextColor,
       errorMessageTextSize: errorMessageTextSize,
       errorMessageWeight: errorMessageTextWeight,
       fileErrorText: fileErrorText,
-      metaError: meta.error,
-      dropzoneProps: dropzoneProps,
       hintDescription: hintDescription,
       hintDescriptionTextColor: hintDescriptionTextColor,
       hintDescriptionTextSize: hintDescriptionTextSize,
@@ -1846,6 +2007,7 @@ var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(pro
       hintTitleTextWrap: hintTitleTextWrap,
       inputName: input.name,
       inputValue: input.value,
+      metaError: meta.error,
       metaTouched: meta.touched,
       removeThumbAppearance: removeThumbAppearance,
       removeThumbShape: removeThumbShape,
@@ -1864,8 +2026,8 @@ var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(pro
       thumbNameTextWeight: thumbNameTextWeight,
       thumbNameTextWrap: thumbNameTextWrap,
       isPreviews: isPreviews,
-      onAddFiles: onAddFiles,
       onClickPreview: onClickPreview,
+      onAddFiles: onAddFiles,
       onDeleteFile: onDeleteFile
     }));
   });
@@ -1884,8 +2046,9 @@ var defaultGroupProps = {
 };
 
 var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
-  var dataTour = props.dataTour,
-    className = props.className,
+  var className = props.className,
+    dataTestId = props.dataTestId,
+    dataTour = props.dataTour,
     name = props.name,
     title = props.title,
     titleTextColor = props.titleTextColor,
@@ -1909,6 +2072,7 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
   // @ts-expect-error
   var _useStyles = useStyles(props),
     styles = _useStyles.styles;
+  var dataTestIdField = createDataTestIdField(name, dataTestId);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render(_ref) {
@@ -1935,7 +2099,7 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: clsx('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
-      "data-test-id": name + "Group",
+      "data-test-id": dataTestIdField,
       "data-tour": dataTour,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
@@ -1943,32 +2107,32 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     }, before, title && /*#__PURE__*/React.createElement("div", {
       className: "form__group-title"
     }, /*#__PURE__*/React.createElement(Title, {
+      dataTestId: dataTestIdField + "Title",
       size: titleTextSize,
       textColor: titleTextColor,
-      textWeight: titleTextWeight,
-      dataTestId: name + "GroupTitle"
+      textWeight: titleTextWeight
     }, title)), label && /*#__PURE__*/React.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React.createElement(Text, {
+      dataTestId: dataTestIdField + "Label",
       size: labelTextSize,
       textColor: labelTextColor,
-      textWeight: labelTextWeight,
-      dataTestId: name + "GroupLabel"
+      textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
     }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
       id: name + "-error",
       className: "form__group-message form__group-message_type-" + errorKey,
+      dataTestId: dataTestIdField + "MessageError",
       size: updatedProps.messageTextSize,
       textColor: updatedProps.messageTextColor,
-      textWeight: updatedProps.messageTextWeight,
-      dataTestId: name + "GroupMessageError"
+      textWeight: updatedProps.messageTextWeight
     }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
+      dataTestId: name + "GroupMessage",
       size: messageTextSize,
       textColor: messageTextColor,
-      textWeight: messageTextWeight,
-      dataTestId: name + "GroupMessage"
+      textWeight: messageTextWeight
     }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize
@@ -1989,7 +2153,8 @@ var defaultInputProps = {
 };
 
 var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     clearIcon = props.clearIcon,
@@ -2041,13 +2206,15 @@ var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx("form-field_input", "form__item_input", classNameGroupItem),
+      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-input",
       inputName: input.name,
-      inputValue: input.value || "",
+      inputValue: input.value || '',
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -2056,36 +2223,44 @@ var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      className: clsx(meta.active && "input_state_focus", meta.error && meta.touched && "input_state_" + errorKey),
-      dataTestId: input.name + "-field-input",
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
+      dataTestId: dataTestIdField + "Input",
       type: "text",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || "",
+      value: input.value || '',
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
     }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
+      dataTestId: dataTestIdField + "InputIcon",
       size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
-      imageSrc: typeof clearIcon === "string" && clearIcon,
+      imageSrc: typeof clearIcon === 'string' && clearIcon,
       shape: clearIconShape,
-      SvgImage: typeof clearIcon !== "string" && clearIcon,
+      SvgImage: typeof clearIcon !== 'string' && clearIcon,
       onClick: onClickClearIcon
     }));
   });
 });
 
 var defaultInputNumberProps = {
-  appearance: 'surfaceSecondary sizeM solid rounded',
-  width: 'fill'
+  appearance: 'defaultPrimary sizeM solid rounded',
+  width: 'fill',
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded'
 };
 
 var FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber(props) {
-  var _props$type = props.type,
+  var dataTestId = props.dataTestId,
+    _props$type = props.type,
     type = _props$type === void 0 ? 'custom' : _props$type,
     name = props.name,
     initialValue = props.initialValue,
@@ -2124,8 +2299,10 @@ var FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input-number', 'form__item_input-number', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-input-number",
@@ -2140,7 +2317,7 @@ var FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(InputNumber, Object.assign({
       className: clsx(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error && "input_state_" + errorKey),
-      dataTestId: input.name + "FieldInputNumber",
+      dataTestId: dataTestIdField + "InputNumber",
       type: type,
       name: input.name,
       value: input.value || 0,
@@ -2150,7 +2327,8 @@ var FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber
 });
 
 var FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     clearIcon = props.clearIcon,
@@ -2212,8 +2390,10 @@ var FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-maskedInput',
@@ -2257,7 +2437,8 @@ var defaultPasswordProps = {
 };
 
 var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     fieldProps = props.fieldProps,
@@ -2301,13 +2482,15 @@ var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx("form-field_input-password", "form__item_input-password", classNameGroupItem),
+      className: clsx('form-field_input-password', 'form__item_input-password', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-password",
       inputName: input.name,
-      inputValue: input.value || "",
+      inputValue: input.value || '',
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -2316,11 +2499,11 @@ var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(InputPassword, Object.assign({
-      className: clsx(meta.active && "input-password_state_focus", meta.error && meta.touched && "input-password_state_" + errorKey),
-      dataTestId: input.name + "-field-input-password",
+      className: clsx(meta.active && 'input-password_state_focus', meta.error && meta.touched && "input-password_state_" + errorKey),
+      dataTestId: dataTestIdField + "InputPassword",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || "",
+      value: input.value || '',
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
@@ -2372,8 +2555,9 @@ function FormFieldRadioGroupList(props) {
 }
 
 var FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(props) {
-  var name = props.name,
-    isDisabled = props.isDisabled,
+  var dataTestId = props.dataTestId,
+    name = props.name,
+    classNameGroupItem = props.classNameGroupItem,
     _props$editableProps = props.editableProps,
     editableProps = _props$editableProps === void 0 ? {} : _props$editableProps,
     _props$fieldProps = props.fieldProps,
@@ -2382,8 +2566,8 @@ var FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(p
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
-    classNameGroupItem = props.classNameGroupItem,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired,
     onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
@@ -2411,26 +2595,28 @@ var FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(p
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_radio', 'form__item_radio', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: 'form-radio',
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(FormFieldRadioGroupList, {
-      isDisabled: isDisabled,
       editableProps: editableProps,
       input: input,
       inputProps: updatedInputProps,
       options: options,
+      isDisabled: isDisabled,
       onChange: onChange
     }));
   });
@@ -2447,12 +2633,13 @@ var defaultSegmentedProps = {
 };
 
 function FormFieldSegmented(props) {
-  var name = props.name,
-    isDisabled = props.isDisabled,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     fieldProps = props.fieldProps,
     inputProps = props.inputProps,
     options = props.options,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired;
   var _useForm = useForm(),
     change = _useForm.change;
@@ -2491,31 +2678,33 @@ function FormFieldSegmented(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_segmented', 'form__item_segmented'),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-segmented",
       inputName: input.name,
       inputValue: input.value || [],
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
-      isDisabled: isDisabled,
       activeSegment: activeOption,
       segments: options,
+      isDisabled: isDisabled,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -2551,17 +2740,18 @@ function getDefaultValue(options, selectValue) {
   return result;
 }
 var FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props) {
-  var isDisabled = props.isDisabled,
-    isRequired = props.isRequired,
+  var dataTestId = props.dataTestId,
+    name = props.name,
+    initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     fieldProps = props.fieldProps,
-    initialValue = props.initialValue,
-    name = props.name,
     _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
     selectProps = props.selectProps,
     selectRef = props.selectRef,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
     onChange = props.onChange,
     onInputChange = props.onInputChange;
   return /*#__PURE__*/React.createElement(Field, {
@@ -2613,34 +2803,36 @@ var FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: 'form-select',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
       className: "form-select-item",
       ref: selectRef,
-      isDisabled: isDisabled,
       instanceId: "id_" + input.name,
       options: options,
       value: selectedOptions,
+      isDisabled: isDisabled,
       onChange: onChangeValue,
       onInputChange: onInputChange
     }, updatedSelectProps)));
@@ -2655,14 +2847,15 @@ var defaultSwitchProps = {
 };
 
 var FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
-  var name = props.name,
-    isDisabled = props.isDisabled,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     classNameGroupItem = props.classNameGroupItem,
     _props$fieldProps = props.fieldProps,
     fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
     _props$inputProps = props.inputProps,
     inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isRequired = props.isRequired,
     onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
@@ -2691,34 +2884,36 @@ var FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
       }),
       errorKey = _useFieldValidationSt.errorKey,
       errorMessage = _useFieldValidationSt.errorMessage,
-      isErrorState = _useFieldValidationSt.isErrorState,
       successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
       isValidState = _useFieldValidationSt.isValidState;
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-switch",
       inputName: input.name,
       inputValue: input.checked,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
       tag: "label",
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
       type: "checkbox",
       name: input.name,
-      isDisabled: isDisabled,
       autoComplete: "nope",
       isActive: input.checked,
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -2738,7 +2933,8 @@ var defaultTextareaProps = {
 };
 
 var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     classNameGroupItem = props.classNameGroupItem,
     _props$fieldProps = props.fieldProps,
     fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
@@ -2773,11 +2969,13 @@ var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx("form-field_textarea", "form__item_textarea", classNameGroupItem),
+      className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
-      fieldClassName: "form-textarea",
+      fieldClassName: 'form-textarea',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
@@ -2788,11 +2986,11 @@ var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
-      className: clsx(meta.active && "textarea_state_focus", meta.error && meta.touched && "textarea_state_" + errorKey),
-      dataTestId: input.name + "-field-textarea",
+      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && "textarea_state_" + errorKey),
+      dataTestId: dataTestIdField + "Textarea",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || "",
+      value: input.value || '',
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: input.onChange,
@@ -2822,115 +3020,151 @@ var formTypes = {
   select: 'select',
   "switch": 'switch'
 };
-function generateField(field, config, props) {
+function generateField(field, config, dataTestId) {
   switch (field.type) {
     case formTypes.password:
       {
         return /*#__PURE__*/React.createElement(FormFieldPassword, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React.createElement(FormFieldCheckbox, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.choice:
       {
         return /*#__PURE__*/React.createElement(FormFieldChoice, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.code:
       {
         return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.chips:
       {
         return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React.createElement(FormFieldSwitch, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.segmented:
       {
         return /*#__PURE__*/React.createElement(FormFieldSegmented, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.datePicker:
       {
         return /*#__PURE__*/React.createElement(FormFieldDatePicker, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.fileInput:
       {
         return /*#__PURE__*/React.createElement(FormFieldFileInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.radioGroup:
       {
         return /*#__PURE__*/React.createElement(FormFieldRadioGroup, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.select:
       {
         return /*#__PURE__*/React.createElement(FormFieldSelect, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.text:
       {
         return /*#__PURE__*/React.createElement(FormFieldInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React.createElement(FormFieldTextarea, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.maskedInput:
       {
         return /*#__PURE__*/React.createElement(FormFieldMaskedInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.custom:
       {
         return /*#__PURE__*/React.createElement(FormFieldCustom, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.dadataInput:
       {
         return /*#__PURE__*/React.createElement(FormFieldDadataInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.inputNumber:
       {
         return /*#__PURE__*/React.createElement(FormFieldInputNumber, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.group:
       {
         return /*#__PURE__*/React.createElement(FormBlockGroup, Object.assign({
           key: config.key
-        }, field, props), Object.entries(field.group).map(function (_ref) {
+        }, field, {
+          dataTestId: dataTestId
+        }), Object.entries(field.group).map(function (_ref) {
           var key = _ref[0],
             value = _ref[1];
           var groupProps = Object.assign({}, value, {
@@ -2939,147 +3173,17 @@ function generateField(field, config, props) {
           });
           return generateField(groupProps, {
             key: key + '_form_group'
-          }, props);
+          }, dataTestId);
         }));
       }
   }
 }
 
-var focusOnError = function focusOnError(formElementsList, errors) {
-  var selectsIds = Object.keys(errors).map(function (fieldName) {
-    if (fieldName === FORM_ERROR) {
-      // TODO: get from somewhere
-      return 'notification__item_status_error';
-    }
-    return "react-select-id_" + fieldName + "-input";
-  });
-  var errorFieldElement = formElementsList.find(function (element) {
-    if (element.name) {
-      return getIn(errors, element.name);
-    } else {
-      return selectsIds.includes(element.id);
-    }
-  });
-  var errorsList = Object.keys(errors);
-  if (!errorFieldElement && errorsList.length) {
-    var errorElement;
-    try {
-      var fieldName = errorsList[0];
-      if (fieldName === FORM_ERROR) {
-        errorElement = document.querySelector('notification__item_status_error');
-      } else {
-        errorElement = document.querySelector("#" + fieldName + "-error");
-        if (!errorElement) {
-          errorElement = document.querySelector("#id_" + fieldName);
-        }
-      }
-    } catch (err) {
-      console.warn(err);
-    }
-    if (errorElement) {
-      errorElement.scrollIntoView({
-        block: 'center'
-      }); // , behavior: 'smooth'
-    }
-  }
-
-  // The field is covered by the header because header is "sticky",
-  // that's we scroll manually so that the field falls into the center of the visible area
-  if (errorFieldElement) {
-    errorFieldElement.scrollIntoView({
-      block: 'center'
-    });
-  }
-  return null;
-};
-var focusOnErrorDecorator = createDecorator(null, focusOnError);
-var setErrorsMutator = function setErrorsMutator(args, state) {
-  var fieldName = args[0],
-    data = args[1];
-  var submitError = data.submitError;
-  var fieldError = data.error;
-  if (fieldName === 'non_field_errors' || fieldName === FORM_ERROR) {
-    // state.formState.invalid = true
-    // state.formState.valid = false
-    state.formState.error = fieldError;
-    state.formState.submitError = submitError;
-  } else if (fieldName in state.fields) {
-    state.fields[fieldName].touched = true;
-
-    // TODO: make clear error not by empty string check
-    if (fieldError || fieldError === '') {
-      var _Object$assign;
-      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
-      state.fields[fieldName].error = fieldError;
-      state.formState.errors = errorsState;
-    }
-
-    // TODO: make clear error not by empty string check
-    if (submitError || submitError === '') {
-      var _Object$assign2;
-      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
-      state.fields[fieldName].submitFailed = true;
-      state.fields[fieldName].submitSucceeded = false;
-      state.fields[fieldName].submitError = submitError;
-      state.formState.submitErrors = submitErrorsState;
-      state.formState.submitFailed = true;
-      state.formState.submitSucceeded = false;
-      state.formState.lastSubmittedValues = state.formState.values;
-    }
-  }
-};
-var sendFormDataToServer = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, data) {
-    var response, _error$response, _error$response2, formErrors, _t;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.p = _context.n) {
-        case 0:
-          _context.p = 0;
-          _context.n = 1;
-          return axios({
-            url: url,
-            method: 'POST',
-            data: data
-          });
-        case 1:
-          response = _context.v;
-          return _context.a(2, {
-            success: true,
-            response: response
-          });
-        case 2:
-          _context.p = 2;
-          _t = _context.v;
-          formErrors = {};
-          if (typeof ((_error$response = _t.response) == null ? void 0 : _error$response.data) === 'string') {
-            formErrors[FORM_ERROR] = 'Something went wrong';
-          }
-          if (typeof ((_error$response2 = _t.response) == null ? void 0 : _error$response2.data) === 'object') {
-            Object.entries(_t.response.data).forEach(function (_ref2) {
-              var fieldName = _ref2[0],
-                errorsList = _ref2[1];
-              formErrors[fieldName] = errorsList[0];
-            });
-          }
-          return _context.a(2, {
-            error: _t,
-            success: false,
-            formErrors: formErrors
-          });
-      }
-    }, _callee, null, [[0, 2]]);
-  }));
-  return function sendFormDataToServer(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
 var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   var className = props.className,
     dataTestId = props.dataTestId,
     dataTour = props.dataTour,
     type = props.type,
-    name = props.name,
     initialValues = props.initialValues,
     initialValuesEqual = props.initialValuesEqual,
     config = props.config,
@@ -3094,11 +3198,10 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     descSize = props.descSize,
     descTextColor = props.descTextColor,
     descTextWeight = props.descTextWeight,
-    buttonGap = props.buttonGap,
-    _props$additionalProp = props.additionalProps,
-    additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
-    _props$buttonDirectio = props.buttonDirection,
-    buttonDirection = _props$buttonDirectio === void 0 ? "vertical" : _props$buttonDirectio,
+    buttonGap = props.buttonGap;
+    props.additionalProps;
+    var _props$buttonDirectio = props.buttonDirection,
+    buttonDirection = _props$buttonDirectio === void 0 ? 'vertical' : _props$buttonDirectio,
     buttonFill = props.buttonFill,
     buttonJustifyContent = props.buttonJustifyContent,
     buttonPadding = props.buttonPadding,
@@ -3114,22 +3217,21 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     _props$disableFieldsA = props.disableFieldsAutoComplete,
     disableFieldsAutoComplete = _props$disableFieldsA === void 0 ? false : _props$disableFieldsA,
     fieldsGap = props.fieldsGap,
-    formName = props.formName,
     groupGap = props.groupGap,
     heightClass = props.heightClass,
     language = props.language,
     loader = props.loader,
     loaderAppearance = props.loaderAppearance,
     _props$loaderFill = props.loaderFill,
-    loaderFill = _props$loaderFill === void 0 ? "surfacePrimary" : _props$loaderFill,
+    loaderFill = _props$loaderFill === void 0 ? 'surfacePrimary' : _props$loaderFill,
     _props$loaderItemFill = props.loaderItemFill,
-    loaderItemFill = _props$loaderItemFill === void 0 ? "accentItemSecondary" : _props$loaderItemFill,
+    loaderItemFill = _props$loaderItemFill === void 0 ? 'accentItemSecondary' : _props$loaderItemFill,
     loaderShape = props.loaderShape,
     _props$loaderSize = props.loaderSize,
-    loaderSize = _props$loaderSize === void 0 ? "l" : _props$loaderSize,
+    loaderSize = _props$loaderSize === void 0 ? 'l' : _props$loaderSize,
     loaderText = props.loaderText,
     _props$loaderType = props.loaderType,
-    loaderType = _props$loaderType === void 0 ? "dot" : _props$loaderType,
+    loaderType = _props$loaderType === void 0 ? 'dot' : _props$loaderType,
     mutators = props.mutators,
     notificationCloseButton = props.notificationCloseButton,
     notificationType = props.notificationType,
@@ -3163,6 +3265,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     secondaryButtonSize = props.secondaryButtonSize,
     shapeStrengthClass = props.shapeStrengthClass,
     tertiaryButton = props.tertiaryButton,
+    tertiaryButtonAppearance = props.tertiaryButtonAppearance,
     tertiaryButtonFill = props.tertiaryButtonFill,
     tertiaryButtonFillHover = props.tertiaryButtonFillHover,
     tertiaryButtonLabel = props.tertiaryButtonLabel,
@@ -3201,19 +3304,18 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
         submitError = _ref.submitError;
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, "form", type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
-        name: formName || "form"
+        className: clsx(className, 'form', type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass)
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
         ref: function ref() {
           return onRefFormInstance(form);
         },
-        autoCapitalize: disableFieldsAutoComplete ? "off" : undefined,
-        autoComplete: disableFieldsAutoComplete ? "off" : undefined,
-        autoCorrect: disableFieldsAutoComplete ? "off" : undefined,
-        "data-testid": dataTestId || name,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
+        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        "data-testid": dataTestId || 'Form',
         "data-tour": dataTour,
-        spellCheck: disableFieldsAutoComplete ? "false" : undefined,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
       }, before, title && /*#__PURE__*/React.createElement(Title, {
@@ -3221,14 +3323,16 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         size: titleTextSize,
         fill: titleFill,
         textColor: titleTextColor,
-        textWeight: titleTextWeight
+        textWeight: titleTextWeight,
+        "data-testid": dataTestId ? dataTestId + "Title" : 'FormTitle'
       }, title), desc && /*#__PURE__*/React.createElement(Text, {
         className: "form__desc",
         size: descSize,
         textColor: descTextColor,
-        textWeight: descTextWeight
+        textWeight: descTextWeight,
+        "data-testid": dataTestId ? dataTestId + "Desc" : 'FormDesc'
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
-        className: clsx("notification", "form-notification", notificationType ? "form-notification_" + notificationType : "form-notification_global")
+        className: clsx('notification', 'form-notification', notificationType ? "form-notification_" + notificationType : 'form-notification_global')
       }, /*#__PURE__*/React.createElement(Notification, {
         appearance: "errorPrimary sizeM solid rounded",
         type: "global",
@@ -3248,7 +3352,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, Object.keys(config).map(function (key) {
         return generateField(config[key], {
           key: key
-        }, additionalProps[config[key].name]);
+        }, dataTestId);
       }), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
         appearance: loaderAppearance,
         className: "form__loader",
@@ -3256,11 +3360,12 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         size: loaderSize,
         fill: loaderFill,
         text: loaderText,
+        "data-testid": dataTestId + "Loader",
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group, {
         className: "form__button",
-        dataTestId: dataTestIdButtons,
+        dataTestId: dataTestIdButtons || dataTestId + "Buttons",
         dataTour: dataTourButtons,
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
@@ -3270,7 +3375,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: primaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : "form-primary"),
+        dataTestId: dataTestIdPrimaryButton || dataTestId && dataTestId + "PrimaryButton" || 'FormPrimaryButton',
         dataTour: dataTourPrimaryButton,
         width: "fill",
         size: primaryButtonSize,
@@ -3280,13 +3385,13 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        htmlType: primaryButtonHtmlType || "submit",
+        htmlType: primaryButtonHtmlType || 'submit',
         loading: primaryButtonIsLoading,
         isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: secondaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : "form-secondary"),
+        dataTestId: dataTestIdSecondaryButton || dataTestId && dataTestId + "SecondaryButton" || 'FormSecondaryButton',
         dataTour: dataTourSecondaryButton,
         width: "fill",
         size: secondaryButtonSize,
@@ -3301,8 +3406,9 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        appearance: tertiaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton || dataTestId && dataTestId + "TertiaryButton" || 'FormTertiaryButton',
         dataTour: dataTourTertiaryButton,
         width: "fill",
         size: tertiaryButtonSize,
@@ -3328,7 +3434,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   });
 });
 FinalForm.defaultProps = {
-  direction: "vertical"
+  direction: 'vertical'
 };
 
 var DEFAULT_MESSAGES_REQUIRED = {
@@ -3571,4 +3677,4 @@ var getErrorsForFinalForm = function getErrorsForFinalForm(error) {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDadataInput, FormFieldDatePicker, FormFieldFileInput, FormFieldInput, FormFieldInputNumber, FormFieldMaskedInput, FormFieldPassword, FormFieldRadioGroup, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDadataInputProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputNumberProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDadataInput, FormFieldDatePicker, FormFieldFileInput, FormFieldInput, FormFieldInputNumber, FormFieldMaskedInput, FormFieldPassword, FormFieldRadioGroup, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, addRequiredFieldsParamToSchema, createDataTestIdField, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDadataInputProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputNumberProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };