### Summary

You can use `<SiedContainer />` to set a `max-width` around its children.

### Examples

- Short size

```tsx
import { SizedContainer } from '@zopauk/react-components';

<SizedContainer size="short">
  <div style={{ backgroundColor: 'tomato', height: '100%' }}>This is a container</div>
</SizedContainer>;
```

- Medium size

```tsx
import { SizedContainer } from '@zopauk/react-components';

<SizedContainer size="medium">
  <div style={{ backgroundColor: 'tomato', height: '100%' }}>This is a container</div>
</SizedContainer>;
```

- Long size

```tsx
import { SizedContainer } from '@zopauk/react-components';

<SizedContainer size="long">
  <div style={{ backgroundColor: 'tomato', height: '100%' }}>This is a container</div>
</SizedContainer>;
```

- Fulll-length size

```tsx
import { SizedContainer } from '@zopauk/react-components';

<SizedContainer size="fullLength">
  <div style={{ backgroundColor: 'tomato', height: '100%' }}>This is a container</div>
</SizedContainer>;
```