import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
import { Card } from '~components/Card'
import * as Examples from './border-width.stories'

<Meta of={Examples} />

# Border Width

<Description />

<Unstyled>
  <Card variant="informative" classNameOverride="w-fit mb-24">
    <div className="p-24 font-family-paragraph">
      <p>
        This document demonstrates the list of border-width suffixes available from the Kaizen
        preset, by showing what they look like on the &apos;border-&apos; prefix.
      </p>
      <p>
        Note that there are other border-width prefixes (such as `border-l-` for
        `border-left-width`) that can be used instead. Available border-width prefixes can be
        referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
      </p>
    </div>
  </Card>
</Unstyled>

<Story of={Examples.BorderWidth} />