import { mdx } from '@mdx-js/react';
import { Space } from '~/space';
import { Props, Description } from '~/props/src/index';
import { CssLayout } from '~/mdx-layout-css';
export default CssLayout;

# Space

<Description of={Space} />

## Props

<Props of={Space} />

## Usage

### Numbers

```tsx
// scale is an array of numbers
<Space scale={[0, 1, 8, 16, 24, 32, 64, 128]} />
```

<Space scale={[0, 1, 8, 16, 24, 32, 64, 128]} />

### Strings and Numbers

```tsx
// scale is and array of strings and numbers
<Space scale={[0, '.25rem', '.5rem', '1rem', '2rem', '4rem', '8rem']} />
```

<Space scale={[0, '.25rem', '.5rem', '1rem', '2rem', '4rem', '8rem']} />

### Record of strings and numbers

```tsx
// scale is a record with names and values
<Space scale={{ small: 4, medium: 8, large: 16 }} />
```

<Space scale={{ small: 4, medium: 8, large: 16 }} />