🔥 Remove deprecated FlexBox.Item, Use Box

Author: exah

src/flex-box/about.mdx

@@ -6,24 +6,25 @@ order: -2
 
 import { Playground } from 'docz'
 import { PropsTable } from '../props-table'
+import { Box } from '../box'
 import { FlexBox } from './index'
 
 # FlexBox
 
 ## Description
 
-Like [`Box`](#/box) component, but extended with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) specific [prop styles](https://github.com/exah/pss/blob/master/docs/api.md#flex). `FlexBox.Item` is alias for `Box`
+Like [`Box`](#/box) component, but extended with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) specific [prop styles](https://github.com/exah/pss/blob/master/docs/api.md#flex).
 
 
 ## Usage
 
 ```js
-import { FlexBox } from 'pss-components'
+import { FlexBox, Box } from 'pss-components'
 ```
 
 ```js
 <FlexBox>
-  <FlexBox.Item>Item</FlexBox.Item>
+  <Box>Item</Box>
 </FlexBox>
 ```
 
@@ -32,15 +33,15 @@ import { FlexBox } from 'pss-components'
 
 <Playground>
   <FlexBox>
-    <FlexBox.Item outline='debug' order={0}>
+    <Box outline='debug' order={0}>
       Item
-    </FlexBox.Item>
-    <FlexBox.Item outline='debug' order={1} flex='1'>
+    </Box>
+    <Box outline='debug' order={1} flex='1'>
       Item
-    </FlexBox.Item>
-    <FlexBox.Item outline='debug' order={2}>
+    </Box>
+    <Box outline='debug' order={2}>
       Item
-    </FlexBox.Item>
+    </Box>
   </FlexBox>
 </Playground>
 

src/flex-box/index.js

@@ -31,8 +31,6 @@ FlexBox.propTypes = {
   ...Box.propTypes
 }
 
-FlexBox.Item = Box // COMPAT
-
 export {
   FlexBox
 }

test/index.js

@@ -35,9 +35,9 @@ test('Box', () => {
 test('FlexBox', () => {
   const result = renderJSON(
     <FlexBox tm width={(1 / 2)} justifyContent='space-between'>
-      <FlexBox.Item>Item</FlexBox.Item>
-      <FlexBox.Item mgx='auto'>Item</FlexBox.Item>
-      <FlexBox.Item flex='0 1'>Item</FlexBox.Item>
+      <Box>Item</Box>
+      <Box mgx='auto'>Item</Box>
+      <Box flex='0 1'>Item</Box>
     </FlexBox>
   )
 
@@ -80,9 +80,9 @@ test('MediaObject', () => {
 describe('FlexGrid', () => {
   const renderFlexGridItems = (length, col) => initArr(length, (index) => (
     <FlexGrid.Item col={col} key={index}>
-      <FlexGrid.Content>
+      <Box>
         {col}
-      </FlexGrid.Content>
+      </Box>
     </FlexGrid.Item>
   ))