Merge branch 'master' into feature/tracking

components/TempDesignSystem/Form/Country/index.tsx

@@ -34,7 +34,7 @@ export default function CountrySelect({
   readOnly = false,
   registerOptions = {},
 }: CountryProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const [rootDiv, setRootDiv] = useState<CountryPortalContainer>(undefined)
 
   function setRef(node: CountryPortalContainerArgs) {
@@ -53,13 +53,12 @@ export default function CountrySelect({
     setValue(name, country)
   }
 
-  const selectCountryLabel = formatMessage({ id: "Select a country" })
+  const selectCountryLabel = intl.formatMessage({ id: "Select a country" })
 
   return (
     <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
-        aria-label={formatMessage({ id: "Select country of residence" })}
-        className={styles.select}
+        aria-label={intl.formatMessage({ id: "Select country of residence" })}
         isInvalid={fieldState.invalid}
         isReadOnly={readOnly}
         isRequired={!!registerOptions?.required}

components/TempDesignSystem/Form/Date/index.tsx

@@ -83,7 +83,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         .date(Number(day))
 
       if (newDate.isValid()) {
-        setValue(name, newDate.format("YYYY-MM-DD"), {
+        setValue(name, newDate.format("YYYY-MM-D"), {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,

components/TempDesignSystem/Form/Phone/index.tsx

@@ -36,7 +36,7 @@ export default function Phone({
     required: true,
   },
 }: PhoneProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const { control, setValue, trigger } = useFormContext()
   const phone = useWatch({ name })
 
@@ -95,7 +95,7 @@ export default function Phone({
             data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
-              {formatMessage({ id: "Country code" })}
+              {intl.formatMessage({ id: "Country code" })}
             </Label>
             <span className={styles.selectContainer}>
               {props.children}

components/TempDesignSystem/Form/SelectChevron/index.tsx

@@ -5,7 +5,7 @@ import styles from "./chevron.module.css"
 export default function SelectChevron() {
   return (
     <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" />
+      <ChevronDownIcon color="grey80" width={20} height={20} />
     </span>
   )
 }