import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Box } from "./";

<Meta title="Components/Layout/Box" component={Box} />

# Box

Box is an abstract component on top of which other components are built. By default, it renders a div element.

The Box component is useful because it helps with these common use cases:

- Provide a shorthand way to pass styles via props (bg instead of backgroundColor).
- Compose new component and allow for override using the as prop.

# Import

```
import { Box } from "@cloudline/cloudline-styled-components"
```

# Usage

<Canvas withSource="open">
  <Story name="Box">
    <Box color="red" w={200} h={200} bg="blue" rounded="lg" p={4} my={3}>
      I am a box
    </Box>
  </Story>
</Canvas>

<ArgsTable story="Box" />
