fix: Improve types

src/components/Box.tsx

@@ -2,11 +2,11 @@
 
 import { ReactNode } from 'react';
 import styled, { DefaultTheme } from 'styled-components';
-import { getCss, PrimitiveProps, CSSProps } from '../primitives';
+import { getCss, RestrictedProps, CSSProps } from '../primitives';
 
-export type BoxProps = PrimitiveProps<DefaultTheme> & {
+export type BoxProps = RestrictedProps<DefaultTheme> & {
 	children: ReactNode;
-	css?: CSSProps;
+	css?: CSSProps<DefaultTheme>;
 };
 
 /**

src/components/Flex.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import Box, { BoxProps } from './Box';
 
@@ -14,16 +13,3 @@ Flex.defaultProps = {
 };
 
 export default Flex;
-
-function Xxx() {
-	return (
-		<Box
-			p="l"
-			marginBottom="xdsdf"
-			width={[1, 1, 1 / 2]}
-			css={{ fontSize: 'l', color: 'bg', bg: 'hover' }}
-		>
-			Pizza!
-		</Box>
-	);
-}

src/components/Frame.tsx

@@ -33,7 +33,7 @@ const Inner = styled.div`
  */
 export default function Frame({ children, ratio, ...props }: FrameProps) {
 	return (
-		<Box {...props} position="relative" pb={`${ratio * 100}%`}>
+		<Box {...props} position="relative" css={{ pb: `${ratio * 100}%` }}>
 			<Inner>{children}</Inner>
 		</Box>
 	);

src/primitives/index.ts

@@ -1,3 +1,3 @@
 export { css, getCss } from './css';
 export { variant } from './variant';
-export type { PrimitiveProps, CSSProps, ResponsiveValue } from './types';
+export type { RestrictedProps, CSSProps, ResponsiveValue } from './types';