Refactor TurnstileCaptcha to use Callout

src/components/auth/TurnstileCaptcha.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Turnstile } from '@marsidev/react-turnstile';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Callout, CalloutDescription } from '@/components/ui/callout';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
@@ -79,12 +79,12 @@ export function TurnstileCaptcha({
 
   if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") {
     return (
-      <Alert className="border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
-        <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
-        <AlertDescription className="text-yellow-800 dark:text-yellow-200">
+      <Callout variant="warning">
+        <AlertCircle className="h-4 w-4" />
+        <CalloutDescription>
           CAPTCHA is using test keys. Configure VITE_TURNSTILE_SITE_KEY for production.
-        </AlertDescription>
-      </Alert>
+        </CalloutDescription>
+      </Callout>
     );
   }
 
@@ -117,9 +117,9 @@ export function TurnstileCaptcha({
       </div>
 
       {error && (
-        <Alert variant="destructive">
+        <Callout variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription className="flex items-center justify-between">
+          <CalloutDescription className="flex items-center justify-between">
             <span>{error}</span>
             <Button
               variant="outline"
@@ -130,8 +130,8 @@ export function TurnstileCaptcha({
               <RefreshCw className="w-3 h-3 mr-1" />
               Retry
             </Button>
-          </AlertDescription>
-        </Alert>
+          </CalloutDescription>
+        </Callout>
       )}
     </div>
   );