import {
  Canvas,
  Controls,
  Meta,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as HelperStories from './Helper.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={HelperStories} />

<Title>Helper</Title>
<Subtitle>
  A component for displaying helpful text that provides additional context or
  guidance to users.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={HelperStories.Default} sourceState="shown" />
<Controls />

## Usage

The Helper component is used to provide supplementary information, hints, or guidance to users. It's commonly used in forms, tooltips, or any interface element that needs additional context.

#### Import

```tsx
import { Helper } from '@chainlink/blocks'
```

#### Example

```tsx
function MyForm() {
  return (
    <div>
      <label>Email Address</label>
      <input type="email" />
      <Helper>We'll never share your email with anyone else.</Helper>
    </div>
  )
}
```

## Examples

<Canvas of={HelperStories.SM} sourceState="shown" />

<Canvas of={HelperStories.WithLongText} sourceState="shown" />

<Canvas of={HelperStories.WithLinks} sourceState="shown" />