@itcase/forms 1.1.26 → 1.1.28

package/dist/itcase-forms.esm.js

@@ -1,5 +1,5 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
-import React$1, { useMemo, useEffect, useState, useCallback } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import { setIn, FORM_ERROR, getIn } from 'final-form';
 import { useForm, Field, Form, FormSpy } from 'react-final-form';
 export { Field, useForm, useFormState } from 'react-final-form';
@@ -26,6 +26,7 @@ import { Code } from '@itcase/ui/components/Code';
 import { Icon } from '@itcase/ui/components/Icon';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import { Input } from '@itcase/ui/components/Input';
+import { icons24 } from '@itcase/icons/default';
 import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
@@ -338,56 +339,56 @@ function FieldWrapperBase(props) {
   const errorTextSize = props[`${errorKey}MessageTextSize`];
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
-  return /*#__PURE__*/React$1.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Tag, {
     dataTestId: `${inputName}Field`,
     dataTour: dataTour,
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     style: formFieldStyles
-  }, before, (label || labelHidden) && /*#__PURE__*/React$1.createElement("div", {
+  }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     dataTestId: `${inputName}FieldLabel`,
     className: clsx('form-field__label'),
     htmlFor: id
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textColor: labelTextColor,
     textWeight: labelTextWeight,
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
-  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React$1.createElement("div", {
+  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
     dataTestId: `${inputName}FieldDesc`
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
     textWeight: descTextWeight
-  }, desc)), /*#__PURE__*/React$1.createElement("div", {
+  }, desc)), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__content', inputFillClass, inputShapeClass)
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__content-inner', fieldClass)
-  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React$1.createElement(Divider, {
+  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "form-field__item-divider",
     width: dividerWidth,
     direction: dividerDirection,
     size: dividerSize,
     fill: dividerFill
-  })), showMessage && /*#__PURE__*/React$1.createElement("div", {
+  })), showMessage && /*#__PURE__*/React.createElement("div", {
     dataTestId: `${inputName}FieldMessage`,
     className: "form-field__message"
-  }, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(Text, {
+  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`,
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorTextSize,
     textColor: errorTextColor,
     textWeight: errorTextWeight
-  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
+  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
     sizeMobile: helpTextSizeMobile
-  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
+  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
     size: messageTextSize
@@ -406,7 +407,7 @@ function FieldWrapper(props) {
       change(inputName, undefined);
     };
   }, []);
-  return /*#__PURE__*/React$1.createElement(FieldWrapperBase, props);
+  return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
 }
 
 const defaultDropzoneProps = {
@@ -430,7 +431,7 @@ const defaultDropzoneProps = {
   isPreviews: true
 };
 
-const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(props) {
+const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
   const {
     className,
     maxFiles,
@@ -613,85 +614,85 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     thumbNameTextWeight,
     thumbNameTextWrap
   } = propsGenerator;
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", getRootProps({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
     className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
-  }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
+  }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
-  }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
+  }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
     className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
-  }, isPreviews && !file.error && /*#__PURE__*/React$1.createElement("div", {
+  }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-image"
-  }, /*#__PURE__*/React$1.createElement("img", {
+  }, /*#__PURE__*/React.createElement("img", {
     className: "form-dropzone__thumb-image-inner",
     src: file.preview || file.image,
     onLoad: () => {
       // Revoke data uri after image is loaded
       URL.revokeObjectURL(file.preview);
     }
-  })), file.error && /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Text, {
+  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     size: thumbNameTextSize,
     textColor: thumbNameTextColor,
     textWeight: thumbNameTextWeight,
     textWrap: thumbNameTextWrap
-  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React$1.createElement("div", {
+  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-name"
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__thumb-name-inner",
     size: thumbNameTextSize,
     textColor: thumbNameTextColor,
     textWeight: thumbNameTextWeight,
     textWrap: thumbNameTextWrap
-  }, file.name)), fileIsLoading && /*#__PURE__*/React$1.createElement("div", {
+  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-loader"
-  }, /*#__PURE__*/React$1.createElement(Loader, {
+  }, /*#__PURE__*/React.createElement(Loader, {
     width: "fill",
     height: "fill",
     fill: "surfacePrimary",
     itemFill: "surfaceItemAccent",
     set: "simple"
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-dropzone__thumb-remove')
-  }, /*#__PURE__*/React$1.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     className: "form-dropzone__thumb-remove-text",
     appearance: removeThumbAppearance,
     label: removeThumbText || 'Удалить',
     labelTextWeight: removeThumbTextWeight,
     shape: removeThumbShape,
     onClick: event => removeFile(event, index)
-  })))), !filesList.length ? /*#__PURE__*/React$1.createElement("div", {
+  })))), !filesList.length ? /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint"
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__hint-title",
     size: hintTitleTextSize,
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
     textWeight: hintDescriptionTextWeight,
     textWrap: hintDescriptionTextWrap
-  }, hintDescription)) : /*#__PURE__*/React$1.createElement("div", {
+  }, hintDescription)) : /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint form-dropzone__hint_type_add-more"
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__hint-title",
     size: hintTitleTextSize,
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
     textWeight: hintDescriptionTextWeight,
     textWrap: hintDescriptionTextWrap
-  }, hintDescription)))), fileError && /*#__PURE__*/React$1.createElement("div", {
+  }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message"
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: errorMessageTextSize,
     textColor: errorMessageTextColor,
@@ -770,7 +771,7 @@ function setFileDataURL(file, resolve) {
   }
 }
 
-const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
+const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
   const {
     className,
     name,
@@ -827,7 +828,7 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
     thumbNameTextWeight,
     thumbNameTextWrap
   } = propsGenerator;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -858,7 +859,7 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
     /** TODO:
      * REFACTOR PROPERTIES
      */
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
       width: width,
       label: label,
@@ -875,7 +876,7 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(FileInputDropzone, {
+    }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
       className: className,
       maxFiles: maxFiles,
       maxSize: maxSize,
@@ -935,7 +936,7 @@ const defaultGroupProps = {
   labelTextWeight: 500
 };
 
-const FormBlockGroup = /*#__PURE__*/React$1.memo(function Group(props) {
+const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
   const {
     className,
     name,
@@ -959,7 +960,7 @@ const FormBlockGroup = /*#__PURE__*/React$1.memo(function Group(props) {
     isHidden,
     children
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -985,37 +986,37 @@ const FormBlockGroup = /*#__PURE__*/React$1.memo(function Group(props) {
       inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
       "data-tour": dataTour
-    }, /*#__PURE__*/React$1.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "form__group-wrapper"
-    }, before, title && /*#__PURE__*/React$1.createElement("div", {
+    }, before, title && /*#__PURE__*/React.createElement("div", {
       className: "form__group-title"
-    }, /*#__PURE__*/React$1.createElement(Title, {
+    }, /*#__PURE__*/React.createElement(Title, {
       size: titleTextSize,
       textColor: titleTextColor,
       textWeight: titleTextWeight
-    }, title)), label && /*#__PURE__*/React$1.createElement("div", {
+    }, title)), label && /*#__PURE__*/React.createElement("div", {
       className: "form__group-label"
-    }, /*#__PURE__*/React$1.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       size: labelTextSize,
       textColor: labelTextColor,
       textWeight: labelTextWeight
-    }, label)), /*#__PURE__*/React$1.createElement("div", {
+    }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
-    }, children), after), showGroupMessage && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React$1.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$1.createElement(Text, {
+    }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize,
       textColor: messageTextColor,
       textWeight: messageTextWeight
-    }, message), !isErrorState && !message && /*#__PURE__*/React$1.createElement(Text, {
+    }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize
     }, '\u00A0')));
@@ -1034,7 +1035,7 @@ const defaultCheckboxProps = {
   requiredBorderColor: 'warningBorderSecondary'
 };
 
-const FormFieldCheckbox = /*#__PURE__*/React$1.memo(function FormFieldCheckbox(props) {
+const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
   const {
     name,
     initialValue,
@@ -1046,7 +1047,7 @@ const FormFieldCheckbox = /*#__PURE__*/React$1.memo(function FormFieldCheckbox(p
     isRequired,
     onChange
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     type: "checkbox",
     name: name,
     initialValue: initialValue
@@ -1081,7 +1082,7 @@ const FormFieldCheckbox = /*#__PURE__*/React$1.memo(function FormFieldCheckbox(p
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1096,7 +1097,7 @@ const FormFieldCheckbox = /*#__PURE__*/React$1.memo(function FormFieldCheckbox(p
       tag: "label",
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Checkbox, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Checkbox, Object.assign({
       type: "checkbox",
       name: input.name,
       isDisabled: isDisabled,
@@ -1147,7 +1148,7 @@ function FormFieldChips(props) {
     // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValue]);
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
   }, function Render({
@@ -1179,7 +1180,7 @@ function FormFieldChips(props) {
       }
       return emptyOptionsList;
     }, [input.value]);
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1193,11 +1194,11 @@ function FormFieldChips(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? /*#__PURE__*/React$1.createElement(ChipsGroup, {
+    }, fieldProps), options.length ? /*#__PURE__*/React.createElement(ChipsGroup, {
       direction: "horizontal",
       gap: "1m",
       wrap: "wrap"
-    }, options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
+    }, options.map(option => /*#__PURE__*/React.createElement(Chips, Object.assign({
       className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
@@ -1205,7 +1206,7 @@ function FormFieldChips(props) {
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
       onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps)))) : /*#__PURE__*/React$1.createElement(Text, {
+    }, updatedInputProps)))) : /*#__PURE__*/React.createElement(Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));
@@ -1219,7 +1220,7 @@ const defaultChoiceProps = {
   requiredBorderColor: 'warningBorderPrimary'
 };
 
-const FormFieldChoice = /*#__PURE__*/React$1.memo(function FormFieldChoice(props) {
+const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
   const {
     name,
     initialValue,
@@ -1245,7 +1246,7 @@ const FormFieldChoice = /*#__PURE__*/React$1.memo(function FormFieldChoice(props
       onChange(option.value, name, isChecked);
     }
   }, [change, onChange]);
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
     name: name
   }, function Render({
@@ -1283,7 +1284,7 @@ const FormFieldChoice = /*#__PURE__*/React$1.memo(function FormFieldChoice(props
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       label: label,
       errorKey: errorKey,
@@ -1299,7 +1300,7 @@ const FormFieldChoice = /*#__PURE__*/React$1.memo(function FormFieldChoice(props
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Choice, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
       className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
       name: input.name,
       isDisabled: isDisabled,
@@ -1318,7 +1319,7 @@ const defaultCodeProps = {
   appearance: 'defaultPrimary sizeL solid rounded'
 };
 
-const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
+const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
   const {
     name,
     initialValue,
@@ -1329,7 +1330,7 @@ const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
     showMessage,
     isRequired
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
   }, function Render({
@@ -1355,7 +1356,7 @@ const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
       fieldClassName: 'form-code',
       inputName: input.name,
@@ -1364,7 +1365,7 @@ const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Code, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
@@ -1376,7 +1377,7 @@ const FormFieldCode = /*#__PURE__*/React$1.memo(function FormFieldCode(props) {
   });
 });
 
-const FormFieldCustom = /*#__PURE__*/React$1.memo(function FormFieldCustom(props) {
+const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
   const {
     Component,
     isDisabled,
@@ -1393,7 +1394,7 @@ const FormFieldCustom = /*#__PURE__*/React$1.memo(function FormFieldCustom(props
     clearIconSize,
     onClickClearIcon
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
     name: name
   }, function Render({
@@ -1422,7 +1423,7 @@ const FormFieldCustom = /*#__PURE__*/React$1.memo(function FormFieldCustom(props
       // For "Custom" field we pass all props. Can contain some special props, we don't known.
       inputProps: props
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1436,11 +1437,11 @@ const FormFieldCustom = /*#__PURE__*/React$1.memo(function FormFieldCustom(props
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Component, Object.assign({}, updatedInputProps, {
+    }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, updatedInputProps, {
       input: input,
       isDisabled: isDisabled,
       meta: meta
-    })), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+    })), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
@@ -1478,7 +1479,7 @@ function FormFieldDatePicker(props) {
     isRequired,
     onChange
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -1521,7 +1522,7 @@ function FormFieldDatePicker(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1535,7 +1536,7 @@ function FormFieldDatePicker(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(DatePickerInput, {
+    }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
       name: input.name,
       isDisabled: isDisabled,
       datePickerProps: datePickerProps,
@@ -1556,7 +1557,7 @@ const defaultInputProps = {
   requiredBorderColor: 'warningBorderSecondary'
 };
 
-const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props) {
+const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
   const {
     name,
     initialValue,
@@ -1571,34 +1572,14 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps = {},
     parse,
     showMessage,
-    isPassword,
     isRequired,
-    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
-  const [isRevealed, setIsRevealed] = useState(false);
-  const inputType = useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
@@ -1633,25 +1614,24 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      fieldClassName: "form-input",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
       dataTestId: `${input.name}FieldInput`,
       className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
+      type: "text",
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
@@ -1659,16 +1639,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), isRevealable && /*#__PURE__*/React$1.createElement(Icon, {
-      className: "form-field__icon",
-      size: iconSize,
-      iconFill: iconFill,
-      iconFillHover: iconFillHover,
-      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      shape: iconShape,
-      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      onClick: onClickIconReveal
-    }), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -1681,6 +1652,110 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
   });
 });
 
+const defaultPasswordProps = {
+  appearance: 'sizeM defaultSecondary solid rounded',
+  iconRevealableHide: icons24.View.HideValue,
+  iconRevealableShow: icons24.View.ShowValue,
+  iconFill: 'surfaceItemQuaternary'
+};
+
+const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    iconFill,
+    iconFillHover,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconShape,
+    iconSize,
+    inputProps,
+    parse,
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = useMemo(() => {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  const onClickIconReveal = useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, 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, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-password",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
+      dataTestId: `${input.name}FieldInputPassword`,
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      size: inputProps.iconSize,
+      iconFill: inputProps.iconFill,
+      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      onClick: onClickIconReveal
+    }));
+  });
+});
+
 const defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
@@ -1704,7 +1779,7 @@ function FormFieldSegmented(props) {
   const setActiveSegment = useCallback(option => {
     change(name, option.value);
   }, [change]);
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -1742,7 +1817,7 @@ function FormFieldSegmented(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1756,7 +1831,7 @@ function FormFieldSegmented(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Segmented, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
       isDisabled: isDisabled,
       activeSegment: activeOption,
       segments: options,
@@ -1787,7 +1862,7 @@ function getDefaultValue(options, selectValue) {
   });
   return result;
 }
-const FormFieldSelect = /*#__PURE__*/React$1.memo(function FormFieldSelect(props) {
+const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props) {
   const {
     isDisabled,
     isRequired,
@@ -1802,7 +1877,7 @@ const FormFieldSelect = /*#__PURE__*/React$1.memo(function FormFieldSelect(props
     onChange,
     onInputChange
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
   }, function Render({
@@ -1854,7 +1929,7 @@ const FormFieldSelect = /*#__PURE__*/React$1.memo(function FormFieldSelect(props
       inputProps: selectProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1868,7 +1943,7 @@ const FormFieldSelect = /*#__PURE__*/React$1.memo(function FormFieldSelect(props
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Select, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
       className: "form-select-item",
       ref: selectRef,
       isDisabled: isDisabled,
@@ -1885,7 +1960,7 @@ const defaultSwitchProps = {
   appearance: 'defaultPrimary sizeL solid rounded'
 };
 
-const FormFieldSwitch = /*#__PURE__*/React$1.memo(function FormFieldSwitch(props) {
+const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
   const {
     name,
     isDisabled,
@@ -1896,7 +1971,7 @@ const FormFieldSwitch = /*#__PURE__*/React$1.memo(function FormFieldSwitch(props
     isRequired,
     onChange
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     type: "checkbox",
     name: name
   }, function Render({
@@ -1930,7 +2005,7 @@ const FormFieldSwitch = /*#__PURE__*/React$1.memo(function FormFieldSwitch(props
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1945,7 +2020,7 @@ const FormFieldSwitch = /*#__PURE__*/React$1.memo(function FormFieldSwitch(props
       tag: "label",
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Switch, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
       type: "checkbox",
       name: input.name,
       isDisabled: isDisabled,
@@ -1964,7 +2039,7 @@ const defaultTextareaProps = {
   requiredBorderColor: 'warningBorderSecondary'
 };
 
-const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(props) {
+const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
   const {
     name,
     isDisabled,
@@ -1974,7 +2049,7 @@ const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(p
     showMessage,
     isRequired
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -2001,7 +2076,7 @@ const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(p
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -2015,11 +2090,13 @@ const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(p
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Textarea, Object.assign({
+    }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
+      dataTestId: `${input.name}FieldTextarea`,
+      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      value: input.value,
+      value: input.value || '',
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -2027,7 +2104,7 @@ const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(p
   });
 });
 
-const FormFieldMaskedInput = /*#__PURE__*/React$1.memo(function FormFieldMaskedInput(props) {
+const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
   const {
     name,
     initialValue,
@@ -2046,7 +2123,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React$1.memo(function FormFieldMaskedI
     isRequired,
     onClickClearIcon
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
   }, function Render({
@@ -2091,7 +2168,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React$1.memo(function FormFieldMaskedI
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -2105,13 +2182,13 @@ const FormFieldMaskedInput = /*#__PURE__*/React$1.memo(function FormFieldMaskedI
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
+    }, 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)), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -2219,7 +2296,7 @@ function RadioGroupList(props) {
     setEditableValue(value);
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React$1.createElement(RadioGroupInput, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
     key: option.label,
     editableProps: editableProps,
     input: input,
@@ -2227,7 +2304,7 @@ function RadioGroupList(props) {
     option: option,
     value: editableValue,
     onChange: onChangeEditable
-  }) : /*#__PURE__*/React$1.createElement(RadioGroupItem, {
+  }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
     key: option.value,
     input: input,
     inputProps: inputProps,
@@ -2236,7 +2313,7 @@ function RadioGroupList(props) {
   })));
 }
 
-const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
+const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
   const {
     name,
     isDisabled,
@@ -2249,7 +2326,7 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
     isRequired,
     onChange
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -2276,7 +2353,7 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -2290,7 +2367,7 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(RadioGroupList, {
+    }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
       isDisabled: isDisabled,
       editableProps: editableProps,
       input: input,
@@ -2323,91 +2400,97 @@ function generateField(field, config, props) {
   switch (field.type) {
     case formTypes.checkbox:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldCheckbox, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldCheckbox, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.choice:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldChoice, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldChoice, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.chips:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldChips, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.code:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldCode, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.switch:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldSwitch, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldSwitch, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.segmented:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldSegmented, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldSegmented, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.datePicker:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldDatePicker, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldDatePicker, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.fileInput:
       {
-        return /*#__PURE__*/React$1.createElement(FileInput, Object.assign({
+        return /*#__PURE__*/React.createElement(FileInput, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.radioGroup:
       {
-        return /*#__PURE__*/React$1.createElement(RadioGroup, Object.assign({
+        return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.select:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldSelect, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldSelect, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.text:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldInput, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldInput, Object.assign({
+          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$1.createElement(FormFieldTextarea, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldTextarea, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.maskedInput:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldMaskedInput, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldMaskedInput, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.custom:
       {
-        return /*#__PURE__*/React$1.createElement(FormFieldCustom, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldCustom, Object.assign({
           key: config.key
         }, field, props));
       }
     case formTypes.group:
       {
-        return /*#__PURE__*/React$1.createElement(FormBlockGroup, Object.assign({
+        return /*#__PURE__*/React.createElement(FormBlockGroup, Object.assign({
           key: config.key
         }, field, props), Object.entries(field.group).map(([key, value]) => {
           const groupProps = {
@@ -2533,7 +2616,7 @@ const sendFormDataToServer = async (url, data) => {
   }
 };
 
-const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref) {
+const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
     className,
     type,
@@ -2639,7 +2722,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     styles: formStyles,
     wrapper: wrapperStyles
   } = useStyles(props);
-  return /*#__PURE__*/React$1.createElement(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     render: ({
@@ -2648,7 +2731,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
       handleSubmit,
       modifiedSinceLastSubmit
     }) => {
-      return /*#__PURE__*/React$1.createElement("form", {
+      return /*#__PURE__*/React.createElement("form", {
         className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2662,39 +2745,39 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
-      }, before, title && /*#__PURE__*/React$1.createElement(Title, {
+      }, before, title && /*#__PURE__*/React.createElement(Title, {
         className: "form__title",
         size: titleTextSize,
         fill: titleFill,
         textColor: titleTextColor,
         textWeight: titleTextWeight
-      }, title), desc && /*#__PURE__*/React$1.createElement(Text, {
+      }, title), desc && /*#__PURE__*/React.createElement(Text, {
         className: "form__desc",
         size: descSize,
         textColor: descTextColor,
         textWeight: descTextWeight
-      }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React$1.createElement("div", {
+      }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
         className: clsx('notification', 'form-notification', notificationType ? `form-notification_${notificationType}` : 'form-notification_global')
-      }, /*#__PURE__*/React$1.createElement(Notification, {
+      }, /*#__PURE__*/React.createElement(Notification, {
         className: "form-notification__item",
         appearance: "errorPrimary",
         title: form.getState().submitError,
         titleTextSize: "h6",
         status: "error",
         closeButton: notificationCloseButton
-      })), onChangeFormValues && /*#__PURE__*/React$1.createElement(FormSpy, {
+      })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React$1.createElement(Group, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React.createElement(Group, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,
         style: wrapperStyles
       }, Object.keys(config).map(key => generateField(config[key], {
         key
-      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React$1.createElement(Loader, {
+      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
         className: "form__loader",
         type: loaderType,
         appearance: loaderAppearance,
@@ -2703,7 +2786,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         text: loaderText,
         itemFill: loaderItemFill,
         shape: loaderShape
-      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React$1.createElement(Group, {
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group, {
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
@@ -2712,7 +2795,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         gap: buttonGap,
         dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons
-      }, primaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+      }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         appearance: primaryButtonAppearance,
         width: "fill",
@@ -2727,7 +2810,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
         loading: primaryButtonIsLoading
-      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         appearance: secondaryButtonAppearance,
         width: "fill",
@@ -2743,7 +2826,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         dataTour: dataTourSecondaryButton,
         loading: secondaryButtonIsLoading,
         onClick: onClickSecondaryButton
-      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
@@ -2984,4 +3067,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };