Box block, VariantProps fix (#162)

* fix(types): export VariantProps from @stitches/react

* fix(Box): default { display: block }

* fix(types): revert back to our VariantProps ☹️

* chore: export FlexProps with (to-be-deprecated) FlexVariant type alias

react/src/components/Box.tsx

@@ -1,6 +1,8 @@
 import { styled } from '../stitches.config'
 import type { VariantProps } from '../utils'
 
-export const Box = styled('div')
+export const Box = styled('div', {
+  display: 'block'
+})
 
 export type BoxProps = VariantProps<typeof Box>

react/src/components/Flex.tsx

@@ -13,4 +13,7 @@ export const Flex = styled(Box, {
   }
 })
 
-export type FlexVariant = VariantProps<typeof Flex>
+export type FlexProps = VariantProps<typeof Flex>
+
+// FIXME[1.0]: remove this alias
+export type FlexVariant = FlexProps

react/src/utils.tsx

@@ -1,4 +1,8 @@
-import React, { Component, ComponentProps, ComponentType } from 'react'
+import React, { ComponentProps, ComponentType } from 'react'
+
+// XXX: export type { VariantProps } from '@stitches/react'
+
+export type VariantProps<T> = JSX.IntrinsicAttributes & (T extends ComponentType ? ComponentProps<T> : T)
 
 export function identity (v: any) {
   return v
@@ -21,5 +25,3 @@ export function withFixedProps (
     return <Component {...fixed} {...props} />
   }
 }
-
-export type VariantProps<T, P extends {} = T extends ComponentType ? ComponentProps<T> : T> = T & JSX.IntrinsicAttributes