<!-- source-hash: b3367d6791779cace17c9e0ea0b291bc -->
A React SVG-based circular progress ring component with configurable variants, sizes, and overflow behavior for displaying percentage values.

## Key Components

### Types

| Type | Values | Description |
|------|--------|-------------|
| `CircularProgressVariant` | `success` \| `warning` \| `error` \| `info` \| `accent` | Color theme for the progress ring |
| `CircularProgressOverflow` | `clamp` \| `wrap` | How to handle percentages exceeding 100 |

### Props (`CircularProgressProps`)

| Prop | Default | Description |
|------|---------|-------------|
| `percentage` | — | Progress value (0–100 in clamp; unbounded in wrap) |
| `variant` | `'success'` | Color variant using ODS design tokens |
| `size` | `56` | Diameter in pixels |
| `strokeWidth` | `10` | Ring stroke thickness in pixels |
| `showLabel` | `true` | Renders percentage text in the center |
| `labelFormat` | `'percent'` | `'percent'` → `"70%"`, `'value'` → `"70"` |
| `overflow` | `'clamp'` | Overflow handling strategy |

### `CircularProgress` (exported component)

Renders a two-circle SVG (track + progress arc) rotated -90° so progress starts at the top. The progress arc is animated via `strokeDashoffset`.

## Usage Example

```typescript
// Basic usage
<CircularProgress percentage={72} />

// Overage warning with wrap mode
<CircularProgress
  percentage={130}
  variant="warning"
  overflow="wrap"
/>
// Ring shows 30%, label shows 130%

// Custom size, no label, accent variant
<CircularProgress
  percentage={45}
  variant="accent"
  size={80}
  strokeWidth={8}
  showLabel={false}
/>

// Raw value label (no % suffix)
<CircularProgress
  percentage={88}
  labelFormat="value"
  variant="info"
/>
```

## Overflow Behavior

```text
clamp mode:  percentage=130 → ring=100%, label="100%"
wrap mode:   percentage=130 → ring=30%,  label="130%"
wrap mode:   percentage=200 → ring=100%, label="200%"  (exact lap = full ring)
```