add spec and fix sx

packages/pigment-css-react/src/sx.d.ts

@@ -1,6 +1,9 @@
 import type { CSSObjectNoCallback } from './base';
 import type { ThemeArgs } from './theme';
 
-export type SxProp = CSSObjectNoCallback | ((themeArgs: ThemeArgs) => CSSObjectNoCallback);
+export type SxProp =
+  | CSSObjectNoCallback
+  | ((themeArgs: ThemeArgs['theme']) => CSSObjectNoCallback)
+  | ReadonlyArray<CSSObjectNoCallback | ((themeArgs: ThemeArgs['theme']) => CSSObjectNoCallback)>;
 
 export default function sx(arg: SxProp | Array<SxProp>, componentClass?: string): string;

packages/pigment-css-react/tests/Box.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from '@pigment-css/react/Box';
+import Box from '../src/Box';
 
 export function App() {
   return (
@@ -13,7 +13,7 @@ export function App() {
           Dialog
         </Box>
         {/* @ts-expect-error */}
-        <Box component="dialog" as="button" open>
+        <Box component="dialog" as="button" href>
           Dialog 2
         </Box>
       </Box>

packages/pigment-css-react/tests/Container.spec.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Container from '../src/Container';
+
+<Container maxWidth="md" />;
+
+<Container
+  className=""
+  style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }}
+  data-testid="foo"
+/>;

packages/pigment-css-react/tests/Grid.spec.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Grid from '../src/Grid';
+
+<Grid size={{ xs: 2, md: 3, lg: 4 }} />;
+
+<Grid className="" style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }} data-testid="foo" />;

packages/pigment-css-react/tests/Hidden.spec.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Hidden from '../src/Hidden';
+
+<Hidden xsUp mdDown />;
+
+<Hidden
+  className=""
+  style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }}
+  data-testid="foo"
+/>;

packages/pigment-css-react/tests/Stack.spec.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import Stack from '../src/Stack';
 
+<Stack spacing={2} direction={{ md: 'row' }} />;
+
+<Stack className="" style={{ accentColor: 'ActiveBorder', marginTop: '1rem' }} data-testid="foo" />;
+
 <Stack
+  // @ts-expect-error
   display={{
     xs: 'flex',
     xl: 'inline-flex',

packages/pigment-css-react/tests/sx.spec.ts

@@ -0,0 +1,17 @@
+import { SxProp } from '../src/sx';
+
+const sx1: SxProp = { color: 'red' };
+
+const sx2: SxProp = (theme) => ({
+  color: theme.palette.primary.main,
+});
+
+const sx3: SxProp = [{ color: 'red' }, { backgroundColor: 'blue', color: 'white' }];
+
+const test = true;
+const sx4: SxProp = [
+  test ? { color: 'red' } : { backgroundColor: 'blue', color: 'white' },
+  (theme) => ({
+    border: `1px solid ${theme.palette.primary.main}`,
+  }),
+];