Update shopify collection

components/ui/alert.tsx

@@ -1,28 +1,34 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type AlertVariant = "default" | "destructive"
-
-const baseClasses =
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-
-const variantClasses: Record<AlertVariant, string> = {
-  default: "bg-card text-card-foreground",
-  destructive:
-    "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-}
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 function Alert({
   className,
-  variant = "default",
+  variant,
   ...props
-}: React.ComponentProps<"div"> & { variant?: AlertVariant }) {
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
   return (
     <div
       data-slot="alert"
       role="alert"
-      className={cn(baseClasses, variantClasses[variant], className)}
+      className={cn(alertVariants({ variant }), className)}
       {...props}
     />
   )