<!-- source-hash: 735975f25b78a4907321d619b6aaa5d8 -->
Storybook stories for the `DotsLoaderIcon` component, covering size variants, ODS color token usage, color inheritance, and in-context card placement.

## Key Components

| Story | Description |
|---|---|
| `Default` | 24px icon inheriting text color via `currentColor` |
| `Large` | 64px icon for full-page or blocking loading states |
| `InheritsTextColor` | Demonstrates `currentColor` inheriting from a parent ODS text class |
| `OdsColors` | Showcases explicit ODS token colors (`--ods-text-primary`, `--ods-accent`, `--ods-error`, etc.) |
| `Sizes` | Full size scale from 16px to 96px |
| `InCard` | Icon centered inside an ODS-styled card for inline loading context |

## Usage Example

```typescript
import { DotsLoaderIcon } from '../components/icons-v2-generated/loaders/dots-loader-icon';

// Default — inherits surrounding text color
<DotsLoaderIcon size={24} />

// Explicit ODS color token — never hardcode hex values
<DotsLoaderIcon size={40} color="var(--ods-accent)" />

// Inherit from parent text color class
<div className="text-ods-accent">
  <DotsLoaderIcon size={40} />
</div>
```

## Notes

- Animation is driven by an infinite SMIL chain on the three dots — no CSS keyframes required.
- Always prefer ODS design tokens (e.g. `var(--ods-accent)`) over hardcoded hex values for the `color` prop.
- The `size` prop accepts numbers between `12` and `128` (step `4`).