<!-- source-hash: 6d459fe4c83ed318f09f99bec3510116 -->
A React component that renders a colored dot indicator based on log severity level with customizable sizing and accessibility features.

## Key Components

- **LogSeverityDot** - Main component that displays a colored dot representing log severity
- **Size variants** - Supports `sm`, `md`, and `lg` size options with responsive dimensions
- **Accessibility** - Includes ARIA labels with severity level descriptions
- **Forward ref** - Properly forwards React refs for external DOM access

## Usage Example

```typescript
import { LogSeverityDot } from './log-severity-dot'

function LogEntry() {
  return (
    <div className="flex items-center gap-2">
      <LogSeverityDot 
        severity="error" 
        size="md" 
        className="mr-2" 
      />
      <span>Application crashed unexpectedly</span>
    </div>
  )
}

// Different severity levels and sizes
function SeverityExamples() {
  return (
    <div className="space-y-2">
      <LogSeverityDot severity="info" size="sm" />
      <LogSeverityDot severity="warning" size="md" />
      <LogSeverityDot severity="error" size="lg" />
    </div>
  )
}
```

The component uses color mappings from `LOG_SEVERITY_COLORS` and text labels from `LOG_SEVERITY_LABELS` to provide consistent visual indicators across different log severity levels. The dot is centered within a flexible container that maintains proper aspect ratios across all size variants.