@itcase/forms 1.0.59 → 1.0.61

package/dist/itcase-forms.esm.js

@@ -10,6 +10,8 @@ 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 { Code } from '@itcase/ui/components/Code';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
@@ -20,13 +22,16 @@ import castArray from 'lodash/castArray';
 import { createFileFromDataURL } from '@itcase/common';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
-import { Input } from '@itcase/ui/components/Input';
 import { Icon } from '@itcase/ui/components/Icon';
+import { Input } from '@itcase/ui/components/Input';
+import iconSizeProps from '@itcase/ui/constants/componentProps/iconSize';
+import shapeProps from '@itcase/ui/constants/componentProps/shape';
 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 { Button } from '@itcase/ui/components/Button';
 import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { NotificationItem } from '@itcase/ui/components/Notification';
@@ -124,9 +129,6 @@ function FieldWrapperBase(props) {
     dividerFill,
     dividerSize,
     dividerWidth,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
     fieldClassName,
     id,
     inputName,
@@ -143,42 +145,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 = useMemo(() => {
-    if (showErrorsOnSubmit) {
-      return metaSubmitFailed && metaTouched && error;
-    } else {
-      return metaTouched && error;
-    }
-  }, [showErrorsOnSubmit, metaSubmitFailed, metaTouched, error]);
-  const showValid = 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 = useMemo(() => clsx(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 = useMemo(() => clsx(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 = useMemo(() => clsx(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
+  const fieldClass = useMemo(() => clsx(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
+  const validationAppearance = useMemo(() => {
+    return {
+      textColor: props[`${errorKey}MessageTextColor`],
+      textSize: props[`${errorKey}MessageTextSize`],
+      textWeight: props[`${errorKey}MessageTextWeight`]
+    };
+  }, [errorKey, isErrorState]);
   const sizeClass = useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -212,59 +200,61 @@ function FieldWrapperBase(props) {
   } = useStyles(props);
   return /*#__PURE__*/React.createElement(Tag, {
     className: clsx(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.createElement("div", {
-    htmlFor: id,
     className: clsx('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`
+    "data-test-id": `${inputName}FieldLabel`,
+    htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
-    textWeight: labelTextWidth,
-    textColor: labelTextColor
+    textColor: labelTextColor,
+    textWeight: labelTextWidth
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
     "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
-    textWeight: descTextWidth,
-    textColor: descTextColor
+    textColor: descTextColor,
+    textWeight: descTextWidth
   }, desc)), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__content', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__content-inner', fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "form-field__item-divider",
-    width: dividerWidth,
     direction: dividerDirection,
+    fill: dividerFill,
     size: dividerSize,
-    fill: dividerFill
+    width: dividerWidth
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
     "data-test-id": `${inputName}FieldMessage`
-  }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React.createElement(Text, {
+  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(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.createElement(Text, {
+    size: validationAppearance?.textSize,
+    textColor: validationAppearance?.textColor,
+    textWeight: validationAppearance?.textWeight
+  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(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.createElement(Text, {
+    textWeight: helpTextWeight
+  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(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'
 };
@@ -285,10 +275,6 @@ FieldWrapperBase.propTypes = {
   dividerFill: PropTypes.string,
   dividerSize: PropTypes.string,
   dividerWidth: PropTypes.string,
-  errorMessageTextColor: PropTypes.string,
-  errorMessageTextSize: PropTypes.string,
-  errorMessageTextWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  errorMessageTextWidth: PropTypes.string,
   fieldClassName: PropTypes.string,
   id: PropTypes.string,
   inputName: PropTypes.string,
@@ -313,14 +299,8 @@ FieldWrapperBase.propTypes = {
   messageTextWidth: PropTypes.string,
   metaActive: PropTypes.bool,
   metaError: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  metaModifiedSinceLastSubmit: PropTypes.bool,
-  metaSubmitError: PropTypes.string,
-  metaSubmitFailed: PropTypes.bool,
-  metaTouched: PropTypes.bool,
-  metaValid: PropTypes.bool,
   set: PropTypes.string,
   showDivider: PropTypes.bool,
-  showErrorsOnSubmit: PropTypes.bool,
   showMessage: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
   type: PropTypes.string
@@ -342,6 +322,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 = 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 CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
   const {
     classNameGroupItem,
@@ -355,45 +442,65 @@ const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(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 = 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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(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 = {
@@ -401,9 +508,9 @@ CheckboxField.defaultProps = {
   inputProps: {}
 };
 CheckboxField.propTypes = {
-  initialValue: PropTypes.bool,
   classNameGroupItem: PropTypes.string,
   fieldProps: PropTypes.object,
+  initialValue: PropTypes.bool,
   inputProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
@@ -416,17 +523,17 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   const {
     classNameGroupItem,
     fieldProps,
-    showMessage,
     initialValue,
     inputProps,
+    isDisabled,
     isMultiple,
     isRequired,
-    isDisabled,
     label,
     messageType,
     name,
     options,
     placeholder,
+    showMessage,
     onChange
   } = props;
   const {
@@ -437,14 +544,20 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
     if (onChange) {
       onChange(option.value, name, isChecked);
     }
-  }, [change]);
+  }, [change, onChange]);
   return /*#__PURE__*/React.createElement(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 = useMemo(() => {
       const emptyOption = {
         value: null,
@@ -456,50 +569,63 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(Choice, Object.assign({
-      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && 'form-choice_state_error'),
-      options: options,
-      name: input.name,
+      active: activeOption,
+      className: clsx(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.string,
   fieldProps: PropTypes.object,
-  showMessage: PropTypes.bool,
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   inputProps: PropTypes.object,
+  isDisabled: PropTypes.bool,
   isMultiple: PropTypes.bool,
   isRequired: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   messageType: PropTypes.string,
   name: PropTypes.string,
-  options: Choice.propTypes.options,
   placeholder: PropTypes.string,
+  showMessage: PropTypes.bool,
   onChange: PropTypes.func
 };
 
@@ -515,45 +641,68 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
     showMessage
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
-    name: name,
-    initialValue: initialValue
-  }, ({
+    initialValue: initialValue,
+    name: name
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-    className: clsx('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.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.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.createElement(Component, Object.assign({}, updatedInputProps, {
+      input: input,
+      isDisabled: isDisabled,
+      meta: meta
+    })));
+  });
 });
 CustomField.defaultProps = {
   inputProps: {},
   fieldProps: {}
 };
 CustomField.propTypes = {
-  Component: PropTypes.element,
+  name: PropTypes.string.isRequired,
   classNameGroupItem: PropTypes.string,
+  Component: PropTypes.element,
   fieldProps: PropTypes.object,
   initialValue: PropTypes.any,
   inputProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
-  name: PropTypes.string.isRequired,
   showMessage: PropTypes.bool
 };
 
@@ -571,33 +720,55 @@ const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-    className: clsx('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.createElement(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.createElement(FieldWrapper, Object.assign({
+      className: clsx('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.createElement(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: {},
@@ -616,60 +787,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.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const onChangeField = useCallback(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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(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
     }));
   });
 }
@@ -678,10 +861,14 @@ DatePickerField.defaultProps = {
   fieldProps: {}
 };
 DatePickerField.propTypes = {
+  name: PropTypes.string.isRequired,
+  classNameGroupItem: PropTypes.string,
+  datePickerProps: PropTypes.object,
   fieldProps: PropTypes.object,
   inputProps: PropTypes.object,
+  isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  showMessage: PropTypes.bool,
   onChange: PropTypes.func
 };
 
@@ -1072,7 +1259,6 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     shape,
     size,
     borderWidth,
-    borderColor,
     borderColorHover,
     borderType,
     label,
@@ -1124,77 +1310,104 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-    className: clsx('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.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.createElement(FieldWrapper, Object.assign({
+      className: clsx('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.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',
@@ -1231,32 +1444,41 @@ const Group = /*#__PURE__*/React.memo(function Group(props) {
     labelTextSize,
     labelTextWeight,
     message,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    errorMessageTextColor,
     messageTextSize,
     messageTextWeight,
     messageTextColor,
     children,
     dataTour,
     showGroupMessage,
-    name,
-    showErrorsOnSubmit
+    name
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
-    const error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
-    const showError = 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.createElement("div", {
       className: clsx('form__group', className),
       "data-tour": dataTour
@@ -1265,23 +1487,23 @@ const Group = /*#__PURE__*/React.memo(function Group(props) {
     }, before, /*#__PURE__*/React.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React.createElement(Title, {
-      textColor: labelTextColor,
       size: labelTextSize,
+      textColor: labelTextColor,
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(showError) && /*#__PURE__*/React.createElement(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.createElement(Text, {
+    }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.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.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize,
-      textWeight: messageTextWeight,
-      textColor: messageTextColor
-    }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
+      textColor: messageTextColor,
+      textWeight: messageTextWeight
+    }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize
     }, '\u00A0')));
@@ -1298,34 +1520,34 @@ Group.defaultProps = {
 };
 Group.propTypes = {
   name: PropTypes.string.isRequired,
-  isRequired: PropTypes.bool,
   fieldProps: PropTypes.object,
-  inputProps: PropTypes.object
+  inputProps: PropTypes.object,
+  isRequired: PropTypes.bool
 };
 
 const InputField = /*#__PURE__*/React.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] = useState(false);
   const inputType = useMemo(() => {
@@ -1335,59 +1557,79 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       return 'text';
     }
   }, [isRevealed, isPassword]);
-  const revealeHandler = useCallback(e => {
-    e.preventDefault();
+  const onClickIconReveal = useCallback(event => {
+    event.preventDefault();
     setIsRevealed(prev => !prev);
-  }, [setIsRevealed]);
+  }, []);
   return /*#__PURE__*/React.createElement(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 = 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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(Input, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
       autoComplete: "nope",
+      className: clsx(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.createElement(Icon, {
+      onFocus: input.onFocus
+    }, updatedInputProps)), isRevealable && /*#__PURE__*/React.createElement(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
     }));
   });
 });
@@ -1396,13 +1638,26 @@ InputField.defaultProps = {
   fieldProps: {}
 };
 InputField.propTypes = {
+  name: PropTypes.string.isRequired,
+  classNameGroupItem: PropTypes.string,
+  dataTestId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   fieldProps: PropTypes.object,
+  iconBorder: PropTypes.string,
+  iconBorderHover: PropTypes.string,
+  iconFill: PropTypes.string,
+  iconFillHover: PropTypes.string,
+  iconRevealableHide: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.object]),
+  iconRevealableShow: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.object]),
+  iconShape: PropTypes.oneOf(shapeProps),
+  iconSize: PropTypes.oneOf(iconSizeProps),
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inputProps: PropTypes.object,
+  isDisabled: PropTypes.bool,
   isPassword: PropTypes.bool,
   isRequired: PropTypes.bool,
   isRevealable: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  parse: PropTypes.func,
+  showMessage: PropTypes.bool,
   onChange: PropTypes.func
 };
 
@@ -1559,32 +1814,54 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React.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.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.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.createElement(RadioGroupList, {
+      editableProps: editableProps,
+      input: input,
+      inputProps: updatedInputProps,
+      isDisabled: isDisabled,
+      options: options,
+      onChange: onChange
+    }));
+  });
 });
 RadioGroup.defaultProps = {
   editableProps: {},
@@ -1593,12 +1870,12 @@ RadioGroup.defaultProps = {
   options: []
 };
 RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
   editableProps: PropTypes.object,
   fieldProps: PropTypes.object,
   inputProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
-  name: PropTypes.string.isRequired,
   options: PropTypes.array,
   showMessage: PropTypes.bool,
   onChange: PropTypes.func
@@ -1622,10 +1899,17 @@ function SegmentedField(props) {
   }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
     const activeOption = useMemo(() => {
       const emptyOption = {
         value: null,
@@ -1637,30 +1921,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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(Segmented, Object.assign({
-      segments: options,
+      activeSegment: activeOption,
       isDisabled: isDisabled,
-      setActiveSegment: setActiveSegment,
-      activeSegment: activeOption
-    }, inputProps)));
+      segments: options,
+      setActiveSegment: setActiveSegment
+    }, updatedInputProps)));
   });
 }
 SegmentedField.propTypes = {
+  name: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
   className: PropTypes.string,
   fieldProps: PropTypes.object,
   inputClass: PropTypes.string,
@@ -1668,8 +1967,6 @@ SegmentedField.propTypes = {
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
   label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  options: PropTypes.array.isRequired,
   placeholder: PropTypes.string,
   showMessage: PropTypes.bool
 };
@@ -1707,10 +2004,16 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => {
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
     const [selectedOptions, setSelectedOptions] = useState(null);
     const defaultValue = useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
@@ -1727,47 +2030,60 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       if (onChange) {
         onChange(value, input.name);
       }
-    }, [onChange]);
+    }, [onChange, input.onChange]);
     const onChangeValue = useCallback((option, actionMeta) => {
       const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
     useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedSelectProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: selectProps
+    });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(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.string.isRequired,
   classNameGroupItem: PropTypes.string,
   fieldProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
   label: PropTypes.any,
   messageType: PropTypes.string,
-  name: PropTypes.string.isRequired,
   options: PropTypes.array,
   selectProps: PropTypes.object,
   selectRef: PropTypes.any,
@@ -1789,42 +2105,62 @@ const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
   return /*#__PURE__*/React.createElement(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 = 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.createElement(FieldWrapper, Object.assign({
       className: clsx('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.createElement(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 = {
@@ -1854,48 +2190,168 @@ const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, ({
+  }, function Render({
     input,
     meta
-  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-    className: clsx('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.createElement(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.createElement(FieldWrapper, Object.assign({
+      className: clsx('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.createElement(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.string.isRequired,
   classNameGroupItem: PropTypes.string,
   fieldProps: PropTypes.object,
   inputProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
-  name: PropTypes.string.isRequired,
   showMessage: PropTypes.bool
 };
 
+const MaskedInputField = /*#__PURE__*/React.memo(function MaskedInputField(props) {
+  const {
+    isDisabled,
+    isRequired,
+    name,
+    initialValue,
+    fieldProps,
+    classNameGroupItem,
+    showMessage,
+    inputProps,
+    optionsMask,
+    unmasked
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      ref,
+      value,
+      unmaskedValue,
+      setUnmaskedValue
+    } = useIMask(optionsMask, {
+      onAccept: (newValue, event, element) => {
+        if (element) {
+          input.onChange(event._unmaskedValue);
+        }
+      }
+    });
+    useEffect(() => {
+      if (input.value !== unmaskedValue) {
+        setUnmaskedValue(input.value.replace(unmasked, ''));
+      }
+    }, [input.value]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('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.createElement(Input, Object.assign({
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      ref: ref,
+      value: value,
+      onBlur: input.onBlur,
+      onFocus: input.onFocus
+    }, updatedInputProps)));
+  });
+});
+MaskedInputField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+MaskedInputField.propTypes = {
+  name: PropTypes.string.isRequired,
+  classNameGroupItem: PropTypes.string,
+  fieldProps: PropTypes.object,
+  initialValue: PropTypes.any,
+  inputProps: PropTypes.object,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  optionsMask: PropTypes.object,
+  showMessage: PropTypes.bool,
+  unmasked: PropTypes.string
+};
+
 const focusOnError = (formElementsList, errors) => {
   const selectsIds = Object.keys(errors).map(fieldName => {
     if (fieldName === FORM_ERROR) {
@@ -2020,7 +2476,8 @@ const formTypes = {
   select: 'select',
   switch: 'switch',
   text: 'text',
-  textarea: 'textarea'
+  textarea: 'textarea',
+  maskedInput: 'maskedInput'
 };
 function generateField(field, config, props) {
   switch (field.type) {
@@ -2090,6 +2547,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.maskedInput:
+      {
+        return /*#__PURE__*/React.createElement(MaskedInputField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.custom:
       {
         return /*#__PURE__*/React.createElement(CustomField, Object.assign({
@@ -2423,4 +2886,116 @@ FinalForm.defaultProps = {
   disableFieldsAutoComplete: false
 };
 
-export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+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: 'Введите корректный адрес электронной почты'
+  }
+};
+
+export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };