Progress

import { Box, Progress } from '@gympass/yoga';

<Box width={500}>
  <Progress max={100} value={65} label={{ value: 65, placement: 'right' }} />
</Box>
<Box width={500}>
  <Progress max={100} value={65} label={{ value: 65, placement: 'right' }} />
</Box>

import { Box, Progress } from '@gympass/yoga';

<Box
    display="flex"
    flexDirection="column"
    width={500}
    height={100}
    justifyContent="space-between"
>
  <Box>
    <Progress max={100} value={20} label={{ value: 20, placement: 'left' }} />
    <Progress max={100} value={40} label={{ value: 40, placement: 'left' }} />
    <Progress max={100} value={67} label={{ value: 67, placement: 'left' }} />
  </Box>

  <Box>
    <Progress
      label={{ value: 'With margin prop', placement: 'left' }}
      max={100}
      value={70}
      variant="secondary"
      mv="medium"
    />

    <Progress
      label={{ value: 'With variant', placement: 'left' }}
      max={100}
      value={70}
      variant="secondary"
    />
  </Box>
</Box>
<Box
    display="flex"
    flexDirection="column"
    width={500}
    height={100}
    justifyContent="space-between"
>
  <Box>
    <Progress max={100} value={20} label={{ value: 20, placement: 'left' }} />
    <Progress max={100} value={40} label={{ value: 40, placement: 'left' }} />
    <Progress max={100} value={67} label={{ value: 67, placement: 'left' }} />
  </Box>

  <Box>
    <Progress
      label={{ value: 'With margin prop', placement: 'left' }}
      max={100}
      value={70}
      variant="secondary"
      mv="medium"
    />

    <Progress
      label={{ value: 'With variant', placement: 'left' }}
      max={100}
      value={70}
      variant="secondary"
    />
  </Box>
</Box>