website refactor

apps/website/components/shared/ux/Toast.tsx

@@ -3,6 +3,8 @@
 import { Toast as UIToast } from '@/ui/Toast';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { AlertCircle, CheckCircle, Info } from 'lucide-react';
 import React, { createContext, useContext, useState } from 'react';
 
@@ -32,16 +34,25 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   return (
     <ToastContext.Provider value={{ showToast }}>
       {children}
-      <div style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 100, display: 'flex', flexDirection: 'column', gap: '0.75rem', pointerEvents: 'none' }}>
+      <Box 
+        position="fixed" 
+        bottom={6} 
+        right={6} 
+        zIndex={100} 
+        display="flex" 
+        flexDirection="col" 
+        gap={3} 
+        style={{ pointerEvents: 'none' }}
+      >
         {toasts.map((toast) => (
-          <div key={toast.id} style={{ pointerEvents: 'auto' }}>
+          <Box key={toast.id} style={{ pointerEvents: 'auto' }}>
             <ToastItem
               toast={toast}
               onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
             />
-          </div>
+          </Box>
         ))}
-      </div>
+      </Box>
     </ToastContext.Provider>
   );
 }