feat: add validation to enter details flow

components/TempDesignSystem/Button/button.module.css

@@ -53,6 +53,7 @@ a.inverted {
 a.text {
   background: none;
   border: none;
+  outline: none;
 }
 
 /* VARIANTS */

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useFormContext } from "react-hook-form"
+
 import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -23,6 +25,8 @@ export default function Card({
   type,
   value,
 }: CardProps) {
+  const { register } = useFormContext()
+
   return (
     <label className={styles.label} data-declined={declined}>
       <Caption className={styles.title} textTransform="bold" uppercase>
@@ -68,9 +72,9 @@ export default function Card({
         aria-hidden
         id={id || name}
         hidden
-        name={name}
         type={type}
         value={value}
+        {...register(name)}
       />
     </label>
   )