@itcase/forms 1.1.9 → 1.1.11

package/dist/itcase-forms.esm.js

@@ -1,3046 +0,0 @@
-import { isPossiblePhoneNumber } from 'libphonenumber-js';
-import React$1, { useMemo, useEffect, useCallback, useState } from 'react';
-import { setIn, FORM_ERROR, getIn } from 'final-form';
-import { useForm, Field, Form, FormSpy } from 'react-final-form';
-export { Field, useForm, useFormState } from 'react-final-form';
-import clsx from 'clsx';
-import { Checkbox } from '@itcase/ui/components/Checkbox';
-import { Divider } from '@itcase/ui/components/Divider';
-import { Text } from '@itcase/ui/components/Text';
-import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
-import { useStyles } from '@itcase/ui/hooks/useStyles';
-import camelCase from 'lodash/camelCase';
-import snakeCase from 'lodash/snakeCase';
-import { Choice } from '@itcase/ui/components/Choice';
-import { Icon } from '@itcase/ui/components/Icon';
-import { Code } from '@itcase/ui/components/Code';
-import { DatePickerInput } from '@itcase/ui/components/DatePicker';
-import { useDevicePropsGenerator } from '@itcase/ui/hooks/useDevicePropsGenerator';
-import axios from 'axios';
-import { fromEvent } from 'file-selector';
-import castArray from 'lodash/castArray';
-import { useDropzone, ErrorCode } from 'react-dropzone';
-import { createFileFromDataURL } from '@itcase/common';
-import { Loader } from '@itcase/ui/components/Loader';
-import { Title } from '@itcase/ui/components/Title';
-import { Input } from '@itcase/ui/components/Input';
-import { Radio } from '@itcase/ui/components/Radio';
-import { Segmented } from '@itcase/ui/components/Segmented';
-import { Select } from '@itcase/ui/components/Select';
-import { Switch } from '@itcase/ui/components/Switch';
-import { Textarea } from '@itcase/ui/components/Textarea';
-import { useIMask } from 'react-imask';
-import { Chips } from '@itcase/ui/components/Chips';
-import { Button } from '@itcase/ui/components/Button';
-import { Group as Group$1 } from '@itcase/ui/components/Group';
-import { NotificationItem } from '@itcase/ui/components/Notification';
-import createDecorator from 'final-form-focus';
-
-const phoneValidation = value => {
-  if (!value) {
-    return true;
-  }
-  return 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 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 = 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 = useMemo(() => clsx(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
-  const fieldClass = useMemo(() => clsx(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
-  const sizeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field_size_',
-    propsKey: 'size'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const inputFillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'inputFill'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field_shape_',
-    propsKey: 'shape'
-  });
-  const inputShapeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field__item-value_shape_',
-    propsKey: 'inputShape'
-  });
-  const directionClass = useDeviceTargetClass(props, {
-    prefix: 'direction_',
-    propsKey: 'direction'
-  });
-  const widthClass = useDeviceTargetClass(props, {
-    prefix: 'width_',
-    propsKey: 'width'
-  });
-  const {
-    styles: formFieldStyles
-  } = useStyles(props);
-  const errorTextSize = props[`${errorKey}MessageTextSize`];
-  const errorTextColor = props[`${errorKey}MessageTextColor`];
-  const errorTextWeight = props[`${errorKey}MessageTextWeight`];
-  return /*#__PURE__*/React$1.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-test-id": `${inputName}Field`,
-    "data-tour": dataTour,
-    style: formFieldStyles
-  }, before, (label || labelHidden) && /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`,
-    htmlFor: id
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    size: labelTextSize,
-    textColor: labelTextColor,
-    textWeight: labelTextWeight,
-    sizeMobile: labelTextSizeMobile,
-    sizeTablet: labelTextSizeTablet
-  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-field__desc",
-    "data-test-id": `${inputName}FieldDesc`
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    size: descTextSize,
-    textColor: descTextColor,
-    textWeight: descTextWeight
-  }, desc)), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-field__content', inputFillClass, inputShapeClass)
-  }, /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-field__content-inner', fieldClass)
-  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React$1.createElement(Divider, {
-    className: "form-field__item-divider",
-    width: dividerWidth,
-    direction: dividerDirection,
-    size: dividerSize,
-    fill: dividerFill
-  })), showMessage && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-field__message",
-    "data-test-id": `${inputName}FieldMessage`
-  }, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(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$1.createElement(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$1.createElement(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
-  } = useForm(); // , mutators
-
-  useEffect(() => {
-    return () => {
-      change(inputName, undefined);
-    };
-  }, []);
-  return /*#__PURE__*/React$1.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 = 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 = 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 = 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 = 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(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(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$1.memo(function CheckboxField(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.memo(function ChoiceField(props) {
-  const {
-    name,
-    initialValue,
-    label,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    messageType,
-    options,
-    placeholder,
-    showMessage,
-    isCheckbox,
-    isRequired,
-    onChange
-  } = props;
-  const {
-    change
-  } = useForm();
-  const setActiveSegment = useCallback((option, isChecked) => {
-    change(name, isChecked && option.value);
-    if (onChange) {
-      onChange(option.value, name, isChecked);
-    }
-  }, [change, onChange]);
-  return /*#__PURE__*/React$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(Choice, Object.assign({
-      className: clsx(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$1.memo(function CustomField(props) {
-  const {
-    Component,
-    isDisabled,
-    isRequired,
-    name,
-    initialValue,
-    fieldProps = {},
-    classNameGroupItem,
-    showMessage,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    onClickClearIcon
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(Component, Object.assign({}, updatedInputProps, {
-      input: input,
-      isDisabled: isDisabled,
-      meta: meta
-    })), clearIcon && /*#__PURE__*/React$1.createElement(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$1.memo(function CodeField(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(DatePickerInput, {
-      name: input.name,
-      isDisabled: isDisabled,
-      datePickerProps: datePickerProps,
-      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
-      inputProps: updatedInputProps,
-      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }));
-  });
-}
-
-const defaultDropzoneProps = {
-  fill: 'surfacePrimary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
-  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
-  hintTitleTextColor: 'surfaceTextPrimary',
-  hintTitleTextSize: 'm',
-  removeThumbText: 'удалить',
-  removeThumbTextColor: 'errorTextPrimary',
-  removeThumbTextHoverColor: 'errorTextPrimaryHover',
-  removeThumbTextSize: 's',
-  shape: 'rounded',
-  showFilename: true,
-  thumbBorderColor: 'surfaceBorderTertiary',
-  thumbBorderColorHover: 'surfaceBorderQuaternary',
-  thumbBorderWidth: 1,
-  thumbNameTextColor: 'surfaceTextPrimary',
-  thumbNameTextSize: 's',
-  isPreviews: true
-};
-
-const FileInputDropzone = /*#__PURE__*/React$1.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
-  } = useForm();
-  const [fileError, setFileError] = useState('');
-  const [fileIsLoading, setFileIsLoading] = useState(false);
-  const filesList = useMemo(() => inputValue ? castArray(inputValue) : [], [inputValue]);
-  const changeFormState = 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 = 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 = 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
-  } = useDropzone({
-    maxFiles: maxFiles || 5,
-    maxSize: maxSize || 10485760,
-    // 10mb
-    // accept: { 'image/*': [] },
-    ...dropzoneProps,
-    getFilesFromEvent: async event => {
-      const result = await 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 === ErrorCode.TooManyFiles) {
-            fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
-          } else {
-            fileErrorMessage = firstFileErrorItem.message;
-          }
-        }
-        // Show error
-        setFileError(fileErrorMessage);
-      } else {
-        // Else clean error
-        setFileError('');
-      }
-    }
-  });
-  useEffect(() => {
-    const currentFilesList = castArray(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(props);
-  const {
-    fillClass,
-    fillHoverClass,
-    borderColorClass,
-    borderColorHoverClass,
-    borderTypeClass,
-    borderWidthClass,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
-    removeThumbTextWeight,
-    shapeClass,
-    thumbBorderColorClass,
-    thumbBorderColorHoverClass,
-    thumbBorderTypeClass,
-    thumbBorderWidthClass,
-    thumbDirectionClass,
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} thumbColumn form-dropzone__dropzone_size_${size} ${shapeClass}`
-  }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
-    name: inputName
-  })), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
-  }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
-    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-    key: file.id || `${file.name}_${index}`
-  }, isPreviews && !file.error && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-image"
-  }, /*#__PURE__*/React$1.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$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Text, {
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-name"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__thumb-name-inner",
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, file.name)), fileIsLoading && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-loader"
-  }, /*#__PURE__*/React$1.createElement(Loader, {
-    width: "fill",
-    height: "fill",
-    fill: "surfacePrimary",
-    itemFill: "surfaceItemAccent",
-    set: "simple"
-  })), /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-remove",
-    onClick: event => removeFile(event, index)
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__thumb-remove-text",
-    size: removeThumbTextSize,
-    textColor: removeThumbTextColor,
-    textColorHover: removeThumbTextHoverColor,
-    textWeight: removeThumbTextWeight
-  }, removeThumbText || 'Удалить')))), !filesList.length ? /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__hint"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)) : /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)))), fileError && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-field__message"
-  }, /*#__PURE__*/React$1.createElement(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({
-      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 = 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$1.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(props);
-  const {
-    size,
-    fill,
-    fillHover,
-    labelTextColor,
-    borderColorHover,
-    borderType,
-    borderWidth,
-    errorMessageTextColor = 'errorTextPrimary',
-    errorMessageTextSize = 's',
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
-    removeThumbTextWeight,
-    shape,
-    thumbBorderColor,
-    thumbBorderColorHover,
-    thumbBorderType,
-    thumbBorderWidth,
-    thumbColumn = 1,
-    thumbDirection = 'vertical',
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
-  return /*#__PURE__*/React$1.createElement(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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.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,
-      removeThumbText: removeThumbText,
-      removeThumbTextColor: removeThumbTextColor,
-      removeThumbTextHoverColor: removeThumbTextHoverColor,
-      removeThumbTextSize: removeThumbTextSize,
-      removeThumbTextWeight: removeThumbTextWeight,
-      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$1.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$1.createElement(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$1.createElement("div", {
-      className: clsx('form__group', className, isHidden && 'form__group_hidden'),
-      "data-tour": dataTour
-    }, /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-wrapper"
-    }, before, label && /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-label"
-    }, /*#__PURE__*/React$1.createElement(Title, {
-      size: labelTextSize,
-      textColor: labelTextColor,
-      textWeight: labelTextWeight
-    }, label)), /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(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$1.createElement(Text, {
-      className: "form__group-message",
-      size: messageTextSize,
-      textColor: messageTextColor,
-      textWeight: messageTextWeight
-    }, message), !isErrorState && !message && /*#__PURE__*/React$1.createElement(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$1.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] = useState(false);
-  const inputType = useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
-  return /*#__PURE__*/React$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(Input, Object.assign({
-      className: clsx(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$1.createElement(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$1.createElement(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 = useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(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 = useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(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] = useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  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 = 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 = useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React$1.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React$1.createElement(RadioGroupItem, {
-    key: option.value,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    onChange: onChangeRadio
-  })));
-}
-
-const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
-  const {
-    name,
-    isDisabled,
-    editableProps = {},
-    fieldProps = {},
-    inputProps = {},
-    options = [],
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.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
-  } = useForm();
-  const setActiveSegment = useCallback(option => {
-    change(name, option.value);
-  }, [change]);
-  return /*#__PURE__*/React$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.createElement(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$1.memo(function SelectField(props) {
-  const {
-    isDisabled,
-    isRequired,
-    classNameGroupItem,
-    fieldProps,
-    initialValue,
-    name,
-    options = [],
-    selectProps,
-    selectRef,
-    showMessage,
-    onChange,
-    onInputChange
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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] = useState(null);
-    const defaultValue = 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 = useCallback(value => {
-      input.onChange(value);
-      if (onChange) {
-        onChange(value, input.name);
-      }
-    }, [onChange, input.onChange]);
-    const onChangeValue = useCallback((option, actionMeta) => {
-      const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
-      setSelectedOptions(option);
-      onChangeField(value);
-    }, [onChangeField]);
-    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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.memo(function SwitchField(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.memo(function TextareaField(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired
-  } = props;
-  return /*#__PURE__*/React$1.createElement(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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(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$1.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$1.createElement(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
-    } = useIMask(optionsMask, {
-      onAccept: (newValue, event, element) => {
-        if (element) {
-          input.onChange(event._unmaskedValue);
-        }
-      }
-    });
-    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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(Input, Object.assign({
-      className: clsx(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$1.createElement(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
-  } = useForm();
-
-  // Callback for value changes
-  const onChangeSomeInput = useCallback((inputValue, newOptionValue) => {
-    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
-    change(name, updatedValues);
-    onChange && onChange(updatedValues);
-  }, [change, name, onChange]);
-  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$1.createElement(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 = 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$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('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$1.createElement(Chips, Object.assign({
-      className: clsx(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$1.createElement(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$1.createElement(CheckboxField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.choice:
-      {
-        return /*#__PURE__*/React$1.createElement(ChoiceField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.chips:
-      {
-        return /*#__PURE__*/React$1.createElement(ChipsField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.code:
-      {
-        return /*#__PURE__*/React$1.createElement(CodeField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.switch:
-      {
-        return /*#__PURE__*/React$1.createElement(SwitchField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.segmented:
-      {
-        return /*#__PURE__*/React$1.createElement(SegmentedField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.datePicker:
-      {
-        return /*#__PURE__*/React$1.createElement(DatePickerField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.fileInput:
-      {
-        return /*#__PURE__*/React$1.createElement(FileInput, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.radioGroup:
-      {
-        return /*#__PURE__*/React$1.createElement(RadioGroup, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.select:
-      {
-        return /*#__PURE__*/React$1.createElement(SelectField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.text:
-      {
-        return /*#__PURE__*/React$1.createElement(InputField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.textarea:
-      {
-        return /*#__PURE__*/React$1.createElement(TextareaField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.maskedInput:
-      {
-        return /*#__PURE__*/React$1.createElement(MaskedInputField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.custom:
-      {
-        return /*#__PURE__*/React$1.createElement(CustomField, Object.assign({
-          key: config.key
-        }, field, props));
-      }
-    case formTypes.group:
-      {
-        return /*#__PURE__*/React$1.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 === 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 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 === 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(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({
-      url: url,
-      method: 'POST',
-      data: data
-    });
-    return {
-      success: true,
-      response
-    };
-  } catch (error) {
-    const formErrors = {};
-    if (typeof error.response?.data === 'string') {
-      formErrors[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$1.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 = useCallback(formInstance => {
-    if (ref) {
-      ref.current = formInstance;
-    }
-  }, [ref]);
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    directionClass,
-    fillClass,
-    elevationClass,
-    shapeClass
-  } = propsGenerator;
-  const {
-    styles: formStyles,
-    wrapper: wrapperStyles
-  } = useStyles(props);
-  return /*#__PURE__*/React$1.createElement(Form, {
-    initialValues: initialValues,
-    initialValuesEqual: initialValuesEqual,
-    render: ({
-      submitError,
-      form,
-      handleSubmit,
-      modifiedSinceLastSubmit
-    }) => {
-      return /*#__PURE__*/React$1.createElement("form", {
-        className: clsx(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$1.createElement(Title, {
-        className: "form__title",
-        size: titleTextSize,
-        fill: titleFill,
-        textColor: titleTextColor,
-        textWeight: titleTextWeight
-      }, title), desc && /*#__PURE__*/React$1.createElement(Text, {
-        className: "form__desc",
-        size: descSize,
-        textColor: descTextColor,
-        textWeight: descTextWeight
-      }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React$1.createElement("div", {
-        className: clsx('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
-      }, /*#__PURE__*/React$1.createElement(NotificationItem, {
-        className: "form-notification__item",
-        title: form.getState().submitError,
-        titleTextSize: "h6",
-        status: "error",
-        closeButton: notificationCloseButton,
-        set: "form"
-      })), onChangeFormValues && /*#__PURE__*/React$1.createElement(FormSpy, {
-        subscription: {
-          values: true
-        },
-        onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React$1.createElement(Group$1, {
-        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$1.createElement(Loader, {
-        className: "form__loader",
-        type: loaderType,
-        size: loaderSize,
-        fill: loaderFill,
-        text: loaderText,
-        itemFill: loaderItemFill,
-        shape: loaderShape
-      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React$1.createElement(Group$1, {
-        className: "form__button",
-        direction: buttonDirection,
-        justifyContent: buttonJustifyContent,
-        fill: buttonFill,
-        padding: buttonPadding,
-        gap: buttonGap,
-        dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
-      }, primaryButtonLabel ? /*#__PURE__*/React$1.createElement(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$1.createElement(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$1.createElement(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[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' ? FORM_ERROR : key;
-
-        // Say to "react-final-form" that we have some fields errors
-        formErrors[errorFieldKey] = castArray(serverErrors[key])[0];
-      }
-    }
-  } else {
-    // const responseErrorMessage = error.toJSON
-    //   ? error.toJSON().message
-    //   : error.message
-
-    // Say to "react-final-form" that we have general error
-    formErrors[FORM_ERROR] = error.message || 'Произошла ошибка';
-  }
-  return formErrors;
-};
-
-export { CheckboxField, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField, TextareaField, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultInputProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };