@itcase/forms 1.1.54 → 1.1.56

package/dist/itcase-forms.cjs.js

@@ -5,40 +5,38 @@ var React = require('react');
 var finalForm = require('final-form');
 var reactFinalForm = require('react-final-form');
 var clsx = require('clsx');
-var Checkbox = require('@itcase/ui/components/Checkbox');
+var Checkbox = require('@itcase/ui-web/components/Checkbox');
 var camelCase = require('lodash/camelCase');
 var snakeCase = require('lodash/snakeCase');
-var Divider = require('@itcase/ui/components/Divider');
-var Text = require('@itcase/ui/components/Text');
-var useDeviceTargetClass = require('@itcase/ui/hooks/useDeviceTargetClass');
-var useStyles = require('@itcase/ui/hooks/useStyles');
-var Chips = require('@itcase/ui/components/Chips');
-var Choice = require('@itcase/ui/components/Choice');
-var Code = require('@itcase/ui/components/Code');
-var Icon = require('@itcase/ui/components/Icon');
-var Dadata = require('@itcase/ui/components/Dadata');
-var DatePicker = require('@itcase/ui/components/DatePicker');
-var useDevicePropsGenerator = require('@itcase/ui/hooks/useDevicePropsGenerator');
+var Divider = require('@itcase/ui-web/components/Divider');
+var Text = require('@itcase/ui-web/components/Text');
+var hooks = require('@itcase/ui-core/hooks');
 var axios = require('axios');
+var createDecorator = require('final-form-focus');
+var Chips = require('@itcase/ui-web/components/Chips');
+var Choice = require('@itcase/ui-web/components/Choice');
+var Code = require('@itcase/ui-web/components/Code');
+var Icon = require('@itcase/ui-web/components/Icon');
+var Dadata = require('@itcase/ui-web/components/Dadata');
+var DatePicker = require('@itcase/ui-web/components/DatePicker');
 var fileSelector = require('file-selector');
 var castArray = require('lodash/castArray');
 var reactDropzone = require('react-dropzone');
 var common = require('@itcase/common');
-var Button = require('@itcase/ui/components/Button');
-var Loader = require('@itcase/ui/components/Loader');
-var Title = require('@itcase/ui/components/Title');
-var Input = require('@itcase/ui/components/Input');
-var InputNumber = require('@itcase/ui/components/InputNumber');
+var Button = require('@itcase/ui-web/components/Button');
+var Loader = require('@itcase/ui-web/components/Loader');
+var Title = require('@itcase/ui-web/components/Title');
+var Input = require('@itcase/ui-web/components/Input');
+var InputNumber = require('@itcase/ui-web/components/InputNumber');
 var reactImask = require('react-imask');
-var InputPassword = require('@itcase/ui/components/InputPassword');
-var Radio = require('@itcase/ui/components/Radio');
-var Segmented = require('@itcase/ui/components/Segmented');
-var Select = require('@itcase/ui/components/Select');
-var Switch = require('@itcase/ui/components/Switch');
-var Textarea = require('@itcase/ui/components/Textarea');
-var Group = require('@itcase/ui/components/Group');
-var Notification = require('@itcase/ui/components/Notification');
-var createDecorator = require('final-form-focus');
+var InputPassword = require('@itcase/ui-web/components/InputPassword');
+var Radio = require('@itcase/ui-web/components/Radio');
+var Segmented = require('@itcase/ui-web/components/Segmented');
+var Select = require('@itcase/ui-web/components/Select');
+var Switch = require('@itcase/ui-web/components/Switch');
+var Textarea = require('@itcase/ui-web/components/Textarea');
+var Group = require('@itcase/ui-web/components/Group');
+var Notification = require('@itcase/ui-web/components/Notification');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -47,8 +45,8 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
-var castArray__default = /*#__PURE__*/_interopDefault(castArray);
 var createDecorator__default = /*#__PURE__*/_interopDefault(createDecorator);
+var castArray__default = /*#__PURE__*/_interopDefault(castArray);
 
 var phoneValidation = function phoneValidation(value) {
   if (!value) {
@@ -445,8 +443,8 @@ var defaultFieldProps = {
   direction: 'vertical',
   labelTextColor: 'surfaceTextPrimary',
   messageTextColor: 'surfaceTextSecondary',
-  errorMessageTextColor: 'errorTextSecondary',
   dividerFill: 'errorPrimary',
+  errorMessageTextColor: 'errorTextSecondary',
   helpTextColor: 'surfaceTextQuaternary',
   requiredMessageTextColor: 'warningTextSecondary',
   showMessage: true
@@ -487,6 +485,7 @@ var defaultFieldSizeXL = Object.assign({
 function FieldWrapperBase(props) {
   var id = props.id,
     className = props.className,
+    dataTestId = props.dataTestId,
     dataTour = props.dataTour,
     type = props.type,
     label = props.label,
@@ -538,47 +537,47 @@ function FieldWrapperBase(props) {
   var fieldClass = React.useMemo(function () {
     return clsx__default.default(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.useDeviceTargetClass(props, {
+  var sizeClass = hooks.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var fillClass = hooks.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var inputFillClass = hooks.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var shapeClass = hooks.useDeviceTargetClass(props, {
     prefix: 'form-field_shape_',
     propsKey: 'shape'
   });
-  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var inputShapeClass = hooks.useDeviceTargetClass(props, {
     prefix: 'form-field__item-value_shape_',
     propsKey: 'inputShape'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var directionClass = hooks.useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var widthClass = hooks.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
+  var _useStyles = hooks.useStyles(props),
     formFieldStyles = _useStyles.styles;
   var errorTextSize = props[errorKey + "MessageTextSize"];
   var errorTextColor = props[errorKey + "MessageTextColor"];
   var errorTextWeight = props[errorKey + "MessageTextWeight"];
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(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",
+    "data-testid": dataTestId,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__label'),
-    "data-testid": inputName + "-field-label",
+    "data-testid": dataTestId + "Label",
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
@@ -588,7 +587,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && "\xA0")), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
-    "data-testid": inputName + "-field-desc"
+    "data-testid": dataTestId + "Desc"
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -609,20 +608,20 @@ function FieldWrapperBase(props) {
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: inputName + "-error",
     className: "form-field__message-item form-field__message-item_type-error",
-    dataTestId: inputName + "-field-message-error",
+    dataTestId: dataTestId + "MessageError",
     size: errorTextSize,
     textColor: errorTextColor,
     textWeight: errorTextWeight
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: inputName + "-field-message-help-text",
+    dataTestId: dataTestId + "MessageHelpText",
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
     sizeMobile: helpTextSizeMobile
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.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);
 }
@@ -639,16 +638,150 @@ function FieldWrapper(props) {
   return /*#__PURE__*/React__default.default.createElement(FieldWrapperBase, props);
 }
 
+var focusOnError = function focusOnError(formElementsList, errors) {
+  var selectsIds = Object.keys(errors).map(function (fieldName) {
+    if (fieldName === finalForm.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 finalForm.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 === finalForm.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__default.default(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 === finalForm.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__default.default({
+            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[finalForm.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__default.default.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__default.default.createElement(reactFinalForm.Field, {
@@ -678,35 +811,37 @@ var FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFi
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Checkbox.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
@@ -727,7 +862,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,
@@ -790,8 +926,10 @@ function FormFieldChips(props) {
       }
       return emptyOptionsList;
     }, [input.value]);
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-chips",
@@ -840,17 +978,18 @@ var defaultChoiceProps = {
 };
 
 var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFieldChoice(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,
     fieldProps = props.fieldProps,
     inputProps = props.inputProps,
     options = props.options,
     placeholder = props.placeholder,
     showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
     isCheckbox = props.isCheckbox,
     isRequired = props.isRequired,
     onChange = props.onChange;
@@ -863,8 +1002,8 @@ var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFiel
     }
   }, [change, onChange]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
-    initialValue: initialValue,
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render(_ref) {
     var input = _ref.input,
       meta = _ref.meta;
@@ -876,8 +1015,8 @@ var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFiel
      */
     var activeOption = React.useMemo(function () {
       var emptyOption = {
-        value: null,
-        label: null
+        label: null,
+        value: null
       };
       if (input.value) {
         var currentOption = options.find(function (option) {
@@ -894,40 +1033,42 @@ var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFiel
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Choice.Choice, Object.assign({
       className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && "form-choice_state_" + errorKey),
       name: input.name,
-      isDisabled: isDisabled,
       active: activeOption,
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
-      setActiveSegment: setActiveSegment,
+      isDisabled: isDisabled,
       isCheckbox: isCheckbox,
-      isRequired: isRequired
+      isRequired: isRequired,
+      setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
 });
@@ -942,17 +1083,18 @@ var defaultCodeProps = {
 };
 
 var FormFieldCode = /*#__PURE__*/React__default.default.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__default.default.createElement(reactFinalForm.Field, {
     name: name,
@@ -974,32 +1116,34 @@ var FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFieldC
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Code.Code, Object.assign({
       name: input.name,
       initialValue: input.value,
-      isDisabled: isDisabled,
       autoComplete: "nope",
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -1008,24 +1152,25 @@ var FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFieldC
 });
 
 var FormFieldCustom = /*#__PURE__*/React__default.default.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__default.default.createElement(reactFinalForm.Field, {
-    initialValue: initialValue,
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render(_ref) {
     var input = _ref.input,
       meta = _ref.meta;
@@ -1041,40 +1186,42 @@ var FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFiel
         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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Component, Object.assign({}, updatedInputProps, {
       input: input,
-      isDisabled: isDisabled,
-      meta: meta
+      meta: meta,
+      isDisabled: isDisabled
     })), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
+      size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
       imageSrc: clearIcon,
       shape: clearIconShape,
-      size: clearIconSize,
       SvgImage: clearIcon,
       onClick: onClickClearIcon
     }));
@@ -1093,15 +1240,16 @@ var defaultDadataInputProps = {
 };
 
 var FormFieldDadataInput = /*#__PURE__*/React__default.default.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') {
@@ -1136,25 +1284,27 @@ var FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function For
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Dadata.Dadata
@@ -1167,8 +1317,8 @@ var FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function For
       input: input,
       inputProps: updatedInputProps,
       meta: meta,
-      setValue: onDadataAutocomplete,
-      token: token
+      token: token,
+      setValue: onDadataAutocomplete
     }));
   });
 });
@@ -1187,8 +1337,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,
@@ -1196,6 +1346,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__default.default.createElement(reactFinalForm.Field, {
@@ -1233,34 +1384,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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(DatePicker.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
@@ -1508,7 +1661,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
       });
     };
   }, []);
-  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+  var propsGenerator = hooks.useDevicePropsGenerator(props);
   var fillClass = propsGenerator.fillClass,
     fillHoverClass = propsGenerator.fillHoverClass,
     borderColorClass = propsGenerator.borderColorClass,
@@ -1734,25 +1887,26 @@ function setFileDataURL(file, resolve) {
 
 var FormFieldFileInput = /*#__PURE__*/React__default.default.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.useDevicePropsGenerator(props);
+  var propsGenerator = hooks.useDevicePropsGenerator(props);
   var size = propsGenerator.size,
     fill = propsGenerator.fill,
     fillHover = propsGenerator.fillHover,
@@ -1813,25 +1967,27 @@ var FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function FormF
       inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
 
     /** TODO:
      * REFACTOR PROPERTIES
      */
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(FileInputDropzone, {
@@ -1845,12 +2001,11 @@ var FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function FormF
       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,
@@ -1863,6 +2018,7 @@ var FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function FormF
       hintTitleTextWrap: hintTitleTextWrap,
       inputName: input.name,
       inputValue: input.value,
+      metaError: meta.error,
       metaTouched: meta.touched,
       removeThumbAppearance: removeThumbAppearance,
       removeThumbShape: removeThumbShape,
@@ -1881,8 +2037,8 @@ var FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function FormF
       thumbNameTextWeight: thumbNameTextWeight,
       thumbNameTextWrap: thumbNameTextWrap,
       isPreviews: isPreviews,
-      onAddFiles: onAddFiles,
       onClickPreview: onClickPreview,
+      onAddFiles: onAddFiles,
       onDeleteFile: onDeleteFile
     }));
   });
@@ -1901,8 +2057,9 @@ var defaultGroupProps = {
 };
 
 var FormBlockGroup = /*#__PURE__*/React__default.default.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,
@@ -1924,8 +2081,9 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
     children = props.children;
 
   // @ts-expect-error
-  var _useStyles = useStyles.useStyles(props),
+  var _useStyles = hooks.useStyles(props),
     styles = _useStyles.styles;
+  var dataTestIdField = createDataTestIdField(name, dataTestId);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
   }, function Render(_ref) {
@@ -1952,6 +2110,7 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
     });
     return /*#__PURE__*/React__default.default.createElement("div", {
       className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
+      "data-test-id": dataTestIdField,
       "data-tour": dataTour,
       style: styles
     }, /*#__PURE__*/React__default.default.createElement("div", {
@@ -1959,12 +2118,14 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
     }, before, title && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-title"
     }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
+      dataTestId: dataTestIdField + "Title",
       size: titleTextSize,
       textColor: titleTextColor,
       textWeight: titleTextWeight
     }, title)), label && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      dataTestId: dataTestIdField + "Label",
       size: labelTextSize,
       textColor: labelTextColor,
       textWeight: labelTextWeight
@@ -1973,11 +2134,13 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
     }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.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
     }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
       className: "form__group-message",
+      dataTestId: name + "GroupMessage",
       size: messageTextSize,
       textColor: messageTextColor,
       textWeight: messageTextWeight
@@ -2001,7 +2164,8 @@ var defaultInputProps = {
 };
 
 var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     clearIcon = props.clearIcon,
@@ -2053,8 +2217,10 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-input",
@@ -2069,7 +2235,7 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
       className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
-      dataTestId: input.name + "-field-input",
+      dataTestId: dataTestIdField + "Input",
       type: "text",
       name: input.name,
       autoComplete: "nope",
@@ -2080,6 +2246,7 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
       onFocus: input.onFocus
     }, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
+      dataTestId: dataTestIdField + "InputIcon",
       size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
@@ -2097,7 +2264,8 @@ var defaultInputNumberProps = {
 };
 
 var FormFieldInputNumber = /*#__PURE__*/React__default.default.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,
@@ -2136,8 +2304,10 @@ var FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function For
     var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input-number', 'form__item_input-number', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-input-number",
@@ -2152,7 +2322,7 @@ var FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function For
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(InputNumber.InputNumber, Object.assign({
       className: clsx__default.default(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,
@@ -2162,7 +2332,8 @@ var FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function For
 });
 
 var FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function FormFieldMaskedInput(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     clearIcon = props.clearIcon,
@@ -2224,8 +2395,10 @@ var FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function For
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-maskedInput',
@@ -2269,7 +2442,8 @@ var defaultPasswordProps = {
 };
 
 var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFieldPassword(props) {
-  var name = props.name,
+  var dataTestId = props.dataTestId,
+    name = props.name,
     initialValue = props.initialValue,
     classNameGroupItem = props.classNameGroupItem,
     fieldProps = props.fieldProps,
@@ -2313,8 +2487,10 @@ var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFi
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input-password', 'form__item_input-password', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-password",
@@ -2329,7 +2505,7 @@ var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFi
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(InputPassword.InputPassword, Object.assign({
       className: clsx__default.default(meta.active && 'input-password_state_focus', meta.error && meta.touched && "input-password_state_" + errorKey),
-      dataTestId: input.name + "-field-input-password",
+      dataTestId: dataTestIdField + "InputPassword",
       name: input.name,
       autoComplete: "nope",
       value: input.value || '',
@@ -2384,8 +2560,9 @@ function FormFieldRadioGroupList(props) {
 }
 
 var FormFieldRadioGroup = /*#__PURE__*/React__default.default.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,
@@ -2394,8 +2571,8 @@ var FormFieldRadioGroup = /*#__PURE__*/React__default.default.memo(function Form
     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__default.default.createElement(reactFinalForm.Field, {
@@ -2423,26 +2600,28 @@ var FormFieldRadioGroup = /*#__PURE__*/React__default.default.memo(function Form
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(FormFieldRadioGroupList, {
-      isDisabled: isDisabled,
       editableProps: editableProps,
       input: input,
       inputProps: updatedInputProps,
       options: options,
+      isDisabled: isDisabled,
       onChange: onChange
     }));
   });
@@ -2459,12 +2638,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 = reactFinalForm.useForm(),
     change = _useForm.change;
@@ -2503,31 +2683,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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Segmented.Segmented, Object.assign({
-      isDisabled: isDisabled,
       activeSegment: activeOption,
       segments: options,
+      isDisabled: isDisabled,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -2563,17 +2745,18 @@ function getDefaultValue(options, selectValue) {
   return result;
 }
 var FormFieldSelect = /*#__PURE__*/React__default.default.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__default.default.createElement(reactFinalForm.Field, {
@@ -2625,34 +2808,36 @@ var FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFiel
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Select.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)));
@@ -2667,14 +2852,15 @@ var defaultSwitchProps = {
 };
 
 var FormFieldSwitch = /*#__PURE__*/React__default.default.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__default.default.createElement(reactFinalForm.Field, {
@@ -2703,34 +2889,36 @@ var FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFiel
       }),
       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__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('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__default.default.createElement(Switch.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
@@ -2750,7 +2938,8 @@ var defaultTextareaProps = {
 };
 
 var FormFieldTextarea = /*#__PURE__*/React__default.default.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,
@@ -2785,8 +2974,10 @@ var FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFi
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    var dataTestIdField = createDataTestIdField(input.name, dataTestId);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
+      dataTestId: dataTestIdField,
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-textarea',
@@ -2801,7 +2992,7 @@ var FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFi
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
       className: clsx__default.default(meta.active && 'textarea_state_focus', meta.error && meta.touched && "textarea_state_" + errorKey),
-      dataTestId: input.name + "-field-textarea",
+      dataTestId: dataTestIdField + "Textarea",
       name: input.name,
       autoComplete: "nope",
       value: input.value || '',
@@ -2834,115 +3025,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__default.default.createElement(FormFieldPassword, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldCheckbox, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.choice:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldChoice, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.code:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldCode, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.chips:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldChips, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldSwitch, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.segmented:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldSegmented, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.datePicker:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldDatePicker, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.fileInput:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldFileInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.radioGroup:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldRadioGroup, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.select:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldSelect, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.text:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldTextarea, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.maskedInput:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldMaskedInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.custom:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldCustom, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.dadataInput:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldDadataInput, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.inputNumber:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldInputNumber, Object.assign({
           key: config.key
-        }, field, props));
+        }, field, {
+          dataTestId: dataTestId
+        }));
       }
     case formTypes.group:
       {
         return /*#__PURE__*/React__default.default.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, {
@@ -2951,147 +3178,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 === finalForm.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 finalForm.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 === finalForm.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__default.default(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 === finalForm.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__default.default({
-            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[finalForm.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__default.default.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,
@@ -3106,10 +3203,9 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
     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,
+    buttonGap = props.buttonGap;
+    props.additionalProps;
+    var _props$buttonDirectio = props.buttonDirection,
     buttonDirection = _props$buttonDirectio === void 0 ? 'vertical' : _props$buttonDirectio,
     buttonFill = props.buttonFill,
     buttonJustifyContent = props.buttonJustifyContent,
@@ -3126,7 +3222,6 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
     _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,
@@ -3141,7 +3236,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
     loaderSize = _props$loaderSize === void 0 ? 'l' : _props$loaderSize,
     loaderText = props.loaderText,
     _props$loaderType = props.loaderType,
-    loaderType = _props$loaderType === void 0 ? 'simple' : _props$loaderType,
+    loaderType = _props$loaderType === void 0 ? 'dot' : _props$loaderType,
     mutators = props.mutators,
     notificationCloseButton = props.notificationCloseButton,
     notificationType = props.notificationType,
@@ -3175,6 +3270,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
     secondaryButtonSize = props.secondaryButtonSize,
     shapeStrengthClass = props.shapeStrengthClass,
     tertiaryButton = props.tertiaryButton,
+    tertiaryButtonAppearance = props.tertiaryButtonAppearance,
     tertiaryButtonFill = props.tertiaryButtonFill,
     tertiaryButtonFillHover = props.tertiaryButtonFillHover,
     tertiaryButtonLabel = props.tertiaryButtonLabel,
@@ -3196,12 +3292,12 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
       ref.current = formInstance;
     }
   }, [ref]);
-  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+  var propsGenerator = hooks.useDevicePropsGenerator(props);
   var directionClass = propsGenerator.directionClass,
     fillClass = propsGenerator.fillClass,
     elevationClass = propsGenerator.elevationClass,
     shapeClass = propsGenerator.shapeClass;
-  var _useStyles = useStyles.useStyles(props),
+  var _useStyles = hooks.useStyles(props),
     formStyles = _useStyles.styles,
     wrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
@@ -3213,8 +3309,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
         submitError = _ref.submitError;
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(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__default.default(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() {
@@ -3223,7 +3318,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        "data-testid": dataTestId || name,
+        "data-testid": dataTestId || 'Form',
         "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
@@ -3233,12 +3328,14 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         size: titleTextSize,
         fill: titleFill,
         textColor: titleTextColor,
-        textWeight: titleTextWeight
+        textWeight: titleTextWeight,
+        "data-testid": dataTestId ? dataTestId + "Title" : 'FormTitle'
       }, title), desc && /*#__PURE__*/React__default.default.createElement(Text.Text, {
         className: "form__desc",
         size: descSize,
         textColor: descTextColor,
-        textWeight: descTextWeight
+        textWeight: descTextWeight,
+        "data-testid": dataTestId ? dataTestId + "Desc" : 'FormDesc'
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
         className: clsx__default.default('notification', 'form-notification', notificationType ? "form-notification_" + notificationType : 'form-notification_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.Notification, {
@@ -3260,7 +3357,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
       }, Object.keys(config).map(function (key) {
         return generateField(config[key], {
           key: key
-        }, additionalProps[config[key].name]);
+        }, dataTestId);
       }), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
         appearance: loaderAppearance,
         className: "form__loader",
@@ -3268,11 +3365,12 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         size: loaderSize,
         fill: loaderFill,
         text: loaderText,
+        "data-testid": dataTestId + "Loader",
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group.Group, {
         className: "form__button",
-        dataTestId: dataTestIdButtons,
+        dataTestId: dataTestIdButtons || dataTestId + "Buttons",
         dataTour: dataTourButtons,
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
@@ -3282,7 +3380,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.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,
@@ -3298,7 +3396,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.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,
@@ -3313,8 +3411,9 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        appearance: tertiaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton || dataTestId && dataTestId + "TertiaryButton" || 'FormTertiaryButton',
         dataTour: dataTourTertiaryButton,
         width: "fill",
         size: tertiaryButtonSize,
@@ -3618,6 +3717,7 @@ exports.FormFieldSelect = FormFieldSelect;
 exports.FormFieldSwitch = FormFieldSwitch;
 exports.FormFieldTextarea = FormFieldTextarea;
 exports.addRequiredFieldsParamToSchema = addRequiredFieldsParamToSchema;
+exports.createDataTestIdField = createDataTestIdField;
 exports.dateValidation = dateValidation;
 exports.defaultCheckboxProps = defaultCheckboxProps;
 exports.defaultChipsProps = defaultChipsProps;