@ttoss/forms 0.19.0 → 0.21.0

package/dist/index.js

@@ -42,9 +42,12 @@ __export(src_exports, {
   Form: () => Form,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
+  FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
+  FormFieldCurrencyInput: () => FormFieldCurrencyInput,
   FormFieldInput: () => FormFieldInput,
   FormFieldNumericFormat: () => FormFieldNumericFormat,
   FormFieldPassword: () => FormFieldPassword,
+  FormFieldPatternFormat: () => FormFieldPatternFormat,
   FormFieldRadio: () => FormFieldRadio,
   FormFieldSelect: () => FormFieldSelect,
   FormFieldTextarea: () => FormFieldTextarea,
@@ -178,9 +181,12 @@ var FormField = ({
   id: idProp,
   name,
   defaultValue,
+  disabled,
+  tooltip,
+  onTooltipClick,
   sx,
-  render,
-  ...formFieldProps
+  css,
+  render
 }) => {
   const controllerReturn = (0, import_react_hook_form3.useController)({
     name,
@@ -191,10 +197,10 @@ var FormField = ({
     return React2.Children.map(render(controllerReturn), child => {
       return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, {
         children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
-          "aria-disabled": formFieldProps.disabled,
+          "aria-disabled": disabled,
           htmlFor: id,
-          tooltip: formFieldProps.tooltip,
-          onTooltipClick: formFieldProps.onTooltipClick,
+          tooltip,
+          onTooltipClick,
           children: label
         }), React2.createElement(child.type, {
           id,
@@ -202,7 +208,7 @@ var FormField = ({
         })]
       });
     });
-  }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
+  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
   return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
     sx: {
       flexDirection: "column",
@@ -210,6 +216,7 @@ var FormField = ({
       gap: "md",
       ...sx
     },
+    css,
     children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
       name
     })]
@@ -272,38 +279,109 @@ var FormFieldCheckbox = ({
   });
 };
 
-// src/FormFieldNumericFormat.tsx
+// src/FormFieldPatternFormat.tsx
 var import_ui5 = require("@ttoss/ui");
 var import_react_number_format = require("react-number-format");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
+    name,
+    label,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_number_format.PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        customInput: import_ui5.Input,
+        "aria-invalid": Boolean(fieldState.error).valueOf(),
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCreditCardNumber.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormFieldCreditCardNumber = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#### #### #### ####",
+    placeholder: "1234 1234 1234 1234",
+    ...formFieldPatternFormatProps
+  });
+};
+
+// src/FormFieldNumericFormat.tsx
+var import_ui6 = require("@ttoss/ui");
+var import_react_number_format2 = require("react-number-format");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldNumericFormat = ({
   label,
   name,
   ...numericFormatProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormField, {
     label,
     name,
     render: ({
       field
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_number_format.NumericFormat, {
+      return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_number_format2.NumericFormat, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
         onValueChange: values => {
           field.onChange(values.floatValue);
         },
-        customInput: import_ui5.Input,
+        customInput: import_ui6.Input,
         ...numericFormatProps
       });
     }
   });
 };
 
+// src/FormFieldCurrencyInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormFieldNumericFormat, {
+    name,
+    label,
+    fixedDecimalScale: true,
+    decimalScale: 2,
+    prefix,
+    decimalSeparator,
+    thousandSeparator,
+    placeholder: `${prefix} 0${decimalSeparator}00`,
+    allowNegative: false,
+    ...formFieldNumericFormatProps
+  });
+};
+
 // src/FormFieldInput.tsx
-var import_ui6 = require("@ttoss/ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_ui7 = require("@ttoss/ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
@@ -313,7 +391,7 @@ var FormFieldInput = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -325,7 +403,7 @@ var FormFieldInput = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Input, {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui7.Input, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -335,8 +413,8 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldPassword.tsx
-var import_ui7 = require("@ttoss/ui");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_ui8 = require("@ttoss/ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormFieldPassword = ({
   label,
   name,
@@ -346,7 +424,7 @@ var FormFieldPassword = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -358,7 +436,7 @@ var FormFieldPassword = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.InputPassword, {
+      return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui8.InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -368,9 +446,9 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-var import_ui8 = require("@ttoss/ui");
+var import_ui9 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
   name,
@@ -389,23 +467,23 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsxs)(import_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Label, {
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Label, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Box, {
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Box, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */(0, import_jsx_runtime8.jsxs)(import_ui8.Label, {
+        return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Label, {
           htmlFor: id,
-          children: [/* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Radio, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Radio, {
             ref,
             onChange,
             onBlur,
@@ -417,91 +495,64 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldSelect.tsx
-var import_ui9 = require("@ttoss/ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var checkDefaultValue = ({
-  options,
-  defaultValue,
-  placeholder
-}) => {
-  if (defaultValue) {
-    return defaultValue;
-  }
-  const hasEmptyValue = options.some(opt => {
-    return opt.value === "" || opt.value === 0;
-  });
-  const EMPTY_VALUE = "";
-  if (placeholder && hasEmptyValue) {
-    return EMPTY_VALUE;
-  }
-  if (placeholder && !hasEmptyValue) {
-    options.unshift({
-      label: placeholder,
-      value: ""
-    });
-    return EMPTY_VALUE;
-  }
-  if (!placeholder && defaultValue) return EMPTY_VALUE;
-  if (options.length === 0) return EMPTY_VALUE;
-  return options?.[0]?.value;
-};
+var import_ui10 = require("@ttoss/ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FormFieldSelect = ({
   label,
   name,
-  options,
+  id,
+  defaultValue,
   sx,
+  css,
+  disabled,
+  tooltip,
+  onTooltipClick,
   ...selectProps
 }) => {
-  const {
-    defaultValue,
-    placeholder
-  } = selectProps;
-  const checkedDefaultValue = checkDefaultValue({
-    options,
-    defaultValue,
-    placeholder
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
     name,
     label,
-    disabled: selectProps.disabled,
-    tooltip: selectProps.tooltip,
-    onTooltipClick: selectProps.onTooltipClick,
+    id,
+    defaultValue,
+    disabled,
+    tooltip,
+    onTooltipClick,
     sx,
-    defaultValue: checkedDefaultValue,
+    css,
     render: ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Select, {
+      const value = selectProps.options?.find(option => {
+        if ("value" in option) {
+          return option.value === field.value;
+        }
+        return false;
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Select, {
         ...selectProps,
         ...field,
-        ...{
-          ...selectProps,
-          defaultValue: void 0
+        defaultValue: value,
+        value,
+        onChange: value2 => {
+          field.onChange(value2?.value);
         },
-        "aria-invalid": fieldState.error ? "true" : void 0,
-        children: options.map(option => {
-          return /* @__PURE__ */(0, import_jsx_runtime9.jsx)("option", {
-            value: option.value,
-            children: option.label
-          }, option.label);
-        })
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
 };
 
 // src/FormFieldTextarea.tsx
-var import_ui10 = require("@ttoss/ui");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_ui11 = require("@ttoss/ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
   name,
@@ -509,7 +560,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormField, {
     label,
     name,
     id,
@@ -518,7 +569,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Textarea, {
+      return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -529,8 +580,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 var React3 = __toESM(require("react"));
-var import_ui11 = require("@ttoss/ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_ui12 = require("@ttoss/ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -546,7 +597,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -589,7 +640,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui11.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_ui12.Box, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -597,18 +648,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui11.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Box, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui11.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui11.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
       sx: childrenContainerSx,
       children
     })]
@@ -619,15 +670,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormGroupContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormGroupLevelsManager, {
-      children: /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormGroupWrapper, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
       ...props
     })
   });
@@ -637,9 +688,12 @@ var FormGroup = props => {
   Form,
   FormField,
   FormFieldCheckbox,
+  FormFieldCreditCardNumber,
+  FormFieldCurrencyInput,
   FormFieldInput,
   FormFieldNumericFormat,
   FormFieldPassword,
+  FormFieldPatternFormat,
   FormFieldRadio,
   FormFieldSelect,
   FormFieldTextarea,

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.19.0",
-  "license": "UNLICENSED",
+  "version": "0.21.0",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -21,31 +20,31 @@
   "typings": "dist/index.d.ts",
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^3.1.0",
-    "react-hook-form": "^7.44.3",
+    "@hookform/resolvers": "^3.3.2",
+    "react-hook-form": "^7.48.2",
     "react-number-format": "^5.3.1",
-    "yup": "^1.2.0"
+    "yup": "^1.3.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^1.25.1",
-    "@ttoss/ui": "^3.1.7"
+    "@ttoss/ui": "^4.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.29",
     "jest": "^29.7.0",
     "react": "^18.2.0",
-    "react-error-boundary": "^4.0.9",
-    "react-hook-form": "^7.44.3",
+    "react-error-boundary": "^4.0.11",
+    "react-hook-form": "^7.48.2",
     "theme-ui": "^0.16.1",
     "tsup": "^7.2.0",
-    "yup": "^1.2.0",
+    "yup": "^1.3.2",
     "@ttoss/config": "^1.31.0",
     "@ttoss/i18n-cli": "^0.7.0",
     "@ttoss/react-i18n": "^1.25.1",
     "@ttoss/test-utils": "^1.24.1",
-    "@ttoss/ui": "^3.1.7"
+    "@ttoss/ui": "^4.0.0"
   },
   "publishConfig": {
     "access": "public",

package/src/FormField.tsx

@@ -7,39 +7,44 @@ import {
   UseControllerReturn,
   useController,
 } from 'react-hook-form';
-import { Flex, type FlexProps, Label } from '@ttoss/ui';
+import { Flex, Label, type SxProp } from '@ttoss/ui';
 
-export type FormFieldProps = {
-  sx?: FlexProps['sx'];
+export type FormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  label?: string;
+  id?: string;
+  name: TName;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
   disabled?: boolean;
   tooltip?: boolean;
   onTooltipClick?: () => void;
-};
+} & SxProp;
 
 type FormFieldCompleteProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  label?: string;
-  id?: string;
-  name: TName;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
   render: (
     props: UseControllerReturn<TFieldValues, TName>
   ) => React.ReactElement;
-} & FormFieldProps;
+} & FormFieldProps<TFieldValues, TName>;
 
 export const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   label,
   id: idProp,
   name,
   defaultValue,
+  disabled,
+  tooltip,
+  onTooltipClick,
   sx,
+  css,
   render,
-  ...formFieldProps
 }: FormFieldCompleteProps<TFieldValues, TName>) => {
   const controllerReturn = useController<TFieldValues, TName>({
     name,
@@ -54,10 +59,10 @@ export const FormField = <
         <>
           {label && (
             <Label
-              aria-disabled={formFieldProps.disabled}
+              aria-disabled={disabled}
               htmlFor={id}
-              tooltip={formFieldProps.tooltip}
-              onTooltipClick={formFieldProps.onTooltipClick}
+              tooltip={tooltip}
+              onTooltipClick={onTooltipClick}
             >
               {label}
             </Label>
@@ -67,18 +72,13 @@ export const FormField = <
         </>
       );
     });
-  }, [
-    controllerReturn,
-    formFieldProps.disabled,
-    formFieldProps.onTooltipClick,
-    formFieldProps.tooltip,
-    id,
-    label,
-    render,
-  ]);
+  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
 
   return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}>
+    <Flex
+      sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}
+      css={css}
+    >
       {memoizedRender}
       <ErrorMessage name={name} />
     </Flex>

package/src/FormFieldCreditCardNumber.tsx

@@ -0,0 +1,25 @@
+import {
+  FormFieldPatternFormat,
+  FormFieldPatternFormatProps,
+} from './FormFieldPatternFormat';
+
+export type FormFieldCreditCardNumberProps = {
+  label: string;
+  name: string;
+} & Partial<FormFieldPatternFormatProps>;
+
+export const FormFieldCreditCardNumber = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}: FormFieldCreditCardNumberProps) => {
+  return (
+    <FormFieldPatternFormat
+      name={name}
+      label={label}
+      format="#### #### #### ####"
+      placeholder="1234 1234 1234 1234"
+      {...formFieldPatternFormatProps}
+    />
+  );
+};

package/src/FormFieldCurrencyInput.tsx

@@ -0,0 +1,36 @@
+import {
+  FormFieldNumericFormat,
+  FormFieldNumericFormatProps,
+} from './FormFieldNumericFormat';
+
+export type FormFieldCurrencyInputProps = {
+  label?: string;
+  name: string;
+  prefix: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
+} & FormFieldNumericFormatProps;
+
+export const FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}: FormFieldCurrencyInputProps) => {
+  return (
+    <FormFieldNumericFormat
+      name={name}
+      label={label}
+      fixedDecimalScale
+      decimalScale={2}
+      prefix={prefix}
+      decimalSeparator={decimalSeparator}
+      thousandSeparator={thousandSeparator}
+      placeholder={`${prefix} 0${decimalSeparator}00`}
+      allowNegative={false}
+      {...formFieldNumericFormatProps}
+    />
+  );
+};