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 (
Application crashed unexpectedly
)
}
// Different severity levels and sizes
function SeverityExamples() {
return (
)
}
```
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.