import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Style/Spacing" />

# Spacing

## Relative Values

| token name | value     |
| ---------: | --------- |
|         r1 | 0.0625rem |
|         r2 | 0.125rem  |
|         r4 | 0.25rem   |
|         r8 | 0.5rem    |
|        r10 | 0.625rem  |
|        r12 | 0.75rem   |
|        r14 | 0.875rem  |
|        r16 | 1rem      |
|        r20 | 1.25rem   |
|        r24 | 1.5rem    |
|        r28 | 1.75rem   |
|        r32 | 2rem      |
|        r40 | 2.5rem    |

## Fixed Values

| token name | value |
| ---------: | ----- |
|         f1 | 1px   |
|         f2 | 2px   |
|         f4 | 4px   |
|         f8 | 8px   |
|        f10 | 10px  |
|        f12 | 12px  |
|        f14 | 14px  |
|        f16 | 16px  |
|        f20 | 20px  |
|        f24 | 24px  |
|        f28 | 28px  |
|        f32 | 32px  |
|        f40 | 40px  |

## Utils

We provide 3 utils component for spacing.

A `Box` generic component with all css flex box customisation possible.
A `Stack` component placing children side by side with a uniform configurable gap in between.
`Stack` children can optionaly be separated by dividers. A `Stack` can be verticaly or horizontaly aligned.
A `Wrap` component filling parent width with non configurable uniform gap between children.