<>
  <LegacyTimeline
    title="Timeline Future"
    variant="future"
    subTitle="Second line"
  >
    <LightText>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </LightText>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Done" variant="done">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Active" variant="active">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Warning" variant="warning">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Error" variant="error">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Past" variant="past">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
  <LegacyTimeline title="Timeline Problem" variant="problem">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </LegacyTimeline>
</>;