@itcase/forms 1.1.23 → 1.1.26

package/dist/itcase-forms.esm.js

@@ -1,21 +1,16 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
-import React$1, { useMemo, useEffect, useCallback, useState } from 'react';
+import React$1, { useMemo, useEffect, useState, useCallback } from 'react';
 import { setIn, FORM_ERROR, getIn } from 'final-form';
 import { useForm, Field, Form, FormSpy } from 'react-final-form';
 export { Field, useForm, useFormState } from 'react-final-form';
 import clsx from 'clsx';
-import { Checkbox } from '@itcase/ui/components/Checkbox';
+import { useDevicePropsGenerator } from '@itcase/ui/hooks/useDevicePropsGenerator';
+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 camelCase from 'lodash/camelCase';
-import snakeCase from 'lodash/snakeCase';
-import { Choice } from '@itcase/ui/components/Choice';
-import { Icon } from '@itcase/ui/components/Icon';
-import { Code } from '@itcase/ui/components/Code';
-import { DatePickerInput } from '@itcase/ui/components/DatePicker';
-import { useDevicePropsGenerator } from '@itcase/ui/hooks/useDevicePropsGenerator';
 import axios from 'axios';
 import { fromEvent } from 'file-selector';
 import castArray from 'lodash/castArray';
@@ -24,15 +19,20 @@ 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 { 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 { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
-import { Group as Group$1 } from '@itcase/ui/components/Group';
+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';
 
@@ -116,29 +116,149 @@ function useYupValidationSchema(schema, language) {
   return validate;
 }
 
+// Whether to display an error message based on "fieldProps" and meta-objects
+function useFieldValidationState(props) {
+  const {
+    fieldProps = {},
+    meta = {},
+    input = {}
+  } = props;
+  // Determines if there's a submission error that hasn't been rectified since the last submission.
+  const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
+
+  // Determines a key for the error, defaulting to 'error' if no specific key is found.
+  const errorKey = meta.error?.key || 'error';
+  const successKey = 'success';
+
+  // Determines if the field is in an error state based on various conditions.
+  const isErrorState = useMemo(() => {
+    if (fieldProps.showErrorsOnSubmit) {
+      return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
+    } else {
+      return Boolean(meta.touched && (meta.error || submitError));
+    }
+  }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
+
+  // Determines if the field's input state is valid
+  const isValidState = useMemo(() => {
+    const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
+    const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
+    return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
+  }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
+  const errorMessage = useMemo(() => {
+    // If final-form field has error in "meta" render-property.
+    // If field not modified after last form submit - use submit error
+    const error = meta.error || submitError || false;
+    if (error) {
+      // And error in "meta" is string
+      if (typeof error === 'string') {
+        // Return error as message
+        return error;
+      }
+      // Or if error in "meta" has "message" property(is object of error)
+      if (error.message) {
+        // Return message from error
+        return error.message;
+      }
+    }
+
+    // Field doesn't have error message
+    return '';
+  }, [meta.error, submitError]);
+  return {
+    errorKey,
+    successKey,
+    isErrorState,
+    isValidState,
+    errorMessage
+  };
+}
+
+// This hook changes the props of the child component depending on the type of error,
+// looks at what props were in initialProps, if they are there then changes
+function useValidationAppearanceInputProps(props) {
+  const {
+    validationStateKey,
+    inputProps
+  } = props;
+
+  // TODO: need to add props that can change during errors in this field
+  const validationAppearanceInputProps = useMemo(() => {
+    // const resultAppearanceProps = {
+    //   messageTextColor: props.errorMessageTextColor,
+    //   messageTextSize: props.errorMessageTextSize,
+    //   messageTextWeight: props.errorMessageTextWeight,
+    //   // Override appearance(styled) props for child input
+    //   inputProps: {},
+    // }
+    const updatedInputProps = {};
+    if (validationStateKey) {
+      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+        // Convert the input property key to "snake_case" format.
+        // e.g. "requiredBorderColor" -> "required_border_color".
+        const propKeySnake = snakeCase(propKey);
+        // Check if this property is for appearance.
+        // Key maybe starts with: "error", "required", "success", etc from validation config.
+        const isPropForValidationState = propKeySnake.startsWith(`${validationStateKey}_`);
+
+        // If property is for appearance
+        if (isPropForValidationState) {
+          // Remove validation state part from begin of property key, to make clean appearance property.
+          // e.g. "required_border_color" -> "border_color".
+          const stateTargetKeySnake = propKeySnake.replace(`${validationStateKey}_`, '');
+          // Convert clean appearance property key to "camelCase" format.
+          // e.g. "border_color" -> "borderColor"
+          const stateTargetKey = camelCase(stateTargetKeySnake);
+          // And save the value with a new clean property key
+          updatedInputProps[stateTargetKey] = propValue;
+          // Else if not already added earlier
+        } else if (!updatedInputProps[propKey]) {
+          // Just save original property
+          updatedInputProps[propKey] = propValue;
+        }
+      });
+    }
+    return updatedInputProps;
+  }, [validationStateKey, inputProps]);
+  return validationAppearanceInputProps;
+}
+
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
-  size: 'm',
   labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 's',
   messageTextColor: 'surfaceTextSecondary',
-  messageTextSize: 's',
   errorMessageTextColor: 'errorTextSecondary',
-  errorMessageTextSize: 's',
   dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
-  helpTextSize: 's',
   requiredMessageTextColor: 'warningTextSecondary',
-  requiredMessageTextSize: 's',
   showMessage: true
 };
+const defaultFieldSizeM = {
+  size: 'm',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
+const defaultFieldSizeXL = {
+  size: 'xl',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
 
 function FieldWrapperBase(props) {
   const {
     id,
+    dataTour,
     className,
-    type = 'normal',
+    type,
     label,
     labelHidden,
     labelTextColor,
@@ -146,6 +266,7 @@ function FieldWrapperBase(props) {
     labelTextSizeMobile,
     labelTextSizeTablet,
     labelTextWeight,
+    messageTextSize,
     desc,
     descTextColor,
     descTextSize,
@@ -158,7 +279,6 @@ function FieldWrapperBase(props) {
     isDisabled,
     afterItem,
     beforeItem,
-    dataTour,
     dividerDirection,
     dividerFill,
     dividerSize,
@@ -171,7 +291,6 @@ function FieldWrapperBase(props) {
     helpTextWeight,
     inputName,
     inputValue,
-    messageTextSize,
     metaActive,
     showDivider,
     showMessage,
@@ -220,13 +339,13 @@ function FieldWrapperBase(props) {
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React$1.createElement(Tag, {
+    dataTestId: `${inputName}Field`,
+    dataTour: dataTour,
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-test-id": `${inputName}Field`,
-    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React$1.createElement("div", {
+    dataTestId: `${inputName}FieldLabel`,
     className: clsx('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React$1.createElement(Text, {
     size: labelTextSize,
@@ -236,7 +355,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React$1.createElement("div", {
     className: "form-field__desc",
-    "data-test-id": `${inputName}FieldDesc`
+    dataTestId: `${inputName}FieldDesc`
   }, /*#__PURE__*/React$1.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -252,26 +371,26 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-field__message",
-    "data-test-id": `${inputName}FieldMessage`
+    dataTestId: `${inputName}FieldMessage`,
+    className: "form-field__message"
   }, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(Text, {
     id: `${inputName}-error`,
+    dataTestId: `${inputName}FieldMessageError`,
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorTextSize,
     textColor: errorTextColor,
-    textWeight: errorTextWeight,
-    dataTestId: `${inputName}FieldMessageError`
+    textWeight: errorTextWeight
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
+    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
-    dataTestId: `${inputName}FieldMessageHelpText`,
     sizeMobile: helpTextSizeMobile
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
+    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
-    size: messageTextSize,
-    dataTestId: `${inputName}FieldMessageHelpText`
+    size: messageTextSize
   }, '\u00A0')), after);
 }
 function FieldWrapper(props) {
@@ -290,242 +409,425 @@ function FieldWrapper(props) {
   return /*#__PURE__*/React$1.createElement(FieldWrapperBase, props);
 }
 
-// Whether to display an error message based on "fieldProps" and meta-objects
-function useFieldValidationState(props) {
+const defaultDropzoneProps = {
+  fill: 'surfacePrimary',
+  borderColor: 'surfaceBorderTertiary',
+  borderColorHover: 'surfaceBorderQuaternary',
+  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+  hintTitleTextColor: 'surfaceTextPrimary',
+  hintTitleTextSize: 'm',
+  removeThumbText: 'удалить',
+  removeThumbTextColor: 'errorTextPrimary',
+  removeThumbTextHoverColor: 'errorTextPrimaryHover',
+  removeThumbTextSize: 's',
+  shape: 'rounded',
+  showFilename: true,
+  thumbBorderColor: 'surfaceBorderTertiary',
+  thumbBorderColorHover: 'surfaceBorderQuaternary',
+  thumbBorderWidth: 1,
+  thumbNameTextColor: 'surfaceTextPrimary',
+  thumbNameTextSize: 's',
+  isPreviews: true
+};
+
+const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(props) {
   const {
-    fieldProps = {},
-    meta = {},
-    input = {}
+    className,
+    maxFiles,
+    maxSize,
+    size,
+    fileErrorText,
+    dropzoneProps = {},
+    hintDescription,
+    hintTitle,
+    inputName,
+    inputValue,
+    showFilename,
+    thumbColumn,
+    isPreviews,
+    onAddFiles,
+    onDeleteFile
   } = props;
-  // Determines if there's a submission error that hasn't been rectified since the last submission.
-  const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
 
-  // Determines a key for the error, defaulting to 'error' if no specific key is found.
-  const errorKey = meta.error?.key || 'error';
-  const successKey = 'success';
+  // 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]);
 
-  // Determines if the field is in an error state based on various conditions.
-  const isErrorState = useMemo(() => {
-    if (fieldProps.showErrorsOnSubmit) {
-      return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
-    } else {
-      return Boolean(meta.touched && (meta.error || submitError));
+  //
+  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);
+      }
     }
-  }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
+    changeFormState(newFiles);
+    setFileIsLoading(false);
+  }, [isPreviews, changeFormState]);
 
-  // Determines if the field's input state is valid
-  const isValidState = useMemo(() => {
-    const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
-    const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
-    return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
-  }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
-  const errorMessage = useMemo(() => {
-    // If final-form field has error in "meta" render-property.
-    // If field not modified after last form submit - use submit error
-    const error = meta.error || submitError || false;
-    if (error) {
-      // And error in "meta" is string
-      if (typeof error === 'string') {
-        // Return error as message
-        return error;
-      }
-      // Or if error in "meta" has "message" property(is object of error)
-      if (error.message) {
-        // Return message from error
-        return error.message;
-      }
+  // 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]);
 
-    // Field doesn't have error message
-    return '';
-  }, [meta.error, submitError]);
-  return {
-    errorKey,
-    successKey,
-    isErrorState,
-    isValidState,
-    errorMessage
-  };
-}
-
-// This hook changes the props of the child component depending on the type of error,
-// looks at what props were in initialProps, if they are there then changes
-function useValidationAppearanceInputProps(props) {
+  // Create dropzone options
   const {
-    validationStateKey,
-    inputProps
-  } = props;
-
-  // TODO: need to add props that can change during errors in this field
-  const validationAppearanceInputProps = useMemo(() => {
-    // const resultAppearanceProps = {
-    //   messageTextColor: props.errorMessageTextColor,
-    //   messageTextSize: props.errorMessageTextSize,
-    //   messageTextWeight: props.errorMessageTextWeight,
-    //   // Override appearance(styled) props for child input
-    //   inputProps: {},
-    // }
-    const updatedInputProps = {};
-    if (validationStateKey) {
-      Object.entries(inputProps).forEach(([propKey, propValue]) => {
-        // Convert the input property key to "snake_case" format.
-        // e.g. "requiredBorderColor" -> "required_border_color".
-        const propKeySnake = snakeCase(propKey);
-        // Check if this property is for appearance.
-        // Key maybe starts with: "error", "required", "success", etc from validation config.
-        const isPropForValidationState = propKeySnake.startsWith(`${validationStateKey}_`);
+    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('');
 
-        // If property is for appearance
-        if (isPropForValidationState) {
-          // Remove validation state part from begin of property key, to make clean appearance property.
-          // e.g. "required_border_color" -> "border_color".
-          const stateTargetKeySnake = propKeySnake.replace(`${validationStateKey}_`, '');
-          // Convert clean appearance property key to "camelCase" format.
-          // e.g. "border_color" -> "borderColor"
-          const stateTargetKey = camelCase(stateTargetKeySnake);
-          // And save the value with a new clean property key
-          updatedInputProps[stateTargetKey] = propValue;
-          // Else if not already added earlier
-        } else if (!updatedInputProps[propKey]) {
-          // Just save original property
-          updatedInputProps[propKey] = propValue;
+      // 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);
         }
       });
-    }
-    return updatedInputProps;
-  }, [validationStateKey, inputProps]);
-  return validationAppearanceInputProps;
-}
-
-const defaultCheckboxProps = {
-  appearance: 'defaultPrimary',
-  width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
-};
-
-const CheckboxField = /*#__PURE__*/React$1.memo(function CheckboxField(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
-    type: "checkbox",
-    name: name,
-    initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
-    /** Note:
-     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
-     * React Hooks cannot be called inside a callback.
-     * React Hooks must be called in a React function component or a
-     * custom React Hook function.
-     */
-
-    const onChangeField = useCallback(event => {
-      input.onChange(event);
-      if (onChange) {
-        onChange(event.target.checked, input.name);
+    },
+    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,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
-    });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
-      errorKey: errorKey,
-      errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-checkbox",
-      inputName: input.name,
-      inputValue: input.checked,
-      metaActive: meta.active,
-      showMessage: showMessage,
-      tag: "label",
-      isRequired: isRequired,
-      isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Checkbox, Object.assign({
-      type: "checkbox",
-      name: input.name,
-      isDisabled: isDisabled,
-      autoComplete: "nope",
-      checked: input.checked,
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }, updatedInputProps)));
+    }
   });
-});
-
-const defaultChoiceProps = {
-  width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  fill: 'surfaceSecondary',
-  fillActive: 'accentPrimary',
-  fillActiveDisabled: 'surfaceTertiary',
-  fillHover: 'surfacePrimaryHover',
-  indicatorFill: 'accentPrimary',
-  labelTextActiveColor: 'accentTextPrimary',
-  labelTextActiveColorDisabled: 'surfaceTextDisabled',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextColorDisabled: 'surfaceTextDisabled',
-  labelTextSize: 'm',
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded'
-};
+  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);
+    }
 
-const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(props) {
-  const {
-    name,
-    initialValue,
-    label,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    messageType,
-    options,
-    placeholder,
-    showMessage,
-    isCheckbox,
-    isRequired,
-    onChange
-  } = props;
+    // 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 {
-    change
-  } = useForm();
-  const setActiveSegment = useCallback((option, isChecked) => {
-    change(name, isChecked && option.value);
-    if (onChange) {
-      onChange(option.value, name, isChecked);
+    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$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", getRootProps({
+    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
+  }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
+    name: inputName
+  })), /*#__PURE__*/React$1.createElement("div", {
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+  }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
+    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+    key: file.id || `${file.name}_${index}`
+  }, isPreviews && !file.error && /*#__PURE__*/React$1.createElement("div", {
+    className: "form-dropzone__thumb-image"
+  }, /*#__PURE__*/React$1.createElement("img", {
+    className: "form-dropzone__thumb-image-inner",
+    src: file.preview || file.image,
+    onLoad: () => {
+      // Revoke data uri after image is loaded
+      URL.revokeObjectURL(file.preview);
     }
-  }, [change, onChange]);
+  })), file.error && /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React$1.createElement("div", {
+    className: "form-dropzone__thumb-name"
+  }, /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-dropzone__thumb-name-inner",
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
+  }, file.name)), fileIsLoading && /*#__PURE__*/React$1.createElement("div", {
+    className: "form-dropzone__thumb-loader"
+  }, /*#__PURE__*/React$1.createElement(Loader, {
+    width: "fill",
+    height: "fill",
+    fill: "surfacePrimary",
+    itemFill: "surfaceItemAccent",
+    set: "simple"
+  })), /*#__PURE__*/React$1.createElement("div", {
+    className: clsx('form-dropzone__thumb-remove')
+  }, /*#__PURE__*/React$1.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$1.createElement("div", {
+    className: "form-dropzone__hint"
+  }, /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)) : /*#__PURE__*/React$1.createElement("div", {
+    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
+  }, /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-dropzone__hint-title",
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWeight: hintTitleTextWeight,
+    textWrap: hintTitleTextWrap
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-dropzone__hint-text",
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWeight: hintDescriptionTextWeight,
+    textWrap: hintDescriptionTextWrap
+  }, hintDescription)))), fileError && /*#__PURE__*/React$1.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React$1.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textColor: errorMessageTextColor,
+    textWeight: errorMessageTextWeight
+  }, fileError)));
+});
+async function getFileByURL(url) {
+  try {
+    const response = await axios({
+      url: url,
+      responseType: 'blob'
+    });
+    const blobObject = response.data;
+    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
+    // Remove double quotes
+    let filename = dirtyFilename?.substring(1).slice(0, -1);
+    if (!filename) {
+      filename = url.split('/').at(-1);
+      // const typeParts = blobObject.type.split('/')
+      // const fileType = typeParts[typeParts.length - 1]
+      // filename = `${new Date().getTime()}.${fileType}`
+    }
+    return new File([blobObject], filename, {
+      type: blobObject.type
+    });
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
+}
+async function convertToFile(inputValue, isPreviews) {
+  let newFile = null;
+
+  // Download image by url and save as File instance
+  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
+  if (inputValue.image || isURL) {
+    newFile = await getFileByURL(inputValue.image || inputValue);
+    if (newFile) {
+      setFileDataURL(newFile);
+    }
+  }
+
+  // Convert dataURL to File instance
+  if (inputValue.dataURL) {
+    newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+    newFile.dataURL = inputValue.dataURL;
+  }
+
+  // Save new File to state
+  if (newFile) {
+    newFile.id = inputValue.id;
+    if (isPreviews) {
+      newFile.preview = URL.createObjectURL(newFile);
+    }
+  }
+  return newFile;
+}
+function setFileDataURL(file, resolve) {
+  resolve = resolve || (() => {});
+  // Init reader and save his file
+  const reader = new FileReader();
+  reader._readedFile = file;
+
+  // Set handlers
+  reader.onabort = () => resolve();
+  reader.onerror = () => resolve();
+  reader.onload = event => {
+    event.target._readedFile.dataURL = reader.result;
+    resolve();
+  };
+  // Run reader
+  if (file instanceof File) {
+    reader.readAsDataURL(file);
+  } else {
+    resolve();
+  }
+}
+
+const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
+  const {
+    className,
+    name,
+    width,
+    maxFiles,
+    maxSize,
+    label,
+    fileErrorText,
+    classNameGroupItem,
+    dropzoneProps,
+    fieldProps,
+    hintDescription,
+    hintTitle,
+    showFilename,
+    showMessage,
+    isPreviews,
+    isRequired,
+    onAddFiles,
+    onDeleteFile
+  } = props;
+  const propsGenerator = useDevicePropsGenerator(props);
+  const {
+    size,
+    fill,
+    fillHover,
+    labelTextColor,
+    borderColorHover,
+    borderType,
+    borderWidth,
+    errorMessageTextColor,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    hintDescriptionTextColor,
+    hintDescriptionTextSize,
+    hintDescriptionTextWeight,
+    hintDescriptionTextWrap,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbText,
+    removeThumbTextWeight,
+    removeThumbShape,
+    shape,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    thumbBorderWidth,
+    thumbColumn = 1,
+    thumbDirection = 'vertical',
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap
+  } = propsGenerator;
   return /*#__PURE__*/React$1.createElement(Field, {
-    initialValue: initialValue,
     name: name
   }, function Render({
     input,
@@ -537,81 +839,127 @@ const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(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 {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
+      inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+
+    /** TODO:
+     * REFACTOR PROPERTIES
+     */
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+      width: width,
       label: label,
+      labelTextColor: labelTextColor,
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-choice",
+      fieldClassName: "form-dropzone",
       inputName: input.name,
-      inputValue: input.value || [],
-      messageType: messageType,
+      inputValue: input.value,
       metaActive: meta.active,
+      metaTouched: meta.touched,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Choice, Object.assign({
-      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
-      name: input.name,
-      isDisabled: isDisabled,
-      active: activeOption,
-      inputValue: input.value || [],
-      options: options,
-      placeholder: placeholder,
-      isCheckbox: isCheckbox,
-      isRequired: isRequired,
-      setActiveSegment: setActiveSegment
-    }, updatedInputProps)));
+    }, fieldProps), /*#__PURE__*/React$1.createElement(FileInputDropzone, {
+      className: className,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
+      size: size,
+      fill: fill,
+      fillHover: fillHover,
+      borderColor: updatedInputProps.borderColor,
+      borderColorHover: borderColorHover,
+      borderType: borderType,
+      borderWidth: borderWidth,
+      errorMessageTextColor: errorMessageTextColor,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      fileErrorText: fileErrorText,
+      metaError: meta.error,
+      dropzoneProps: dropzoneProps,
+      hintDescription: hintDescription,
+      hintDescriptionTextColor: hintDescriptionTextColor,
+      hintDescriptionTextSize: hintDescriptionTextSize,
+      hintDescriptionTextWeight: hintDescriptionTextWeight,
+      hintDescriptionTextWrap: hintDescriptionTextWrap,
+      hintTitle: hintTitle,
+      hintTitleTextColor: hintTitleTextColor,
+      hintTitleTextSize: hintTitleTextSize,
+      hintTitleTextWeight: hintTitleTextWeight,
+      hintTitleTextWrap: hintTitleTextWrap,
+      inputName: input.name,
+      inputValue: input.value,
+      metaTouched: meta.touched,
+      removeThumbAppearance: removeThumbAppearance,
+      removeThumbText: removeThumbText,
+      removeThumbTextWeight: removeThumbTextWeight,
+      removeThumbShape: removeThumbShape,
+      shape: shape,
+      showFilename: showFilename,
+      thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
+      thumbBorderType: thumbBorderType,
+      thumbBorderWidth: thumbBorderWidth,
+      thumbColumn: thumbColumn,
+      thumbDirection: thumbDirection,
+      thumbNameTextColor: thumbNameTextColor,
+      thumbNameTextSize: thumbNameTextSize,
+      thumbNameTextWeight: thumbNameTextWeight,
+      thumbNameTextWrap: thumbNameTextWrap,
+      isPreviews: isPreviews,
+      onAddFiles: onAddFiles,
+      onDeleteFile: onDeleteFile
+    }));
   });
 });
 
-const CustomField = /*#__PURE__*/React$1.memo(function CustomField(props) {
+const defaultGroupProps = {
+  width: 'fill',
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextSize: 'h5',
+  labelTextWeight: 500
+};
+
+const FormBlockGroup = /*#__PURE__*/React$1.memo(function Group(props) {
   const {
-    Component,
-    isDisabled,
-    isRequired,
+    className,
     name,
-    initialValue,
-    fieldProps = {},
-    classNameGroupItem,
-    showMessage,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    onClickClearIcon
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    message,
+    column,
+    dataTour,
+    title,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    messageTextColor = 'surfaceTextTertiary',
+    messageTextSize = 's',
+    messageTextWeight,
+    showGroupMessage,
+    before,
+    after,
+    isHidden,
+    children
   } = props;
   return /*#__PURE__*/React$1.createElement(Field, {
-    initialValue: initialValue,
     name: name
   }, function Render({
     input,
@@ -623,84 +971,70 @@ const CustomField = /*#__PURE__*/React$1.memo(function CustomField(props) {
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-
     const {
       isErrorState,
-      isValidState,
       errorKey,
       errorMessage
     } = useFieldValidationState({
-      fieldProps: fieldProps,
+      fieldProps: props,
+      // or 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
+    const updatedProps = useValidationAppearanceInputProps({
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
-      errorKey: errorKey,
-      errorMessage: errorMessage,
-      fieldClassName: 'form-custom',
-      inputName: input.name,
-      inputValue: input.value,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
-      metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Component, Object.assign({}, updatedInputProps, {
-      input: input,
-      isDisabled: isDisabled,
-      meta: meta
-    })), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
-      className: "form-field__icon",
-      iconFill: clearIconFill,
-      iconFillHover: clearIconFillHover,
-      imageSrc: clearIcon,
-      shape: clearIconShape,
-      size: clearIconSize,
-      SvgImage: clearIcon,
-      onClick: onClickClearIcon
-    }));
+    return /*#__PURE__*/React$1.createElement("div", {
+      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
+      "data-tour": dataTour
+    }, /*#__PURE__*/React$1.createElement("div", {
+      className: "form__group-wrapper"
+    }, before, title && /*#__PURE__*/React$1.createElement("div", {
+      className: "form__group-title"
+    }, /*#__PURE__*/React$1.createElement(Title, {
+      size: titleTextSize,
+      textColor: titleTextColor,
+      textWeight: titleTextWeight
+    }, title)), label && /*#__PURE__*/React$1.createElement("div", {
+      className: "form__group-label"
+    }, /*#__PURE__*/React$1.createElement(Text, {
+      size: labelTextSize,
+      textColor: labelTextColor,
+      textWeight: labelTextWeight
+    }, label)), /*#__PURE__*/React$1.createElement("div", {
+      className: "form__group-items"
+    }, children), after), showGroupMessage && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(Text, {
+      className: `form__group-message form__group-message_type-${errorKey}`,
+      id: `${name}-error`,
+      size: updatedProps.messageTextSize,
+      textColor: updatedProps.messageTextColor,
+      textWeight: updatedProps.messageTextWeight
+    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize,
+      textColor: messageTextColor,
+      textWeight: messageTextWeight
+    }, message), !isErrorState && !message && /*#__PURE__*/React$1.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, '\u00A0')));
   });
 });
 
-const defaultCodeProps = {
-  fieldProps: {
-    size: 'l',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 's',
-    labelTextWeight: 'normal',
-    helpText: 'Supporting text',
-    helpTextColor: 'surfaceTextPrimary',
-    helpTextSize: 's',
-    helpTextWeight: 'normal',
-    showMessage: true
-  },
-  inputProps: {
-    width: 'fill',
-    size: 'l',
-    fill: 'surfaceSecondary',
-    inputBorderColor: 'surfaceBorderTertiary',
-    inputBorderColorHover: 'surfaceBorderQuaternary',
-    inputBorderFocusColor: 'surfaceBorderAccent',
-    inputCaretColor: 'surfaceItemAccent',
-    inputFill: 'surfacePrimary',
-    inputFillHover: 'surfaceSecondary',
-    inputPlaceholderTextColor: 'surfaceSecondary',
-    inputSize: 'l',
-    inputTextColor: 'surfaceSecondary',
-    inputTextSize: 'xxl',
-    inputTextWeight: 'normal'
-  }
+const defaultCheckboxProps = {
+  appearance: 'defaultPrimary',
+  width: 'fill',
+  size: 'm',
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextColorDisabled: 'surfaceTextDisabled',
+  labelTextSize: 's',
+  descTextSize: 's',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary'
 };
 
-const CodeField = /*#__PURE__*/React$1.memo(function CodeField(props) {
+const FormFieldCheckbox = /*#__PURE__*/React$1.memo(function FormFieldCheckbox(props) {
   const {
     name,
     initialValue,
@@ -709,9 +1043,11 @@ const CodeField = /*#__PURE__*/React$1.memo(function CodeField(props) {
     fieldProps = {},
     inputProps = {},
     showMessage,
-    isRequired
+    isRequired,
+    onChange
   } = props;
   return /*#__PURE__*/React$1.createElement(Field, {
+    type: "checkbox",
     name: name,
     initialValue: initialValue
   }, function Render({
@@ -725,10 +1061,18 @@ const CodeField = /*#__PURE__*/React$1.memo(function CodeField(props) {
      * custom React Hook function.
      */
 
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
+      }
+    }, [onChange, input.onChange]);
     const {
+      errorKey,
+      errorMessage,
       isErrorState,
-      isValidState,
-      errorKey} = useFieldValidationState({
+      isValidState
+    } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
@@ -738,79 +1082,78 @@ const CodeField = /*#__PURE__*/React$1.memo(function CodeField(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
-      fieldClassName: 'form-code',
+      className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-checkbox",
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.checked,
       metaActive: meta.active,
       showMessage: showMessage,
+      tag: "label",
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Code, Object.assign({
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Checkbox, Object.assign({
+      type: "checkbox",
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      value: input.value,
+      checked: input.checked,
       onBlur: input.onBlur,
-      onChange: input.onChange,
+      onChange: onChangeField,
       onFocus: input.onFocus
     }, updatedInputProps)));
   });
 });
 
-const defaultDatepickerProps = {
-  dateFormat: 'dd/MM/yyyy - HH:mm',
-  readOnly: false,
-  selectsRange: false,
-  showTimeSelect: true,
-  timeCaption: 'Время',
-  timeFormat: 'p',
-  timeIntervals: 60,
-  isClearable: true,
-  isStartDefaultNull: true
+const defaultChipsProps = {
+  appearance: 'surfacePrimary sizeM rounded',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary'
 };
 
-function DatePickerField(props) {
+function FormFieldChips(props) {
   const {
     name,
+    initialValue,
     isDisabled,
     classNameGroupItem,
-    datePickerProps,
-    fieldProps = {},
-    inputProps = {},
+    emptyMessage,
+    emptyMessageTextColor,
+    emptyMessageTextSize,
+    fieldProps,
+    inputProps,
+    options,
     showMessage,
     isRequired,
     onChange
   } = props;
+  const {
+    change
+  } = useForm();
+
+  // Callback for value changes
+  const onChangeSomeInput = useCallback((inputValue, newOptionValue) => {
+    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
+    change(name, updatedValues);
+    onChange && onChange(updatedValues);
+  }, [change, name, onChange]);
+  useEffect(() => {
+    initialValue && change(name, initialValue);
+    // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue]);
   return /*#__PURE__*/React$1.createElement(Field, {
-    name: name
+    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((startDate, endDate) => {
-      if (!datePickerProps.selectsRange) {
-        // When we need to save single date, value is date
-        // TODO: make object with one date? need to check all forms with DatePickerField
-        input.onChange(startDate);
-      } else {
-        // When we need to save range, value is object with two date
-        input.onChange({
-          endDate,
-          startDate
-        });
-      }
-      if (onChange) {
-        onChange(startDate, endDate);
-      }
-    }, [input.onChange, onChange]);
     const {
       errorKey,
       errorMessage,
@@ -825,454 +1168,170 @@ function DatePickerField(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    const activeOptionsList = useMemo(() => {
+      const emptyOptionsList = [{
+        label: null,
+        value: null
+      }];
+      if (input?.value) {
+        const currentOptions = options.filter(option => input.value?.includes(option.value));
+        return currentOptions || emptyOptionsList;
+      }
+      return emptyOptionsList;
+    }, [input.value]);
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: "form-datepicker",
+      fieldClassName: "form-chips",
       inputName: input.name,
-      inputValue: input.value || '',
+      inputValue: input.value,
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(DatePickerInput, {
-      name: input.name,
-      isDisabled: isDisabled,
-      datePickerProps: datePickerProps,
-      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
-      inputProps: updatedInputProps,
-      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
-      onBlur: input.onBlur,
-      onChange: onChangeField,
-      onFocus: input.onFocus
-    }));
+    }, fieldProps), options.length ? /*#__PURE__*/React$1.createElement(ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
+      className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
+      key: option.value,
+      label: option.label,
+      isDisabled: option.isDisabled,
+      value: option.value,
+      isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      onClick: () => onChangeSomeInput(input.value, option.value)
+    }, updatedInputProps)))) : /*#__PURE__*/React$1.createElement(Text, {
+      size: emptyMessageTextSize,
+      textColor: emptyMessageTextColor
+    }, emptyMessage));
   });
 }
 
-const defaultDropzoneProps = {
-  fill: 'surfacePrimary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
-  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
-  hintTitleTextColor: 'surfaceTextPrimary',
-  hintTitleTextSize: 'm',
-  removeThumbText: 'удалить',
-  removeThumbTextColor: 'errorTextPrimary',
-  removeThumbTextHoverColor: 'errorTextPrimaryHover',
-  removeThumbTextSize: 's',
-  shape: 'rounded',
-  showFilename: true,
-  thumbBorderColor: 'surfaceBorderTertiary',
-  thumbBorderColorHover: 'surfaceBorderQuaternary',
-  thumbBorderWidth: 1,
-  thumbNameTextColor: 'surfaceTextPrimary',
-  thumbNameTextSize: 's',
-  isPreviews: true
+const defaultChoiceProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  width: 'fill',
+  errorBorderColor: 'errorBorderPrimary',
+  requiredBorderColor: 'warningBorderPrimary'
 };
 
-const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(props) {
+const FormFieldChoice = /*#__PURE__*/React$1.memo(function FormFieldChoice(props) {
   const {
-    className,
-    maxFiles,
-    maxSize,
-    size,
-    fileErrorText,
-    dropzoneProps = {},
-    hintDescription,
-    hintTitle,
-    inputName,
-    inputValue,
-    showFilename,
-    thumbColumn,
-    isPreviews,
-    onAddFiles,
-    onDeleteFile
+    name,
+    initialValue,
+    label,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    messageType,
+    options,
+    placeholder,
+    showMessage,
+    isCheckbox,
+    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);
-      }
-    }
-    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);
+  const setActiveSegment = useCallback((option, isChecked) => {
+    change(name, isChecked && option.value);
+    if (onChange) {
+      onChange(option.value, name, isChecked);
     }
-    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);
-          }
-        });
+  }, [change, onChange]);
+  return /*#__PURE__*/React$1.createElement(Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+    const activeOption = useMemo(() => {
+      const emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        const currentOption = options.find(option => option.value === input.value);
+        return currentOption || emptyOption;
       }
-      // Save to form data (including empty when files are not valid)
-      const filesToSave = changeFormState(acceptedFiles);
-      setFileError('');
-
-      // Save DataURL for all files
-      const readerPromisesList = acceptedFiles.map(file => {
-        return new Promise(resolve => setFileDataURL(file, resolve));
-      });
-      // Save files to form values
-      Promise.all(readerPromisesList).then(() => {
-        if (onAddFiles) {
-          onAddFiles(filesToSave, inputName);
-        }
-      });
-    },
-    onDropRejected: rejectedFiles => {
-      // If dropped files has rejected
-      if (rejectedFiles.length) {
-        let fileErrorMessage = 'Ошибка при добавлении файла';
-        const firstFileErrorItem = rejectedFiles[0].errors[0];
-        if (firstFileErrorItem) {
-          if (firstFileErrorItem.code === ErrorCode.TooManyFiles) {
-            fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
-          } else {
-            fileErrorMessage = firstFileErrorItem.message;
-          }
-        }
-        // Show error
-        setFileError(fileErrorMessage);
-      } else {
-        // Else clean error
-        setFileError('');
-      }
-    }
-  });
-  useEffect(() => {
-    const currentFilesList = castArray(inputValue);
-    const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
-    if (isNeedToConvert) {
-      // First time convert value to Files and save to local and form state
-      convertFiledValueAndSaveAsFiles(currentFilesList);
-    }
-
-    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => {
-      filesList.forEach(file => {
-        if (file?.preview) {
-          URL.revokeObjectURL(file.preview);
-        }
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue]);
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    fillClass,
-    fillHoverClass,
-    borderColorClass,
-    borderColorHoverClass,
-    borderTypeClass,
-    borderWidthClass,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbAppearance,
-    removeThumbShape,
-    removeThumbText,
-    removeThumbTextWeight,
-    shapeClass,
-    thumbBorderColorClass,
-    thumbBorderColorHoverClass,
-    thumbBorderTypeClass,
-    thumbBorderWidthClass,
-    thumbDirectionClass,
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
-  }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
-    name: inputName
-  })), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
-  }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
-    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-    key: file.id || `${file.name}_${index}`
-  }, isPreviews && !file.error && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-image"
-  }, /*#__PURE__*/React$1.createElement("img", {
-    className: "form-dropzone__thumb-image-inner",
-    src: file.preview || file.image,
-    onLoad: () => {
-      // Revoke data uri after image is loaded
-      URL.revokeObjectURL(file.preview);
-    }
-  })), file.error && /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Text, {
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-name"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__thumb-name-inner",
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, file.name)), fileIsLoading && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-loader"
-  }, /*#__PURE__*/React$1.createElement(Loader, {
-    width: "fill",
-    height: "fill",
-    fill: "surfacePrimary",
-    itemFill: "surfaceItemAccent",
-    set: "simple"
-  })), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-dropzone__thumb-remove')
-  }, /*#__PURE__*/React$1.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$1.createElement("div", {
-    className: "form-dropzone__hint"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)) : /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-title",
-    size: hintTitleTextSize,
-    textColor: hintTitleTextColor,
-    textWeight: hintTitleTextWeight,
-    textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-dropzone__hint-text",
-    size: hintDescriptionTextSize,
-    textColor: hintDescriptionTextColor,
-    textWeight: hintDescriptionTextWeight,
-    textWrap: hintDescriptionTextWrap
-  }, hintDescription)))), fileError && /*#__PURE__*/React$1.createElement("div", {
-    className: "form-field__message"
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
-    size: errorMessageTextSize,
-    textColor: errorMessageTextColor,
-    textWeight: errorMessageTextWeight
-  }, fileError)));
-});
-async function getFileByURL(url) {
-  try {
-    const response = await axios({
-      url: url,
-      responseType: 'blob'
+      return emptyOption;
+    }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
     });
-    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
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
-  } catch (error) {
-    console.log('error: ', error);
-    return null;
-  }
-}
-async function convertToFile(inputValue, isPreviews) {
-  let newFile = null;
-
-  // Download image by url and save as File instance
-  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
-  if (inputValue.image || isURL) {
-    newFile = await getFileByURL(inputValue.image || inputValue);
-    if (newFile) {
-      setFileDataURL(newFile);
-    }
-  }
-
-  // Convert dataURL to File instance
-  if (inputValue.dataURL) {
-    newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
-    newFile.dataURL = inputValue.dataURL;
-  }
-
-  // Save new File to state
-  if (newFile) {
-    newFile.id = inputValue.id;
-    if (isPreviews) {
-      newFile.preview = URL.createObjectURL(newFile);
-    }
-  }
-  return newFile;
-}
-function setFileDataURL(file, resolve) {
-  resolve = resolve || (() => {});
-  // Init reader and save his file
-  const reader = new FileReader();
-  reader._readedFile = file;
+    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-choice",
+      inputName: input.name,
+      inputValue: input.value || [],
+      messageType: messageType,
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Choice, Object.assign({
+      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
+      name: input.name,
+      isDisabled: isDisabled,
+      active: activeOption,
+      inputValue: input.value || [],
+      options: options,
+      placeholder: placeholder,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
+  });
+});
 
