import {
  Story,
  Canvas,
  ArgsTable,
  Meta,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Box } from "./Box";

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

<ComponentHeading
  componentName="Box"
  description="A primitive component used as a building block for other components throughout the design system"
  sourcePath="src/components/Box/Box.tsx"
  hideDemosLink
/>

`Box` can render different HTML elements (using the `as` prop), but will render a `<div>` by default.

## Installation

```jsx
import { Box } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Box">
    <Box>This is the Box component</Box>
  </Story>
</Canvas>

## API

Extends `React.HTMLProps<HTMLDivElement>`

<ArgsTable of={Box} />