@basic-ui/material 1.0.0-alpha.47 → 1.0.0-alpha.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.47",
+  "version": "1.0.0-alpha.48",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "62af846aceaa4543607816ccf46f35b25f2a810a"
+  "gitHead": "38fd099ab13b9ce7a4df02e9bc634a858cf1782a"
 }

package/src/Table/Table.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
+import { Box } from '../Box';
 
 export type TableProps = PaperProps;
 
@@ -9,20 +9,20 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
   const { children, __css, ...rest } = props;
 
   return (
-    <Paper
+    <Box
       ref={ref}
       role="table"
-      display="flex"
-      width="100%"
-      flexDirection="column"
-      borderRadius="small"
       __css={{
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+        borderRadius: 'small',
         overflowX: 'auto',
         ...__css,
       }}
       {...rest}
     >
       {children}
-    </Paper>
+    </Box>
   );
 });

package/src/Table/TableCell.tsx

@@ -15,10 +15,10 @@ export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(
     return (
       <Box
         ref={ref}
-        px={1}
-        height={rem(36)}
         role={isHeadCell ? 'columnheader' : 'cell'}
         __css={{
+          px: 1,
+          height: rem(36),
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis',

package/src/Table/TableRow.tsx

@@ -15,12 +15,12 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         ref={ref}
         as="div"
         role="row"
-        display="flex"
-        flexDirection="row"
-        width="100%"
         variant="body-medium"
         px={2}
         __css={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
           borderBottomColor: 'surface-variant',

package/src/Table/index.ts

@@ -1,5 +1,5 @@
-export * from './Table';
-export * from './TableHead';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableRow';
+export * from './Table';
+export * from './TableHead';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableRow';