<SpacedGroup direction="vertical" xs={40}>
    <Stepper>
      <Step title="Finished" seen />
      <Step title="In Progress" current />
      <Step title="Needs Action" />
      <Step title="Finish Line" />
    
    <Stepper>
      <Step title="Finished" description="Phone number verified" seen />
      <Step
        title="In Progress"
        description="Step is in progress and needs action"
        current
      />
      <Step
        title="Needs Action"
        description="Step was completed, but we went back to step 2"
      />
      <Step title="Finish Line" description="Step has not been seen yet." />
    </Stepper>
    <Stepper>
      <Step title="Step 1" description="Additional information" seen />
      <Step
        title="Step 2"
        description="Step is in progress and needs action"
        current
      />
      <Step
        title="Step 3"
        description="Step was completed, but we went back to step 2"
        seen
      />
      <Step title="Step 4" description="Step has not been seen yet." />
    </Stepper>
    <Stepper>
      <Step
        title="Step 1"
        description="Additional information"
        icon={CheckIcon}
        seen
      />
      <Step
        title="Step 2"
        description="Step is in progress and needs action"
        icon={LoadingSpinIcon}
        current
      />
      <Step
        title="Step 3"
        description="Step was completed, but we went back to step 2"
      />
    </Stepper>
  </SpacedGroup>
</Playground>

<SpacedGroup direction="vertical" xs={40}>
    <Stepper direction="vertical">
      <Step title="Finished" seen />
      <Step title="In Progress" current />
      <Step title="Needs Action" />
      <Step title="Finish Line" />
    
    <Stepper direction="vertical">
      <Step title="Finished" description="Phone number verified" seen />
      <Step
        title="In Progress"
        description="Step is in progress and needs action"
        current
      />
      <Step
        title="Needs Action"
        description="Step was completed, but we went back to step 2"
      />
      <Step title="Finish Line" description="Step has not been seen yet." />
    </Stepper>
  </SpacedGroup>
</Playground>

<SpacedGroup direction="vertical" xs={40}>
    <Stepper size={24}>
      <Step title="Finished" description="Phone number verified" seen />
      <Step
        title="In Progress"
        description="Step is in progress and needs action"
        current
      />
      <Step
        title="Needs Action"
        description="Step was completed, but we went back to step 2"
      />
      <Step title="Finish Line" description="Step has not been seen yet." />
    
    <Stepper size={24} direction="vertical">
      <Step
        title="Finished"
        description="Phone number verified"
        icon={CheckIcon}
        seen
      />
      <Step
        title="Finished"
        description="Organization created"
        icon={CheckIcon}
        seen
      />
      <Step
        title="Building workspace"
        description="Setting up workspace in the background"
        icon={LoadingSpinIcon}
        current
      />
    </Stepper>
    <ThemeProvider theme={{ Stepper: { titleWeight: 'bold' } }}>
      <Stepper size={24} direction="vertical">
        <Step title="Finished" icon={CheckIcon} seen />
        <Step title="Finished" icon={CheckIcon} seen />
        <Step title="Building workspace" icon={LoadingSpinIcon} current />
      </Stepper>
    </ThemeProvider>
    <Stepper size={24} direction="vertical" lineLength={90} afterLength={0}>
      <Step title="Finished" icon={CheckIcon} seen />
      <Step title="Finished" icon={CheckIcon} seen />
      <Step title="Building workspace" icon={LoadingSpinIcon} current />
    </Stepper>
  </SpacedGroup>
</Playground>