@itcase/forms 1.1.33 → 1.1.35

package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css

@@ -1,4 +1,3 @@
-
 .form-field {
   &-checkbox {
     ^&__message {

package/dist/css/form/Field/RadioGroup/RadioGroup.css

@@ -12,11 +12,11 @@
 }
 
 .form-field {
-  &_type {
-    &_radio {
-      &.form-field_size {
-        @each $size in xxl, xl, l, m, s, xs, xxs {
-          &_$(size) {
+  &_radio {
+    &.form-field_size {
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &_$(size) {
+          & .form-radio {
             gap: var(--form-filed-radio-size-$(size)-gap);
           }
         }
@@ -26,10 +26,5 @@
 }
 
 :root {
-  --radio-success-border: var(--color-success-border-primary);
-  --radio-success-border-hover: var(--color-surface-border-quaternary);
-  --radio-error-border: var(--color-error-border-primary);
-  --radio-focus-background: var(--color-surface-primary);
-  --radio-focus-border: var(--color-surface-border-quaternary);
-  --form-filed-radio-size-m-gap: 4px;
+  --form-filed-radio-size-m-gap: 12px;
 }

package/dist/itcase-forms.cjs.js

@@ -386,8 +386,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__desc",
-    dataTestId: `${inputName}FieldDesc`
+    dataTestId: `${inputName}FieldDesc`,
+    className: "form-field__desc"
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -1573,6 +1573,7 @@ function FormFieldDatePicker(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1581,7 +1582,7 @@ function FormFieldDatePicker(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
@@ -2292,75 +2293,13 @@ const defaultRadioProps = {
   appearance: 'defaultPrimary sizeM solid circular'
 };
 
-function RadioGroupInput(props) {
-  const {
-    input,
-    value,
-    onChange
-  } = props;
-  const onChangeField = React.useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
-    name: input.name,
-    autoComplete: "nope",
-    value: value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, props));
-}
-
-function RadioGroupItem(props) {
-  const {
-    input,
-    inputProps,
-    option,
-    onChange
-  } = props;
-  const onChangeField = React.useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
-    className: "form-radio__item",
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, inputProps));
-}
-
 function RadioGroupList(props) {
   const {
-    editableProps,
     input,
     inputProps,
     options,
     onChange
   } = props;
-  const [editableValue, setEditableValue] = React.useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  React.useEffect(() => {
-    // When a new value from outside enters the form
-    if (input.value) {
-      // Check value for radio type
-      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
-      // If new value not in radio list - set to editable input
-      setEditableValue(isRadioValue ? '' : input.value);
-    } else {
-      // If new value is empty - clear editable input
-      setEditableValue('');
-    }
-  }, [input.value]);
 
   // Callback for value changes
   const onChangeSomeInput = React.useCallback(value => {
@@ -2373,31 +2312,23 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = React.useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = React.useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React__default.default.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React__default.default.createElement(RadioGroupItem, {
+  const onChangeRadio = React.useCallback(event => {
+    if (event.target.checked) {
+      onChangeSomeInput(event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
+    className: "form-radio__item",
     key: option.value,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    onChange: onChangeRadio
-  })));
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeRadio,
+    onFocus: input.onFocus
+  }, inputProps))));
 }
 
 const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(props) {
@@ -2441,7 +2372,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_radio', 'form__item_radio"', classNameGroupItem),
+      className: clsx__default.default('form-field_radio', 'form__item_radio', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2466,6 +2397,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
 });
 
 const formTypes = {
+  password: 'password',
   code: 'code',
   text: 'text',
   textarea: 'textarea',
@@ -2485,6 +2417,12 @@ const formTypes = {
 };
 function generateField(field, config, props) {
   switch (field.type) {
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldCheckbox, Object.assign({
@@ -2497,15 +2435,15 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.chips:
+    case formTypes.code:
       {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldChips, Object.assign({
+        return /*#__PURE__*/React__default.default.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
-    case formTypes.code:
+    case formTypes.chips:
       {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldCode, Object.assign({
+        return /*#__PURE__*/React__default.default.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2551,12 +2489,6 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.password:
-      {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldPassword, Object.assign({
-          key: config.key
-        }, field, props));
-      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldTextarea, Object.assign({
@@ -2793,6 +2725,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     onChangeFormValues,
     onSubmit
   } = props;
+  console.log(buttonJustifyContent);
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = React.useCallback(formInstance => {
     if (ref) {
@@ -2945,116 +2878,152 @@ FinalForm.defaultProps = {
   direction: 'vertical'
 };
 
-const DEFAULT_MESSAGES_FIELDS = {
-  /*
-   !!! it also works without props simply based on the class and key as before `input_state_${meta.error.key}`
-   the KEY is needed for example for border color
-   the name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
+const DEFAULT_MESSAGES_REQUIRED = {
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
+  }
+};
+const DEFAULT_MESSAGES_ERROR = {
+  invalid_value: {
+    key: 'error',
+    message: 'Некорректное значение'
+  }
+};
+const DEFAULT_MESSAGES_URL = {
+  url: {
+    key: 'error',
+    message: 'Введите корректный URL-адрес'
+  }
+};
+const DEFAULT_MESSAGES_PASSWORD = {
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
+  }
+};
+const DEFAULT_MESSAGES_NUMBER = {
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
+  numeric_value: {
+    key: 'error',
+    message: 'Только числовое значение'
+  }
+};
+const DEFAULT_MESSAGES_MIN_MAX = {
+  min: {
+    key: 'error',
+    message: ({
+      min
+    }) => `Значение должно быть не менее ${min} символов`
+  },
+  max: {
+    key: 'error',
+    message: ({
+      max
+    }) => `Значение должно быть не менее ${max} символов`
+  }
+};
+const DEFAULT_MESSAGES_PHONE = {
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  }
+};
+const DEFAULT_MESSAGES_EMAIL = {
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  }
+};
+
+/*
+
+  !!! 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
+
+        required - KEY for yellow color
         error - KEY for red color
         custom or blue - KEY blue or other color
-          requiredBorderColor: 'warningBorderPrimary',
+
+        requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
         customBorderColor: 'customBorderPrimary',
         blueBorderColor: 'blueBorderPrimary',
-         const defaultFieldProps = {
-           messageTextSize: 's',
+
+        const defaultFieldProps = {
+
+          messageTextSize: 's',
           messageTextColor: 'surfaceTextSecondary',
-           requiredMessageTextSize: 's',
+
+          requiredMessageTextSize: 's',
           requiredMessageTextColor: 'warningTextPrimary',
-           errorMessageTextSize: 's',
+
+          errorMessageTextSize: 's',
           errorMessageTextColor: 'errorTextPrimary',
         }
-           // INPUT
+
+         // INPUT
         const defaultInputProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // RADIO
+
+        // RADIO
         const defaultRadioProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // SELECT
+
+        // SELECT
         const defaultSelectProps = {
         ... other
-         borderColor: 'surfaceBorderTertiary',
+
+        borderColor: 'surfaceBorderTertiary',
         requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
-         inputBorderColor: 'surfaceBorderTertiary',
+
+        inputBorderColor: 'surfaceBorderTertiary',
         requiredInputBorderColor: 'warningBorderPrimary',
         errorInputBorderColor: 'errorBorderPrimary',
         }
-         ... etc
-  */
 
-  // DEFAULT
-  // required - KEY for yellow color
-  // error - KEY for red color
+        ... etc
+  */
 
-  min: {
-    key: 'error',
-    message: ({
-      min
-    }) => `Значение должно быть не менее ${min} символов`
-  },
-  max: {
-    key: 'error',
-    message: ({
-      max
-    }) => `Значение должно быть не менее ${max} символов`
-  },
-  url: {
-    key: 'error',
-    message: 'Введите корректный URL-адрес'
-  },
-  email_error: {
-    key: 'error',
-    message: 'Введите корректный адрес электронной почты'
-  },
-  phone_error: {
-    key: 'error',
-    message: 'Введите корректный номер телефона'
-  },
-  email_required: {
-    key: 'required',
-    message: 'Укажите адрес электронной почты'
-  },
-  invalid_value: {
-    key: 'error',
-    message: 'Некорректное значение'
-  },
-  // key: 'error'
-  matches: {
-    key: 'error',
-    message: 'Допускается ввод только цифр от 0 до 9'
-  },
-  numeric_value: {
-    key: 'error',
-    message: 'Только числовое значение'
-  },
-  password_required: {
-    key: 'required',
-    message: 'Введите пароль'
-  },
-  phone_or_email_required: {
-    key: 'required',
-    message: 'Введите телефон или адрес эл. почты'
-  },
-  phone_required: {
-    key: 'required',
-    message: 'Укажите номер телефона'
-  },
-  // key: 'required'
-  required: {
-    key: 'required',
-    message: 'Обязательное поле'
-  }
+const DEFAULT_MESSAGES_FIELDS = {
+  ...DEFAULT_MESSAGES_EMAIL,
+  ...DEFAULT_MESSAGES_ERROR,
+  ...DEFAULT_MESSAGES_MIN_MAX,
+  ...DEFAULT_MESSAGES_NUMBER,
+  ...DEFAULT_MESSAGES_PASSWORD,
+  ...DEFAULT_MESSAGES_PHONE,
+  ...DEFAULT_MESSAGES_REQUIRED,
+  ...DEFAULT_MESSAGES_URL
 };
 
 const parseNumericField = value => {

package/dist/itcase-forms.esm.js

@@ -375,8 +375,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__desc",
-    dataTestId: `${inputName}FieldDesc`
+    dataTestId: `${inputName}FieldDesc`,
+    className: "form-field__desc"
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -1562,6 +1562,7 @@ function FormFieldDatePicker(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1570,7 +1571,7 @@ function FormFieldDatePicker(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
@@ -2281,75 +2282,13 @@ const defaultRadioProps = {
   appearance: 'defaultPrimary sizeM solid circular'
 };
 
-function RadioGroupInput(props) {
-  const {
-    input,
-    value,
-    onChange
-  } = props;
-  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(Input, Object.assign({
-    name: input.name,
-    autoComplete: "nope",
-    value: value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, props));
-}
-
-function RadioGroupItem(props) {
-  const {
-    input,
-    inputProps,
-    option,
-    onChange
-  } = props;
-  const onChangeField = useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Radio, Object.assign({
-    className: "form-radio__item",
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, inputProps));
-}
-
 function RadioGroupList(props) {
   const {
-    editableProps,
     input,
     inputProps,
     options,
     onChange
   } = props;
-  const [editableValue, setEditableValue] = useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  useEffect(() => {
-    // When a new value from outside enters the form
-    if (input.value) {
-      // Check value for radio type
-      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
-      // If new value not in radio list - set to editable input
-      setEditableValue(isRadioValue ? '' : input.value);
-    } else {
-      // If new value is empty - clear editable input
-      setEditableValue('');
-    }
-  }, [input.value]);
 
   // Callback for value changes
   const onChangeSomeInput = useCallback(value => {
@@ -2362,31 +2301,23 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
+  const onChangeRadio = useCallback(event => {
+    if (event.target.checked) {
+      onChangeSomeInput(event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(Radio, Object.assign({
+    className: "form-radio__item",
     key: option.value,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    onChange: onChangeRadio
-  })));
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeRadio,
+    onFocus: input.onFocus
+  }, inputProps))));
 }
 
 const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
@@ -2430,7 +2361,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_radio', 'form__item_radio"', classNameGroupItem),
+      className: clsx('form-field_radio', 'form__item_radio', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2455,6 +2386,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
 });
 
 const formTypes = {
+  password: 'password',
   code: 'code',
   text: 'text',
   textarea: 'textarea',
@@ -2474,6 +2406,12 @@ const formTypes = {
 };
 function generateField(field, config, props) {
   switch (field.type) {
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React.createElement(FormFieldCheckbox, Object.assign({
@@ -2486,15 +2424,15 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.chips:
+    case formTypes.code:
       {
-        return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
-    case formTypes.code:
+    case formTypes.chips:
       {
-        return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2540,12 +2478,6 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.password:
-      {
-        return /*#__PURE__*/React.createElement(FormFieldPassword, Object.assign({
-          key: config.key
-        }, field, props));
-      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React.createElement(FormFieldTextarea, Object.assign({
@@ -2782,6 +2714,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     onChangeFormValues,
     onSubmit
   } = props;
+  console.log(buttonJustifyContent);
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = useCallback(formInstance => {
     if (ref) {
@@ -2934,116 +2867,152 @@ FinalForm.defaultProps = {
   direction: 'vertical'
 };
 
-const DEFAULT_MESSAGES_FIELDS = {
-  /*
-   !!! it also works without props simply based on the class and key as before `input_state_${meta.error.key}`
-   the KEY is needed for example for border color
-   the name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
+const DEFAULT_MESSAGES_REQUIRED = {
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
+  }
+};
+const DEFAULT_MESSAGES_ERROR = {
+  invalid_value: {
+    key: 'error',
+    message: 'Некорректное значение'
+  }
+};
+const DEFAULT_MESSAGES_URL = {
+  url: {
+    key: 'error',
+    message: 'Введите корректный URL-адрес'
+  }
+};
+const DEFAULT_MESSAGES_PASSWORD = {
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
+  }
+};
+const DEFAULT_MESSAGES_NUMBER = {
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
+  numeric_value: {
+    key: 'error',
+    message: 'Только числовое значение'
+  }
+};
+const DEFAULT_MESSAGES_MIN_MAX = {
+  min: {
+    key: 'error',
+    message: ({
+      min
+    }) => `Значение должно быть не менее ${min} символов`
+  },
+  max: {
+    key: 'error',
+    message: ({
+      max
+    }) => `Значение должно быть не менее ${max} символов`
+  }
+};
+const DEFAULT_MESSAGES_PHONE = {
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  }
+};
+const DEFAULT_MESSAGES_EMAIL = {
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  }
+};
+
+/*
+
+  !!! 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
+
+        required - KEY for yellow color
         error - KEY for red color
         custom or blue - KEY blue or other color
-          requiredBorderColor: 'warningBorderPrimary',
+
+        requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
         customBorderColor: 'customBorderPrimary',
         blueBorderColor: 'blueBorderPrimary',
-         const defaultFieldProps = {
-           messageTextSize: 's',
+
+        const defaultFieldProps = {
+
+          messageTextSize: 's',
           messageTextColor: 'surfaceTextSecondary',
-           requiredMessageTextSize: 's',
+
+          requiredMessageTextSize: 's',
           requiredMessageTextColor: 'warningTextPrimary',
-           errorMessageTextSize: 's',
+
+          errorMessageTextSize: 's',
           errorMessageTextColor: 'errorTextPrimary',
         }
-           // INPUT
+
+         // INPUT
         const defaultInputProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // RADIO
+
+        // RADIO
         const defaultRadioProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // SELECT
+
+        // SELECT
         const defaultSelectProps = {
         ... other
-         borderColor: 'surfaceBorderTertiary',
+
+        borderColor: 'surfaceBorderTertiary',
         requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
-         inputBorderColor: 'surfaceBorderTertiary',
+
+        inputBorderColor: 'surfaceBorderTertiary',
         requiredInputBorderColor: 'warningBorderPrimary',
         errorInputBorderColor: 'errorBorderPrimary',
         }
-         ... etc
-  */
 
-  // DEFAULT
-  // required - KEY for yellow color
-  // error - KEY for red color
+        ... etc
+  */
 
-  min: {
-    key: 'error',
-    message: ({
-      min
-    }) => `Значение должно быть не менее ${min} символов`
-  },
-  max: {
-    key: 'error',
-    message: ({
-      max
-    }) => `Значение должно быть не менее ${max} символов`
-  },
-  url: {
-    key: 'error',
-    message: 'Введите корректный URL-адрес'
-  },
-  email_error: {
-    key: 'error',
-    message: 'Введите корректный адрес электронной почты'
-  },
-  phone_error: {
-    key: 'error',
-    message: 'Введите корректный номер телефона'
-  },
-  email_required: {
-    key: 'required',
-    message: 'Укажите адрес электронной почты'
-  },
-  invalid_value: {
-    key: 'error',
-    message: 'Некорректное значение'
-  },
-  // key: 'error'
-  matches: {
-    key: 'error',
-    message: 'Допускается ввод только цифр от 0 до 9'
-  },
-  numeric_value: {
-    key: 'error',
-    message: 'Только числовое значение'
-  },
-  password_required: {
-    key: 'required',
-    message: 'Введите пароль'
-  },
-  phone_or_email_required: {
-    key: 'required',
-    message: 'Введите телефон или адрес эл. почты'
-  },
-  phone_required: {
-    key: 'required',
-    message: 'Укажите номер телефона'
-  },
-  // key: 'required'
-  required: {
-    key: 'required',
-    message: 'Обязательное поле'
-  }
+const DEFAULT_MESSAGES_FIELDS = {
+  ...DEFAULT_MESSAGES_EMAIL,
+  ...DEFAULT_MESSAGES_ERROR,
+  ...DEFAULT_MESSAGES_MIN_MAX,
+  ...DEFAULT_MESSAGES_NUMBER,
+  ...DEFAULT_MESSAGES_PASSWORD,
+  ...DEFAULT_MESSAGES_PHONE,
+  ...DEFAULT_MESSAGES_REQUIRED,
+  ...DEFAULT_MESSAGES_URL
 };
 
 const parseNumericField = value => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.33",
+  "version": "1.1.35",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -34,11 +34,11 @@
   "dependencies": {
     "@itcase/common": "^1.2.28",
     "@itcase/config": "^1.0.55",
-    "@itcase/icons": "^1.2.16",
-    "@itcase/storybook-config": "^1.1.77",
+    "@itcase/icons": "^1.2.19",
+    "@itcase/storybook-config": "^1.1.83",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/ui": "^1.8.87",
+    "@itcase/ui": "^1.8.90",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
@@ -74,16 +74,16 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.32.0",
+    "eslint": "9.33.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.4",
+    "lint-staged": "^16.1.5",
     "postcss": "^8.5.6",
     "prettier": "3.6.2",
     "rollup": "^4.46.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.7",
     "storybook": "^9.1.1",
-    "stylelint": "^16.23.0",
+    "stylelint": "^16.23.1",
     "typescript": "^5.9.2",
     "yup": "^1.7.0"
   }