website refactor

apps/website/ui/Toast.tsx

@@ -35,17 +35,15 @@ export const Toast = ({
 
   return (
     <Box 
-      style={{ 
-        transform: isVisible && !isExiting ? 'translateX(0)' : 'translateX(100%)',
-        opacity: isVisible && !isExiting ? 1 : 0,
-        transition: 'all 0.3s ease-in-out',
-        width: '24rem'
-      }}
+      translateX={isVisible && !isExiting ? '0' : '100%'}
+      opacity={isVisible && !isExiting ? 1 : 0}
+      transition="all 0.3s ease-in-out"
+      width="24rem"
     >
-      <Surface variant="muted" rounded="xl" shadow="xl" style={{ border: `1px solid ${intentColors[intent]}33`, overflow: 'hidden' }}>
+      <Surface variant="muted" rounded="xl" shadow="xl" borderColor={`${intentColors[intent]}33`} border={true} overflow="hidden">
         {progress !== undefined && (
           <Box height="1px" bg="rgba(255,255,255,0.1)">
-            <Box height="100%" bg={intentColors[intent]} style={{ width: `${progress}%`, transition: 'width 0.1s linear' }} />
+            <Box height="100%" bg={intentColors[intent]} width={`${progress}%`} transition="width 0.1s linear" />
           </Box>
         )}
         <Box padding={4} display="flex" gap={3}>