<!-- source-hash: 5f8fd0a180217b9085f7ea5f038d319a -->
Renders a styled badge for ticket statuses, normalizing any known status string (backend, chat, dialog-layer) into a canonical `TicketStatus` value with the correct color variant and optional icon.

## Key Components

### Types & Exports
| Export | Description |
|--------|-------------|
| `TicketStatus` | Canonical union type: `'ACTIVE' \| 'TECH_REQUIRED' \| 'ON_HOLD' \| 'RESOLVED' \| 'ARCHIVED'` |
| `TicketStatusTagProps` | Props interface for the main component |

### Utility Functions
| Function | Description |
|----------|-------------|
| `resolveTicketStatus(status)` | Maps any known alias to a canonical `TicketStatus`; returns `null` for unknowns |
| `getTicketStatusConfig(status)` | Returns `{ label, variant, icon }` for a given status string |
| `getTicketStatusTag(status)` | Drop-in utility returning label/variant/icon for use outside the component |

### Component
- **`TicketStatusTag`** — Wraps the base `Tag` component with resolved status config. Supports label override, hex `color` override with automatic contrast text, `showIcon` toggle, and additional `className`.

## Usage Example

```typescript
// Basic usage
<TicketStatusTag status="ACTIVE" />

// With alias from dialog layer
<TicketStatusTag status="ACTION_REQUIRED" />

// HubSpot pipeline stage — custom label, canonical color
<TicketStatusTag status="OPEN" label="Waiting on Contact" />

// Hex color override (e.g. from a custom pipeline stage)
<TicketStatusTag status="ON_HOLD" color="#7C3AED" />

// Utility usage outside JSX
const { label, variant } = getTicketStatusTag('resolved')
// → { label: 'Resolved', variant: 'outline', icon: <CheckCircleIcon /> }
```

### Status → Variant Map
| Status | Variant | Icon |
|--------|---------|------|
| `ACTIVE` | `success` | — |
| `TECH_REQUIRED` | `warning` | — |
| `ON_HOLD` | `error` | — |
| `RESOLVED` | `outline` | ✅ CheckCircle |
| `ARCHIVED` | `grey` | — |