Style System Component

Create a {{component_name}} component matching this design spec:

Visual spec: {{design_description}}
Variants: {{variant_list}}
States: default, hover, active, disabled, loading, error

Technical requirements:
- Use {{styling_system}} (match the project's existing approach)
- Responsive breakpoints: mobile (320px), tablet (768px), desktop (1024px+)
- Support dark mode if the project uses it (check for existing dark: classes or theme tokens)
- Animate transitions with {{animation_library}} if the project uses one, otherwise CSS transitions
- Accessible: WCAG 2.1 AA — proper contrast ratios, focus rings, screen reader support

Component API:
- Props should mirror similar components in the project (check {{similar_component}} for patterns)
- Use forwardRef if the project's components do
- Export prop types for consumers

Deliver:
1. The component file
2. A Storybook story or usage example showing all variants and states
3. A brief list of design decisions you made and why