@itcase/forms 1.1.27 → 1.1.29

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');
@@ -40,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);
@@ -124,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;
 }
 
@@ -143,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 {
@@ -152,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;
@@ -190,12 +190,12 @@ 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
-  const validationAppearanceInputProps = React$1.useMemo(() => {
+  const validationAppearanceInputProps = React.useMemo(() => {
     // const resultAppearanceProps = {
     //   messageTextColor: props.errorMessageTextColor,
     //   messageTextSize: props.errorMessageTextSize,
@@ -205,7 +205,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__default.default(propKey);
@@ -314,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'
@@ -413,7 +413,7 @@ function FieldWrapper(props) {
     change
   } = reactFinalForm.useForm(); // , mutators
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       change(inputName, undefined);
     };
@@ -465,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;
@@ -480,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) {
@@ -498,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];
@@ -573,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) {
@@ -1073,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);
@@ -1149,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
@@ -1180,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
@@ -1251,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);
@@ -1270,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
@@ -1503,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
@@ -1605,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);
@@ -1677,23 +1677,17 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
     isDisabled,
     classNameGroupItem,
     fieldProps,
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps,
     parse,
     showMessage,
     isRequired,
     onChange
   } = props;
-  const [isRevealed, setIsRevealed] = React$1.useState(false);
-  const inputType = React$1.useMemo(() => {
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const inputType = React.useMemo(() => {
     return isRevealed ? 'text' : 'password';
   }, [isRevealed]);
-  const onClickIconReveal = React$1.useCallback(event => {
+  const onClickIconReveal = React.useCallback(event => {
     event.preventDefault();
     setIsRevealed(prev => !prev);
   }, []);
@@ -1712,17 +1706,17 @@ const FormFieldPassword = /*#__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.value, input.name);
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1759,9 +1753,9 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       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,
+      size: inputProps?.iconSize,
+      iconFill: inputProps?.iconFill,
+      SvgImage: isRevealed ? inputProps?.iconRevealableHide : inputProps?.iconRevealableShow,
       onClick: onClickIconReveal
     }));
   });
@@ -1787,7 +1781,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, {
@@ -1803,7 +1797,7 @@ function FormFieldSegmented(props) {
      * custom React Hook function.
      */
 
-    const activeOption = React$1.useMemo(() => {
+    const activeOption = React.useMemo(() => {
       const emptyOption = {
         label: null,
         value: null
@@ -1901,8 +1895,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({
@@ -1912,18 +1906,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 {
@@ -1996,7 +1990,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);
@@ -2160,7 +2154,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
         }
       }
     });
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (input.value !== unmaskedValue) {
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
@@ -2222,8 +2216,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,
@@ -2240,12 +2234,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,
@@ -2266,14 +2260,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
@@ -2287,7 +2281,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) {
@@ -2297,13 +2291,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]);
@@ -2629,11 +2623,14 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    dataTestId,
+    dataTour,
     className,
     type,
     initialValues,
     initialValuesEqual,
     config,
+    validationSchema,
     title,
     titleFill,
     titleTextColor,
@@ -2643,6 +2640,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     descSize,
     descTextColor,
     descTextWeight,
+    buttonGap,
     dataTestIdPrimaryButton,
     dataTourPrimaryButton,
     primaryButton,
@@ -2684,13 +2682,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     additionalProps = {},
     buttonDirection = 'vertical',
     buttonFill,
-    buttonGap,
     buttonJustifyContent,
     buttonPadding,
     buttonPosition,
-    dataTestId,
     dataTestIdButtons,
-    dataTour,
     dataTourButtons,
     disableFieldsAutoComplete = false,
     fieldsGap,
@@ -2709,7 +2704,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    validationSchema,
     before,
     after,
     isLoading,
@@ -2717,7 +2711,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;
     }
@@ -2744,15 +2738,15 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
         className: clsx__default.default(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
@@ -2781,7 +2775,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React__default.default.createElement(Group.Group, {
+      }), Boolean(config && Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React__default.default.createElement(Group.Group, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,
@@ -2798,15 +2792,17 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group.Group, {
+        dataTestId: dataTestIdButtons,
+        dataTour: dataTourButtons,
         className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
-        dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
+        gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         className: "form__button-item",
         appearance: primaryButtonAppearance,
         width: "fill",
@@ -2818,10 +2814,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         isDisabled: primaryButtonIsDisabled,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton,
         loading: primaryButtonIsLoading
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdSecondaryButton,
+        dataTour: dataTourSecondaryButton,
         className: "form__button-item",
         appearance: secondaryButtonAppearance,
         width: "fill",
@@ -2833,11 +2829,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
         isDisabled: secondaryButtonIsDisabled,
-        dataTestId: dataTestIdSecondaryButton,
-        dataTour: dataTourSecondaryButton,
         loading: secondaryButtonIsLoading,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        dataTestId: dataTestIdTertiaryButton,
+        dataTour: dataTourTertiaryButton,
         className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
@@ -2847,8 +2843,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
         labelTextWeight: tertiaryButtonLabelTextWeight,
-        dataTestId: dataTestIdTertiaryButton,
-        dataTour: dataTourTertiaryButton,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },