website refactor

apps/website/ui/primitives/Grid.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, ElementType } from 'react';
 import { Box, BoxProps, ResponsiveValue } from './Box';
 
 /**
@@ -13,32 +13,16 @@ import { Box, BoxProps, ResponsiveValue } from './Box';
  * If you need a more specific layout, create a new component in apps/website/components.
  */
 
-export interface GridProps {
-  children: ReactNode;
+export interface GridProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
+  children?: ReactNode;
   cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
   className?: string;
-  // Spacing
-  m?: number;
-  mt?: number;
-  mb?: number;
-  ml?: number;
-  mr?: number;
-  p?: number;
-  pt?: number;
-  pb?: number;
-  pl?: number;
-  pr?: number;
-  px?: number;
-  py?: number;
-  // Sizing
-  w?: string | ResponsiveValue<string>;
-  h?: string | ResponsiveValue<string>;
 }
 
-export function Grid({ 
+export function Grid<T extends ElementType = 'div'>({ 
   children, 
   cols = 1, 
   mdCols,
@@ -46,7 +30,7 @@ export function Grid({
   gap = 4,
   className = '',
   ...props 
-}: GridProps) {
+}: GridProps<T>) {
   const colClasses: Record<number, string> = {
     1: 'grid-cols-1',
     2: 'grid-cols-1 md:grid-cols-2',