website refactor

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

@@ -2,11 +2,10 @@
 
 import React from 'react';
 import { Modal } from '@/ui/Modal';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
 import { AlertCircle } from 'lucide-react';
 
 interface ConfirmDialogProps {

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

@@ -1,9 +1,8 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 
 interface InlineNoticeProps {

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

@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useState, useEffect, createContext, useContext } from 'react';
+import React, { useState, createContext, useContext } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
+import { IconButton } from '@/ui/IconButton';
 
 interface Toast {
   id: string;
@@ -33,7 +33,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   return (
     <ToastContext.Provider value={{ showToast }}>
       {children}
-      <Box
+      <Stack
         position="fixed"
         bottom={6}
         right={6}
@@ -49,7 +49,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             />
           ))}
         </AnimatePresence>
-      </Box>
+      </Stack>
     </ToastContext.Provider>
   );
 }
@@ -94,7 +94,7 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
       exit={{ opacity: 0, scale: 0.95 }}
       className="pointer-events-auto"
     >
-      <Box
+      <Stack
         px={4}
         py={3}
         rounded="lg"
@@ -102,22 +102,23 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
         border
         borderColor={config.border}
         shadow="xl"
-        display="flex"
-        alignItems="center"
+        direction="row"
+        align="center"
         gap={3}
-        minW="300px"
+        {...({ minWidth: "300px" } as any)}
       >
         <Icon className={`w-5 h-5 ${config.iconColor}`} />
         <Text size="sm" color="text-white" flexGrow={1}>
           {toast.message}
         </Text>
-        <button
+        <IconButton
+          icon={X}
           onClick={onClose}
+          variant="ghost"
+          size="sm"
           className="text-gray-500 hover:text-white transition-colors"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </Box>
+        />
+      </Stack>
     </motion.div>
   );
 }