@itcase/forms 1.1.27 → 1.1.29

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';
@@ -179,8 +179,8 @@ function useFieldValidationState(props) {
 // looks at what props were in initialProps, if they are there then changes
 function useValidationAppearanceInputProps(props) {
   const {
-    validationStateKey,
-    inputProps
+    inputProps,
+    validationStateKey
   } = props;
 
   // TODO: need to add props that can change during errors in this field
@@ -194,7 +194,7 @@ function useValidationAppearanceInputProps(props) {
     // }
     const updatedInputProps = {};
     if (validationStateKey) {
-      Object.entries(inputProps).forEach(([propKey, propValue]) => {
+      Object.entries(inputProps || {}).forEach(([propKey, propValue]) => {
         // Convert the input property key to "snake_case" format.
         // e.g. "requiredBorderColor" -> "required_border_color".
         const propKeySnake = snakeCase(propKey);
@@ -339,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
@@ -407,7 +407,7 @@ function FieldWrapper(props) {
       change(inputName, undefined);
     };
   }, []);
-  return /*#__PURE__*/React$1.createElement(FieldWrapperBase, props);
+  return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
 }
 
 const defaultDropzoneProps = {
@@ -431,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,
@@ -614,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,
@@ -771,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,
@@ -828,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,
@@ -859,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,
@@ -876,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,
@@ -936,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,
@@ -960,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,
@@ -986,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')));
@@ -1035,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,
@@ -1047,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
@@ -1082,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,
@@ -1097,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,
@@ -1148,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({
@@ -1180,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,
@@ -1194,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,
@@ -1206,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));
@@ -1220,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,
@@ -1246,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({
@@ -1284,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,
@@ -1300,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,
@@ -1319,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,
@@ -1330,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({
@@ -1356,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,
@@ -1365,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",
@@ -1377,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,
@@ -1394,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({
@@ -1423,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,
@@ -1437,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,
@@ -1479,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,
@@ -1522,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,
@@ -1536,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,
@@ -1557,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,
@@ -1579,7 +1579,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
     onChange,
     onClickClearIcon
   } = props;
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
@@ -1614,7 +1614,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(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_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1628,7 +1628,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       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: "text",
@@ -1639,7 +1639,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -1659,19 +1659,13 @@ const defaultPasswordProps = {
   iconFill: 'surfaceItemQuaternary'
 };
 
-const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(props) {
+const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
   const {
     name,
     initialValue,
     isDisabled,
     classNameGroupItem,
     fieldProps,
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps,
     parse,
     showMessage,
@@ -1686,7 +1680,7 @@ const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(p
     event.preventDefault();
     setIsRevealed(prev => !prev);
   }, []);
-  return /*#__PURE__*/React$1.createElement(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
@@ -1708,10 +1702,10 @@ const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(p
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1721,7 +1715,7 @@ const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(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_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -1735,7 +1729,7 @@ const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(p
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
+    }, 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,
@@ -1746,11 +1740,11 @@ const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(p
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), /*#__PURE__*/React$1.createElement(Icon, {
+    }, updatedInputProps)), /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
-      size: inputProps.iconSize,
-      iconFill: inputProps.iconFill,
-      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      size: inputProps?.iconSize,
+      iconFill: inputProps?.iconFill,
+      SvgImage: isRevealed ? inputProps?.iconRevealableHide : inputProps?.iconRevealableShow,
       onClick: onClickIconReveal
     }));
   });
@@ -1779,7 +1773,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,
@@ -1817,7 +1811,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,
@@ -1831,7 +1825,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,
@@ -1862,7 +1856,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,
@@ -1877,7 +1871,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({
@@ -1929,7 +1923,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,
@@ -1943,7 +1937,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,
@@ -1960,7 +1954,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,
@@ -1971,7 +1965,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({
@@ -2005,7 +1999,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,
@@ -2020,7 +2014,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,
@@ -2039,7 +2033,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,
@@ -2049,7 +2043,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,
@@ -2076,7 +2070,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,
@@ -2090,7 +2084,7 @@ 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,
@@ -2104,7 +2098,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,
@@ -2123,7 +2117,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({
@@ -2168,7 +2162,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,
@@ -2182,13 +2176,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,
@@ -2296,7 +2290,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,
@@ -2304,7 +2298,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,
@@ -2313,7 +2307,7 @@ function RadioGroupList(props) {
   })));
 }
 
-const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
+const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
   const {
     name,
     isDisabled,
@@ -2326,7 +2320,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,
@@ -2353,7 +2347,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,
@@ -2367,7 +2361,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,
@@ -2400,97 +2394,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$1.createElement(FormFieldPassword, Object.assign({
+        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 = {
@@ -2616,13 +2610,16 @@ 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 {
+    dataTestId,
+    dataTour,
     className,
     type,
     initialValues,
     initialValuesEqual,
     config,
+    validationSchema,
     title,
     titleFill,
     titleTextColor,
@@ -2632,6 +2629,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     descSize,
     descTextColor,
     descTextWeight,
+    buttonGap,
     dataTestIdPrimaryButton,
     dataTourPrimaryButton,
     primaryButton,
@@ -2673,13 +2671,10 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     additionalProps = {},
     buttonDirection = 'vertical',
     buttonFill,
-    buttonGap,
     buttonJustifyContent,
     buttonPadding,
     buttonPosition,
-    dataTestId,
     dataTestIdButtons,
-    dataTour,
     dataTourButtons,
     disableFieldsAutoComplete = false,
     fieldsGap,
@@ -2698,7 +2693,6 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    validationSchema,
     before,
     after,
     isLoading,
@@ -2722,7 +2716,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: ({
@@ -2731,53 +2725,53 @@ 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,
+        name: formName
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
+        ref: () => onRefFormInstance(form),
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
         "data-test-id": dataTestId,
-        "data-tour": dataTour
-        // We no need set reference to html element, we need reference to "final-form" instance
-        ,
-        ref: () => onRefFormInstance(form),
+        "data-tour": dataTour,
         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(config && 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,
@@ -2786,16 +2780,18 @@ 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, {
+        dataTestId: dataTestIdButtons,
+        dataTour: dataTourButtons,
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
-        dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
-      }, primaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+        gap: buttonGap
+      }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         className: "form__button-item",
         appearance: primaryButtonAppearance,
         width: "fill",
@@ -2807,10 +2803,10 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         isDisabled: primaryButtonIsDisabled,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton,
         loading: primaryButtonIsLoading
-      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdSecondaryButton,
+        dataTour: dataTourSecondaryButton,
         className: "form__button-item",
         appearance: secondaryButtonAppearance,
         width: "fill",
@@ -2822,11 +2818,11 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
         isDisabled: secondaryButtonIsDisabled,
-        dataTestId: dataTestIdSecondaryButton,
-        dataTour: dataTourSecondaryButton,
         loading: secondaryButtonIsLoading,
         onClick: onClickSecondaryButton
-      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React$1.createElement(Button, {
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        dataTestId: dataTestIdTertiaryButton,
+        dataTour: dataTourTertiaryButton,
         className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
@@ -2836,8 +2832,6 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
         labelTextWeight: tertiaryButtonLabelTextWeight,
-        dataTestId: dataTestIdTertiaryButton,
-        dataTour: dataTourTertiaryButton,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },