Implement a masked currency input (#5010)

### Description
Implement a masked currency input

### Refs
#4358 

### Demo
https://jam.dev/c/93da117c-b193-488f-b9f9-906b33ac5190

Fixes #4358

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
@@ -8,7 +9,10 @@ import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/S
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
 import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
-export const StyledInput = styled.input`
+type StyledInputProps = React.ComponentProps<'input'> &
+  IMaskInputProps<HTMLInputElement>;
+
+export const StyledIMaskInput = styled(IMaskInput)<StyledInputProps>`
   margin: 0;
   ${TEXT_INPUT_STYLE}
   width: 100%;
@@ -79,9 +83,9 @@ export const CurrencyInput = ({
 
   const wrapperRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalText(event.target.value);
-    onChange?.(event.target.value);
+  const handleChange = (value: string) => {
+    setInternalText(value);
+    onChange?.(value);
   };
 
   const handleCurrencyChange = (currency: Currency) => {
@@ -131,10 +135,15 @@ export const CurrencyInput = ({
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         )}
       </StyledIcon>
-      <StyledInput
+      <StyledIMaskInput
+        mask={Number}
+        thousandsSeparator={','}
+        radix="."
+        unmask="typed"
+        onAccept={(value: string) => handleChange(value)}
+        inputRef={wrapperRef}
         autoComplete="off"
         placeholder={placeholder}
-        onChange={handleChange}
         autoFocus={autoFocus}
         value={value}
       />