---
// Form hint text (.form-hint).

interface Props {
  /** element to render — default div */
  as?: string
  class?: string
  /** id so a control can reference the hint via aria-describedby */
  id?: string
}

const { as: Tag = 'div', class: className, id } = Astro.props
---

<Tag class:list={['form-hint', className]} id={id}>
  <slot />
</Tag>