@itcase/forms 1.0.59 → 1.0.61

package/dist/itcase-forms.cjs.js

@@ -11,6 +11,8 @@ var Divider = require('@itcase/ui/components/Divider');
 var Text = require('@itcase/ui/components/Text');
 var useDeviceTargetClass = require('@itcase/ui/hooks/useDeviceTargetClass');
 var useStyles = require('@itcase/ui/hooks/useStyles');
+var camelCase = require('lodash/camelCase');
+var snakeCase = require('lodash/snakeCase');
 var Choice = require('@itcase/ui/components/Choice');
 var Code = require('@itcase/ui/components/Code');
 var DatePicker = require('@itcase/ui/components/DatePicker');
@@ -21,13 +23,16 @@ var castArray = require('lodash/castArray');
 var common = require('@itcase/common');
 var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
-var Input = require('@itcase/ui/components/Input');
 var Icon = require('@itcase/ui/components/Icon');
+var Input = require('@itcase/ui/components/Input');
+var iconSizeProps = require('@itcase/ui/constants/componentProps/iconSize');
+var shapeProps = require('@itcase/ui/constants/componentProps/shape');
 var Radio = require('@itcase/ui/components/Radio');
 var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
+var reactImask = require('react-imask');
 var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
@@ -38,8 +43,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var castArray__default = /*#__PURE__*/_interopDefault(castArray);
+var iconSizeProps__default = /*#__PURE__*/_interopDefault(iconSizeProps);
+var shapeProps__default = /*#__PURE__*/_interopDefault(shapeProps);
 var createDecorator__default = /*#__PURE__*/_interopDefault(createDecorator);
 
 const phoneValidation = (value, context) => {
@@ -134,9 +143,6 @@ function FieldWrapperBase(props) {
     dividerFill,
     dividerSize,
     dividerWidth,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
     fieldClassName,
     id,
     inputName,
@@ -153,42 +159,28 @@ function FieldWrapperBase(props) {
     helpTextSize,
     helpTextWeight,
     helpTextColor,
-    errorBorderWidth,
-    errorBorderColor,
-    errorFill,
-    message,
-    messageTextColor,
+    isErrorState,
+    isValidState,
+    errorMessage,
     messageTextSize,
-    messageTextWeight,
     metaActive,
     metaError,
-    metaModifiedSinceLastSubmit,
-    metaSubmitError,
-    metaSubmitFailed,
-    metaTouched,
-    metaValid,
     set,
     showDivider,
-    showErrorsOnSubmit,
     showMessage,
+    errorKey,
     tag: Tag,
     type
   } = props;
-  const error = metaError || !metaModifiedSinceLastSubmit && metaSubmitError || false;
-  const showError = React.useMemo(() => {
-    if (showErrorsOnSubmit) {
-      return metaSubmitFailed && metaTouched && error;
-    } else {
-      return metaTouched && error;
-    }
-  }, [showErrorsOnSubmit, metaSubmitFailed, metaTouched, error]);
-  const showValid = React.useMemo(() => {
-    const hasValue = Array.isArray(inputValue) ? inputValue.length : inputValue;
-    const isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
-    return hasValue && (metaValid || isModifiedAfterSubmit);
-  }, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
-  const formFieldClass = React.useMemo(() => clsx__default.default(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue, isDisabled]);
-  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`), [fieldClassName, showError, showValid, metaActive, inputValue, isDisabled]);
+  const formFieldClass = React.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
+  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
+  const validationAppearance = React.useMemo(() => {
+    return {
+      textColor: props[`${errorKey}MessageTextColor`],
+      textSize: props[`${errorKey}MessageTextSize`],
+      textWeight: props[`${errorKey}MessageTextWeight`]
+    };
+  }, [errorKey, isErrorState]);
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -222,59 +214,61 @@ function FieldWrapperBase(props) {
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-tour": dataTour,
     "data-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
-    htmlFor: id,
     className: clsx__default.default('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`
+    "data-test-id": `${inputName}FieldLabel`,
+    htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
-    textWeight: labelTextWidth,
-    textColor: labelTextColor
+    textColor: labelTextColor,
+    textWeight: labelTextWidth
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
     "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
-    textWeight: descTextWidth,
-    textColor: descTextColor
+    textColor: descTextColor,
+    textWeight: descTextWidth
   }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__content', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__content-inner', fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
     className: "form-field__item-divider",
-    width: dividerWidth,
     direction: dividerDirection,
+    fill: dividerFill,
     size: dividerSize,
-    fill: dividerFill
+    width: dividerWidth
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message",
     "data-test-id": `${inputName}FieldMessage`
-  }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type-error",
-    size: errorMessageTextSize,
-    textWeight: errorMessageTextWeight,
-    textColor: errorMessageTextColor,
+    dataTestId: `${inputName}FieldMessageError`,
     id: `${inputName}-error`,
-    dataTestId: `${inputName}FieldMessageError`
-  }, error), Boolean(helpText) && Boolean(!showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: validationAppearance?.textSize,
+    textColor: validationAppearance?.textColor,
+    textWeight: validationAppearance?.textWeight
+  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
+    dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
-    textWeight: helpTextWeight,
     textColor: helpTextColor,
-    dataTestId: `${inputName}FieldMessageHelpText`
-  }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    textWeight: helpTextWeight
+  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    size: messageTextSize,
-    dataTestId: `${inputName}FieldMessageHelpText`
+    dataTestId: `${inputName}FieldMessageHelpText`,
+    size: messageTextSize
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
-  errorMessageTextColor: 'errorTextSecondary',
+  requiredMessageTextSize: 's',
+  requiredMessageTextColor: 'warningTextPrimary',
   errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary',
   tag: 'div',
   type: 'normal'
 };
@@ -295,10 +289,6 @@ FieldWrapperBase.propTypes = {
   dividerFill: PropTypes__default.default.string,
   dividerSize: PropTypes__default.default.string,
   dividerWidth: PropTypes__default.default.string,
-  errorMessageTextColor: PropTypes__default.default.string,
-  errorMessageTextSize: PropTypes__default.default.string,
-  errorMessageTextWeight: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  errorMessageTextWidth: PropTypes__default.default.string,
   fieldClassName: PropTypes__default.default.string,
   id: PropTypes__default.default.string,
   inputName: PropTypes__default.default.string,
@@ -323,14 +313,8 @@ FieldWrapperBase.propTypes = {
   messageTextWidth: PropTypes__default.default.string,
   metaActive: PropTypes__default.default.bool,
   metaError: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.bool]),
-  metaModifiedSinceLastSubmit: PropTypes__default.default.bool,
-  metaSubmitError: PropTypes__default.default.string,
-  metaSubmitFailed: PropTypes__default.default.bool,
-  metaTouched: PropTypes__default.default.bool,
-  metaValid: PropTypes__default.default.bool,
   set: PropTypes__default.default.string,
   showDivider: PropTypes__default.default.bool,
-  showErrorsOnSubmit: PropTypes__default.default.bool,
   showMessage: PropTypes__default.default.bool,
   tag: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.string]),
   type: PropTypes__default.default.string
@@ -352,6 +336,113 @@ function FieldWrapper(props) {
 }
 FieldWrapper.propTypes = FieldWrapperBase.propTypes;
 
+// Whether to display an error message based on "fieldProps" and meta-objects
+function useFieldValidationState(props) {
+  const {
+    fieldProps,
+    meta,
+    input
+  } = props;
+  // Determines if there's a submission error that hasn't been rectified since the last submission.
+  const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
+
+  // Determines a key for the error, defaulting to 'error' if no specific key is found.
+  const errorKey = meta.error?.key || 'error';
+  const successKey = 'success';
+
+  // Determines if the field is in an error state based on various conditions.
+  const isErrorState = React.useMemo(() => {
+    if (fieldProps.showErrorsOnSubmit) {
+      return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
+    } else {
+      return Boolean(meta.touched && (meta.error || submitError));
+    }
+  }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
+
+  // Determines if the field's input state is valid
+  const isValidState = React.useMemo(() => {
+    const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
+    const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
+    return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
+  }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
+  const errorMessage = React.useMemo(() => {
+    // If final-form field has error in "meta" render-property.
+    // If field not modified after last form submit - use submit error
+    const error = meta.error || submitError || false;
+    if (error) {
+      // And error in "meta" is string
+      if (typeof error === 'string') {
+        // Return error as message
+        return error;
+      }
+      // Or if error in "meta" has "message" property(is object of error)
+      if (error.message) {
+        // Return message from error
+        return error.message;
+      }
+    }
+
+    // Field doesn't have error message
+    return '';
+  }, [meta.error, submitError]);
+  return {
+    errorKey,
+    successKey,
+    isErrorState,
+    isValidState,
+    errorMessage
+  };
+}
+
+// This hook changes the props of the child component depending on the type of error,
+// looks at what props were in initialProps, if they are there then changes
+function useValidationAppearanceInputProps(props) {
+  const {
+    validationStateKey,
+    inputProps
+  } = props;
+
+  // TODO: need to add props that can change during errors in this field
+  const validationAppearanceInputProps = React.useMemo(() => {
+    // const resultAppearanceProps = {
+    //   messageTextColor: props.errorMessageTextColor,
+    //   messageTextSize: props.errorMessageTextSize,
+    //   messageTextWeight: props.errorMessageTextWeight,
+    //   // Override appearance(styled) props for child input
+    //   inputProps: {},
+    // }
+    const updatedInputProps = {};
+    if (validationStateKey) {
+      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+        // Convert the input property key to "snake_case" format.
+        // e.g. "requiredBorderColor" -> "required_border_color".
+        const propKeySnake = snakeCase__default.default(propKey);
+        // Check if this property is for appearance.
+        // Key maybe starts with: "error", "required", "success", etc from validation config.
+        const isPropForValidationState = propKeySnake.startsWith(`${validationStateKey}_`);
+
+        // If property is for appearance
+        if (isPropForValidationState) {
+          // Remove validation state part from begin of property key, to make clean appearance property.
+          // e.g. "required_border_color" -> "border_color".
+          const stateTargetKeySnake = propKeySnake.replace(`${validationStateKey}_`, '');
+          // Convert clean appearance property key to "camelCase" format.
+          // e.g. "border_color" -> "borderColor"
+          const stateTargetKey = camelCase__default.default(stateTargetKeySnake);
+          // And save the value with a new clean property key
+          updatedInputProps[stateTargetKey] = propValue;
+          // Else if not already added earlier
+        } else if (!updatedInputProps[propKey]) {
+          // Just save original property
+          updatedInputProps[propKey] = propValue;
+        }
+      });
+    }
+    return updatedInputProps;
+  }, [validationStateKey, inputProps]);
+  return validationAppearanceInputProps;
+}
+
 const CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxField(props) {
   const {
     classNameGroupItem,
@@ -365,45 +456,65 @@ const CheckboxField = /*#__PURE__*/React__default.default.memo(function Checkbox
     onChange
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
     name: name,
-    type: "checkbox",
-    initialValue: initialValue
-  }, ({
+    type: "checkbox"
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-checkbox",
       inputName: input.name,
       inputValue: input.checked,
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      tag: "label",
-      showMessage: showMessage
+      showMessage: showMessage,
+      tag: "label"
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Checkbox.Checkbox, Object.assign({
       autoComplete: "nope",
       checked: input.checked,
-      name: input.name,
       isDisabled: isDisabled,
+      name: input.name,
       type: "checkbox",
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, inputProps)));
+    }, updatedInputProps)));
   });
 });
 CheckboxField.defaultProps = {
@@ -411,9 +522,9 @@ CheckboxField.defaultProps = {
   inputProps: {}
 };
 CheckboxField.propTypes = {
-  initialValue: PropTypes__default.default.bool,
   classNameGroupItem: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
+  initialValue: PropTypes__default.default.bool,
   inputProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
@@ -426,17 +537,17 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
   const {
     classNameGroupItem,
     fieldProps,
-    showMessage,
     initialValue,
     inputProps,
+    isDisabled,
     isMultiple,
     isRequired,
-    isDisabled,
     label,
     messageType,
     name,
     options,
     placeholder,
+    showMessage,
     onChange
   } = props;
   const {
@@ -447,14 +558,20 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     if (onChange) {
       onChange(option.value, name, isChecked);
     }
-  }, [change]);
+  }, [change, onChange]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
-    name: name,
-    initialValue: initialValue
-  }, ({
+    initialValue: initialValue,
+    name: name
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
     const activeOption = React.useMemo(() => {
       const emptyOption = {
         value: null,
@@ -466,50 +583,63 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       }
       return emptyOption;
     }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       label: label,
       messageType: messageType,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
-      className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && 'form-choice_state_error'),
-      options: options,
-      name: input.name,
+      active: activeOption,
+      className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
       inputValue: input.value || [],
+      isDisabled: isDisabled,
       isMultiple: isMultiple,
       isRequired: isRequired,
+      name: input.name,
+      options: options,
       placeholder: placeholder,
-      active: activeOption,
-      setActiveSegment: setActiveSegment,
-      isDisabled: isDisabled
-    }, inputProps)));
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
   });
 });
 ChoiceField.propTypes = {
   classNameGroupItem: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
-  showMessage: PropTypes__default.default.bool,
   initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
   inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
   isMultiple: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   messageType: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
-  options: Choice.Choice.propTypes.options,
   placeholder: PropTypes__default.default.string,
+  showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
 };
 
@@ -525,45 +655,68 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
     showMessage
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
-    name: name,
-    initialValue: initialValue
-  }, ({
+    initialValue: initialValue,
+    name: name
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-    className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
-    fieldClassName: 'form-custom',
-    isDisabled: isDisabled,
-    inputName: input.name,
-    inputValue: input.value,
-    isRequired: isRequired,
-    metaActive: meta.active,
-    metaError: meta.error,
-    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-    metaSubmitError: meta.submitError,
-    metaSubmitFailed: meta.submitFailed,
-    metaTouched: meta.touched,
-    metaValid: meta.valid,
-    showMessage: showMessage
-  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
-    isDisabled: isDisabled,
-    input: input,
-    meta: meta
-  }))));
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      // For "Custom" field we pass all props. Can contain some special props, we don't known.
+      inputProps: props
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-custom',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, updatedInputProps, {
+      input: input,
+      isDisabled: isDisabled,
+      meta: meta
+    })));
+  });
 });
 CustomField.defaultProps = {
   inputProps: {},
   fieldProps: {}
 };
 CustomField.propTypes = {
-  Component: PropTypes__default.default.element,
+  name: PropTypes__default.default.string.isRequired,
   classNameGroupItem: PropTypes__default.default.string,
+  Component: PropTypes__default.default.element,
   fieldProps: PropTypes__default.default.object,
   initialValue: PropTypes__default.default.any,
   inputProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
   showMessage: PropTypes__default.default.bool
 };
 
@@ -581,33 +734,55 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
     initialValue: initialValue
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-    className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
-    fieldClassName: 'form-code',
-    inputName: input.name,
-    inputValue: input.value,
-    isRequired: isRequired,
-    isDisabled: isDisabled,
-    metaActive: meta.active,
-    metaError: meta.error,
-    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-    metaSubmitError: meta.submitError,
-    metaSubmitFailed: meta.submitFailed,
-    metaTouched: meta.touched,
-    metaValid: meta.valid,
-    showMessage: showMessage
-  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
-    autoComplete: "nope",
-    name: input.name,
-    isDisabled: isDisabled,
-    value: input.value,
-    onBlur: input.onBlur,
-    onChange: input.onChange,
-    onFocus: input.onFocus
-  }, inputProps))));
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      isDisabled: isDisabled,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
+      isErrorState: isErrorState,
+      isValidState: isValidState,
+      errorKey: errorKey,
+      errorMessage: errorMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
+      autoComplete: "nope",
+      name: input.name,
+      isDisabled: isDisabled,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
 });
 CodeField.defaultProps = {
   inputProps: {},
@@ -626,60 +801,72 @@ CodeField.propTypes = {
 
 function DatePickerField(props) {
   const {
-    isRequired,
+    classNameGroupItem,
+    datePickerProps,
     fieldProps,
     inputProps,
-    datePickerProps,
-    name,
-    iconSize,
-    iconBorder,
-    iconBorderHover,
-    iconFill,
-    iconFillHover,
     isDisabled,
-    iconRevealableShow,
-    iconRevealableHide,
-    iconShape,
+    isRequired,
+    name,
     showMessage,
-    onChange,
-    classNameGroupItem
+    onChange
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const onChangeField = React.useCallback(value => {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-datepicker",
       inputName: input.name,
       inputValue: input.value || '',
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(DatePicker.DatePickerInput, {
+      datePickerProps: datePickerProps,
+      inputProps: updatedInputProps,
+      isDisabled: isDisabled,
       name: input.name,
       value: input.value || '',
       onBlur: input.onBlur,
-      isDisabled: isDisabled,
       onChange: onChangeField,
-      onFocus: input.onFocus,
-      inputProps: inputProps,
-      datePickerProps: datePickerProps
+      onFocus: input.onFocus
     }));
   });
 }
@@ -688,10 +875,14 @@ DatePickerField.defaultProps = {
   fieldProps: {}
 };
 DatePickerField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  classNameGroupItem: PropTypes__default.default.string,
+  datePickerProps: PropTypes__default.default.object,
   fieldProps: PropTypes__default.default.object,
   inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
+  showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
 };
 
@@ -1082,7 +1273,6 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     shape,
     size,
     borderWidth,
-    borderColor,
     borderColorHover,
     borderType,
     label,
@@ -1134,77 +1324,104 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-    className: clsx__default.default('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
-    fieldClassName: "form-dropzone",
-    inputName: input.name,
-    inputValue: input.value,
-    isRequired: isRequired,
-    label: label,
-    labelTextColor: labelTextColor,
-    metaActive: meta.active,
-    metaError: meta.error,
-    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-    metaSubmitError: meta.submitError,
-    metaSubmitFailed: meta.submitFailed,
-    metaTouched: meta.touched,
-    metaValid: meta.valid,
-    showMessage: showMessage,
-    width: width
-  }, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
-    dropzoneProps: dropzoneProps,
-    hintDescription: hintDescription,
-    hintTitle: hintTitle,
-    borderWidth: borderWidth,
-    borderColor: borderColor,
-    borderColorHover: borderColorHover,
-    borderType: borderType,
-    thumbBorderWidth: thumbBorderWidth,
-    thumbBorderColor: thumbBorderColor,
-    thumbBorderColorHover: thumbBorderColorHover,
-    thumbBorderType: thumbBorderType,
-    fileErrorText: fileErrorText,
-    fill: fill,
-    size: size,
-    maxFiles: maxFiles,
-    maxSize: maxSize,
-    removeThumbTextHoverColor: removeThumbTextHoverColor,
-    fillHover: fillHover,
-    className: className,
-    thumbColumn: thumbColumn,
-    thumbDirection: thumbDirection,
-    inputName: input.name,
-    inputValue: input.value,
-    thumbNameTextSize: thumbNameTextSize,
-    thumbNameTextColor: thumbNameTextColor,
-    thumbNameTextWrap: thumbNameTextWrap,
-    thumbNameTextWeight: thumbNameTextWeight,
-    hintTitleTextSize: hintTitleTextSize,
-    hintTitleTextColor: hintTitleTextColor,
-    hintTitleTextWrap: hintTitleTextWrap,
-    hintTitleTextWeight: hintTitleTextWeight,
-    removeThumbTextSize: removeThumbTextSize,
-    removeThumbTextColor: removeThumbTextColor,
-    removeThumbTextWeight: removeThumbTextWeight,
-    hintDescriptionTextSize: hintDescriptionTextSize,
-    hintDescriptionTextColor: hintDescriptionTextColor,
-    hintDescriptionTextWrap: hintDescriptionTextWrap,
-    hintDescriptionTextWeight: hintDescriptionTextWeight,
-    errorMessageTextSize: errorMessageTextSize,
-    errorMessageWeight: errorMessageTextWeight,
-    errorMessageTextColor: errorMessageTextColor,
-    isPreviews: isPreviews,
-    shape: shape,
-    showFilename: showFilename,
-    metaError: meta.error,
-    metaTouched: meta.touched,
-    removeThumbText: removeThumbText,
-    onAddFiles: onAddFiles,
-    onDeleteFile: onDeleteFile
-  })));
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: props
+    });
+
+    /** TODO:
+     * REFACTOR PROPERTIES
+     */
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+      fieldClassName: "form-dropzone",
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      label: label,
+      labelTextColor: labelTextColor,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaTouched: meta.touched,
+      showMessage: showMessage,
+      width: width,
+      isErrorState: isErrorState,
+      isValidState: isValidState,
+      errorKey: errorKey,
+      errorMessage: errorMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
+      dropzoneProps: dropzoneProps,
+      hintDescription: hintDescription,
+      hintTitle: hintTitle,
+      borderWidth: borderWidth,
+      borderColor: updatedInputProps.borderColor,
+      borderColorHover: borderColorHover,
+      borderType: borderType,
+      thumbBorderWidth: thumbBorderWidth,
+      thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
+      thumbBorderType: thumbBorderType,
+      fileErrorText: fileErrorText,
+      fill: fill,
+      size: size,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
+      removeThumbTextHoverColor: removeThumbTextHoverColor,
+      fillHover: fillHover,
+      className: className,
+      thumbColumn: thumbColumn,
+      thumbDirection: thumbDirection,
+      inputName: input.name,
+      inputValue: input.value,
+      thumbNameTextSize: thumbNameTextSize,
+      thumbNameTextColor: thumbNameTextColor,
+      thumbNameTextWrap: thumbNameTextWrap,
+      thumbNameTextWeight: thumbNameTextWeight,
+      hintTitleTextSize: hintTitleTextSize,
+      hintTitleTextColor: hintTitleTextColor,
+      hintTitleTextWrap: hintTitleTextWrap,
+      hintTitleTextWeight: hintTitleTextWeight,
+      removeThumbTextSize: removeThumbTextSize,
+      removeThumbTextColor: removeThumbTextColor,
+      removeThumbTextWeight: removeThumbTextWeight,
+      hintDescriptionTextSize: hintDescriptionTextSize,
+      hintDescriptionTextColor: hintDescriptionTextColor,
+      hintDescriptionTextWrap: hintDescriptionTextWrap,
+      hintDescriptionTextWeight: hintDescriptionTextWeight,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      errorMessageTextColor: errorMessageTextColor,
+      isPreviews: isPreviews,
+      shape: shape,
+      showFilename: showFilename,
+      metaError: meta.error,
+      metaTouched: meta.touched,
+      removeThumbText: removeThumbText,
+      onAddFiles: onAddFiles,
+      onDeleteFile: onDeleteFile
+    }));
+  });
 });
 FileInput.defaultProps = {
   errorMessageTextSize: 's',
@@ -1241,32 +1458,41 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
     labelTextSize,
     labelTextWeight,
     message,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    errorMessageTextColor,
     messageTextSize,
     messageTextWeight,
     messageTextColor,
     children,
     dataTour,
     showGroupMessage,
-    name,
-    showErrorsOnSubmit
+    name
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
-    const error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
-    const showError = React.useMemo(() => {
-      if (showErrorsOnSubmit) {
-        return meta.submitFailed && meta.touched && error;
-      } else {
-        return meta.touched && error;
-      }
-    }, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: props,
+      // or fieldProps?
+      input: input,
+      meta: meta
+    });
+    const updatedProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: props
+    });
     return /*#__PURE__*/React__default.default.createElement("div", {
       className: clsx__default.default('form__group', className),
       "data-tour": dataTour
@@ -1275,23 +1501,23 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
     }, before, /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
-      textColor: labelTextColor,
       size: labelTextSize,
+      textColor: labelTextColor,
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-      className: "form__group-message form__group-message_type-error",
-      size: errorMessageTextSize,
-      textWeight: errorMessageTextWeight,
-      textColor: errorMessageTextColor,
-      id: `${name}-error`
-    }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: `form__group-message form__group-message_type-${errorKey}`,
+      id: `${name}-error`,
+      size: updatedProps.messageTextSize,
+      textColor: updatedProps.messageTextColor,
+      textWeight: updatedProps.messageTextWeight
+    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
       className: "form__group-message",
       size: messageTextSize,
-      textWeight: messageTextWeight,
-      textColor: messageTextColor
-    }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      textColor: messageTextColor,
+      textWeight: messageTextWeight
+    }, message), !isErrorState && !message && /*#__PURE__*/React__default.default.createElement(Text.Text, {
       className: "form__group-message",
       size: messageTextSize
     }, '\u00A0')));
@@ -1308,34 +1534,34 @@ Group.defaultProps = {
 };
 Group.propTypes = {
   name: PropTypes__default.default.string.isRequired,
-  isRequired: PropTypes__default.default.bool,
   fieldProps: PropTypes__default.default.object,
-  inputProps: PropTypes__default.default.object
+  inputProps: PropTypes__default.default.object,
+  isRequired: PropTypes__default.default.bool
 };
 
 const InputField = /*#__PURE__*/React__default.default.memo(function InputField(props) {
   const {
-    isPassword,
-    isRequired,
+    classNameGroupItem,
     fieldProps,
-    inputProps,
-    isRevealable,
-    name,
-    parse,
-    dataTestId,
-    iconSize,
-    isDisabled,
-    iconBorder,
-    iconBorderHover,
     iconFill,
     iconFillHover,
     iconRevealableHide,
     iconRevealableShow,
     iconShape,
+    iconSize,
     initialValue,
+    inputProps,
+    isDisabled,
+    isPassword,
+    isRequired,
+    isRevealable,
+    name,
+    parse,
     showMessage,
-    onChange,
-    classNameGroupItem
+    onChange
+    // dataTestId,
+    // iconBorder,
+    // iconBorderHover,
   } = props;
   const [isRevealed, setIsRevealed] = React.useState(false);
   const inputType = React.useMemo(() => {
@@ -1345,59 +1571,79 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       return 'text';
     }
   }, [isRevealed, isPassword]);
-  const revealeHandler = React.useCallback(e => {
-    e.preventDefault();
+  const onClickIconReveal = React.useCallback(event => {
+    event.preventDefault();
     setIsRevealed(prev => !prev);
-  }, [setIsRevealed]);
+  }, []);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
     name: name,
-    parse: parse,
-    initialValue: initialValue
-  }, ({
+    parse: parse
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: isRevealable ? 'form-password' : 'form-input',
       inputName: input.name,
       inputValue: input.value || '',
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
-      className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
       autoComplete: "nope",
+      className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      dataTestId: `${input.name}FieldInput`,
+      isDisabled: isDisabled,
       name: input.name,
       type: inputType,
       value: input.value || '',
       onBlur: input.onBlur,
       onChange: onChangeField,
-      onFocus: input.onFocus,
-      isDisabled: isDisabled,
-      dataTestId: `${input.name}FieldInput`
-    }, inputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      onFocus: input.onFocus
+    }, updatedInputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
       iconFillHover: iconFillHover,
-      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
       imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
       shape: iconShape,
       size: iconSize,
-      onClick: revealeHandler
+      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+      onClick: onClickIconReveal
     }));
   });
 });
@@ -1406,13 +1652,26 @@ InputField.defaultProps = {
   fieldProps: {}
 };
 InputField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  classNameGroupItem: PropTypes__default.default.string,
+  dataTestId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   fieldProps: PropTypes__default.default.object,
+  iconBorder: PropTypes__default.default.string,
+  iconBorderHover: PropTypes__default.default.string,
+  iconFill: PropTypes__default.default.string,
+  iconFillHover: PropTypes__default.default.string,
+  iconRevealableHide: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
+  iconRevealableShow: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
+  iconShape: PropTypes__default.default.oneOf(shapeProps__default.default),
+  iconSize: PropTypes__default.default.oneOf(iconSizeProps__default.default),
   initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
   isPassword: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   isRevealable: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
+  parse: PropTypes__default.default.func,
+  showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
 };
 
@@ -1569,32 +1828,54 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-    className: "form__item_type_radio",
-    fieldClassName: 'form-radio',
-    inputName: input.name,
-    inputValue: input.value || '',
-    isRequired: isRequired,
-    isDisabled: isDisabled,
-    metaActive: meta.active,
-    metaError: meta.error,
-    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-    metaSubmitError: meta.submitError,
-    metaSubmitFailed: meta.submitFailed,
-    metaTouched: meta.touched,
-    metaValid: meta.valid,
-    showMessage: showMessage
-  }, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
-    input: input,
-    options: options,
-    isDisabled: isDisabled,
-    onChange: onChange,
-    editableProps: editableProps,
-    inputProps: inputProps
-  })));
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: "form__item_type_radio",
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-radio',
+      inputName: input.name,
+      inputValue: input.value || '',
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
+      editableProps: editableProps,
+      input: input,
+      inputProps: updatedInputProps,
+      isDisabled: isDisabled,
+      options: options,
+      onChange: onChange
+    }));
+  });
 });
 RadioGroup.defaultProps = {
   editableProps: {},
@@ -1603,12 +1884,12 @@ RadioGroup.defaultProps = {
   options: []
 };
 RadioGroup.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
   editableProps: PropTypes__default.default.object,
   fieldProps: PropTypes__default.default.object,
   inputProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
   options: PropTypes__default.default.array,
   showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
@@ -1632,10 +1913,17 @@ function SegmentedField(props) {
   }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const activeOption = React.useMemo(() => {
       const emptyOption = {
         value: null,
@@ -1647,30 +1935,45 @@ function SegmentedField(props) {
       }
       return emptyOption;
     }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-segmented",
       inputName: input.name,
       inputValue: input.value || [],
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
-      segments: options,
+      activeSegment: activeOption,
       isDisabled: isDisabled,
-      setActiveSegment: setActiveSegment,
-      activeSegment: activeOption
-    }, inputProps)));
+      segments: options,
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
   });
 }
 SegmentedField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  options: PropTypes__default.default.array.isRequired,
   className: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
   inputClass: PropTypes__default.default.string,
@@ -1678,8 +1981,6 @@ SegmentedField.propTypes = {
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   label: PropTypes__default.default.string,
-  name: PropTypes__default.default.string.isRequired,
-  options: PropTypes__default.default.array.isRequired,
   placeholder: PropTypes__default.default.string,
   showMessage: PropTypes__default.default.bool
 };
@@ -1717,10 +2018,16 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
     const [selectedOptions, setSelectedOptions] = React.useState(null);
     const defaultValue = React.useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
@@ -1737,47 +2044,60 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       if (onChange) {
         onChange(value, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
     const onChangeValue = React.useCallback((option, actionMeta) => {
       const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
     React.useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedSelectProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: selectProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: 'form-select',
       inputName: input.name,
       inputValue: input.value,
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
       className: "form-select-item",
       instanceId: `id_${input.name}`,
-      value: selectedOptions,
-      onChange: onChangeValue,
       isDisabled: isDisabled,
       options: options,
-      ref: selectRef
-    }, selectProps)));
+      ref: selectRef,
+      value: selectedOptions,
+      onChange: onChangeValue
+    }, updatedSelectProps)));
   });
 });
 SelectField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
   classNameGroupItem: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   label: PropTypes__default.default.any,
   messageType: PropTypes__default.default.string,
-  name: PropTypes__default.default.string.isRequired,
   options: PropTypes__default.default.array,
   selectProps: PropTypes__default.default.object,
   selectRef: PropTypes__default.default.any,
@@ -1799,42 +2119,62 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
     type: "checkbox"
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-switch",
       inputName: input.name,
       inputValue: input.checked,
-      isRequired: isRequired,
       isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
       metaActive: meta.active,
       metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
       showMessage: showMessage,
       tag: "label"
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
       autoComplete: "nope",
-      isDisabled: isDisabled,
       checked: input.checked,
+      isDisabled: isDisabled,
       name: input.name,
       type: "checkbox",
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, inputProps)));
+    }, updatedInputProps)));
   });
 });
 SwitchField.defaultProps = {
@@ -1864,48 +2204,168 @@ const TextareaField = /*#__PURE__*/React__default.default.memo(function Textarea
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-    className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
-    fieldClassName: 'form-textarea',
-    inputName: input.name,
-    inputValue: input.value,
-    isRequired: isRequired,
-    isDisabled: isDisabled,
-    metaActive: meta.active,
-    metaError: meta.error,
-    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-    metaSubmitError: meta.submitError,
-    metaSubmitFailed: meta.submitFailed,
-    metaTouched: meta.touched,
-    metaValid: meta.valid,
-    showMessage: showMessage
-  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
-    autoComplete: "nope",
-    name: input.name,
-    value: input.value,
-    isDisabled: isDisabled,
-    onBlur: input.onBlur,
-    onChange: input.onChange,
-    onFocus: input.onFocus
-  }, inputProps))));
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-textarea',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
+      autoComplete: "nope",
+      isDisabled: isDisabled,
+      name: input.name,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
 });
 TextareaField.defaultProps = {
   inputProps: {},
   fieldProps: {}
 };
 TextareaField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
   classNameGroupItem: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
   inputProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
   showMessage: PropTypes__default.default.bool
 };
 
+const MaskedInputField = /*#__PURE__*/React__default.default.memo(function MaskedInputField(props) {
+  const {
+    isDisabled,
+    isRequired,
+    name,
+    initialValue,
+    fieldProps,
+    classNameGroupItem,
+    showMessage,
+    inputProps,
+    optionsMask,
+    unmasked
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      ref,
+      value,
+      unmaskedValue,
+      setUnmaskedValue
+    } = reactImask.useIMask(optionsMask, {
+      onAccept: (newValue, event, element) => {
+        if (element) {
+          input.onChange(event._unmaskedValue);
+        }
+      }
+    });
+    React.useEffect(() => {
+      if (input.value !== unmaskedValue) {
+        setUnmaskedValue(input.value.replace(unmasked, ''));
+      }
+    }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-maskedInput',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
+      className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      ref: ref,
+      value: value,
+      onBlur: input.onBlur,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+MaskedInputField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+MaskedInputField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  classNameGroupItem: PropTypes__default.default.string,
+  fieldProps: PropTypes__default.default.object,
+  initialValue: PropTypes__default.default.any,
+  inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
+  isRequired: PropTypes__default.default.bool,
+  optionsMask: PropTypes__default.default.object,
+  showMessage: PropTypes__default.default.bool,
+  unmasked: PropTypes__default.default.string
+};
+
 const focusOnError = (formElementsList, errors) => {
   const selectsIds = Object.keys(errors).map(fieldName => {
     if (fieldName === finalForm.FORM_ERROR) {
@@ -2030,7 +2490,8 @@ const formTypes = {
   select: 'select',
   switch: 'switch',
   text: 'text',
-  textarea: 'textarea'
+  textarea: 'textarea',
+  maskedInput: 'maskedInput'
 };
 function generateField(field, config, props) {
   switch (field.type) {
@@ -2100,6 +2561,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.maskedInput:
+      {
+        return /*#__PURE__*/React__default.default.createElement(MaskedInputField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.custom:
       {
         return /*#__PURE__*/React__default.default.createElement(CustomField, Object.assign({
@@ -2433,6 +2900,118 @@ FinalForm.defaultProps = {
   disableFieldsAutoComplete: false
 };
 
+const DEFAULT_MESSAGES_FIELDS = {
+  /*
+   !!! it also works without props simply based on the class and key as before `input_state_${meta.error.key}`
+   the KEY is needed for example for border color
+   the name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
+  ...example
+         required - KEY for yellow color
+        error - KEY for red color
+        custom or blue - KEY blue or other color
+          requiredBorderColor: 'warningBorderPrimary',
+        errorBorderColor: 'errorBorderPrimary',
+        customBorderColor: 'customBorderPrimary',
+        blueBorderColor: 'blueBorderPrimary',
+         const defaultFieldProps = {
+           messageTextSize: 's',
+          messageTextColor: 'surfaceTextSecondary',
+           requiredMessageTextSize: 's',
+          requiredMessageTextColor: 'warningTextPrimary',
+           errorMessageTextSize: 's',
+          errorMessageTextColor: 'errorTextPrimary',
+        }
+           // INPUT
+        const defaultInputProps = {
+        ... other
+         stateBorderColor: 'surfaceBorderTertiary',
+        requiredStateBorderColor: 'warningBorderPrimary',
+        errorStateBorderColor: 'errorBorderPrimary',
+        }
+         // RADIO
+        const defaultRadioProps = {
+        ... other
+         stateBorderColor: 'surfaceBorderTertiary',
+        requiredStateBorderColor: 'warningBorderPrimary',
+        errorStateBorderColor: 'errorBorderPrimary',
+        }
+         // SELECT
+        const defaultSelectProps = {
+        ... other
+         borderColor: 'surfaceBorderTertiary',
+        requiredBorderColor: 'warningBorderPrimary',
+        errorBorderColor: 'errorBorderPrimary',
+         inputBorderColor: 'surfaceBorderTertiary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+        errorInputBorderColor: 'errorBorderPrimary',
+        }
+         ... etc
+  */
+
+  // DEFAULT
+  // required - KEY for yellow color
+  // error - KEY for red color
+
+  // key: 'required'
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  },
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
+  },
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  // key: 'error'
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
+  min: {
+    key: 'error',
+    message: ({
+      min
+    }) => `Значение должно быть не менее ${min} символов`
+  },
+  max: {
+    key: 'error',
+    message: ({
+      max
+    }) => `Значение должно быть не менее ${max} символов`
+  },
+  url: {
+    key: 'error',
+    message: 'Введите корректный URL-адрес'
+  },
+  invalid_value: {
+    key: 'error',
+    message: 'Некорректное значение'
+  },
+  numeric_value: {
+    key: 'error',
+    message: 'Только числовое значение'
+  },
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  }
+};
+
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return reactFinalForm.Field; }
@@ -2449,6 +3028,7 @@ exports.Checkbox = CheckboxField;
 exports.ChoiceField = ChoiceField;
 exports.CodeField = CodeField;
 exports.CustomField = CustomField;
+exports.DEFAULT_MESSAGES_FIELDS = DEFAULT_MESSAGES_FIELDS;
 exports.DatePickerField = DatePickerField;
 exports.FieldWrapper = FieldWrapper;
 exports.FieldWrapperBase = FieldWrapperBase;
@@ -2456,6 +3036,7 @@ exports.FileInput = FileInput;
 exports.FinalForm = FinalForm;
 exports.Group = Group;
 exports.InputField = InputField;
+exports.MaskedInputField = MaskedInputField;
 exports.RadioGroup = RadioGroup;
 exports.SegmentedField = SegmentedField;
 exports.SelectField = SelectField;