#### Source

```jsx static
// index.tsx
import React, { FC } from 'react';
import { BoxProps } from 'types';
import * as S from './styles';

export const Box: FC<BoxProps> = ({ children, ...props }) => {
  return <S.Box {...props}>{children}</S.Box>;
};

export default Box;
```

```jsx static
// styles.ts
import styled from 'styled-components';
import { BoxProps } from 'types';
import {
  flexDecorator,
  heightDecorator,
  marginDecorator,
  paddingDecorator,
  widthDecorator,
} from 'utils';

export const Box = styled.div<BoxProps>`
  ${props => flexDecorator(props)}
  ${props => heightDecorator(props)}
  ${props => marginDecorator(props)}
  ${props => paddingDecorator(props)}
  ${props => widthDecorator(props)}
`;
```

#### Height and Width props

```js
<Box height={5} width={10} style={{ background: 'indigo' }}>
  <div />
</Box>
<Box minH={6} minW={12} style={{ background: 'coral' }}>
  <div />
</Box>
<Box maxH={8} maxW={16} style={{ background: 'lime' }}>
  <div style={{height: '100vh', width: '100vw'}} />
</Box>
```

#### Flex props

```jsx padded
<Box flex='row' justify='center'>
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='row-reverse' justify='center'>
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='column' align="center">
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='column-reverse' align="center">
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
```

#### Positioning props

```jsx padded
<Box flex='row' mb={0.25} justify='center'>
  <Box height={5} mr={0.25} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='row-reverse' p="0.5rem 0.75rem" justify='center'>
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='column' mt={0.25} align="center">
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
<Box flex='column-reverse' pt={1} align="center">
  <Box height={5} width={10} style={{ background: 'indigo' }} />
  <Box height={5} width={10} style={{ background: 'coral' }} />
</Box>
```

#### Border props

```jsx padded
<Box flex='row' mb={1.5} justify='center'>
  <Box b="2px solid #ACE" height={5} mr={1.75} width={5} />
  <Box bb={4} height={5} mr={1.75} width={5} />
  <Box br={4} height={5} mr={1.75} width={5} />
  <Box bt="3px" bc="#ECA" height={5} mr={1.75} width={5} />
  <Box bl="2px" bs="groove" bc="#ECA" height={5} mr={1.75} width={5} />
</Box>
<Box flex='row-reverse' mb={0.5} justify='center'>
  <Box bx={2} height={5} mr={1.75} width={5}/>
  <Box by={2} height={5} mr={1.75} width={5}/>
</Box>
```

#### Elevation props

```jsx padded
<Box flex='row' mb={0.5} justify='center'>
  <Box elevation={5} height={5} mr={0.5} width={5} />
  <Box elevation={4} height={5} mr={0.5} width={5} />
  <Box elevation={3} height={5} mr={0.5} width={5} />
</Box>
<Box flex='row-reverse' mb={0.5} justify='center'>
  <Box elevation={2} height={5} mr={0.5} width={5}/>
  <Box elevation={1} height={5} mr={0.5} width={5}/>
  <Box elevation={0} height={5} mr={0.5} width={5}/>
</Box>
<Box flex='row' mb={0.5} justify='center'>
  <Box elevation={-1} height={5} mr={0.5} width={5} />
  <Box elevation={-2} height={5} mr={0.5} width={5} />
  <Box elevation={-3} height={5} mr={0.5} width={5} />
</Box>
```