<.stepper id="stepper-single-default">
  <:step id="1" icon="map" title="First step"/>
  <:step id="2" icon="pencil" title="One step beyond"/>
</.stepper>

<.stepper id="stepper-single-size" size="sm">
  <:step id="1" icon="map" title="First step"/>
  <:step id="2" icon="pencil" title="One step beyond"/>
</.stepper>

<.stepper id="stepper-single-without-last-point">
  <:step id="1" icon="map" title="First step"/>
  <:step id="2" icon="pencil" title="One step beyond"/>
</.stepper>

<.stepper id="stepper-single-with-content">
  <:step id="1" icon="map" title="First step">
     <p>Listen to the wonderfull music of Ska</p>
  </:step>
  <:step id="2" icon="megaphone" title="One step beyond">
    <p>Buy your first Madness vinyl</p>
  </:step>
  <:step id="3" icon="musical-note" title="Dance" hide_content={true}>
    <p>Dance Like Nobody’s Watching</p>
  </:step>
</.stepper>

<.stepper id="stepper-single-mark-steps">
  <:step id="1" icon="user" title="without mark" />
  <:step id="2" icon="user" title="nil" mark={nil}/>
  <:step id="3" icon="user" title="success" mark={"success"}/>
  <:step id="4" icon="user" title="warning" mark={"warning"}/>
  <:step id="5" icon="user" title="danger" mark={"danger"}/>
  <:step id="6" icon="user" title="highlight" mark={"highlight"}/>
  <:step id="7" icon="user" title="disabled" disabled mark={"highlight"}/>
</.stepper>

<.stepper id="stepper-single-mark-steps-with-map" marks={%{"3" => "success", "4" => "warning", "5" => "danger", "6" => "highlight", "7" => "highlight"}}>
  <:step id="1" icon="user" title="without mark" />
  <:step id="2" icon="user" title="nil"/>
  <:step id="3" icon="user" title="success"/>
  <:step id="4" icon="user" title="warning" />
  <:step id="5" icon="error" title="danger" />
  <:step id="6" icon="user" title="highlight" />
  <:step id="7" icon="user" title="disabled" disabled />
</.stepper>

<.stepper id="stepper-single-config-steps-with-map" steps={%{"1" => %{icon: "check", mark: "success"}, "2" => %{icon: "error", mark: "danger"}, "3" => %{icon: "clipboard-document-list", mark: "success"}, "4" => %{icon: "clipboard", title: "Foo"}, "5" => %{hide_content: true, mark: "highlight"}, "6" => %{disabled: true, icon: "clipboard"}, "7" => %{disabled: false}, "8" => %{hidden: true}}}>
  <:step id="1" icon="check" title="Lorem" />
  <:step id="2" icon="clipboard-document-list" title="Ispum"/>
  <:step id="3" icon="user" title="Dolor"/>
  <:step id="4">Bar</:step>
  <:step id="5" icon="bolt" title="High">Low</:step>
  <:step id="6" icon="error" title="Bar" />
  <:step id="7" icon="face-smile" title="Smile" disabled />
  <:step id="8" icon="face-smile" title="Smile" disabled />
</.stepper>

<.stepper id="stepper-single-config-small-steps-with-map" size="sm" steps={%{"1" => %{icon: "check", mark: "success"}, "2" => %{icon: "error", mark: "danger"}, "3" => %{icon: "clipboard-document-list", mark: "success"}, "4" => %{icon: "clipboard", title: "Foo"}, "5" => %{disabled: true, icon: "clipboard"}, "6" => %{disabled: false}, "7" => %{hidden: true}}}>
  <:step id="1" icon="check" title="Lorem" />
  <:step id="2" icon="clipboard-document-list" title="Ispum"/>
  <:step id="3" icon="user" title="Dolor"/>
  <:step id="4"/>
  <:step id="5" icon="error" title="Bar" />
  <:step id="6" icon="face-smile" title="Smile" disabled />
  <:step id="7" icon="face-smile" title="Smile" disabled />
</.stepper>