zod 4 migration

app/sign-up-form.tsx

@@ -5,15 +5,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
-import {
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -24,9 +16,9 @@ import { signupFormSubmit } from "@/lib/actions";
 import { useState } from "react";
 
 export const signupFormSchema = z.object({
-  name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
+  name: z.string().min(2, { error: "Name is required" }).max(50, { error: "Name is too long" }),
-  email: z.string().email({ message: "Email is invalid" }),
+  email: z.email({ error: "Email is invalid" }),
-  dob: z.date({ required_error: "Birthday is required" }),
+  dob: z.date({ error: "Birthday is required" }),
 });
 export const youngestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 20));
 export const oldestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 100));
@@ -59,9 +51,7 @@ export default function SignUp() {
                 <FormControl>
                   <Input placeholder="name@example.com" {...field} />
                 </FormControl>
-                <FormDescription>
+                <FormDescription>We will contact you here with information about events.</FormDescription>
-                  We will contact you here with information about events.
-                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -91,10 +81,7 @@ export default function SignUp() {
                     <FormControl>
                       <Button
                         variant={"outline"}
-                        className={cn(
+                        className={cn("w-[240px] pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-                          "w-[240px] pl-3 text-left font-normal",
-                          !field.value && "text-muted-foreground"
-                        )}
                       >
                         {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />