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" />

package-lock.json

@@ -28,7 +28,7 @@
         "react-hook-form": "^7.54.2",
         "tailwind-merge": "^3.0.0",
         "tailwindcss-animate": "^1.0.7",
-        "zod": "^3.24.2"
+        "zod": "^4.0.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "4.1.11",
@@ -9454,9 +9454,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
+      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.0.5.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "integrity": "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"

package.json

@@ -29,7 +29,7 @@
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.2"
+    "zod": "^4.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.1.11",