<!-- source-hash: 4ad98f6815de9109cf1a167244731e12 -->
A React component that displays a metric value with an associated label in a clean, inline format. The main value is prominently displayed with a smaller, muted label to provide context.

## Key Components

- **MetricValue**: Main component that renders a value-label pair
- **MetricValueProps**: TypeScript interface defining the component's props
  - `value`: The primary metric value (string or number)
  - `label`: Descriptive text shown in smaller, muted styling
  - `className`: Optional CSS classes for customization

## Usage Example

```typescript
import { MetricValue } from './metric-value';

// Display generation time metric
<MetricValue 
  value="30s" 
  label="Generation Time" 
/>

// Display numeric metrics with custom styling
<MetricValue 
  value={1249} 
  label="Total Requests"
  className="text-xl font-bold"
/>

// Display percentage values
<MetricValue 
  value="94.2%" 
  label="Success Rate"
/>
```

The component uses a horizontal flex layout with the value displayed in primary text color and the label in secondary (muted) text. It's styled with the DM Sans font family and includes whitespace-nowrap to prevent line breaks, making it ideal for dashboard metrics and status displays.