fix dialog

src/button.tsx

@@ -10,14 +10,14 @@ const buttonVariants = cva(
 	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-color \
 	 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 \
 	  shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] \
-	   aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	   aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
 	{
 		variants: {
 			variant: {
 				default:
 					"bg-primary text-main dark:text-neutral shadow-xs hover:bg-primary/70",
-				destructive:
-					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				error:
+					"bg-error text-white shadow-xs hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60",
 				outline:
 					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
 				secondary:
@@ -28,8 +28,8 @@ const buttonVariants = cva(
 			},
 			size: {
 				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 px-6 has-[>svg]:px-4",
 				icon: "size-9",
 			},
 		},

src/dialog.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { XIcon } from "lucide-react";
-import { motion } from "motion/react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import type * as React from "react";
 import { Button } from "@/button";
 import { cn } from "@/lib/utils";
-import { cardVariants } from "./card";
 
 function Dialog({
 	...props
@@ -41,7 +38,7 @@ function DialogOverlay({
 			data-slot="dialog-overlay"
 			className={cn(
 				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-				"fixed inset-0 z-100 bg-black/50 backdrop-blur-lg",
+				"fixed inset-0 z-50 bg-black/50 backdrop-blur-lg",
 				className,
 			)}
 			{...props}
@@ -60,7 +57,10 @@ function DialogContent({
 	return (
 		<DialogPrimitive.Content
 			data-slot="dialog-content"
-			className={cn(className)}
+			className={cn(
+				"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+				className,
+			)}
 			{...props}
 		>
 			{children}
@@ -68,8 +68,6 @@ function DialogContent({
 	);
 }
 
-const AnimatedDialogContent = motion.create(DialogContent);
-
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
@@ -137,7 +135,6 @@ export {
 	Dialog,
 	DialogClose,
 	DialogContent,
-	AnimatedDialogContent,
 	DialogDescription,
 	DialogFooter,
 	DialogHeader,