## Box: Hiding based on Breakpoint

Allows you to hide a `<Box>` based on the current breakpoint using the `hide` property.

HOW IT WORKS:

- pass in the values for the screen sizes you want to HIDE the `Box` for:

`<Box hide={['sm']}>Show on MD, LG and XL (hide on sm)</Box>`

`<Box hide={['md']}>Show on SM, LG and XL (hide on md)</Box>`

`<Box hide={['lg']}>Show on SM, MD and XL (hide on lg)</Box>`

`<Box hide={['md', 'lg', 'xl']}>ONLY Show on SM (hide on md, lg, xl)</Box>`

Where screen sizes are:

- 'sm' == smaller than `md` breakpoint
- 'md' == between `md` and `lg` breakpoint
- 'lg' == between `lg` and `xl` breakpoint
- 'xl' == greater than `xl` breakpoint

### LEGACY:

**hide**: Legal values:

- 'sm': hide for the small breakpoint
- 'md': only show for the small breakpoint
