website refactor

apps/website/ui/Input.tsx

@@ -1,42 +1,51 @@
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { Box } from './Box';
+import { Stack } from './Stack';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: 'default' | 'error';
   errorMessage?: string;
   icon?: React.ReactNode;
+  label?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className = '', variant = 'default', errorMessage, icon, ...props }, ref) => {
+  ({ className = '', variant = 'default', errorMessage, icon, label, ...props }, ref) => {
     const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
     const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
     const iconClasses = icon ? 'pl-10' : '';
     const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;
 
     return (
-      <Box fullWidth position="relative">
-        {icon && (
-          <Box 
-            position="absolute" 
-            left="3" 
-            top="50%" 
-            style={{ transform: 'translateY(-50%)' }}
-            zIndex={10}
-            display="flex"
-            center
-          >
-            {icon}
-          </Box>
-        )}
-        <input ref={ref} className={classes} {...props} />
-        {errorMessage && (
-          <Text size="xs" color="text-error-red" block mt={1}>
-            {errorMessage}
+      <Stack gap={1.5} fullWidth>
+        {label && (
+          <Text as="label" size="sm" weight="medium" color="text-gray-300">
+            {label}
           </Text>
         )}
-      </Box>
+        <Box fullWidth position="relative">
+          {icon && (
+            <Box 
+              position="absolute" 
+              left="3" 
+              top="50%" 
+              style={{ transform: 'translateY(-50%)' }}
+              zIndex={10}
+              display="flex"
+              center
+            >
+              {icon}
+            </Box>
+          )}
+          <input ref={ref} className={classes} {...props} />
+          {errorMessage && (
+            <Text size="xs" color="text-error-red" block mt={1}>
+              {errorMessage}
+            </Text>
+          )}
+        </Box>
+      </Stack>
     );
   }
 );