Stepper

<!-- Stepper -->
<div class="flex w-full max-w-xl flex-col items-center justify-center gap-2 sm:flex-row"></div>
 
<!-- Stepper Item -->
<div class="flex w-full flex-col items-center gap-2 sm:flex-row"></div>
 
<!-- Stepper Item Button/Active -->
<button
  class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-main-text bg-main-text text-sm text-main">
  1
</button>
 
<!-- Stepper Item Button/Current -->
<button
  class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-main-text bg-surface text-sm">
  2
</button>
 
<!-- Stepper Item Button/Default -->
<button class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm text-muted-text">
  3
</button>
 
<!-- Stepper Item Separator/Default -->
<div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
 
<!-- Stepper Item Separator/Active -->
<div class="h-8 w-px bg-main-text sm:h-px sm:w-full sm:max-w-40"></div>