<!-- source-hash: 277daefc2a9ad48ff5ace711df4ffcf5 -->
A React component that displays MSP (Managed Service Provider) information with a logo avatar and truncated name display.

## Key Components

- **MSPDisplay**: Main component that renders an MSP with their logo and name
- **MSPDisplayProps**: TypeScript interface defining component props
  - `name`: MSP name (required)
  - `logoUrl`: Optional logo image URL
  - `size`: Avatar size in pixels (defaults to 40px)
  - `className`: Additional CSS classes

## Usage Example

```typescript
import { MSPDisplay } from './msp-display';

// Basic MSP display
<MSPDisplay name="TechCorp Solutions" />

// With logo and custom size
<MSPDisplay 
  name="Acme IT Services"
  logoUrl="https://example.com/logo.png"
  size={60}
/>

// With custom styling
<MSPDisplay 
  name="Global Tech Partners"
  logoUrl="/logos/global-tech.png"
  className="bg-gray-100 p-3 rounded-lg"
/>
```

The component uses a `SquareAvatar` for the logo display with automatic fallback to initials if no logo is provided. The name is truncated with ellipsis if it overflows the container width. The layout uses flexbox with a 2-unit gap and ensures proper text truncation with `min-w-0`.