website refactor

apps/website/ui/FormField.tsx

@@ -1,45 +1,55 @@
-
-
-import React from 'react';
-import { Icon } from './Icon';
-import { Stack } from './primitives/Stack';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
 import { Text } from './Text';
-
+import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface FormFieldProps {
-  label: string;
-  icon?: LucideIcon;
-  children: React.ReactNode;
-  required?: boolean;
+export interface FormFieldProps {
+  label?: string;
   error?: string;
   hint?: string;
+  required?: boolean;
+  icon?: LucideIcon;
+  children: ReactNode;
 }
 
-export function FormField({ 
+export const FormField = ({ 
   label, 
+  error, 
+  hint, 
+  required, 
   icon, 
-  children,
-  required = false,
-  error,
-  hint,
-}: FormFieldProps) {
+  children 
+}: FormFieldProps) => {
   return (
-    <Stack gap={2}>
-      <label className="block text-sm font-medium text-gray-300">
-        <Stack direction="row" align="center" gap={2}>
-          {icon && <Icon icon={icon} size={4} color="#6b7280" />}
-          <Text size="sm" weight="medium" color="text-gray-300">{label}</Text>
-          {required && <Text color="text-error-red">*</Text>}
-        </Stack>
-      </label>
+    <Box marginBottom={4}>
+      {label && (
+        <Box display="flex" alignItems="center" gap={2} marginBottom={1.5}>
+          {icon && <Icon icon={icon} size={4} intent="low" />}
+          <Text size="sm" weight="medium" variant="high">
+            {label}
+          </Text>
+          {required && <Text variant="critical">*</Text>}
+        </Box>
+      )}
+      
       {children}
+      
       {error && (
-        <Text size="xs" color="text-error-red" block mt={1}>{error}</Text>
+        <Box marginTop={1}>
+          <Text size="xs" variant="critical" block>
+            {error}
+          </Text>
+        </Box>
       )}
+      
       {hint && !error && (
-        <Text size="xs" color="text-gray-500" block mt={1}>{hint}</Text>
+        <Box marginTop={1}>
+          <Text size="xs" variant="low" block>
+            {hint}
+          </Text>
+        </Box>
       )}
-    </Stack>
+    </Box>
   );
-}
+};