<!-- source-hash: 0ad0fd1585cc95092b328aab82e5f963 -->
A flexible square avatar component that displays either a user image or initials fallback with automatic image proxying and responsive sizing options.

## Key Components

- **SquareAvatar**: Main component that renders a square avatar with rounded corners
- **SquareAvatarProps**: TypeScript interface defining component props including image source, fallback name, sizing options
- **Automatic fallback**: Generates up to 2 initials from the provided name when no image is available
- **Image proxying**: Uses `getProxiedImageUrl` utility for secure image loading
- **Responsive sizing**: Supports both fixed pixel sizing and full-width responsive layouts

## Usage Example

```typescript
import { SquareAvatar } from './components/square-avatar';

// With image
<SquareAvatar 
  src="https://example.com/avatar.jpg" 
  fallbackName="John Doe"
  size={64}
/>

// Fallback to initials
<SquareAvatar 
  fallbackName="Jane Smith" 
  size={48}
/>

// Full width responsive
<SquareAvatar 
  src="/user-avatar.png"
  fallbackName="Alex Johnson"
  fullWidth={true}
  className="max-w-xs"
/>

// Minimal usage
<SquareAvatar fallbackName="Bob Wilson" />
```

The component automatically handles image loading failures by falling back to initials, uses design system colors and borders, and provides both fixed and responsive sizing modes for different layout contexts.