import { Meta, Story, Canvas, Title, ArgsTable, Source } from '@storybook/addon-docs';
import { Wrapper } from '@lendi/ui/Layout';
import * as stories from './Wrapper.stories.tsx';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Layout/Wrapper`} component={Wrapper} />

<Title>Wrapper</Title>

A component to control consistent container max widths across our appplications.

## Usage

<Source language='tsx' dark={true} code={`import { Wrapper } from '@lendi/ui/Layout';`} />

## Default

By default the component has a maximum width of 1320px and is centre aligned with responsie left and right gutters.

## Maximum widths

The component currently supports two max-widths 1320px and 1140px, to change to another max-width use the `maxWidth` prop and
its relevant token.

<Canvas withSource="open">
  <Story name="Max widths" story={stories.MaxWidthOptions} />
</Canvas>

## Props

<ArgsTable />