website refactor

apps/website/ui/OnboardingStepPanel.tsx

@@ -1,18 +1,20 @@
-import { Surface } from '@/ui/primitives/Surface';
+import React, { ReactNode } from 'react';
+import { Surface } from './primitives/Surface';
 
 interface OnboardingStepPanelProps {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
 }
 
 export function OnboardingStepPanel({ children, className = '' }: OnboardingStepPanelProps) {
   return (
     <Surface
-      variant="dark"
-      rounded="xl"
+      variant="muted"
+      rounded="2xl"
       border
-      padding={6}
-      className={`border-charcoal-outline ${className}`}
+      p={6}
+      borderColor="border-charcoal-outline"
+      className={className}
     >
       {children}
     </Surface>