import { ArgsTable, Meta } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { InnerBox } from "@components/box";

<Meta
    title="Components/Box"
    id="box"
/>

# Box

<Tagline>A box is a general purpose component that can be used to compose new components, use the slot system or render style props.</Tagline>

<ComponentInfo
    usage={"import { Box } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/box/src"
/>

## Usage

> The box component is a base components extended by Orbit HTML element components. It's made available as a foundation component but shouldn't be used in mose cases. Instead, use one of Orbit HTML element components like a [div](?path=/docs/html-div--example) component.

### Default

A default box.

<Preview filePath="/box/docs/Usage" />

## API

<ComponentInfo
    usage={"import { Box } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerBox.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerBox} sort="alpha" />
