website refactor

apps/website/components/dashboard/TelemetryPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Surface } from '@/ui/Surface';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
+import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/Stack';
 
 interface TelemetryPanelProps {
   title: string;
@@ -16,13 +15,10 @@ interface TelemetryPanelProps {
  */
 export function TelemetryPanel({ title, children }: TelemetryPanelProps) {
   return (
-    <Surface variant="dark" border rounded="sm" padding={4} shadow="sm">
-      <Heading level={6} mb={4} color="var(--color-text-low)">
-        {title}
-      </Heading>
-      <Box fontSize="sm">
+    <Panel title={title} variant="dark" padding={4}>
+      <Stack fontSize="sm">
         {children}
-      </Box>
-    </Surface>
+      </Stack>
+    </Panel>
   );
 }