<!-- source-hash: 5ede4b179e76c93d7dbba4fcff5327a9 -->
A flexible avatar component that displays a user image or falls back to initials, supporting both square and round variants with multiple size options.

## Key Components

### `SquareAvatarProps`
Extends `React.HTMLAttributes<HTMLDivElement>` with:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `src` | `string` | — | Image URL |
| `alt` | `string` | — | Image alt text (also used for initials fallback) |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Controls dimensions (32/40/48/64px) |
| `fallback` | `string` | — | Preferred string for generating initials |
| `variant` | `'square' \| 'round'` | `'square'` | Border radius style |

### `SquareAvatar`
A memoized, forwarded-ref component that renders an image with automatic graceful degradation to initials on load error or missing `src`.

**Fallback behavior:** Uses `getFirstLastInitials()` on `fallback ?? alt`, rendering `'?'` if neither yields initials. The initials layer uses `text-ods-text-primary` to maintain WCAG AA contrast across accent-fill backgrounds (e.g. Mingo cyan, current-user pink).

## Usage Example

```typescript
// Image avatar
<SquareAvatar
  src="https://example.com/avatar.jpg"
  alt="Jane Doe"
  size="lg"
  variant="round"
/>

// Initials-only avatar (no src)
<SquareAvatar
  fallback="Jane Doe"
  size="md"
  variant="square"
/>

// With custom className and forwarded ref
const ref = React.useRef<HTMLDivElement>(null);
<SquareAvatar
  ref={ref}
  src={userAvatarUrl}
  alt={userName}
  size="xl"
  className="ring-2 ring-ods-flamingo-pink"
/>
```