-  // 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'
+};
 
-const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
+const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
   const {
-    className,
     name,
-    width,
-    maxFiles,
-    maxSize,
-    label,
-    fileErrorText,
+    initialValue,
+    isDisabled,
     classNameGroupItem,
-    dropzoneProps,
-    fieldProps,
-    hintDescription,
-    hintTitle,
-    showFilename,
+    fieldProps = {},
+    inputProps = {},
     showMessage,
-    isPreviews,
-    isRequired,
-    onAddFiles,
-    onDeleteFile
+    isRequired
   } = props;
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    size,
-    fill,
-    fillHover,
-    labelTextColor,
-    borderColorHover,
-    borderType,
-    borderWidth,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbAppearance,
-    removeThumbText,
-    removeThumbTextWeight,
-    removeThumbShape,
-    shape,
-    thumbBorderColor,
-    thumbBorderColorHover,
-    thumbBorderType,
-    thumbBorderWidth,
-    thumbColumn = 1,
-    thumbDirection = 'vertical',
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
   return /*#__PURE__*/React$1.createElement(Field, {
-    name: name
+    name: name,
+    initialValue: initialValue
   }, function Render({
     input,
     meta
@@ -1285,125 +1344,57 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
      */
 
     const {
-      errorKey,
-      errorMessage,
       isErrorState,
-      isValidState
-    } = useFieldValidationState({
+      isValidState,
+      errorKey} = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: props,
+      inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-
-    /** TODO:
-     * REFACTOR PROPERTIES
-     */
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
-      width: width,
-      label: label,
-      labelTextColor: labelTextColor,
-      errorKey: errorKey,
-      errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      fieldClassName: "form-dropzone",
+      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
-      metaTouched: meta.touched,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(FileInputDropzone, {
-      className: className,
-      maxFiles: maxFiles,
-      maxSize: maxSize,
-      size: size,
-      fill: fill,
-      fillHover: fillHover,
-      borderColor: updatedInputProps.borderColor,
-      borderColorHover: borderColorHover,
-      borderType: borderType,
-      borderWidth: borderWidth,
-      errorMessageTextColor: errorMessageTextColor,
-      errorMessageTextSize: errorMessageTextSize,
-      errorMessageWeight: errorMessageTextWeight,
-      fileErrorText: fileErrorText,
-      metaError: meta.error,
-      dropzoneProps: dropzoneProps,
-      hintDescription: hintDescription,
-      hintDescriptionTextColor: hintDescriptionTextColor,
-      hintDescriptionTextSize: hintDescriptionTextSize,
-      hintDescriptionTextWeight: hintDescriptionTextWeight,
-      hintDescriptionTextWrap: hintDescriptionTextWrap,
-      hintTitle: hintTitle,
-      hintTitleTextColor: hintTitleTextColor,
-      hintTitleTextSize: hintTitleTextSize,
-      hintTitleTextWeight: hintTitleTextWeight,
-      hintTitleTextWrap: hintTitleTextWrap,
-      inputName: input.name,
-      inputValue: input.value,
-      metaTouched: meta.touched,
-      removeThumbAppearance: removeThumbAppearance,
-      removeThumbText: removeThumbText,
-      removeThumbTextWeight: removeThumbTextWeight,
-      removeThumbShape: removeThumbShape,
-      shape: shape,
-      showFilename: showFilename,
-      thumbBorderColor: thumbBorderColor,
-      thumbBorderColorHover: thumbBorderColorHover,
-      thumbBorderType: thumbBorderType,
-      thumbBorderWidth: thumbBorderWidth,
-      thumbColumn: thumbColumn,
-      thumbDirection: thumbDirection,
-      thumbNameTextColor: thumbNameTextColor,
-      thumbNameTextSize: thumbNameTextSize,
-      thumbNameTextWeight: thumbNameTextWeight,
-      thumbNameTextWrap: thumbNameTextWrap,
-      isPreviews: isPreviews,
-      onAddFiles: onAddFiles,
-      onDeleteFile: onDeleteFile
-    }));
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Code, Object.assign({
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
   });
 });
 
-const defaultGroupProps = {
-  width: 'fill',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'h5',
-  labelTextWeight: 500
-};
-
-const Group = /*#__PURE__*/React$1.memo(function Group(props) {
+const FormFieldCustom = /*#__PURE__*/React$1.memo(function FormFieldCustom(props) {
   const {
-    className,
+    Component,
+    isDisabled,
+    isRequired,
     name,
-    label,
-    labelTextColor,
-    labelTextSize,
-    labelTextWeight,
-    message,
-    column,
-    dataTour,
-    title,
-    titleTextSize,
-    titleTextColor,
-    titleTextWeight,
-    messageTextColor = 'surfaceTextTertiary',
-    messageTextSize = 's',
-    messageTextWeight,
-    showGroupMessage,
-    before,
-    after,
-    isHidden,
-    children
+    initialValue,
+    fieldProps = {},
+    classNameGroupItem,
+    showMessage,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React$1.createElement(Field, {
+    initialValue: initialValue,
     name: name
   }, function Render({
     input,
@@ -1415,111 +1406,80 @@ const Group = /*#__PURE__*/React$1.memo(function Group(props) {
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
+
     const {
       isErrorState,
+      isValidState,
       errorKey,
       errorMessage
     } = useFieldValidationState({
-      fieldProps: props,
-      // or fieldProps?
+      fieldProps: fieldProps,
       input: input,
       meta: meta
     });
-    const updatedProps = useValidationAppearanceInputProps({
-      inputProps: props,
-      validationStateKey: isErrorState ? errorKey : 'success'
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      // For "Custom" field we pass all props. Can contain some special props, we don't known.
+      inputProps: props
     });
-    return /*#__PURE__*/React$1.createElement("div", {
-      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
-      "data-tour": dataTour
-    }, /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-wrapper"
-    }, before, title && /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-title"
-    }, /*#__PURE__*/React$1.createElement(Title, {
-      size: titleTextSize,
-      textColor: titleTextColor,
-      textWeight: titleTextWeight
-    }, title)), label && /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-label"
-    }, /*#__PURE__*/React$1.createElement(Text, {
-      size: labelTextSize,
-      textColor: labelTextColor,
-      textWeight: labelTextWeight
-    }, label)), /*#__PURE__*/React$1.createElement("div", {
-      className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(Text, {
-      className: `form__group-message form__group-message_type-${errorKey}`,
-      id: `${name}-error`,
-      size: updatedProps.messageTextSize,
-      textColor: updatedProps.messageTextColor,
-      textWeight: updatedProps.messageTextWeight
-    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
-      className: "form__group-message",
-      size: messageTextSize,
-      textColor: messageTextColor,
-      textWeight: messageTextWeight
-    }, message), !isErrorState && !message && /*#__PURE__*/React$1.createElement(Text, {
-      className: "form__group-message",
-      size: messageTextSize
-    }, '\u00A0')));
+    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-custom',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Component, Object.assign({}, updatedInputProps, {
+      input: input,
+      isDisabled: isDisabled,
+      meta: meta
+    })), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
   });
 });
 
-const defaultInputProps = {
-  appearance: 'sizeM defaultSecondary',
-  width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary',
-  shape: 'rounded'
+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
 };
 
-const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
+function FormFieldDatePicker(props) {
   const {
     name,
-    initialValue,
     isDisabled,
     classNameGroupItem,
-    // dataTestId,
-    // iconBorder,
-    // iconBorderHover,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
+    datePickerProps,
     fieldProps = {},
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps = {},
-    parse,
     showMessage,
-    isPassword,
     isRequired,
-    isRevealable,
-    onChange,
-    onClickClearIcon
+    onChange
   } = props;
-  const [isRevealed, setIsRevealed] = useState(false);
-  const inputType = useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
   return /*#__PURE__*/React$1.createElement(Field, {
-    name: name,
-    initialValue: initialValue,
-    parse: parse
+    name: name
   }, function Render({
     input,
     meta
@@ -1531,12 +1491,22 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
-      input.onChange(event);
+    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(event.target.value, input.name);
+        onChange(startDate, endDate);
       }
-    }, [onChange, input.onChange]);
+    }, [input.onChange, onChange]);
     const {
       errorKey,
       errorMessage,
@@ -1551,200 +1521,87 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      fieldClassName: "form-datepicker",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
+    }, fieldProps), /*#__PURE__*/React$1.createElement(DatePickerInput, {
       name: input.name,
       isDisabled: isDisabled,
-      autoComplete: "nope",
-      dataTestId: `${input.name}FieldInput`,
-      value: input.value || '',
+      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
-    }, updatedInputProps)), isRevealable && /*#__PURE__*/React$1.createElement(Icon, {
-      className: "form-field__icon",
-      size: iconSize,
-      iconFill: iconFill,
-      iconFillHover: iconFillHover,
-      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      shape: iconShape,
-      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      onClick: onClickIconReveal
-    }), clearIcon && /*#__PURE__*/React$1.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
     }));
   });
-});
-
-const defaultRadioProps = {
-  fieldProps: {
-    width: 'fill',
-    size: 'm',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 's',
-    labelTextWeight: 'normal',
-    textColor: 'surfaceTextPrimary',
-    helpText: 'Supporting text',
-    helpTextColor: 'surfaceTextPrimary',
-    helpTextSize: 's',
-    helpTextWeight: 'normal',
-    showMessage: true
-  },
-  inputProps: {
-    width: 'fill',
-    size: 'm',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 's',
-    descTextColor: 'surfaceTextPrimary',
-    descTextSize: 's'
-  }
-};
-
-function RadioGroupInput(props) {
-  const {
-    input,
-    value,
-    onChange
-  } = props;
-  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(Input, Object.assign({
-    name: input.name,
-    autoComplete: "nope",
-    value: value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, props));
-}
-
-function RadioGroupItem(props) {
-  const {
-    input,
-    inputProps,
-    option,
-    onChange
-  } = props;
-  const onChangeField = useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Radio, Object.assign({
-    className: "form-radio__item",
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, inputProps));
 }
 
-function RadioGroupList(props) {
-  const {
-    editableProps,
-    input,
-    inputProps,
-    options,
-    onChange
-  } = props;
-  const [editableValue, setEditableValue] = useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  useEffect(() => {
-    // When a new value from outside enters the form
-    if (input.value) {
-      // Check value for radio type
-      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
-      // If new value not in radio list - set to editable input
-      setEditableValue(isRadioValue ? '' : input.value);
-    } else {
-      // If new value is empty - clear editable input
-      setEditableValue('');
-    }
-  }, [input.value]);
-
-  // Callback for value changes
-  const onChangeSomeInput = useCallback(value => {
-    // Save to form values
-    input.onChange(value);
-    if (onChange) {
-      // Pass to custom event
-      onChange(value, input.name);
-    }
-  }, [input, onChange]);
-
-  // Handle for radio inputs
-  const onChangeRadio = useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React$1.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React$1.createElement(RadioGroupItem, {
-    key: option.value,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    onChange: onChangeRadio
-  })));
-}
+const defaultInputProps = {
+  appearance: 'sizeM defaultSecondary solid rounded',
+  width: 'fill',
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary'
+};
 
-const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
+const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props) {
   const {
     name,
+    initialValue,
     isDisabled,
-    editableProps = {},
+    classNameGroupItem,
+    // dataTestId,
+    // iconBorder,
+    // iconBorderHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
     fieldProps = {},
+    iconFill,
+    iconFillHover,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconShape,
+    iconSize,
     inputProps = {},
-    options = [],
+    parse,
     showMessage,
+    isPassword,
     isRequired,
-    onChange
+    isRevealable,
+    onChange,
+    onClickClearIcon
   } = props;
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = useMemo(() => {
+    if (isPassword) {
+      return isRevealed ? 'text' : 'password';
+    } else {
+      return 'text';
+    }
+  }, [isRevealed, isPassword]);
+  const onClickIconReveal = useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
   return /*#__PURE__*/React$1.createElement(Field, {
-    name: name
+    name: name,
+    initialValue: initialValue,
+    parse: parse
   }, function Render({
     input,
     meta
@@ -1756,6 +1613,12 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
      * 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,
@@ -1770,40 +1633,62 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
+      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: 'form-radio',
+      fieldClassName: isRevealable ? 'form-password' : 'form-input',
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(RadioGroupList, {
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
+      dataTestId: `${input.name}FieldInput`,
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
+      name: input.name,
       isDisabled: isDisabled,
-      editableProps: editableProps,
-      input: input,
-      inputProps: updatedInputProps,
-      options: options,
-      onChange: onChange
+      autoComplete: "nope",
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), isRevealable && /*#__PURE__*/React$1.createElement(Icon, {
+      className: "form-field__icon",
+      size: iconSize,
+      iconFill: iconFill,
+      iconFillHover: iconFillHover,
+      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
+      shape: iconShape,
+      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
+      onClick: onClickIconReveal
+    }), clearIcon && /*#__PURE__*/React$1.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
     }));
   });
 });
 
 const defaultSegmentedProps = {
-  appearance: 'sizeM surfacePrimary',
+  appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
   errorLabelTextColor: 'errorTextPrimary',
-  requiredLabelTextColor: 'warningTextPrimary',
-  shape: 'rounded'
+  requiredLabelTextColor: 'warningTextPrimary'
 };
 
-function SegmentedField(props) {
+function FormFieldSegmented(props) {
   const {
     name,
     isDisabled,
@@ -1881,36 +1766,7 @@ function SegmentedField(props) {
 }
 
 const defaultSelectProps = {
-  elevation: 8,
-  isClearable: true,
-  isSearchable: true,
-  badgeAppearance: 'accent',
-  badgeSize: 'm',
-  badgeTextSize: 'm',
-  // clearIcon: icon24.Clear,
-  clearIconFill: 'surfaceItemPrimary',
-  closeMenuOnSelect: true,
-  // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
-
-  dividerDirection: 'horizontal',
-  dividerFill: 'surfaceTertiary',
-  dividerSize: 'xxs',
-  // dropdownIcon: icon24.ChevronDownSmall,
-  dropdownIconFill: 'surfaceItemPrimary',
-  // error
-  errorInputBorderColor: 'errorBorderPrimary',
-  headingFill: 'surfaceSecondary',
-  loadingMessage: /*#__PURE__*/React$1.createElement(Loader, {
-    width: "fill",
-    height: "fill",
-    fill: "surfacePrimary",
-    position: "absolute",
-    left: "0px",
-    right: "0px",
-    zIndex: "1",
-    itemFill: "surfaceItemAccent",
-    set: "simple"
-  })
+  appearance: 'defaultPrimary sizeM'
 };
 
 function getDefaultValue(options, selectValue) {
@@ -1931,7 +1787,7 @@ function getDefaultValue(options, selectValue) {
   });
   return result;
 }
-const SelectField = /*#__PURE__*/React$1.memo(function SelectField(props) {
+const FormFieldSelect = /*#__PURE__*/React$1.memo(function FormFieldSelect(props) {
   const {
     isDisabled,
     isRequired,
@@ -2014,10 +1870,10 @@ const SelectField = /*#__PURE__*/React$1.memo(function SelectField(props) {
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React$1.createElement(Select, Object.assign({
       className: "form-select-item",
+      ref: selectRef,
       isDisabled: isDisabled,
       instanceId: `id_${input.name}`,
       options: options,
-      ref: selectRef,
       value: selectedOptions,
       onChange: onChangeValue,
       onInputChange: onInputChange
@@ -2026,32 +1882,10 @@ const SelectField = /*#__PURE__*/React$1.memo(function SelectField(props) {
 });
 
 const defaultSwitchProps = {
-  fieldProps: {
-    width: 'fill',
-    size: 'xl',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 's',
-    labelTextWeight: 'normal',
-    textColor: 'surfaceTextPrimary',
-    helpText: 'Supporting text',
-    helpTextColor: 'surfaceTextPrimary',
-    helpTextSize: 's',
-    helpTextWeight: 'normal',
-    showMessage: true
-  },
-  inputProps: {
-    size: 'm',
-    fill: 'surfaceSecondary',
-    title: 'Switch',
-    titleTextColor: 'surfaceTextPrimary',
-    titleTextSize: 's',
-    desc: 'Description',
-    descTextColor: 'surfaceTextPrimary',
-    descTextSize: 'xs'
-  }
+  appearance: 'defaultPrimary sizeL solid rounded'
 };
 
-const SwitchField = /*#__PURE__*/React$1.memo(function SwitchField(props) {
+const FormFieldSwitch = /*#__PURE__*/React$1.memo(function FormFieldSwitch(props) {
   const {
     name,
     isDisabled,
@@ -2125,14 +1959,12 @@ const SwitchField = /*#__PURE__*/React$1.memo(function SwitchField(props) {
 });
 
 const defaultTextareaProps = {
-  appearance: 'sizeM defaultSecondary',
-  width: 'fill',
+  appearance: 'defaultPrimary sizeM solid rounded',
   errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary',
-  shape: 'rounded'
+  requiredBorderColor: 'warningBorderSecondary'
 };
 
-const TextareaField = /*#__PURE__*/React$1.memo(function TextareaField(props) {
+const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(props) {
   const {
     name,
     isDisabled,
@@ -2195,7 +2027,7 @@ const TextareaField = /*#__PURE__*/React$1.memo(function TextareaField(props) {
   });
 });
 
-const MaskedInputField = /*#__PURE__*/React$1.memo(function MaskedInputField(props) {
+const FormFieldMaskedInput = /*#__PURE__*/React$1.memo(function FormFieldMaskedInput(props) {
   const {
     name,
     initialValue,
@@ -2292,51 +2124,144 @@ const MaskedInputField = /*#__PURE__*/React$1.memo(function MaskedInputField(pro
   });
 });
 
-const defaultChipsProps = {
-  appearance: 'surfacePrimary',
-  width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+const defaultRadioProps = {
+  appearance: 'defaultPrimary sizeM solid circular'
 };
 
-function ChipsField(props) {
+function RadioGroupInput(props) {
+  const {
+    input,
+    value,
+    onChange
+  } = props;
+  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    name: input.name,
+    autoComplete: "nope",
+    value: value,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus
+  }, props));
+}
+
+function RadioGroupItem(props) {
+  const {
+    input,
+    inputProps,
+    option,
+    onChange
+  } = props;
+  const onChangeField = useCallback(event => {
+    if (event.target.checked) {
+      onChange(option.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(Radio, Object.assign({
+    className: "form-radio__item",
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus
+  }, inputProps));
+}
+
+function RadioGroupList(props) {
+  const {
+    editableProps,
+    input,
+    inputProps,
+    options,
+    onChange
+  } = props;
+  const [editableValue, setEditableValue] = useState(() => {
+    const isRadioValue = options.find(option => option.value === input.value);
+    if (!isRadioValue) {
+      return input.value;
+    }
+    return '';
+  });
+  useEffect(() => {
+    // When a new value from outside enters the form
+    if (input.value) {
+      // Check value for radio type
+      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
+      // If new value not in radio list - set to editable input
+      setEditableValue(isRadioValue ? '' : input.value);
+    } else {
+      // If new value is empty - clear editable input
+      setEditableValue('');
+    }
+  }, [input.value]);
+
+  // Callback for value changes
+  const onChangeSomeInput = useCallback(value => {
+    // Save to form values
+    input.onChange(value);
+    if (onChange) {
+      // Pass to custom event
+      onChange(value, input.name);
+    }
+  }, [input, onChange]);
+
+  // Handle for radio inputs
+  const onChangeRadio = useCallback(value => {
+    setEditableValue('');
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+
+  // Handle for text input
+  const onChangeEditable = useCallback(value => {
+    setEditableValue(value);
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React$1.createElement(RadioGroupInput, {
+    key: option.label,
+    editableProps: editableProps,
+    input: input,
+    inputProps: inputProps,
+    option: option,
+    value: editableValue,
+    onChange: onChangeEditable
+  }) : /*#__PURE__*/React$1.createElement(RadioGroupItem, {
+    key: option.value,
+    input: input,
+    inputProps: inputProps,
+    option: option,
+    onChange: onChangeRadio
+  })));
+}
+
+const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
   const {
     name,
-    initialValue,
     isDisabled,
+    editableProps = {},
+    fieldProps = {},
+    inputProps = {},
+    options = [],
     classNameGroupItem,
-    emptyMessage,
-    emptyMessageTextColor,
-    emptyMessageTextSize,
-    fieldProps,
-    inputProps,
-    options,
     showMessage,
     isRequired,
     onChange
   } = props;
-  const {
-    change
-  } = useForm();
-
-  // Callback for value changes
-  const onChangeSomeInput = useCallback((inputValue, newOptionValue) => {
-    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
-    change(name, updatedValues);
-    onChange && onChange(updatedValues);
-  }, [change, name, onChange]);
-  useEffect(() => {
-    initialValue && change(name, initialValue);
-    // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValue]);
   return /*#__PURE__*/React$1.createElement(Field, {
-    name: name,
-    initialValue: initialValue
+    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,
@@ -2351,49 +2276,30 @@ function ChipsField(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const activeOptionsList = useMemo(() => {
-      const emptyOptionsList = [{
-        label: null,
-        value: null
-      }];
-      if (input?.value) {
-        const currentOptions = options.filter(option => input.value?.includes(option.value));
-        return currentOptions || emptyOptionsList;
-      }
-      return emptyOptionsList;
-    }, [input.value]);
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: "form-chips",
+      fieldClassName: 'form-radio',
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || '',
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? /*#__PURE__*/React$1.createElement(ChipsGroup, {
-      direction: "horizontal",
-      gap: "1m",
-      wrap: "wrap"
-    }, options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
-      className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
-      key: option.value,
-      label: option.label,
-      isDisabled: option.isDisabled,
-      value: option.value,
-      isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
-      onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps)))) : /*#__PURE__*/React$1.createElement(Text, {
-      size: emptyMessageTextSize,
-      textColor: emptyMessageTextColor
-    }, emptyMessage));
+    }, fieldProps), /*#__PURE__*/React$1.createElement(RadioGroupList, {
+      isDisabled: isDisabled,
+      editableProps: editableProps,
+      input: input,
+      inputProps: updatedInputProps,
+      options: options,
+      onChange: onChange
+    }));
   });
-}
+});
 
 const formTypes = {
   code: 'code',
@@ -2417,43 +2323,43 @@ function generateField(field, config, props) {
   switch (field.type) {
     case formTypes.checkbox:
       {
-        return /*#__PURE__*/React$1.createElement(CheckboxField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldCheckbox, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.choice:
       {
-        return /*#__PURE__*/React$1.createElement(ChoiceField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldChoice, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.chips:
       {
-        return /*#__PURE__*/React$1.createElement(ChipsField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.code:
       {
-        return /*#__PURE__*/React$1.createElement(CodeField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.switch:
       {
-        return /*#__PURE__*/React$1.createElement(SwitchField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldSwitch, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.segmented:
       {
-        return /*#__PURE__*/React$1.createElement(SegmentedField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldSegmented, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.datePicker:
       {
-        return /*#__PURE__*/React$1.createElement(DatePickerField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldDatePicker, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2471,37 +2377,37 @@ function generateField(field, config, props) {
       }
     case formTypes.select:
       {
-        return /*#__PURE__*/React$1.createElement(SelectField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldSelect, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.text:
       {
-        return /*#__PURE__*/React$1.createElement(InputField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldInput, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.textarea:
       {
-        return /*#__PURE__*/React$1.createElement(TextareaField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldTextarea, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.maskedInput:
       {
-        return /*#__PURE__*/React$1.createElement(MaskedInputField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldMaskedInput, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.custom:
       {
-        return /*#__PURE__*/React$1.createElement(CustomField, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormFieldCustom, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.group:
       {
-        return /*#__PURE__*/React$1.createElement(Group, Object.assign({
+        return /*#__PURE__*/React$1.createElement(FormBlockGroup, Object.assign({
           key: config.key
         }, field, props), Object.entries(field.group).map(([key, value]) => {
           const groupProps = {
@@ -2781,7 +2687,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React$1.createElement(Group$1, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React$1.createElement(Group, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,
@@ -2797,7 +2703,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         text: loaderText,
         itemFill: loaderItemFill,
         shape: loaderShape
-      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React$1.createElement(Group$1, {
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React$1.createElement(Group, {
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
@@ -3078,4 +2984,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { CheckboxField, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField, TextareaField, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultGroupProps, defaultInputProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };