@itcase/forms 1.1.26 → 1.1.28

package/dist/css/form/Field/Password/FormFieldPassword.css

@@ -1,5 +1,3 @@
-/* @import './css/form-password.css'; */
-
 :root {
   --password-success-border: var(--color-success-border-primary);
   --password-success-border-hover: var(--color-surface-border-quaternary);

package/dist/css/form/FormField/FormField.css

@@ -3,13 +3,16 @@
     &-inner {
       position: relative;
       display: flex;
+      & > input {
+        width: 100%;
+      }
     }
   }
   &__message {
     &-item {
-      height: var(--form-field-helptext-height);
-      line-height: var(--form-field-helptext-line-height);
-      padding: var(--form-field-helptext-padding);
+      height: var(--form-field-help-text-height);
+      line-height: var(--form-field-help-text-line-height);
+      padding: var(--form-field-help-text-padding);
       display: block;
     }
   }
@@ -24,7 +27,7 @@
 }
 .form {
   &^&-field_type_float {
-    padding: var(--form-field_type_float-padding, 12px 0 12px 0);
+    padding: 12px 0 12px 0;
     margin: var(--form-field_type_float-margin);
     position: relative;
     gap: var(--form-field_type_float-gap);
@@ -42,11 +45,16 @@
           opacity: 100%;
         }
       }
+      & .textarea {
+        &::placeholder {
+          opacity: 100%;
+        }
+      }      
     }
     & .form {
       &-field {
         &__label {
-          background: var(--color-surface-fill-primary);
+          background: #fff;
           padding: 0 4px;
           position: absolute;
           display: flex;
@@ -58,7 +66,7 @@
           transform-origin: top left;
         }
         &__message {
-          padding: var(--form-field-type-float-message-padding, 0 0 0 12px);
+          padding: 0 0 0 12px;
         }
       }
     }
@@ -68,15 +76,21 @@
         opacity: 0%;
       }
     }
+    & .textarea {
+      &::placeholder {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0%;
+      }
+    }
   }
 }
 .form-field {
   &_type {
     &_classic {
-      padding: var(--form-field_type_normal-padding);
-      margin: var(--form-field_type_normal-margin);
+      padding: var(--form-field_type_classic-padding);
+      margin: var(--form-field_type_classic-margin);
       position: relative;
-      gap: var(--form-field_type_normal-gap);
+      gap: var(--form-field_type_classic-gap);
     }
   }
 }

package/dist/itcase-forms.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var libphonenumberJs = require('libphonenumber-js');
-var React$1 = require('react');
+var React = require('react');
 var finalForm = require('final-form');
 var reactFinalForm = require('react-final-form');
 var clsx = require('clsx');
@@ -27,6 +27,7 @@ var Code = require('@itcase/ui/components/Code');
 var Icon = require('@itcase/ui/components/Icon');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var Input = require('@itcase/ui/components/Input');
+var _default = require('@itcase/icons/default');
 var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
@@ -39,7 +40,7 @@ var createDecorator = require('final-form-focus');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React$1);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
@@ -123,7 +124,7 @@ const makeValidate = schema => {
   };
 };
 function useYupValidationSchema(schema, language) {
-  const validate = React$1.useMemo(() => schema && makeValidate(schema), [schema, language]);
+  const validate = React.useMemo(() => schema && makeValidate(schema), [schema, language]);
   return validate;
 }
 
@@ -142,7 +143,7 @@ function useFieldValidationState(props) {
   const successKey = 'success';
 
   // Determines if the field is in an error state based on various conditions.
-  const isErrorState = React$1.useMemo(() => {
+  const isErrorState = React.useMemo(() => {
     if (fieldProps.showErrorsOnSubmit) {
       return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
     } else {
@@ -151,12 +152,12 @@ function useFieldValidationState(props) {
   }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
 
   // Determines if the field's input state is valid
-  const isValidState = React$1.useMemo(() => {
+  const isValidState = React.useMemo(() => {
     const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
     const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
     return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
   }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
-  const errorMessage = React$1.useMemo(() => {
+  const errorMessage = React.useMemo(() => {
     // If final-form field has error in "meta" render-property.
     // If field not modified after last form submit - use submit error
     const error = meta.error || submitError || false;
@@ -194,7 +195,7 @@ function useValidationAppearanceInputProps(props) {
   } = props;
 
   // TODO: need to add props that can change during errors in this field
-  const validationAppearanceInputProps = React$1.useMemo(() => {
+  const validationAppearanceInputProps = React.useMemo(() => {
     // const resultAppearanceProps = {
     //   messageTextColor: props.errorMessageTextColor,
     //   messageTextSize: props.errorMessageTextSize,
@@ -313,8 +314,8 @@ function FieldWrapperBase(props) {
     isValidState,
     children
   } = props;
-  const formFieldClass = React$1.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
-  const fieldClass = React$1.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
+  const formFieldClass = React.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
+  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -412,7 +413,7 @@ function FieldWrapper(props) {
     change
   } = reactFinalForm.useForm(); // , mutators
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       change(inputName, undefined);
     };
@@ -464,10 +465,10 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   const {
     change
   } = reactFinalForm.useForm();
-  const [fileError, setFileError] = React$1.useState('');
-  const [fileIsLoading, setFileIsLoading] = React$1.useState(false);
-  const filesList = React$1.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
-  const changeFormState = React$1.useCallback(newFiles => {
+  const [fileError, setFileError] = React.useState('');
+  const [fileIsLoading, setFileIsLoading] = React.useState(false);
+  const filesList = React.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
+  const changeFormState = React.useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
     const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
@@ -479,7 +480,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   [dropzoneProps, change]);
 
   //
-  const convertFiledValueAndSaveAsFiles = React$1.useCallback(async currentFilesList => {
+  const convertFiledValueAndSaveAsFiles = React.useCallback(async currentFilesList => {
     setFileIsLoading(true);
     const newFiles = [];
     for (const fileItem of currentFilesList) {
@@ -497,7 +498,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   }, [isPreviews, changeFormState]);
 
   // Delete file from dropzone
-  const removeFile = React$1.useCallback((event, index) => {
+  const removeFile = React.useCallback((event, index) => {
     event.stopPropagation();
     event.preventDefault();
     const newFiles = [...filesList];
@@ -572,7 +573,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
       }
     }
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const currentFilesList = castArray__default.default(inputValue);
     const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
     if (isNeedToConvert) {
@@ -1072,7 +1073,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -1148,12 +1149,12 @@ function FormFieldChips(props) {
   } = reactFinalForm.useForm();
 
   // Callback for value changes
-  const onChangeSomeInput = React$1.useCallback((inputValue, newOptionValue) => {
+  const onChangeSomeInput = React.useCallback((inputValue, newOptionValue) => {
     const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
     change(name, updatedValues);
     onChange && onChange(updatedValues);
   }, [change, name, onChange]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     initialValue && change(name, initialValue);
     // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1179,7 +1180,7 @@ function FormFieldChips(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const activeOptionsList = React$1.useMemo(() => {
+    const activeOptionsList = React.useMemo(() => {
       const emptyOptionsList = [{
         label: null,
         value: null
@@ -1250,7 +1251,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
   const {
     change
   } = reactFinalForm.useForm();
-  const setActiveSegment = React$1.useCallback((option, isChecked) => {
+  const setActiveSegment = React.useCallback((option, isChecked) => {
     change(name, isChecked && option.value);
     if (onChange) {
       onChange(option.value, name, isChecked);
@@ -1269,7 +1270,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const activeOption = React$1.useMemo(() => {
+    const activeOption = React.useMemo(() => {
       const emptyOption = {
         value: null,
         label: null
@@ -1502,7 +1503,7 @@ function FormFieldDatePicker(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback((startDate, endDate) => {
+    const onChangeField = React.useCallback((startDate, endDate) => {
       if (!datePickerProps.selectsRange) {
         // When we need to save single date, value is date
         // TODO: make object with one date? need to check all forms with FormFieldDatePicker
@@ -1582,33 +1583,13 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps = {},
     parse,
     showMessage,
-    isPassword,
     isRequired,
-    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
-  const [isRevealed, setIsRevealed] = React$1.useState(false);
-  const inputType = React$1.useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = React$1.useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
     initialValue: initialValue,
@@ -1624,7 +1605,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
@@ -1644,7 +1625,6 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1652,7 +1632,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       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,
@@ -1662,7 +1642,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
       dataTestId: `${input.name}FieldInput`,
       className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
+      type: "text",
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
@@ -1670,16 +1650,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.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__default.default.createElement(Icon.Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -1692,6 +1663,110 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
   });
 });
 
+const defaultPasswordProps = {
+  appearance: 'sizeM defaultSecondary solid rounded',
+  iconRevealableHide: _default.icons24.View.HideValue,
+  iconRevealableShow: _default.icons24.View.ShowValue,
+  iconFill: 'surfaceItemQuaternary'
+};
+
+const FormFieldPassword = /*#__PURE__*/React__default.default.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] = React.useState(false);
+  const inputType = React.useMemo(() => {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  const onClickIconReveal = React.useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.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 = React.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__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('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__default.default.createElement(Input.Input, Object.assign({
+      dataTestId: `${input.name}FieldInputPassword`,
+      className: clsx__default.default(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__default.default.createElement(Icon.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',
@@ -1712,7 +1787,7 @@ function FormFieldSegmented(props) {
   const {
     change
   } = reactFinalForm.useForm();
-  const setActiveSegment = React$1.useCallback(option => {
+  const setActiveSegment = React.useCallback(option => {
     change(name, option.value);
   }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
@@ -1728,7 +1803,7 @@ function FormFieldSegmented(props) {
      * custom React Hook function.
      */
 
-    const activeOption = React$1.useMemo(() => {
+    const activeOption = React.useMemo(() => {
       const emptyOption = {
         label: null,
         value: null
@@ -1826,8 +1901,8 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const [selectedOptions, setSelectedOptions] = React$1.useState(null);
-    const defaultValue = React$1.useMemo(() => {
+    const [selectedOptions, setSelectedOptions] = React.useState(null);
+    const defaultValue = React.useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
       if (!optionsValues.length && input.value?.length) {
         optionsValues.push({
@@ -1837,18 +1912,18 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
       }
       return optionsValues;
     }, [input.value]);
-    const onChangeField = React$1.useCallback(value => {
+    const onChangeField = React.useCallback(value => {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
       }
     }, [onChange, input.onChange]);
-    const onChangeValue = React$1.useCallback((option, actionMeta) => {
+    const onChangeValue = React.useCallback((option, actionMeta) => {
       const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
@@ -1921,7 +1996,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -2027,10 +2102,12 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
+      dataTestId: `${input.name}FieldTextarea`,
+      className: clsx__default.default(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
@@ -2083,7 +2160,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
         }
       }
     });
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (input.value !== unmaskedValue) {
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
@@ -2145,8 +2222,8 @@ function RadioGroupInput(props) {
     value,
     onChange
   } = props;
-  const onChangeField = React$1.useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(Input.Input, Object.assign({
+  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,
@@ -2163,12 +2240,12 @@ function RadioGroupItem(props) {
     option,
     onChange
   } = props;
-  const onChangeField = React$1.useCallback(event => {
+  const onChangeField = React.useCallback(event => {
     if (event.target.checked) {
       onChange(option.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Radio.Radio, Object.assign({
+  return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
     className: "form-radio__item",
     type: "radio",
     name: input.name,
@@ -2189,14 +2266,14 @@ function RadioGroupList(props) {
     options,
     onChange
   } = props;
-  const [editableValue, setEditableValue] = React$1.useState(() => {
+  const [editableValue, setEditableValue] = React.useState(() => {
     const isRadioValue = options.find(option => option.value === input.value);
     if (!isRadioValue) {
       return input.value;
     }
     return '';
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     // When a new value from outside enters the form
     if (input.value) {
       // Check value for radio type
@@ -2210,7 +2287,7 @@ function RadioGroupList(props) {
   }, [input.value]);
 
   // Callback for value changes
-  const onChangeSomeInput = React$1.useCallback(value => {
+  const onChangeSomeInput = React.useCallback(value => {
     // Save to form values
     input.onChange(value);
     if (onChange) {
@@ -2220,13 +2297,13 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = React$1.useCallback(value => {
+  const onChangeRadio = React.useCallback(value => {
     setEditableValue('');
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
 
   // Handle for text input
-  const onChangeEditable = React$1.useCallback(value => {
+  const onChangeEditable = React.useCallback(value => {
     setEditableValue(value);
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
@@ -2398,6 +2475,12 @@ 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({
@@ -2634,7 +2717,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     onSubmit
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
-  const onRefFormInstance = React$1.useCallback(formInstance => {
+  const onRefFormInstance = React.useCallback(formInstance => {
     if (ref) {
       ref.current = formInstance;
     }
@@ -3021,6 +3104,7 @@ exports.FormFieldCustom = FormFieldCustom;
 exports.FormFieldDatePicker = FormFieldDatePicker;
 exports.FormFieldInput = FormFieldInput;
 exports.FormFieldMaskedInput = FormFieldMaskedInput;
+exports.FormFieldPassword = FormFieldPassword;
 exports.FormFieldSegmented = FormFieldSegmented;
 exports.FormFieldSelect = FormFieldSelect;
 exports.FormFieldSwitch = FormFieldSwitch;
@@ -3039,6 +3123,7 @@ exports.defaultFieldSizeM = defaultFieldSizeM;
 exports.defaultFieldSizeXL = defaultFieldSizeXL;
 exports.defaultGroupProps = defaultGroupProps;
 exports.defaultInputProps = defaultInputProps;
+exports.defaultPasswordProps = defaultPasswordProps;
 exports.defaultRadioProps = defaultRadioProps;
 exports.defaultSegmentedProps = defaultSegmentedProps;
 exports.defaultSelectProps = defaultSelectProps;