@itcase/forms 1.1.11 → 1.1.13

package/dist/itcase-forms.cjs.js

@@ -0,0 +1,3108 @@
+'use strict';
+
+var libphonenumberJs = require('libphonenumber-js');
+var React$1 = 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 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 camelCase = require('lodash/camelCase');
+var snakeCase = require('lodash/snakeCase');
+var Choice = require('@itcase/ui/components/Choice');
+var Icon = require('@itcase/ui/components/Icon');
+var Code = require('@itcase/ui/components/Code');
+var DatePicker = require('@itcase/ui/components/DatePicker');
+var useDevicePropsGenerator = require('@itcase/ui/hooks/useDevicePropsGenerator');
+var axios = require('axios');
+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 Group$1 = require('@itcase/ui/components/Group');
+var Loader = require('@itcase/ui/components/Loader');
+var Title = require('@itcase/ui/components/Title');
+var Input = require('@itcase/ui/components/Input');
+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 reactImask = require('react-imask');
+var Chips = require('@itcase/ui/components/Chips');
+var Notification = require('@itcase/ui/components/Notification');
+var createDecorator = require('final-form-focus');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React$1);
+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);
+
+const phoneValidation = value => {
+  if (!value) {
+    return true;
+  }
+  return libphonenumberJs.isPossiblePhoneNumber(value, 'RU');
+};
+const emailValidation = value => {
+  // from https://emailregex.com/
+  if (!value) {
+    return true;
+  }
+
+  // from https://www.regular-expressions.info/email.html
+  const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
+  return regexp.test(String(value).toLowerCase());
+};
+const dateValidation = value => {
+  const valueDate = value instanceof Date ? value : new Date(value);
+  const isDateValid = !isNaN(valueDate.getTime());
+  return isDateValid;
+};
+const addRequiredFieldsParamToSchema = schema => {
+  const fields = Object.entries(schema.fields);
+  schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
+    if (validationProps.exclusiveTests?.required) {
+      list.push(fieldName);
+    }
+    return list;
+  }, []);
+  return schema;
+};
+
+/**
+ * Sets the `innerError.message` in an `errors` object at the key
+ * defined by `innerError.path`.
+ * @param {Object} errors The object to set the error in.
+ * @param {{ path: string, message: string }} innerError A `yup` field error.
+ * @returns {Object} The result of setting the new error message onto `errors`.
+ */
+const setInError = (errors, innerError) => {
+  return finalForm.setIn(errors, innerError.path, innerError.message);
+};
+
+/**
+ * Empty object map with no prototype. Used as default
+ * value for reducing the `err.inner` array of errors
+ * from a `yup~ValidationError`.
+ */
+const emptyObj = Object.create(null);
+
+/**
+ * Takes a `yup` validation schema and returns a function that expects
+ * a map of values to validate. If the validation passes, the function resolves to `undefined`
+ * (signalling that the values are valid). If the validation doesn't pass, it resolves
+ * to a map of invalid field names to errors.
+ * @param {import('yup').ObjectSchema} schema `yup` schema definition.
+ * @returns {(values: Object) => Promise<?Object>} An async function that expects some `values`
+ *  and resolves to either `undefined` or a map of field names to error messages.
+ */
+
+const makeValidate = schema => {
+  return async function validate(values) {
+    try {
+      await schema.validate(values, {
+        abortEarly: false
+      });
+    } catch (error) {
+      if (error.inner) {
+        return error.inner.reduce(setInError, emptyObj);
+      } else {
+        console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
+      }
+    }
+  };
+};
+function useYupValidationSchema(schema, language) {
+  const validate = React$1.useMemo(() => schema && makeValidate(schema), [schema, language]);
+  return validate;
+}
+
+const defaultFieldProps = {
+  width: 'fill',
+  direction: 'vertical',
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextSize: 'm',
+  errorMessageTextColor: 'errorTextSecondary',
+  errorMessageTextSize: 's',
+  dividerFill: 'errorPrimary',
+  helpTextColor: 'surfaceTextQuaternary',
+  helpTextSize: 's',
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
+  requiredMessageTextSize: 's',
+  showMessage: true
+};
+
+function FieldWrapperBase(props) {
+  const {
+    id,
+    className,
+    type = 'normal',
+    label,
+    labelHidden,
+    labelTextColor,
+    labelTextSize,
+    labelTextSizeMobile,
+    labelTextSizeTablet,
+    labelTextWeight,
+    desc,
+    descTextColor,
+    descTextSize,
+    descTextWeight,
+    errorKey,
+    errorMessage,
+    isErrorState,
+    metaError,
+    helpTextColorSuccess,
+    isDisabled,
+    afterItem,
+    beforeItem,
+    dataTour,
+    dividerDirection,
+    dividerFill,
+    dividerSize,
+    dividerWidth,
+    fieldClassName,
+    helpText,
+    helpTextColor,
+    helpTextSize,
+    helpTextSizeMobile,
+    helpTextWeight,
+    inputName,
+    inputValue,
+    messageTextSize,
+    metaActive,
+    showDivider,
+    showMessage,
+    tag: Tag = 'div',
+    before,
+    after,
+    isHidden,
+    isRequired,
+    isValidState,
+    children
+  } = props;
+  const formFieldClass = React$1.useMemo(() => clsx__default.default(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]);
+  const fieldClass = React$1.useMemo(() => 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]);
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_size_',
+    propsKey: 'size'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
+  });
+  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
+  });
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const {
+    styles: formFieldStyles
+  } = useStyles.useStyles(props);
+  const errorTextSize = props[`${errorKey}MessageTextSize`];
+  const errorTextColor = props[`${errorKey}MessageTextColor`];
+  const 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-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
+    style: formFieldStyles
+  }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__label'),
+    "data-test-id": `${inputName}FieldLabel`,
+    htmlFor: id
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: labelTextSize,
+    textColor: labelTextColor,
+    textWeight: labelTextWeight,
+    sizeMobile: labelTextSizeMobile,
+    sizeTablet: labelTextSizeTablet
+  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__desc",
+    "data-test-id": `${inputName}FieldDesc`
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: descTextSize,
+    textColor: descTextColor,
+    textWeight: descTextWeight
+  }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__content', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__content-inner', fieldClass)
+  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
+    className: "form-field__item-divider",
+    width: dividerWidth,
+    direction: dividerDirection,
+    size: dividerSize,
+    fill: dividerFill
+  })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__message",
+    "data-test-id": `${inputName}FieldMessage`
+  }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    id: `${inputName}-error`,
+    className: "form-field__message-item form-field__message-item_type-error",
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight,
+    dataTestId: `${inputName}FieldMessageError`
+  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_help-text",
+    size: helpTextSize,
+    textColor: isValidState ? helpTextColorSuccess : helpTextColor,
+    textWeight: helpTextWeight,
+    dataTestId: `${inputName}FieldMessageHelpText`,
+    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",
+    size: messageTextSize,
+    dataTestId: `${inputName}FieldMessageHelpText`
+  }, '\u00A0')), after);
+}
+function FieldWrapper(props) {
+  const {
+    inputName
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm(); // , mutators
+
+  React$1.useEffect(() => {
+    return () => {
+      change(inputName, undefined);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(FieldWrapperBase, props);
+}
+
+// Whether to display an error message based on "fieldProps" and meta-objects
+function useFieldValidationState(props) {
+  const {
+    fieldProps = {},
+    meta = {},
+    input = {}
+  } = props;
+  // Determines if there's a submission error that hasn't been rectified since the last submission.
+  const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
+
+  // Determines a key for the error, defaulting to 'error' if no specific key is found.
+  const errorKey = meta.error?.key || 'error';
+  const successKey = 'success';
+
+  // Determines if the field is in an error state based on various conditions.
+  const isErrorState = React$1.useMemo(() => {
+    if (fieldProps.showErrorsOnSubmit) {
+      return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
+    } else {
+      return Boolean(meta.touched && (meta.error || submitError));
+    }
+  }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
+
+  // Determines if the field's input state is valid
+  const isValidState = React$1.useMemo(() => {
+    const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
+    const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
+    return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
+  }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
+  const errorMessage = React$1.useMemo(() => {
+    // If final-form field has error in "meta" render-property.
+    // If field not modified after last form submit - use submit error
+    const error = meta.error || submitError || false;
+    if (error) {
+      // And error in "meta" is string
+      if (typeof error === 'string') {
+        // Return error as message
+        return error;
+      }
+      // Or if error in "meta" has "message" property(is object of error)
+      if (error.message) {
+        // Return message from error
+        return error.message;
+      }
+    }
+
+    // Field doesn't have error message
+    return '';
+  }, [meta.error, submitError]);
+  return {
+    errorKey,
+    successKey,
+    isErrorState,
+    isValidState,
+    errorMessage
+  };
+}
+
+// This hook changes the props of the child component depending on the type of error,
+// looks at what props were in initialProps, if they are there then changes
+function useValidationAppearanceInputProps(props) {
+  const {
+    validationStateKey,
+    inputProps
+  } = props;
+
+  // TODO: need to add props that can change during errors in this field
+  const validationAppearanceInputProps = React$1.useMemo(() => {
+    // const resultAppearanceProps = {
+    //   messageTextColor: props.errorMessageTextColor,
+    //   messageTextSize: props.errorMessageTextSize,
+    //   messageTextWeight: props.errorMessageTextWeight,
+    //   // Override appearance(styled) props for child input
+    //   inputProps: {},
+    // }
+    const updatedInputProps = {};
+    if (validationStateKey) {
+      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+        // Convert the input property key to "snake_case" format.
+        // e.g. "requiredBorderColor" -> "required_border_color".
+        const propKeySnake = snakeCase__default.default(propKey);
+        // Check if this property is for appearance.
+        // Key maybe starts with: "error", "required", "success", etc from validation config.
+        const isPropForValidationState = propKeySnake.startsWith(`${validationStateKey}_`);
+
+        // If property is for appearance
+        if (isPropForValidationState) {
+          // Remove validation state part from begin of property key, to make clean appearance property.
+          // e.g. "required_border_color" -> "border_color".
+          const stateTargetKeySnake = propKeySnake.replace(`${validationStateKey}_`, '');
+          // Convert clean appearance property key to "camelCase" format.
+          // e.g. "border_color" -> "borderColor"
+          const stateTargetKey = camelCase__default.default(stateTargetKeySnake);
+          // And save the value with a new clean property key
+          updatedInputProps[stateTargetKey] = propValue;
+          // Else if not already added earlier
+        } else if (!updatedInputProps[propKey]) {
+          // Just save original property
+          updatedInputProps[propKey] = propValue;
+        }
+      });
+    }
+    return updatedInputProps;
+  }, [validationStateKey, inputProps]);
+  return validationAppearanceInputProps;
+}
+
+const defaultCheckboxProps = {
+  appearance: 'defaultPrimary',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary'
+};
+
+const CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxField(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    type: "checkbox",
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = React$1.useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-checkbox",
+      inputName: input.name,
+      inputValue: input.checked,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      tag: "label",
+      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,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const defaultChoiceProps = {
+  width: 'fill',
+  borderColor: 'surfaceBorderTertiary',
+  // error
+  errorBorderColor: 'errorBorderPrimary',
+  fill: 'surfaceSecondary',
+  fillActive: 'accentPrimary',
+  fillActiveDisabled: 'surfaceTertiary',
+  fillHover: 'surfacePrimaryHover',
+  indicatorFill: 'accentPrimary',
+  labelTextActiveColor: 'accentTextPrimary',
+  labelTextActiveColorDisabled: 'surfaceTextDisabled',
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextColorDisabled: 'surfaceTextDisabled',
+  labelTextSize: 'm',
+  requiredBorderColor: 'warningBorderPrimary',
+  shape: 'rounded'
+};
+
+const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
+  const {
+    name,
+    initialValue,
+    label,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    messageType,
+    options,
+    placeholder,
+    showMessage,
+    isCheckbox,
+    isRequired,
+    onChange
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm();
+  const setActiveSegment = React$1.useCallback((option, isChecked) => {
+    change(name, isChecked && option.value);
+    if (onChange) {
+      onChange(option.value, name, isChecked);
+    }
+  }, [change, onChange]);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+    const activeOption = React$1.useMemo(() => {
+      const emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        const currentOption = options.find(option => option.value === input.value);
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-choice",
+      inputName: input.name,
+      inputValue: input.value || [],
+      messageType: messageType,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      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,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
+  });
+});
+
+const CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(props) {
+  const {
+    Component,
+    isDisabled,
+    isRequired,
+    name,
+    initialValue,
+    fieldProps = {},
+    classNameGroupItem,
+    showMessage,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      // For "Custom" field we pass all props. Can contain some special props, we don't known.
+      inputProps: props
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-custom',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, updatedInputProps, {
+      input: input,
+      isDisabled: isDisabled,
+      meta: meta
+    })), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
+  });
+});
+
+const defaultCodeProps = {
+  fieldProps: {
+    size: 'l',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    labelTextWeight: 'normal',
+    helpText: 'Supporting text',
+    helpTextColor: 'surfaceTextPrimary',
+    helpTextSize: 's',
+    helpTextWeight: 'normal',
+    showMessage: true
+  },
+  inputProps: {
+    width: 'fill',
+    size: 'l',
+    fill: 'surfaceSecondary',
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputBorderFocusColor: 'surfaceBorderAccent',
+    inputCaretColor: 'surfaceItemAccent',
+    inputFill: 'surfacePrimary',
+    inputFillHover: 'surfaceSecondary',
+    inputPlaceholderTextColor: 'surfaceSecondary',
+    inputSize: 'l',
+    inputTextColor: 'surfaceSecondary',
+    inputTextSize: 'xxl',
+    inputTextWeight: 'normal'
+  }
+};
+
+const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey} = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const defaultDatepickerProps = {
+  dateFormat: 'dd/MM/yyyy - HH:mm',
+  readOnly: false,
+  selectsRange: false,
+  showTimeSelect: true,
+  timeCaption: 'Время',
+  timeFormat: 'p',
+  timeIntervals: 60,
+  isClearable: true,
+  isStartDefaultNull: true
+};
+
+function DatePickerField(props) {
+  const {
+    name,
+    isDisabled,
+    classNameGroupItem,
+    datePickerProps,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = React$1.useCallback((startDate, endDate) => {
+      if (!datePickerProps.selectsRange) {
+        // When we need to save single date, value is date
+        // TODO: make object with one date? need to check all forms with DatePickerField
+        input.onChange(startDate);
+      } else {
+        // When we need to save range, value is object with two date
+        input.onChange({
+          endDate,
+          startDate
+        });
+      }
+      if (onChange) {
+        onChange(startDate, endDate);
+      }
+    }, [input.onChange, onChange]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-datepicker",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      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,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }));
+  });
+}
+
+const defaultDropzoneProps = {
+  fill: 'surfacePrimary',
+  borderColor: 'surfaceBorderTertiary',
+  borderColorHover: 'surfaceBorderQuaternary',
+  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+  hintTitleTextColor: 'surfaceTextPrimary',
+  hintTitleTextSize: 'm',
+  removeThumbAppearance: 'dangerPrimary sizeM',
+  removeThumbShape: 'rounded',
+  shape: 'rounded',
+  showFilename: true,
+  thumbBorderColor: 'surfaceBorderTertiary',
+  thumbBorderColorHover: 'surfaceBorderQuaternary',
+  thumbBorderWidth: 1,
+  thumbNameTextColor: 'surfaceTextPrimary',
+  thumbNameTextSize: 's',
+  isPreviews: true
+};
+
+const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileInputDropzone(props) {
+  const {
+    className,
+    maxFiles,
+    maxSize,
+    size,
+    fileErrorText,
+    dropzoneProps = {},
+    hintDescription,
+    hintTitle,
+    inputName,
+    inputValue,
+    showFilename,
+    thumbColumn,
+    isPreviews,
+    onAddFiles,
+    onDeleteFile
+  } = props;
+
+  // TODO: delete react-final-form things out of here?
+  const {
+    change
+  } = reactFinalForm.useForm();
+  const [fileError, setFileError] = React$1.useState('');
+  const [fileIsLoading, setFileIsLoading] = React$1.useState(false);
+  const filesList = React$1.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
+  const changeFormState = React$1.useCallback(newFiles => {
+    // If max files in dropzone is 1 - return file as it self, else as array of files
+    // ps: for old projects compatibility
+    const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
+    change(inputName, toSave);
+    return toSave;
+  },
+  // If "inputName" will be changes, then it should be a different field
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dropzoneProps, change]);
+
+  //
+  const convertFiledValueAndSaveAsFiles = React$1.useCallback(async currentFilesList => {
+    setFileIsLoading(true);
+    const newFiles = [];
+    for (const fileItem of currentFilesList) {
+      if (typeof fileItem === 'string') {
+        const newFile = await convertToFile(fileItem, isPreviews);
+        if (newFile) {
+          newFiles.push(newFile);
+        }
+      } else {
+        newFiles.push(fileItem);
+      }
+    }
+    changeFormState(newFiles);
+    setFileIsLoading(false);
+  }, [isPreviews, changeFormState]);
+
+  // Delete file from dropzone
+  const removeFile = React$1.useCallback((event, index) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const newFiles = [...filesList];
+    newFiles.splice(index, 1);
+    if (onDeleteFile) {
+      onDeleteFile(filesList[index], inputName);
+    }
+    changeFormState(newFiles);
+  },
+  // If "inputName" will be changes, then it should be a different field
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [filesList, changeFormState, onDeleteFile]);
+
+  // Create dropzone options
+  const {
+    getInputProps,
+    getRootProps
+  } = reactDropzone.useDropzone({
+    maxFiles: maxFiles || 5,
+    maxSize: maxSize || 10485760,
+    // 10mb
+    // accept: { 'image/*': [] },
+    ...dropzoneProps,
+    getFilesFromEvent: async event => {
+      const result = await fileSelector.fromEvent(event);
+      const newFiles = result.filter(item => item instanceof File);
+      // Add exists and new files to accepted(or rejected)
+      return [...filesList, ...newFiles];
+    },
+    onDropAccepted: acceptedFiles => {
+      // If dropped files has accepted and we need a previews
+      if (isPreviews) {
+        // Add preview to every file
+        acceptedFiles.forEach(file => {
+          if (!file.error) {
+            file.preview = URL.createObjectURL(file);
+          }
+        });
+      }
+      // Save to form data (including empty when files are not valid)
+      const filesToSave = changeFormState(acceptedFiles);
+      setFileError('');
+
+      // Save DataURL for all files
+      const readerPromisesList = acceptedFiles.map(file => {
+        return new Promise(resolve => setFileDataURL(file, resolve));
+      });
+      // Save files to form values
+      Promise.all(readerPromisesList).then(() => {
+        if (onAddFiles) {
+          onAddFiles(filesToSave, inputName);
+        }
+      });
+    },
+    onDropRejected: rejectedFiles => {
+      // If dropped files has rejected
+      if (rejectedFiles.length) {
+        let fileErrorMessage = 'Ошибка при добавлении файла';
+        const firstFileErrorItem = rejectedFiles[0].errors[0];
+        if (firstFileErrorItem) {
+          if (firstFileErrorItem.code === reactDropzone.ErrorCode.TooManyFiles) {
+            fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
+          } else {
+            fileErrorMessage = firstFileErrorItem.message;
+          }
+        }
+        // Show error
+        setFileError(fileErrorMessage);
+      } else {
+        // Else clean error
+        setFileError('');
+      }
+    }
+  });
+  React$1.useEffect(() => {
+    const currentFilesList = castArray__default.default(inputValue);
+    const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
+    if (isNeedToConvert) {
+      // First time convert value to Files and save to local and form state
+      convertFiledValueAndSaveAsFiles(currentFilesList);
+    }
+
+    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
+    return () => {
+      filesList.forEach(file => {
+        if (file?.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+  const {
+    fillClass,
+    fillHoverClass,
+    borderColorClass,
+    borderColorHoverClass,
+    borderTypeClass,
+    borderWidthClass,
+    errorMessageTextColor,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    hintDescriptionTextColor,
+    hintDescriptionTextSize,
+    hintDescriptionTextWeight,
+    hintDescriptionTextWrap,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbShape,
+    removeThumbText,
+    removeThumbTextWeight,
+    shapeClass,
+    thumbBorderColorClass,
+    thumbBorderColorHoverClass,
+    thumbBorderTypeClass,
+    thumbBorderWidthClass,
+    thumbDirectionClass,
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap
+  } = propsGenerator;
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", getRootProps({
+    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
+  }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
+    name: inputName
+  })), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass)
+  }, filesList.map((file, index) => /*#__PURE__*/React__default.default.createElement("aside", {
+    className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+    key: file.id || `${file.name}_${index}`
+  }, isPreviews && !file.error && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-dropzone__thumb-image"
+  }, /*#__PURE__*/React__default.default.createElement("img", {
+    className: "form-dropzone__thumb-image-inner",
+    src: file.preview || file.image,
+    onLoad: () => {
+      // Revoke data uri after image is loaded
+      URL.revokeObjectURL(file.preview);
+    }
+  })), file.error && /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-dropzone__thumb-name"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-dropzone__thumb-name-inner",
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, file.name)), fileIsLoading && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-dropzone__thumb-loader"
+  }, /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+    width: "fill",
+    height: "fill",
+    fill: "surfacePrimary",
+    itemFill: "surfaceItemAccent",
+    set: "simple"
+  })), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-dropzone__thumb-remove')
+  }, /*#__PURE__*/React__default.default.createElement(Button.Button, {
+    className: "form-dropzone__thumb-remove-text",
+    appearance: removeThumbAppearance,
+    label: removeThumbText || 'Удалить',
+    labelTextWeight: removeThumbTextWeight,
+    shape: removeThumbShape,
+    onClick: event => removeFile(event, index)
+  })))), !filesList.length ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-dropzone__hint"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)) : /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)))), fileError && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textColor: errorMessageTextColor,
+    textWeight: errorMessageTextWeight
+  }, fileError)));
+});
+async function getFileByURL(url) {
+  try {
+    const response = await axios__default.default({
+      url: url,
+      responseType: 'blob'
+    });
+    const blobObject = response.data;
+    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
+    // Remove double quotes
+    let filename = dirtyFilename?.substring(1).slice(0, -1);
+    if (!filename) {
+      filename = url.split('/').at(-1);
+      // const typeParts = blobObject.type.split('/')
+      // const fileType = typeParts[typeParts.length - 1]
+      // filename = `${new Date().getTime()}.${fileType}`
+    }
+    return new File([blobObject], filename, {
+      type: blobObject.type
+    });
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
+}
+async function convertToFile(inputValue, isPreviews) {
+  let newFile = null;
+
+  // Download image by url and save as File instance
+  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
+  if (inputValue.image || isURL) {
+    newFile = await getFileByURL(inputValue.image || inputValue);
+    if (newFile) {
+      setFileDataURL(newFile);
+    }
+  }
+
+  // Convert dataURL to File instance
+  if (inputValue.dataURL) {
+    newFile = common.createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+    newFile.dataURL = inputValue.dataURL;
+  }
+
+  // Save new File to state
+  if (newFile) {
+    newFile.id = inputValue.id;
+    if (isPreviews) {
+      newFile.preview = URL.createObjectURL(newFile);
+    }
+  }
+  return newFile;
+}
+function setFileDataURL(file, resolve) {
+  resolve = resolve || (() => {});
+  // Init reader and save his file
+  const reader = new FileReader();
+  reader._readedFile = file;
+
+  // Set handlers
+  reader.onabort = () => resolve();
+  reader.onerror = () => resolve();
+  reader.onload = event => {
+    event.target._readedFile.dataURL = reader.result;
+    resolve();
+  };
+  // Run reader
+  if (file instanceof File) {
+    reader.readAsDataURL(file);
+  } else {
+    resolve();
+  }
+}
+
+const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(props) {
+  const {
+    className,
+    name,
+    width,
+    maxFiles,
+    maxSize,
+    label,
+    fileErrorText,
+    classNameGroupItem,
+    dropzoneProps,
+    fieldProps,
+    hintDescription,
+    hintTitle,
+    showFilename,
+    showMessage,
+    isPreviews,
+    isRequired,
+    onAddFiles,
+    onDeleteFile
+  } = props;
+  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+  const {
+    size,
+    fill,
+    fillHover,
+    labelTextColor,
+    borderColorHover,
+    borderType,
+    borderWidth,
+    errorMessageTextColor,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    hintDescriptionTextColor,
+    hintDescriptionTextSize,
+    hintDescriptionTextWeight,
+    hintDescriptionTextWrap,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbText,
+    removeThumbTextWeight,
+    removeThumbShape,
+    shape,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    thumbBorderWidth,
+    thumbColumn = 1,
+    thumbDirection = 'vertical',
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap
+  } = propsGenerator;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+
+    /** 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),
+      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,
+      metaTouched: meta.touched,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
+      className: className,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
+      size: size,
+      fill: fill,
+      fillHover: fillHover,
+      borderColor: updatedInputProps.borderColor,
+      borderColorHover: borderColorHover,
+      borderType: borderType,
+      borderWidth: borderWidth,
+      errorMessageTextColor: errorMessageTextColor,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      fileErrorText: fileErrorText,
+      metaError: meta.error,
+      dropzoneProps: dropzoneProps,
+      hintDescription: hintDescription,
+      hintDescriptionTextColor: hintDescriptionTextColor,
+      hintDescriptionTextSize: hintDescriptionTextSize,
+      hintDescriptionTextWeight: hintDescriptionTextWeight,
+      hintDescriptionTextWrap: hintDescriptionTextWrap,
+      hintTitle: hintTitle,
+      hintTitleTextColor: hintTitleTextColor,
+      hintTitleTextSize: hintTitleTextSize,
+      hintTitleTextWeight: hintTitleTextWeight,
+      hintTitleTextWrap: hintTitleTextWrap,
+      inputName: input.name,
+      inputValue: input.value,
+      metaTouched: meta.touched,
+      removeThumbAppearance: removeThumbAppearance,
+      removeThumbText: removeThumbText,
+      removeThumbTextWeight: removeThumbTextWeight,
+      removeThumbShape: removeThumbShape,
+      shape: shape,
+      showFilename: showFilename,
+      thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
+      thumbBorderType: thumbBorderType,
+      thumbBorderWidth: thumbBorderWidth,
+      thumbColumn: thumbColumn,
+      thumbDirection: thumbDirection,
+      thumbNameTextColor: thumbNameTextColor,
+      thumbNameTextSize: thumbNameTextSize,
+      thumbNameTextWeight: thumbNameTextWeight,
+      thumbNameTextWrap: thumbNameTextWrap,
+      isPreviews: isPreviews,
+      onAddFiles: onAddFiles,
+      onDeleteFile: onDeleteFile
+    }));
+  });
+});
+
+const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
+  const {
+    className,
+    name,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    message,
+    dataTour,
+    messageTextColor = 'surfaceTextTertiary',
+    messageTextSize = 's',
+    messageTextWeight,
+    showGroupMessage,
+    before,
+    after,
+    isHidden,
+    children
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+    const {
+      isErrorState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: props,
+      // or fieldProps?
+      input: input,
+      meta: meta
+    });
+    const updatedProps = useValidationAppearanceInputProps({
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden'),
+      "data-tour": dataTour
+    }, /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form__group-wrapper"
+    }, before, label && /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form__group-label"
+    }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
+      size: labelTextSize,
+      textColor: labelTextColor,
+      textWeight: labelTextWeight
+    }, label)), /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form__group-items"
+    }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: `form__group-message form__group-message_type-${errorKey}`,
+      id: `${name}-error`,
+      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",
+      size: messageTextSize,
+      textColor: messageTextColor,
+      textWeight: messageTextWeight
+    }, message), !isErrorState && !message && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, '\u00A0')));
+  });
+});
+
+const defaultInputProps = {
+  appearance: 'sizeM defaultSecondary',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
+};
+
+const InputField = /*#__PURE__*/React__default.default.memo(function InputField(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    // dataTestId,
+    // iconBorder,
+    // iconBorderHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    fieldProps = {},
+    iconFill,
+    iconFillHover,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconShape,
+    iconSize,
+    inputProps = {},
+    parse,
+    showMessage,
+    isPassword,
+    isRequired,
+    isRevealable,
+    onChange,
+    onClickClearIcon
+  } = props;
+  const [isRevealed, setIsRevealed] = React$1.useState(false);
+  const inputType = React$1.useMemo(() => {
+    if (isPassword) {
+      return isRevealed ? 'text' : 'password';
+    } else {
+      return 'text';
+    }
+  }, [isRevealed, isPassword]);
+  const onClickIconReveal = React$1.useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = React$1.useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.value, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      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}`),
+      type: inputType,
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      dataTestId: `${input.name}FieldInput`,
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      size: iconSize,
+      iconFill: iconFill,
+      iconFillHover: iconFillHover,
+      imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+      shape: iconShape,
+      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+      onClick: onClickIconReveal
+    }), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      size: clearIconSize,
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
+  });
+});
+
+const defaultRadioProps = {
+  fieldProps: {
+    width: 'fill',
+    size: 'm',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    labelTextWeight: 'normal',
+    textColor: 'surfaceTextPrimary',
+    helpText: 'Supporting text',
+    helpTextColor: 'surfaceTextPrimary',
+    helpTextSize: 's',
+    helpTextWeight: 'normal',
+    showMessage: true
+  },
+  inputProps: {
+    width: 'fill',
+    size: 'm',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    descTextColor: 'surfaceTextPrimary',
+    descTextSize: 's'
+  }
+};
+
+function RadioGroupInput(props) {
+  const {
+    input,
+    value,
+    onChange
+  } = props;
+  const onChangeField = React$1.useCallback(event => onChange(event.target.value), [onChange]);
+  return /*#__PURE__*/React.createElement(Input.Input, Object.assign({
+    name: input.name,
+    autoComplete: "nope",
+    value: value,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus
+  }, props));
+}
+
+function RadioGroupItem(props) {
+  const {
+    input,
+    inputProps,
+    option,
+    onChange
+  } = props;
+  const onChangeField = React$1.useCallback(event => {
+    if (event.target.checked) {
+      onChange(option.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(Radio.Radio, Object.assign({
+    className: "form-radio__item",
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus
+  }, inputProps));
+}
+
+function RadioGroupList(props) {
+  const {
+    editableProps,
+    input,
+    inputProps,
+    options,
+    onChange
+  } = props;
+  const [editableValue, setEditableValue] = React$1.useState(() => {
+    const isRadioValue = options.find(option => option.value === input.value);
+    if (!isRadioValue) {
+      return input.value;
+    }
+    return '';
+  });
+  React$1.useEffect(() => {
+    // When a new value from outside enters the form
+    if (input.value) {
+      // Check value for radio type
+      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
+      // If new value not in radio list - set to editable input
+      setEditableValue(isRadioValue ? '' : input.value);
+    } else {
+      // If new value is empty - clear editable input
+      setEditableValue('');
+    }
+  }, [input.value]);
+
+  // Callback for value changes
+  const onChangeSomeInput = React$1.useCallback(value => {
+    // Save to form values
+    input.onChange(value);
+    if (onChange) {
+      // Pass to custom event
+      onChange(value, input.name);
+    }
+  }, [input, onChange]);
+
+  // Handle for radio inputs
+  const onChangeRadio = React$1.useCallback(value => {
+    setEditableValue('');
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+
+  // Handle for text input
+  const onChangeEditable = React$1.useCallback(value => {
+    setEditableValue(value);
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React__default.default.createElement(RadioGroupInput, {
+    key: option.label,
+    editableProps: editableProps,
+    input: input,
+    inputProps: inputProps,
+    option: option,
+    value: editableValue,
+    onChange: onChangeEditable
+  }) : /*#__PURE__*/React__default.default.createElement(RadioGroupItem, {
+    key: option.value,
+    input: input,
+    inputProps: inputProps,
+    option: option,
+    onChange: onChangeRadio
+  })));
+}
+
+const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(props) {
+  const {
+    name,
+    isDisabled,
+    editableProps = {},
+    fieldProps = {},
+    inputProps = {},
+    options = [],
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: 'form-radio',
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
+      isDisabled: isDisabled,
+      editableProps: editableProps,
+      input: input,
+      inputProps: updatedInputProps,
+      options: options,
+      onChange: onChange
+    }));
+  });
+});
+
+const defaultSegmentedProps = {
+  appearance: 'sizeM surfacePrimary',
+  width: 'fill',
+  errorLabelTextColor: 'errorTextPrimary',
+  requiredLabelTextColor: 'warningTextPrimary',
+  shape: 'rounded'
+};
+
+function SegmentedField(props) {
+  const {
+    name,
+    isDisabled,
+    fieldProps,
+    inputProps,
+    options,
+    showMessage,
+    isRequired
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm();
+  const setActiveSegment = React$1.useCallback(option => {
+    change(name, option.value);
+  }, [change]);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const activeOption = React$1.useMemo(() => {
+      const emptyOption = {
+        label: null,
+        value: null
+      };
+      if (input.value) {
+        const currentOption = options.find(option => option.value === input.value);
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-segmented",
+      inputName: input.name,
+      inputValue: input.value || [],
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
+      isDisabled: isDisabled,
+      activeSegment: activeOption,
+      segments: options,
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
+  });
+}
+
+const defaultSelectProps = {
+  elevation: 8,
+  isClearable: true,
+  isSearchable: true,
+  badgeAppearance: 'accent',
+  badgeSize: 'm',
+  badgeTextSize: 'm',
+  // clearIcon: icon24.Clear,
+  clearIconFill: 'surfaceItemPrimary',
+  closeMenuOnSelect: true,
+  // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
+
+  dividerDirection: 'horizontal',
+  dividerFill: 'surfaceTertiary',
+  dividerSize: 'xxs',
+  // dropdownIcon: icon24.ChevronDownSmall,
+  dropdownIconFill: 'surfaceItemPrimary',
+  // error
+  errorInputBorderColor: 'errorBorderPrimary',
+  headingFill: 'surfaceSecondary',
+  loadingMessage: /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+    width: "fill",
+    height: "fill",
+    fill: "surfacePrimary",
+    position: "absolute",
+    left: "0px",
+    right: "0px",
+    zIndex: "1",
+    itemFill: "surfaceItemAccent",
+    set: "simple"
+  })
+};
+
+function getDefaultValue(options, selectValue) {
+  const selectValues = Array.isArray(selectValue) ? selectValue : [selectValue];
+  let result = [];
+  options.forEach(item => {
+    const isValue = selectValues.includes(item.value);
+    const isLabel = selectValues.includes(item.label);
+    let childOptions = [];
+    if (item.options) {
+      childOptions = getDefaultValue(item.options, selectValue);
+    }
+    if (isValue || isLabel) {
+      result.push(item);
+    } else if (childOptions.length) {
+      result = result.concat(childOptions);
+    }
+  });
+  return result;
+}
+const SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(props) {
+  const {
+    isDisabled,
+    isRequired,
+    classNameGroupItem,
+    fieldProps,
+    initialValue,
+    name,
+    options = [],
+    selectProps,
+    selectRef,
+    showMessage,
+    onChange,
+    onInputChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+    const [selectedOptions, setSelectedOptions] = React$1.useState(null);
+    const defaultValue = React$1.useMemo(() => {
+      const optionsValues = getDefaultValue(options, input.value);
+      if (!optionsValues.length && input.value?.length) {
+        optionsValues.push({
+          label: input.value,
+          value: input.value
+        });
+      }
+      return optionsValues;
+    }, [input.value]);
+    const onChangeField = React$1.useCallback(value => {
+      input.onChange(value);
+      if (onChange) {
+        onChange(value, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const onChangeValue = React$1.useCallback((option, actionMeta) => {
+      const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
+      setSelectedOptions(option);
+      onChangeField(value);
+    }, [onChangeField]);
+    React$1.useEffect(() => {
+      setSelectedOptions(defaultValue);
+    }, [defaultValue]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedSelectProps = useValidationAppearanceInputProps({
+      inputProps: selectProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: 'form-select',
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
+      className: "form-select-item",
+      isDisabled: isDisabled,
+      instanceId: `id_${input.name}`,
+      options: options,
+      ref: selectRef,
+      value: selectedOptions,
+      onChange: onChangeValue,
+      onInputChange: onInputChange
+    }, updatedSelectProps)));
+  });
+});
+
+const defaultSwitchProps = {
+  fieldProps: {
+    width: 'fill',
+    size: 'xl',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    labelTextWeight: 'normal',
+    textColor: 'surfaceTextPrimary',
+    helpText: 'Supporting text',
+    helpTextColor: 'surfaceTextPrimary',
+    helpTextSize: 's',
+    helpTextWeight: 'normal',
+    showMessage: true
+  },
+  inputProps: {
+    size: 'm',
+    fill: 'surfaceSecondary',
+    title: 'Switch',
+    titleTextColor: 'surfaceTextPrimary',
+    titleTextSize: 's',
+    desc: 'Description',
+    descTextColor: 'surfaceTextPrimary',
+    descTextSize: 'xs'
+  }
+};
+
+const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(props) {
+  const {
+    name,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    type: "checkbox",
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = React$1.useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-switch",
+      inputName: input.name,
+      inputValue: input.checked,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      tag: "label",
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
+      type: "checkbox",
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      checked: input.checked,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const defaultTextareaProps = {
+  appearance: 'sizeM defaultSecondary',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
+};
+
+const TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaField(props) {
+  const {
+    name,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: 'form-textarea',
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const MaskedInputField = /*#__PURE__*/React__default.default.memo(function MaskedInputField(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    fieldProps = {},
+    inputProps = {},
+    optionsMask,
+    showMessage,
+    unmasked,
+    isRequired,
+    onClickClearIcon
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      ref,
+      unmaskedValue,
+      value,
+      setUnmaskedValue
+    } = reactImask.useIMask(optionsMask, {
+      onAccept: (newValue, event, element) => {
+        if (element) {
+          input.onChange(event._unmaskedValue);
+        }
+      }
+    });
+    React$1.useEffect(() => {
+      if (input.value !== unmaskedValue) {
+        setUnmaskedValue(input.value.replace(unmasked, ''));
+      }
+    }, [input.value]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: 'form-maskedInput',
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      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}`),
+      ref: ref,
+      value: value,
+      onBlur: input.onBlur,
+      onFocus: input.onFocus
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      size: clearIconSize,
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
+  });
+});
+
+const defaultChipsProps = {
+  appearance: 'surfacePrimary',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary'
+};
+
+function ChipsField(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    emptyMessage,
+    emptyMessageTextColor,
+    emptyMessageTextSize,
+    fieldProps,
+    inputProps,
+    options,
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm();
+
+  // Callback for value changes
+  const onChangeSomeInput = React$1.useCallback((inputValue, newOptionValue) => {
+    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
+    change(name, updatedValues);
+    onChange && onChange(updatedValues);
+  }, [change, name, onChange]);
+  React$1.useEffect(() => {
+    initialValue && change(name, initialValue);
+    // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue]);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    const activeOptionsList = React$1.useMemo(() => {
+      const emptyOptionsList = [{
+        label: null,
+        value: null
+      }];
+      if (input?.value) {
+        const currentOptions = options.filter(option => input.value?.includes(option.value));
+        return currentOptions || emptyOptionsList;
+      }
+      return emptyOptionsList;
+    }, [input.value]);
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-chips",
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), options.length ? options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
+      className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
+      key: option.value,
+      label: option.label,
+      isDisabled: option.isDisabled,
+      value: option.value,
+      isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      onClick: () => onChangeSomeInput(input.value, option.value)
+    }, updatedInputProps))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      size: emptyMessageTextSize,
+      textColor: emptyMessageTextColor
+    }, emptyMessage));
+  });
+}
+
+const formTypes = {
+  code: 'code',
+  text: 'text',
+  textarea: 'textarea',
+  custom: 'custom',
+  checkbox: 'checkbox',
+  chips: 'chips',
+  choice: 'choice',
+  datePicker: 'datePicker',
+  dateRangePicker: 'dateRangePicker',
+  fileInput: 'fileInput',
+  group: 'group',
+  maskedInput: 'maskedInput',
+  radioGroup: 'radioGroup',
+  segmented: 'segmented',
+  select: 'select',
+  switch: 'switch'
+};
+function generateField(field, config, props) {
+  switch (field.type) {
+    case formTypes.checkbox:
+      {
+        return /*#__PURE__*/React__default.default.createElement(CheckboxField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.choice:
+      {
+        return /*#__PURE__*/React__default.default.createElement(ChoiceField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.chips:
+      {
+        return /*#__PURE__*/React__default.default.createElement(ChipsField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React__default.default.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.switch:
+      {
+        return /*#__PURE__*/React__default.default.createElement(SwitchField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.segmented:
+      {
+        return /*#__PURE__*/React__default.default.createElement(SegmentedField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.datePicker:
+      {
+        return /*#__PURE__*/React__default.default.createElement(DatePickerField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.fileInput:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FileInput, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.radioGroup:
+      {
+        return /*#__PURE__*/React__default.default.createElement(RadioGroup, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.select:
+      {
+        return /*#__PURE__*/React__default.default.createElement(SelectField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.text:
+      {
+        return /*#__PURE__*/React__default.default.createElement(InputField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.textarea:
+      {
+        return /*#__PURE__*/React__default.default.createElement(TextareaField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.maskedInput:
+      {
+        return /*#__PURE__*/React__default.default.createElement(MaskedInputField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.custom:
+      {
+        return /*#__PURE__*/React__default.default.createElement(CustomField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.group:
+      {
+        return /*#__PURE__*/React__default.default.createElement(Group, Object.assign({
+          key: config.key
+        }, field, props), Object.entries(field.group).map(([key, value]) => {
+          const groupProps = {
+            ...value,
+            classNameGroupItem: value.classNameGroupItem || 'form__group-item',
+            showMessage: field.showMessage
+          };
+          return generateField(groupProps, {
+            key: key + '_form_group'
+          }, props);
+        }));
+      }
+  }
+}
+
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
+    if (fieldName === finalForm.FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return `react-select-id_${fieldName}-input`;
+  });
+  const errorFieldElement = formElementsList.find(element => {
+    if (element.name) {
+      return finalForm.getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  const errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    let errorElement;
+    try {
+      const 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;
+};
+const focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
+  if (fieldName === 'non_field_errors') {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
+
+      // 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;
+    }
+  }
+};
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios__default.default({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
+
+const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
+  const {
+    className,
+    type,
+    initialValues,
+    initialValuesEqual,
+    config,
+    title,
+    titleFill,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
+    desc,
+    descSize,
+    descTextColor,
+    descTextWeight,
+    primaryButton,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    primaryButtonLabel,
+    primaryButtonLabelSize,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelTextWeight,
+    primaryButtonSize,
+    secondaryButton,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
+    secondaryButtonLabelSize,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelTextWeight,
+    secondaryButtonSize,
+    tertiaryButton,
+    tertiaryButtonFill,
+    tertiaryButtonFillHover,
+    tertiaryButtonLabel,
+    tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextColor,
+    tertiaryButtonLabelTextWeight,
+    tertiaryButtonSize,
+    dataTestIdPrimaryButton,
+    dataTourPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTourSecondaryButton,
+    onClickSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTourTertiaryButton,
+    onClickTertiaryButton,
+    additionalProps = {},
+    buttonDirection = 'vertical',
+    buttonFill,
+    buttonGap,
+    buttonJustifyContent,
+    buttonPadding,
+    buttonPosition,
+    dataTestId,
+    dataTestIdButtons,
+    dataTour,
+    dataTourButtons,
+    disableFieldsAutoComplete = false,
+    fieldsGap,
+    formName,
+    groupGap,
+    language,
+    loader,
+    loaderFill,
+    loaderItemFill,
+    loaderShape,
+    loaderSize,
+    loaderText,
+    loaderType,
+    mutators,
+    notificationCloseButton,
+    notificationType,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
+    validationSchema,
+    before,
+    after,
+    isLoading,
+    onChangeFormValues,
+    onSubmit
+  } = props;
+  const validate = useYupValidationSchema(validationSchema, language);
+  const onRefFormInstance = React$1.useCallback(formInstance => {
+    if (ref) {
+      ref.current = formInstance;
+    }
+  }, [ref]);
+  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+  const {
+    directionClass,
+    fillClass,
+    elevationClass,
+    shapeClass
+  } = propsGenerator;
+  const {
+    styles: formStyles,
+    wrapper: wrapperStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
+    initialValues: initialValues,
+    initialValuesEqual: initialValuesEqual,
+    render: ({
+      submitError,
+      form,
+      handleSubmit,
+      modifiedSinceLastSubmit
+    }) => {
+      return /*#__PURE__*/React__default.default.createElement("form", {
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
+        name: formName,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
+        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        "data-test-id": dataTestId,
+        "data-tour": dataTour
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
+        ref: () => onRefFormInstance(form),
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
+        style: formStyles,
+        onSubmit: handleSubmit
+      }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
+        className: "form__title",
+        size: titleTextSize,
+        fill: titleFill,
+        textColor: titleTextColor,
+        textWeight: titleTextWeight
+      }, title), desc && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+        className: "form__desc",
+        size: descSize,
+        textColor: descTextColor,
+        textWeight: descTextWeight
+      }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
+        className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
+      }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
+        className: "form-notification__item",
+        title: form.getState().submitError,
+        titleTextSize: "h6",
+        status: "error",
+        closeButton: notificationCloseButton,
+        set: "form"
+      })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
+        subscription: {
+          values: true
+        },
+        onChange: onChangeFormValues
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__wrapper",
+        direction: "vertical",
+        gap: fieldsGap || groupGap,
+        style: wrapperStyles
+      }, Object.keys(config).map(key => generateField(config[key], {
+        key
+      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+        className: "form__loader",
+        type: loaderType,
+        size: loaderSize,
+        fill: loaderFill,
+        text: loaderText,
+        itemFill: loaderItemFill,
+        shape: loaderShape
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__button",
+        direction: buttonDirection,
+        justifyContent: buttonJustifyContent,
+        fill: buttonFill,
+        padding: buttonPadding,
+        gap: buttonGap,
+        dataTestId: dataTestIdButtons,
+        dataTour: dataTourButtons
+      }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        className: "form__button-item",
+        width: "fill",
+        size: primaryButtonSize,
+        fill: primaryButtonFill,
+        fillHover: primaryButtonFillHover,
+        label: primaryButtonLabel,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        className: "form__button-item",
+        width: "fill",
+        size: secondaryButtonSize,
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
+        label: secondaryButtonLabel,
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelTextSize: secondaryButtonLabelSize,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        dataTestId: dataTestIdSecondaryButton,
+        dataTour: dataTourSecondaryButton,
+        onClick: onClickSecondaryButton
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        className: "form__button-item",
+        width: "fill",
+        size: tertiaryButtonSize,
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
+        label: tertiaryButtonLabel,
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelTextSize: tertiaryButtonLabelSize,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        dataTestId: dataTestIdTertiaryButton,
+        dataTour: dataTourTertiaryButton,
+        onClick: onClickTertiaryButton
+      }) : tertiaryButton), after);
+    },
+    decorators: [focusOnErrorDecorator],
+    mutators: mutators,
+    subscription: {
+      submitError: true,
+      modifiedSinceLastSubmit: true,
+      pristine: true,
+      submitting: true
+    },
+    validate: validate,
+    onSubmit: onSubmit
+  });
+});
+FinalForm.defaultProps = {
+  direction: 'vertical'
+};
+
+const DEFAULT_MESSAGES_FIELDS = {
+  /*
+   !!! it also works without props simply based on the class and key as before `input_state_${meta.error.key}`
+   the KEY is needed for example for border color
+   the name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
+  ...example
+         required - KEY for yellow color
+        error - KEY for red color
+        custom or blue - KEY blue or other color
+          requiredBorderColor: 'warningBorderPrimary',
+        errorBorderColor: 'errorBorderPrimary',
+        customBorderColor: 'customBorderPrimary',
+        blueBorderColor: 'blueBorderPrimary',
+         const defaultFieldProps = {
+           messageTextSize: 's',
+          messageTextColor: 'surfaceTextSecondary',
+           requiredMessageTextSize: 's',
+          requiredMessageTextColor: 'warningTextPrimary',
+           errorMessageTextSize: 's',
+          errorMessageTextColor: 'errorTextPrimary',
+        }
+           // INPUT
+        const defaultInputProps = {
+        ... other
+         stateBorderColor: 'surfaceBorderTertiary',
+        requiredStateBorderColor: 'warningBorderPrimary',
+        errorStateBorderColor: 'errorBorderPrimary',
+        }
+         // RADIO
+        const defaultRadioProps = {
+        ... other
+         stateBorderColor: 'surfaceBorderTertiary',
+        requiredStateBorderColor: 'warningBorderPrimary',
+        errorStateBorderColor: 'errorBorderPrimary',
+        }
+         // SELECT
+        const defaultSelectProps = {
+        ... other
+         borderColor: 'surfaceBorderTertiary',
+        requiredBorderColor: 'warningBorderPrimary',
+        errorBorderColor: 'errorBorderPrimary',
+         inputBorderColor: 'surfaceBorderTertiary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+        errorInputBorderColor: 'errorBorderPrimary',
+        }
+         ... etc
+  */
+
+  // DEFAULT
+  // required - KEY for yellow color
+  // error - KEY for red color
+
+  // key: 'required'
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  },
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
+  },
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  // key: 'error'
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
+  min: {
+    key: 'error',
+    message: ({
+      min
+    }) => `Значение должно быть не менее ${min} символов`
+  },
+  max: {
+    key: 'error',
+    message: ({
+      max
+    }) => `Значение должно быть не менее ${max} символов`
+  },
+  url: {
+    key: 'error',
+    message: 'Введите корректный URL-адрес'
+  },
+  invalid_value: {
+    key: 'error',
+    message: 'Некорректное значение'
+  },
+  numeric_value: {
+    key: 'error',
+    message: 'Только числовое значение'
+  },
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  }
+};
+
+const parseNumericField = value => {
+  const numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
+  const parsedValue = parseFloat(numberValue);
+  if (parsedValue || parsedValue === 0) {
+    if (numberValue.endsWith('.')) {
+      if ((numberValue.match(/\./g) || []).length > 1) {
+        return numberValue.slice(0, -1);
+      }
+      return numberValue;
+    }
+    return numberValue;
+  }
+  return '';
+};
+
+// const getErrorsForFinalForm = (errorData) => {
+//   /*
+//    * errorData - its an "axios" error
+//    */
+
+//   const formErrors = {}
+
+//   const responseErrorMessage = errorData.toJSON ? errorData.toJSON().message : errorData.message
+
+//   // const status = (errorData.response && errorData.response.status) || null
+//   const problemError = getProblemFromError(errorData)
+//   // const problemStatus = getProblemFromStatus(status)
+
+//   if (problemError === NETWORK_ERROR || problemError === CONNECTION_ERROR) {
+//     // Say to "react-final-form" that we have general error
+//     formErrors[FORM_ERROR] = 'Проблемы с подключением к сервису'
+//   } else if (errorData.response?.data) {
+//     // Collect errors for some fields, which in the response from server
+//     const serverErrors = errorData.response.data
+//     if (typeof serverErrors === 'string') {
+//       if (errorData.response.status === 500) {
+//         formErrors[FORM_ERROR] =
+//           'Во время обработки запроса произошла ошибка, попробуйте повторить запрос'
+//       }
+//       // formErrors[FORM_ERROR] = responseErrorMessage
+//     } else {
+//       if (errorData.response.status === 500) {
+//         formErrors[FORM_ERROR] =
+//           'Во время обработки запроса произошла ошибка, попробуйте повторить запрос'
+//       }
+//       for (const key in serverErrors) {
+//         // TODO: what is forms has "detail" field? show as form error is well?
+//         const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key
+//         // Say to "react-final-form" that we have some fields errors
+//         formErrors[errorFieldKey] = castArray(serverErrors[key])[0]
+//       }
+//     }
+//   } else if (typeof errorData === 'object' && Object.keys(errorData).length) {
+//     for (const key in errorData) {
+//       const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key
+//       // Say to "react-final-form" that we have some fields errors
+//       formErrors[errorFieldKey] = castArray(errorData[key])[0]
+//     }
+//   } else {
+//     // Say to "react-final-form" that we have general error
+//     formErrors[FORM_ERROR] = responseErrorMessage || 'Произошла ошибка'
+//   }
+
+//   return formErrors
+// }
+
+const getErrorsForFinalForm = error => {
+  /*
+   * error - its an "axios" error in many cases
+   */
+
+  const formErrors = {};
+  const serverErrors = error.response?.data;
+  if (serverErrors) {
+    // Collect errors for some fields, which in the response from server
+    if (typeof serverErrors === 'string') {
+      // Server may send an html page as error data
+      formErrors[finalForm.FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
+    } else {
+      for (const key in serverErrors) {
+        // "non_field_errors" and "detail" is special keys in django to mark errors not for fields
+        const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? finalForm.FORM_ERROR : key;
+
+        // Say to "react-final-form" that we have some fields errors
+        formErrors[errorFieldKey] = castArray__default.default(serverErrors[key])[0];
+      }
+    }
+  } else {
+    // const responseErrorMessage = error.toJSON
+    //   ? error.toJSON().message
+    //   : error.message
+
+    // Say to "react-final-form" that we have general error
+    formErrors[finalForm.FORM_ERROR] = error.message || 'Произошла ошибка';
+  }
+  return formErrors;
+};
+
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () { return reactFinalForm.Field; }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function () { return reactFinalForm.useForm; }
+});
+Object.defineProperty(exports, "useFormState", {
+  enumerable: true,
+  get: function () { return reactFinalForm.useFormState; }
+});
+exports.CheckboxField = CheckboxField;
+exports.ChipsField = ChipsField;
+exports.ChoiceField = ChoiceField;
+exports.CodeField = CodeField;
+exports.CustomField = CustomField;
+exports.DEFAULT_MESSAGES_FIELDS = DEFAULT_MESSAGES_FIELDS;
+exports.DatePickerField = DatePickerField;
+exports.FieldWrapper = FieldWrapper;
+exports.FieldWrapperBase = FieldWrapperBase;
+exports.FileInput = FileInput;
+exports.FinalForm = FinalForm;
+exports.Group = Group;
+exports.InputField = InputField;
+exports.MaskedInputField = MaskedInputField;
+exports.RadioGroup = RadioGroup;
+exports.SegmentedField = SegmentedField;
+exports.SelectField = SelectField;
+exports.SwitchField = SwitchField;
+exports.TextareaField = TextareaField;
+exports.addRequiredFieldsParamToSchema = addRequiredFieldsParamToSchema;
+exports.dateValidation = dateValidation;
+exports.defaultCheckboxProps = defaultCheckboxProps;
+exports.defaultChipsProps = defaultChipsProps;
+exports.defaultChoiceProps = defaultChoiceProps;
+exports.defaultCodeProps = defaultCodeProps;
+exports.defaultDatepickerProps = defaultDatepickerProps;
+exports.defaultDropzoneProps = defaultDropzoneProps;
+exports.defaultFieldProps = defaultFieldProps;
+exports.defaultInputProps = defaultInputProps;
+exports.defaultRadioProps = defaultRadioProps;
+exports.defaultSegmentedProps = defaultSegmentedProps;
+exports.defaultSelectProps = defaultSelectProps;
+exports.defaultSwitchProps = defaultSwitchProps;
+exports.defaultTextareaProps = defaultTextareaProps;
+exports.emailValidation = emailValidation;
+exports.focusOnError = focusOnError;
+exports.focusOnErrorDecorator = focusOnErrorDecorator;
+exports.formTypes = formTypes;
+exports.generateField = generateField;
+exports.getErrorsForFinalForm = getErrorsForFinalForm;
+exports.parseNumericField = parseNumericField;
+exports.phoneValidation = phoneValidation;
+exports.sendFormDataToServer = sendFormDataToServer;
+exports.setErrorsMutator = setErrorsMutator;
+exports.useYupValidationSchema = useYupValidationSchema;