@itcase/forms 1.1.40 → 1.1.43

package/dist/itcase-forms.esm.js

@@ -1,16 +1,22 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
-import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import React, { 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 { useDevicePropsGenerator } from '@itcase/ui/hooks/useDevicePropsGenerator';
+import { Checkbox } from '@itcase/ui/components/Checkbox';
 import camelCase from 'lodash/camelCase';
 import snakeCase from 'lodash/snakeCase';
 import { Divider } from '@itcase/ui/components/Divider';
 import { Text } from '@itcase/ui/components/Text';
 import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
 import { useStyles } from '@itcase/ui/hooks/useStyles';
+import { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
+import { Choice } from '@itcase/ui/components/Choice';
+import { Code } from '@itcase/ui/components/Code';
+import { Icon } from '@itcase/ui/components/Icon';
+import { 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';
@@ -19,20 +25,14 @@ import { createFileFromDataURL } from '@itcase/common';
 import { Button } from '@itcase/ui/components/Button';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
-import { Checkbox } from '@itcase/ui/components/Checkbox';
-import { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
-import { Choice } from '@itcase/ui/components/Choice';
-import { Code } from '@itcase/ui/components/Code';
-import { Icon } from '@itcase/ui/components/Icon';
-import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import { Input } from '@itcase/ui/components/Input';
-import { icons24 } from '@itcase/icons/default';
+import { useIMask } from 'react-imask';
+import { InputPassword } from '@itcase/ui/components/InputPassword';
+import { Radio } from '@itcase/ui/components/Radio';
 import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
-import { useIMask } from 'react-imask';
-import { Radio } from '@itcase/ui/components/Radio';
 import { Group } from '@itcase/ui/components/Group';
 import { Notification } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
@@ -117,6 +117,16 @@ function useYupValidationSchema(schema, language) {
   return validate;
 }
 
+const defaultCheckboxProps = {
+  appearance: 'defaultPrimary sizeL solid',
+  width: 'fill',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeL solid',
+  // Required
+  requiredAppearance: 'requirePrimary sizeL solid'
+};
+
 // Whether to display an error message based on "fieldProps" and meta-objects
 function useFieldValidationState(props) {
   const {
@@ -430,428 +440,477 @@ function FieldWrapper(props) {
   return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
 }
 
-const defaultDropzoneProps = {
-  fill: 'surfaceSecondary',
-  fillHover: 'surfaceTertiary',
-  // 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 FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.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,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field-checkbox', 'form__item_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.createElement(Checkbox, Object.assign({
+      type: "checkbox",
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      checked: input.checked,
+      isActive: input.checked,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const defaultChipsProps = {
+  appearance: 'surfacePrimary sizeM rounded',
+  width: 'fill',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  // Success
+  // successAppearance: 'successPrimary sizeM solid rounded',
 };
 
-const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
+function FormFieldChips(props) {
   const {
-    className,
-    maxFiles,
-    maxSize,
-    size,
-    fileErrorText,
-    dropzoneProps = {},
-    hintDescription,
-    hintTitle,
-    inputName,
-    inputValue,
-    showFilename,
-    thumbColumn,
-    isPreviews,
-    onAddFiles,
-    onClickPreview,
-    onDeleteFile
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    emptyMessage,
+    emptyMessageTextColor,
+    emptyMessageTextSize,
+    fieldProps,
+    inputProps,
+    options,
+    showMessage,
+    isRequired,
+    onChange
   } = 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);
+  // 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.createElement(Field, {
+    name: name,
+    initialValue: initialValue
+  }, function Render({
+    input,
+    meta
+  }) {
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    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;
       }
-    }
-    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('');
-      }
-    }
+      return emptyOptionsList;
+    }, [input.value]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_chips', 'form__item_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 ? /*#__PURE__*/React.createElement(ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React.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.createElement(Text, {
+      size: emptyMessageTextSize,
+      textColor: emptyMessageTextColor
+    }, emptyMessage));
   });
-  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,
-    removeThumbAppearance,
-    removeThumbShape,
-    removeThumbText,
-    removeThumbTextWeight,
-    shapeClass,
-    thumbBorderColorClass,
-    thumbBorderColorHoverClass,
-    thumbBorderTypeClass,
-    thumbBorderWidthClass,
-    thumbDirectionClass,
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
-    // className: `form-dropzone__dropzone dropzone  ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
-    className: `form-dropzone__dropzone dropzone`
-  }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
-    name: inputName
-  })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`)
-  }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
-    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-    key: file.id || `${file.name}_${index}`
-  }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__thumb-image"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "form-dropzone__thumb-image-inner",
-    src: file.preview || file.image,
-    onClick: event => {
-      onClickPreview && onClickPreview(file, event);
-    },
-    onLoad: () => {
-      // Revoke data uri after image is loaded
-      URL.revokeObjectURL(file.preview);
-    }
-  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__thumb-name"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__thumb-name-inner",
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__thumb-loader"
-  }, /*#__PURE__*/React.createElement(Loader, {
-    width: "fill",
-    height: "fill"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__thumb-remove')
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "form-dropzone__thumb-remove-text",
-    appearance: removeThumbAppearance,
-    label: removeThumbText || 'Удалить',
-    labelTextWeight: removeThumbTextWeight,
-    shape: removeThumbShape,
-    onClick: event => removeFile(event, index)
-  })))), !filesList.length ? /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__hint"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)) : /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__message"
-  }, /*#__PURE__*/React.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;
-  }
+const defaultChoiceProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  width: 'fill',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+};
 
-  // Save new File to state
-  if (newFile) {
-    newFile.id = inputValue.id;
-    if (isPreviews) {
-      newFile.preview = URL.createObjectURL(newFile);
+const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
+  const {
+    name,
+    initialValue,
+    label,
+    messageType,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    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);
     }
-  }
-  return newFile;
-}
-function setFileDataURL(file, resolve) {
-  resolve = resolve || (() => {});
-  // Init reader and save his file
-  const reader = new FileReader();
-  reader._readedFile = file;
+  }, [change, onChange]);
+  return /*#__PURE__*/React.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 {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
+      label: label,
+      messageType: messageType,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-choice",
+      inputName: input.name,
+      inputValue: input.value || [],
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React.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,
+      setActiveSegment: setActiveSegment,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired
+    }, updatedInputProps)));
+  });
+});
 
-  // 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 defaultCodeProps = {
+  appearance: 'defaultPrimary sizeL solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+};
 
-const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
+const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
   const {
-    className,
     name,
-    width,
-    maxFiles,
-    maxSize,
+    initialValue,
     label,
-    fileErrorText,
+    messageType,
+    isDisabled,
     classNameGroupItem,
-    dropzoneProps,
-    fieldProps,
-    hintDescription,
-    hintTitle,
-    showFilename,
+    fieldProps = {},
+    inputProps = {},
     showMessage,
-    isPreviews,
-    isRequired,
-    onAddFiles,
-    onClickPreview,
-    onDeleteFile
+    isRequired
   } = props;
-  const propsGenerator = useDevicePropsGenerator(props);
+  return /*#__PURE__*/React.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 {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
+      label: label,
+      messageType: messageType,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
+      name: input.name,
+      initialValue: input.value,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+
+const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
   const {
-    size,
-    fill,
-    fillHover,
-    labelTextColor,
-    borderColorHover,
-    borderType,
-    borderWidth,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbAppearance,
-    removeThumbShape,
-    removeThumbText,
-    removeThumbTextWeight,
-    shape,
-    thumbBorderColor,
-    thumbBorderColorHover,
-    thumbBorderType,
-    thumbBorderWidth,
-    thumbColumn = 1,
-    thumbDirection = 'vertical',
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
+    Component,
+    isDisabled,
+    isRequired,
+    name,
+    initialValue,
+    fieldProps = {},
+    classNameGroupItem,
+    showMessage,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
+  } = props;
+  return /*#__PURE__*/React.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.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_custom', 'form__item_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.createElement(Component, Object.assign({}, updatedInputProps, {
+      input: input,
+      isDisabled: isDisabled,
+      meta: meta
+    })), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
+  });
+});
+
+const defaultDatepickerProps = {
+  appearance: 'surfacePrimary sizeS',
+  dateFormat: 'dd/MM/yyyy - HH:mm',
+  readOnly: false,
+  selectsRange: false,
+  showTimeSelect: true,
+  timeCaption: 'Время',
+  timeFormat: 'p',
+  timeIntervals: 60,
+  isClearable: true,
+  isStartDefaultNull: true
+};
+
+function FormFieldDatePicker(props) {
+  const {
+    name,
+    isDisabled,
+    classNameGroupItem,
+    datePickerProps,
+    fieldProps = {},
+    inputProps = {},
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
@@ -865,10 +924,27 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
      * 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 FormFieldDatePicker
+        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,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -876,423 +952,460 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: props,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
-
-    /** TODO:
-     * REFACTOR PROPERTIES
-     */
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
-      width: width,
-      label: label,
-      labelTextColor: labelTextColor,
+      className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
-      fieldClassName: "form-dropzone",
+      isDisabled: isDisabled,
+      fieldClassName: "form-datepicker",
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || '',
       metaActive: meta.active,
-      metaTouched: meta.touched,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
-      className: className,
-      maxFiles: maxFiles,
-      maxSize: maxSize,
-      size: size,
-      fill: fill,
-      fillHover: fillHover,
-      borderColor: updatedInputProps.borderColor,
-      borderColorHover: borderColorHover,
-      borderType: borderType,
-      borderWidth: borderWidth,
-      errorMessageTextColor: errorMessageTextColor,
-      errorMessageTextSize: errorMessageTextSize,
-      errorMessageWeight: errorMessageTextWeight,
-      fileErrorText: fileErrorText,
-      metaError: meta.error,
-      dropzoneProps: dropzoneProps,
-      hintDescription: hintDescription,
-      hintDescriptionTextColor: hintDescriptionTextColor,
-      hintDescriptionTextSize: hintDescriptionTextSize,
-      hintDescriptionTextWeight: hintDescriptionTextWeight,
-      hintDescriptionTextWrap: hintDescriptionTextWrap,
-      hintTitle: hintTitle,
-      hintTitleTextColor: hintTitleTextColor,
-      hintTitleTextSize: hintTitleTextSize,
-      hintTitleTextWeight: hintTitleTextWeight,
-      hintTitleTextWrap: hintTitleTextWrap,
-      inputName: input.name,
-      inputValue: input.value,
-      metaTouched: meta.touched,
-      removeThumbAppearance: removeThumbAppearance,
-      removeThumbShape: removeThumbShape,
-      removeThumbText: removeThumbText,
-      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,
-      onClickPreview: onClickPreview,
-      onDeleteFile: onDeleteFile
+    }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
+      name: input.name,
+      isDisabled: isDisabled,
+      datePickerProps: datePickerProps,
+      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
+      inputProps: updatedInputProps,
+      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
     }));
   });
-});
+}
 
-const defaultGroupProps = {
-  width: 'fill',
-  labelTextSize: 's',
-  messageTextColor: 'surfaceTextPrimary',
-  messageTextSize: 's',
-  errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextSecondary',
-  helpTextSize: 's',
-  requiredMessageTextColor: 'warningTextSecondary',
-  requiredMessageTextSize: 's'
+const defaultDropzoneProps = {
+  fill: 'surfaceSecondary',
+  fillHover: 'surfaceTertiary',
+  // 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 FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
+const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
   const {
-    dataTour,
     className,
-    name,
-    title,
-    titleTextColor,
-    titleTextSize,
-    titleTextWeight,
-    label,
-    labelTextColor,
-    labelTextSize,
-    labelTextWeight,
-    message,
-    messageTextColor,
-    messageTextSize,
-    messageTextWeight,
-    column,
-    showGroupMessage,
-    before,
-    after,
-    isHidden,
-    children
-  } = props;
-
-  // @ts-expect-error
-  const {
-    styles: styles
-  } = useStyles(props);
-  return /*#__PURE__*/React.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
-    } = useFieldValidationState({
-      fieldProps: props,
-      // or fieldProps?
-      input: input,
-      meta: meta
-    });
-    const updatedProps = useValidationAppearanceInputProps({
-      inputProps: props,
-      validationStateKey: isErrorState ? errorKey : 'success'
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
-      "data-tour": dataTour,
-      style: styles
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "form__group-wrapper"
-    }, before, title && /*#__PURE__*/React.createElement("div", {
-      className: "form__group-title"
-    }, /*#__PURE__*/React.createElement(Title, {
-      size: titleTextSize,
-      textColor: titleTextColor,
-      textWeight: titleTextWeight
-    }, title)), label && /*#__PURE__*/React.createElement("div", {
-      className: "form__group-label"
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: labelTextSize,
-      textColor: labelTextColor,
-      textWeight: labelTextWeight
-    }, label)), /*#__PURE__*/React.createElement("div", {
-      className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
-      id: `${name}-error`,
-      className: `form__group-message form__group-message_type-${errorKey}`,
-      size: updatedProps.messageTextSize,
-      textColor: updatedProps.messageTextColor,
-      textWeight: updatedProps.messageTextWeight
-    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
-      className: "form__group-message",
-      size: messageTextSize,
-      textColor: messageTextColor,
-      textWeight: messageTextWeight
-    }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
-      className: "form__group-message",
-      size: messageTextSize
-    }, '\u00A0')));
-  });
-});
+    maxFiles,
+    maxSize,
+    size,
+    fileErrorText,
+    dropzoneProps = {},
+    hintDescription,
+    hintTitle,
+    inputName,
+    inputValue,
+    showFilename,
+    thumbColumn,
+    isPreviews,
+    onAddFiles,
+    onClickPreview,
+    onDeleteFile
+  } = props;
 
-const defaultCheckboxProps = {
-  appearance: 'defaultPrimary sizeL solid',
-  width: 'fill',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeL solid',
-  // Required
-  requiredAppearance: 'requirePrimary sizeL solid'
-};
+  // 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 FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
+  //
+  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 {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React.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.
-     */
+    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('');
 
-    const onChangeField = useCallback(event => {
-      input.onChange(event);
-      if (onChange) {
-        onChange(event.target.checked, input.name);
+      // 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('');
       }
-    }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
+    }
+  });
+  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,
+    removeThumbAppearance,
+    removeThumbShape,
+    removeThumbText,
+    removeThumbTextWeight,
+    shapeClass,
+    thumbBorderColorClass,
+    thumbBorderColorHoverClass,
+    thumbBorderTypeClass,
+    thumbBorderWidthClass,
+    thumbDirectionClass,
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap
+  } = propsGenerator;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
+    // className: `form-dropzone__dropzone dropzone  ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
+    className: `form-dropzone__dropzone dropzone`
+  }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
+    name: inputName
+  })), /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`)
+  }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
+    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+    key: file.id || `${file.name}_${index}`
+  }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "form-dropzone__thumb-image-inner",
+    src: file.preview || file.image,
+    onClick: event => {
+      onClickPreview && onClickPreview(file, event);
+    },
+    onLoad: () => {
+      // Revoke data uri after image is loaded
+      URL.revokeObjectURL(file.preview);
+    }
+  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-name"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__thumb-name-inner",
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-loader"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    width: "fill",
+    height: "fill"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-dropzone__thumb-remove')
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "form-dropzone__thumb-remove-text",
+    appearance: removeThumbAppearance,
+    label: removeThumbText || 'Удалить',
+    labelTextWeight: removeThumbTextWeight,
+    shape: removeThumbShape,
+    onClick: event => removeFile(event, index)
+  })))), !filesList.length ? /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__hint"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)) : /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React.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 updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    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
     });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field-checkbox', 'form__item_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.createElement(Checkbox, Object.assign({
-      type: "checkbox",
-      name: input.name,
-      isDisabled: isDisabled,
-      autoComplete: "nope",
-      checked: input.checked,
-      isActive: input.checked,
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }, updatedInputProps)));
-  });
-});
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
+}
+async function convertToFile(inputValue, isPreviews) {
+  let newFile = null;
 
-const defaultChipsProps = {
-  appearance: 'surfacePrimary sizeM rounded',
-  width: 'fill',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
-  // Success
-  // successAppearance: 'successPrimary sizeM solid rounded',
-};
+  // 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);
+    }
+  }
 
-function FormFieldChips(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    emptyMessage,
-    emptyMessageTextColor,
-    emptyMessageTextSize,
-    fieldProps,
-    inputProps,
-    options,
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  const {
-    change
-  } = useForm();
+  // Convert dataURL to File instance
+  if (inputValue.dataURL) {
+    newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+    newFile.dataURL = inputValue.dataURL;
+  }
 
-  // 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.createElement(Field, {
-    name: name,
-    initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
-    });
-    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.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_chips', 'form__item_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 ? /*#__PURE__*/React.createElement(ChipsGroup, {
-      direction: "horizontal",
-      gap: "1m",
-      wrap: "wrap"
-    }, options.map(option => /*#__PURE__*/React.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.createElement(Text, {
-      size: emptyMessageTextSize,
-      textColor: emptyMessageTextColor
-    }, emptyMessage));
-  });
+  // 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;
 
-const defaultChoiceProps = {
-  appearance: 'defaultPrimary sizeM solid rounded',
-  width: 'fill',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
-};
+  // 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 FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
+const FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(props) {
   const {
+    className,
     name,
-    initialValue,
+    width,
+    maxFiles,
+    maxSize,
     label,
-    messageType,
-    isDisabled,
+    fileErrorText,
     classNameGroupItem,
+    dropzoneProps,
     fieldProps,
-    inputProps,
-    options,
-    placeholder,
+    hintDescription,
+    hintTitle,
+    showFilename,
     showMessage,
-    isCheckbox,
+    isPreviews,
     isRequired,
-    onChange
+    onAddFiles,
+    onClickPreview,
+    onDeleteFile
   } = props;
+  const propsGenerator = useDevicePropsGenerator(props);
   const {
-    change
-  } = useForm();
-  const setActiveSegment = useCallback((option, isChecked) => {
-    change(name, isChecked && option.value);
-    if (onChange) {
-      onChange(option.value, name, isChecked);
-    }
-  }, [change, onChange]);
+    size,
+    fill,
+    fillHover,
+    labelTextColor,
+    borderColorHover,
+    borderType,
+    borderWidth,
+    errorMessageTextColor,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    hintDescriptionTextColor,
+    hintDescriptionTextSize,
+    hintDescriptionTextWeight,
+    hintDescriptionTextWrap,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbShape,
+    removeThumbText,
+    removeThumbTextWeight,
+    shape,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    thumbBorderWidth,
+    thumbColumn = 1,
+    thumbDirection = 'vertical',
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap
+  } = propsGenerator;
   return /*#__PURE__*/React.createElement(Field, {
-    initialValue: initialValue,
     name: name
   }, function Render({
     input,
@@ -1304,22 +1417,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
      * 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 {
       errorKey,
       errorMessage,
       isErrorState,
-      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1327,65 +1429,127 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
+
+    /** TODO:
+     * REFACTOR PROPERTIES
+     */
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
+      className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+      width: width,
       label: label,
-      messageType: messageType,
+      labelTextColor: labelTextColor,
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-choice",
+      fieldClassName: "form-dropzone",
       inputName: input.name,
-      inputValue: input.value || [],
+      inputValue: input.value,
       metaActive: meta.active,
+      metaTouched: meta.touched,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.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,
-      setActiveSegment: setActiveSegment,
-      isCheckbox: isCheckbox,
-      isRequired: isRequired
-    }, updatedInputProps)));
+    }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
+      className: className,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
+      size: size,
+      fill: fill,
+      fillHover: fillHover,
+      borderColor: updatedInputProps.borderColor,
+      borderColorHover: borderColorHover,
+      borderType: borderType,
+      borderWidth: borderWidth,
+      errorMessageTextColor: errorMessageTextColor,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      fileErrorText: fileErrorText,
+      metaError: meta.error,
+      dropzoneProps: dropzoneProps,
+      hintDescription: hintDescription,
+      hintDescriptionTextColor: hintDescriptionTextColor,
+      hintDescriptionTextSize: hintDescriptionTextSize,
+      hintDescriptionTextWeight: hintDescriptionTextWeight,
+      hintDescriptionTextWrap: hintDescriptionTextWrap,
+      hintTitle: hintTitle,
+      hintTitleTextColor: hintTitleTextColor,
+      hintTitleTextSize: hintTitleTextSize,
+      hintTitleTextWeight: hintTitleTextWeight,
+      hintTitleTextWrap: hintTitleTextWrap,
+      inputName: input.name,
+      inputValue: input.value,
+      metaTouched: meta.touched,
+      removeThumbAppearance: removeThumbAppearance,
+      removeThumbShape: removeThumbShape,
+      removeThumbText: removeThumbText,
+      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,
+      onClickPreview: onClickPreview,
+      onDeleteFile: onDeleteFile
+    }));
   });
 });
 
-const defaultCodeProps = {
-  appearance: 'defaultPrimary sizeL solid rounded',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+const defaultGroupProps = {
+  width: 'fill',
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextPrimary',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextSecondary',
+  helpTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
+  requiredMessageTextSize: 's'
 };
 
-const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
+const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
   const {
+    dataTour,
+    className,
     name,
-    initialValue,
+    title,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
     label,
-    messageType,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    message,
+    messageTextColor,
+    messageTextSize,
+    messageTextWeight,
+    column,
+    showGroupMessage,
+    before,
+    after,
+    isHidden,
+    children
   } = props;
+
+  // @ts-expect-error
+  const {
+    styles: styles
+  } = useStyles(props);
   return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    initialValue: initialValue
+    name: name
   }, function Render({
     input,
     meta
@@ -1396,68 +1560,93 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-
     const {
       errorKey,
       errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
+      isErrorState
     } = useFieldValidationState({
-      fieldProps: fieldProps,
+      fieldProps: props,
+      // or fieldProps?
       input: input,
       meta: meta
     });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    const updatedProps = useValidationAppearanceInputProps({
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
-      label: label,
-      messageType: messageType,
-      errorKey: errorKey,
-      errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      fieldClassName: 'form-code',
-      inputName: input.name,
-      inputValue: input.value,
-      metaActive: meta.active,
-      showMessage: showMessage,
-      isRequired: isRequired,
-      isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
-      name: input.name,
-      initialValue: input.value,
-      isDisabled: isDisabled,
-      autoComplete: "nope",
-      onBlur: input.onBlur,
-      onChange: input.onChange,
-      onFocus: input.onFocus
-    }, updatedInputProps)));
+    return /*#__PURE__*/React.createElement("div", {
+      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
+      "data-tour": dataTour,
+      style: styles
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form__group-wrapper"
+    }, before, title && /*#__PURE__*/React.createElement("div", {
+      className: "form__group-title"
+    }, /*#__PURE__*/React.createElement(Title, {
+      size: titleTextSize,
+      textColor: titleTextColor,
+      textWeight: titleTextWeight
+    }, title)), label && /*#__PURE__*/React.createElement("div", {
+      className: "form__group-label"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: labelTextSize,
+      textColor: labelTextColor,
+      textWeight: labelTextWeight
+    }, label)), /*#__PURE__*/React.createElement("div", {
+      className: "form__group-items"
+    }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
+      id: `${name}-error`,
+      className: `form__group-message form__group-message_type-${errorKey}`,
+      size: updatedProps.messageTextSize,
+      textColor: updatedProps.messageTextColor,
+      textWeight: updatedProps.messageTextWeight
+    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize,
+      textColor: messageTextColor,
+      textWeight: messageTextWeight
+    }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, '\u00A0')));
   });
 });
 
-const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
+const defaultInputProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  width: 'fill',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded'
+};
+
+const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
   const {
-    Component,
-    isDisabled,
-    isRequired,
     name,
     initialValue,
-    fieldProps = {},
     classNameGroupItem,
-    showMessage,
     clearIcon,
     clearIconFill,
     clearIconFillHover,
     clearIconShape,
     clearIconSize,
-    onClickClearIcon
+    fieldProps = {},
+    inputProps = {},
+    parse,
+    showMessage,
+    isDisabled,
+    isRequired,
+    onClickClearIcon,
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
+    name: name,
     initialValue: initialValue,
-    name: name
+    parse: parse
   }, function Render({
     input,
     meta
@@ -1469,79 +1658,87 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
      * 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
+      errorMessage,
+      successKey,
+      isErrorState,
+      isValidState
     } = 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
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_custom', 'form__item_custom', classNameGroupItem),
+      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      fieldClassName: 'form-custom',
+      fieldClassName: "form-input",
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
       isDisabled: isDisabled,
       isErrorState: isErrorState,
       isRequired: isRequired,
-      isValidState: isValidState,
-      metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, updatedInputProps, {
-      input: input,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      dataTestId: `${input.name}FieldInput`,
+      type: "text",
+      name: input.name,
+      autoComplete: "nope",
+      value: input.value || '',
       isDisabled: isDisabled,
-      meta: meta
-    })), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
+      size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
-      imageSrc: clearIcon,
+      imageSrc: typeof clearIcon === 'string' && clearIcon,
       shape: clearIconShape,
-      size: clearIconSize,
-      SvgImage: clearIcon,
+      SvgImage: typeof clearIcon !== 'string' && clearIcon,
       onClick: onClickClearIcon
     }));
   });
 });
 
-const defaultDatepickerProps = {
-  appearance: 'surfacePrimary sizeS',
-  dateFormat: 'dd/MM/yyyy - HH:mm',
-  readOnly: false,
-  selectsRange: false,
-  showTimeSelect: true,
-  timeCaption: 'Время',
-  timeFormat: 'p',
-  timeIntervals: 60,
-  isClearable: true,
-  isStartDefaultNull: true
-};
-
-function FormFieldDatePicker(props) {
+const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
   const {
     name,
-    isDisabled,
+    initialValue,
     classNameGroupItem,
-    datePickerProps,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
     fieldProps = {},
     inputProps = {},
+    optionsMask,
     showMessage,
+    unmasked,
+    isDisabled,
     isRequired,
-    onChange
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render({
     input,
     meta
@@ -1553,27 +1750,35 @@ function FormFieldDatePicker(props) {
      * 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 FormFieldDatePicker
-        input.onChange(startDate);
-      } else {
-        // When we need to save range, value is object with two date
-        input.onChange({
-          endDate,
-          startDate
-        });
+    const {
+      ref,
+      unmaskedValue,
+      value,
+      setUnmaskedValue
+    } = useIMask(optionsMask, {
+      onAccept: (newValue, event, element) => {
+        if (element) {
+          input.onChange(event._unmaskedValue);
+        }
       }
-      if (onChange) {
-        onChange(startDate, endDate);
+    });
+    useEffect(() => {
+      if (input.value !== unmaskedValue) {
+        setUnmaskedValue(input.value.replace(unmasked, ''));
       }
-    }, [input.onChange, onChange]);
+    }, [input.value]);
+
+    // useEffect(() => {
+    //   if (unmaskedValue !== input.value) {
+    //     input.onChange(unmaskedValue)
+    //   }
+    // }, [unmaskedValue])
+
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1585,36 +1790,40 @@ function FormFieldDatePicker(props) {
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
+      className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-datepicker",
+      fieldClassName: 'form-maskedInput',
       inputName: input.name,
-      inputValue: input.value || '',
+      inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
-      name: input.name,
-      isDisabled: isDisabled,
-      datePickerProps: datePickerProps,
-      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
-      inputProps: updatedInputProps,
-      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
+    }, fieldProps), /*#__PURE__*/React.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,
-      onChange: onChangeField,
       onFocus: input.onFocus
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      size: clearIconSize,
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
     }));
   });
-}
+});
 
-const defaultInputProps = {
+const defaultPasswordProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
-  width: 'fill',
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
@@ -1624,27 +1833,18 @@ const defaultInputProps = {
   successAppearance: 'successPrimary sizeM solid rounded'
 };
 
-const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
+const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
   const {
     name,
     initialValue,
-    isDisabled,
     classNameGroupItem,
-    // dataTestId,
-    // iconBorder,
-    // iconBorderHover,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    fieldProps = {},
-    inputProps = {},
+    fieldProps,
+    inputProps,
     parse,
     showMessage,
+    isDisabled,
     isRequired,
-    onChange,
-    onClickClearIcon
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -1670,8 +1870,8 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1683,79 +1883,90 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
+      className: clsx('form-field_input-password', 'form__item_input-password', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-input",
+      fieldClassName: "form-password",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      dataTestId: `${input.name}FieldInput`,
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: "text",
+    }, fieldProps), /*#__PURE__*/React.createElement(InputPassword, Object.assign({
+      className: clsx(meta.active && 'input-password_state_focus', meta.error && meta.touched && `input-password_state_${errorKey}`),
+      dataTestId: `${input.name}FieldInputPassword`,
       name: input.name,
-      isDisabled: isDisabled,
       autoComplete: "nope",
-      value: input.value || '',
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
-      className: "form-field__icon",
-      size: clearIconSize,
-      iconFill: clearIconFill,
-      iconFillHover: clearIconFillHover,
-      imageSrc: typeof clearIcon === 'string' && clearIcon,
-      shape: clearIconShape,
-      SvgImage: typeof clearIcon !== 'string' && clearIcon,
-      onClick: onClickClearIcon
-    }));
+      value: input.value || '',
+      isDisabled: isDisabled,
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
   });
 });
 
-const defaultPasswordProps = {
-  appearance: 'sizeM defaultSecondary solid rounded',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Required
-  iconRevealableHide: icons24.View.HideValue,
-  iconRevealableShow: icons24.View.ShowValue,
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+const defaultRadioProps = {
+  appearance: 'defaultPrimary sizeM solid circular'
 };
 
-const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
+function FormFieldRadioGroupList(props) {
+  const {
+    input,
+    inputProps,
+    options,
+    onChange
+  } = props;
+
+  // 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(event => {
+    if (event.target.checked) {
+      onChangeSomeInput(event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(Radio, Object.assign({
+    className: "form-radio__item",
+    key: option.value,
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeRadio,
+    onFocus: input.onFocus
+  }, inputProps))));
+}
+
+const FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(props) {
   const {
     name,
-    initialValue,
     isDisabled,
+    editableProps = {},
+    fieldProps = {},
+    inputProps = {},
+    options = [],
     classNameGroupItem,
-    fieldProps,
-    inputProps,
-    parse,
     showMessage,
     isRequired,
     onChange
   } = props;
-  const [isRevealed, setIsRevealed] = useState(false);
-  const inputType = useMemo(() => {
-    return isRevealed ? 'text' : 'password';
-  }, [isRevealed]);
-  const onClickIconReveal = useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
   return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    initialValue: initialValue,
-    parse: parse
+    name: name
   }, function Render({
     input,
     meta
@@ -1767,17 +1978,10 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
-      input.onChange(event);
-      if (onChange) {
-        onChange(event.target.value, input.name);
-      }
-    }, [onChange, input.onChange]);
     const {
       errorKey,
       errorMessage,
       isErrorState,
-      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1786,39 +1990,29 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
+      className: clsx('form-field_radio', 'form__item_radio', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: "form-password",
+      fieldClassName: 'form-radio',
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      dataTestId: `${input.name}FieldInputPassword`,
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
-      name: input.name,
+    }, fieldProps), /*#__PURE__*/React.createElement(FormFieldRadioGroupList, {
       isDisabled: isDisabled,
-      autoComplete: "nope",
-      value: input.value || '',
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }, updatedInputProps)), /*#__PURE__*/React.createElement(Icon, {
-      className: "form-field__icon",
-      size: inputProps?.iconSize,
-      iconFill: inputProps?.iconFill,
-      SvgImage: isRevealed ? inputProps?.iconRevealableHide : inputProps?.iconRevealableShow,
-      onClick: onClickIconReveal
+      editableProps: editableProps,
+      input: input,
+      inputProps: updatedInputProps,
+      options: options,
+      onChange: onChange
     }));
   });
 });
@@ -2005,220 +2199,57 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       meta: meta
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
-      inputProps: selectProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
-    });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_select', 'form__item_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.createElement(Select, Object.assign({
-      className: "form-select-item",
-      ref: selectRef,
-      isDisabled: isDisabled,
-      instanceId: `id_${input.name}`,
-      options: options,
-      value: selectedOptions,
-      onChange: onChangeValue,
-      onInputChange: onInputChange
-    }, updatedSelectProps)));
-  });
-});
-
-const defaultSwitchProps = {
-  appearance: 'defaultPrimary sizeL solid rounded',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeL solid rounded',
-  // Success
-  successAppearance: 'successPrimary sizeL solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeL solid rounded'
-};
-
-const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React.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,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
-    });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field-switch', 'form__item_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.createElement(Switch, Object.assign({
-      type: "checkbox",
-      name: input.name,
-      isDisabled: isDisabled,
-      autoComplete: "nope",
-      isActive: input.checked,
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }, updatedInputProps)));
-  });
-});
-
-const defaultTextareaProps = {
-  appearance: 'defaultPrimary sizeM solid rounded',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Success
-  successAppearance: 'successPrimary sizeM solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
-};
-
-const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired
-  } = props;
-  return /*#__PURE__*/React.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,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
+      inputProps: selectProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
+      className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: 'form-textarea',
+      fieldClassName: 'form-select',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
-      dataTestId: `${input.name}FieldTextarea`,
-      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
-      name: input.name,
+    }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
+      className: "form-select-item",
+      ref: selectRef,
       isDisabled: isDisabled,
-      autoComplete: "nope",
-      value: input.value || '',
-      onBlur: input.onBlur,
-      onChange: input.onChange,
-      onFocus: input.onFocus
-    }, updatedInputProps)));
+      instanceId: `id_${input.name}`,
+      options: options,
+      value: selectedOptions,
+      onChange: onChangeValue,
+      onInputChange: onInputChange
+    }, updatedSelectProps)));
   });
 });
 
-const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
+const defaultSwitchProps = {
+  appearance: 'defaultPrimary sizeL solid rounded',
+  errorAppearance: 'errorPrimary sizeL solid rounded',
+  successAppearance: 'successPrimary sizeL solid rounded',
+  requiredAppearance: 'requirePrimary sizeL solid rounded'
+};
+
+const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
   const {
     name,
-    initialValue,
     isDisabled,
     classNameGroupItem,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
     fieldProps = {},
     inputProps = {},
-    optionsMask,
     showMessage,
-    unmasked,
     isRequired,
-    onClickClearIcon
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    initialValue: initialValue
+    type: "checkbox",
+    name: name
   }, function Render({
     input,
     meta
@@ -2230,28 +2261,12 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
      * custom React Hook function.
      */
 
-    const {
-      ref,
-      setUnmaskedValue,
-      unmaskedValue,
-      value
-    } = useIMask(optionsMask, {
-      onAccept: (newValue, event, element) => {
-        if (element) {
-          input.onChange(event._unmaskedValue);
-        }
-      }
-    });
-    useEffect(() => {
-      if (input.value !== unmaskedValue) {
-        setUnmaskedValue(input.value.replace(unmasked, ''));
-      }
-    }, [input.value]);
-    useEffect(() => {
-      if (unmaskedValue !== input.value) {
-        input.onChange(unmaskedValue);
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
       }
-    }, [unmaskedValue]);
+    }, [onChange, input.onChange]);
     const {
       errorKey,
       errorMessage,
@@ -2268,92 +2283,53 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
+      className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: 'form-maskedInput',
+      fieldClassName: "form-switch",
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.checked,
       metaActive: meta.active,
       showMessage: showMessage,
+      tag: "label",
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      ref: ref,
-      value: value,
+    }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
+      type: "checkbox",
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      isActive: input.checked,
       onBlur: input.onBlur,
+      onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
-      className: "form-field__icon",
-      size: clearIconSize,
-      iconFill: clearIconFill,
-      iconFillHover: clearIconFillHover,
-      imageSrc: clearIcon,
-      shape: clearIconShape,
-      SvgImage: clearIcon,
-      onClick: onClickClearIcon
-    }));
+    }, updatedInputProps)));
   });
 });
 
-const defaultRadioProps = {
-  appearance: 'defaultPrimary sizeM solid circular'
+const defaultTextareaProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
-function RadioGroupList(props) {
-  const {
-    input,
-    inputProps,
-    options,
-    onChange
-  } = props;
-
-  // 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(event => {
-    if (event.target.checked) {
-      onChangeSomeInput(event.target.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(Radio, Object.assign({
-    className: "form-radio__item",
-    key: option.value,
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeRadio,
-    onFocus: input.onFocus
-  }, inputProps))));
-}
-
-const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
+const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
   const {
     name,
     isDisabled,
-    editableProps = {},
+    classNameGroupItem,
     fieldProps = {},
     inputProps = {},
-    options = [],
-    classNameGroupItem,
     showMessage,
-    isRequired,
-    onChange
+    isRequired
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -2372,6 +2348,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2380,30 +2357,33 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_radio', 'form__item_radio', classNameGroupItem),
+      className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: 'form-radio',
+      fieldClassName: 'form-textarea',
       inputName: input.name,
-      inputValue: input.value || '',
+      inputValue: input.value,
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
+    }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
+      dataTestId: `${input.name}FieldTextarea`,
+      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
+      name: input.name,
       isDisabled: isDisabled,
-      editableProps: editableProps,
-      input: input,
-      inputProps: updatedInputProps,
-      options: options,
-      onChange: onChange
-    }));
+      autoComplete: "nope",
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
   });
 });
 
@@ -2478,13 +2458,13 @@ function generateField(field, config, props) {
       }
     case formTypes.fileInput:
       {
-        return /*#__PURE__*/React.createElement(FileInput, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldFileInput, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.radioGroup:
       {
-        return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldRadioGroup, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2651,9 +2631,9 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
+    className,
     dataTestId,
     dataTour,
-    className,
     type,
     initialValues,
     initialValuesEqual,
@@ -2669,8 +2649,36 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     descTextColor,
     descTextWeight,
     buttonGap,
+    additionalProps = {},
+    buttonDirection = 'vertical',
+    buttonFill,
+    buttonJustifyContent,
+    buttonPadding,
+    buttonPosition,
+    dataTestIdButtons,
     dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTourButtons,
     dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
+    disableFieldsAutoComplete = false,
+    fieldsGap,
+    formName,
+    groupGap,
+    language,
+    loader,
+    loaderAppearance,
+    loaderFill = 'surfacePrimary',
+    loaderItemFill = 'accentItemSecondary',
+    loaderShape,
+    loaderSize = 'l',
+    loaderText,
+    loaderType = 'simple',
+    mutators,
+    notificationCloseButton,
+    notificationType,
     primaryButton,
     primaryButtonAppearance,
     primaryButtonFill,
@@ -2682,9 +2690,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
-    dataTestIdSecondaryButton,
-    dataTourSecondaryButton,
-    onClickSecondaryButton,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
     secondaryButtonFill,
@@ -2696,9 +2702,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
     secondaryButtonSize,
-    dataTestIdTertiaryButton,
-    dataTourTertiaryButton,
-    onClickTertiaryButton,
+    shapeStrengthClass,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
@@ -2707,35 +2711,11 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
-    additionalProps = {},
-    buttonDirection = 'vertical',
-    buttonFill,
-    buttonJustifyContent,
-    buttonPadding,
-    buttonPosition,
-    dataTestIdButtons,
-    dataTourButtons,
-    disableFieldsAutoComplete = false,
-    fieldsGap,
-    formName,
-    groupGap,
-    language,
-    loader,
-    loaderAppearance = 'surfacePrimary sizeM',
-    loaderFill,
-    loaderItemFill,
-    loaderShape,
-    loaderSize,
-    loaderText,
-    loaderType = 'simple',
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    shapeStrengthClass,
     before,
     after,
     isLoading,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
     onChangeFormValues,
     onSubmit
   } = props;
@@ -2760,10 +2740,10 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     render: ({
-      submitError,
       form,
       handleSubmit,
-      modifiedSinceLastSubmit
+      modifiedSinceLastSubmit,
+      submitError
     }) => {
       return /*#__PURE__*/React.createElement("form", {
         className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
@@ -2793,8 +2773,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
         className: clsx('notification', 'form-notification', notificationType ? `form-notification_${notificationType}` : 'form-notification_global')
       }, /*#__PURE__*/React.createElement(Notification, {
-        className: "form-notification__item",
         appearance: "errorPrimary",
+        className: "form-notification__item",
         title: form.getState().submitError,
         titleTextSize: "h6",
         status: "error",
@@ -2812,28 +2792,28 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, Object.keys(config).map(key => generateField(config[key], {
         key
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+        appearance: loaderAppearance,
         className: "form__loader",
         type: loaderType,
-        appearance: loaderAppearance,
         size: loaderSize,
         fill: loaderFill,
         text: loaderText,
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group, {
+        className: "form__button",
         dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
         gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        appearance: primaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        className: "form__button-item",
-        appearance: primaryButtonAppearance,
         width: "fill",
         size: primaryButtonSize,
         fill: primaryButtonFill,
@@ -2842,13 +2822,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        isDisabled: primaryButtonIsDisabled,
-        loading: primaryButtonIsLoading
+        loading: primaryButtonIsLoading,
+        isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        appearance: secondaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        className: "form__button-item",
-        appearance: secondaryButtonAppearance,
         width: "fill",
         size: secondaryButtonSize,
         fill: secondaryButtonFill,
@@ -2857,13 +2837,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
-        isDisabled: secondaryButtonIsDisabled,
         loading: secondaryButtonIsLoading,
+        isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        className: "form__button-item",
         dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
         fill: tertiaryButtonFill,
@@ -2878,9 +2858,9 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     decorators: [focusOnErrorDecorator],
     mutators: mutators,
     subscription: {
-      submitError: true,
       modifiedSinceLastSubmit: true,
       pristine: true,
+      submitError: true,
       submitting: true
     },
     validate: validate,
@@ -3137,4 +3117,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldFileInput, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldRadioGroup, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };