<!-- source-hash: 54e34158f258c13928a52d614d0189f7 -->
A badge component that visually marks form fields or UI elements as required for AI enrichment, rendered with a cyan sparkle icon and "AI-required" label.

## Key Components

### `AIRequiredBadgeProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional CSS classes |
| `size` | `'sm' \| 'md'` | `'sm'` | Controls badge sizing and icon dimensions |

### `AIRequiredBadge`
A client-side React functional component that renders a pill-shaped badge using ODS flamingo cyan colors and a `SparklesIcon`. Icon size scales with the `size` prop (`12px` for `sm`, `14px` for `md`).

## Usage Example

```typescript
import { AIRequiredBadge } from '@openframe-oss-lib/components'

// Default small variant (inline with a label)
<label>
  Company Name
  <AIRequiredBadge />
</label>

// Medium variant with custom class
<AIRequiredBadge size="md" className="ml-4" />
```

## Notes

- Marked `'use client'` — compatible with Next.js App Router client boundaries.
- Styling relies on ODS design tokens (`--ods-flamingo-cyan-base`, `bg-ods-flamingo-cyan/10`) — ensure the ODS token stylesheet is loaded in the consuming app.
- Use `size="md"` for standalone/prominent placements; `size="sm"` (default) suits compact inline field labels.

**Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib)