feat(WEB-163): edit profile field validation

components/TempDesignSystem/Form/ErrorMessage/Error.tsx

@@ -0,0 +1,13 @@
+import { InfoCircleIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./error.module.css"
+
+export default function Error({ children }: React.PropsWithChildren) {
+  return (
+    <Caption className={styles.message} fontOnly>
+      <InfoCircleIcon color="red" />
+      {children}
+    </Caption>
+  )
+}

components/TempDesignSystem/Form/ErrorMessage/index.tsx

@@ -1,9 +1,6 @@
 import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
 
-import { InfoCircleIcon } from "@/components/Icons"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
-import styles from "./error.module.css"
+import Error from "./Error"
 
 import type { ErrorMessageProps } from "./errorMessage"
 
@@ -15,12 +12,7 @@ export default function ErrorMessage<T>({
     <RHFErrorMessage
       errors={errors}
       name={name}
-      render={({ message }) => (
-        <Caption className={styles.message} fontOnly>
-          <InfoCircleIcon color="red" />
-          {message}
-        </Caption>
-      )}
+      render={({ message }) => <Error>{message}</Error>}
     />
   )
 }