<!-- source-hash: d74b86d195ef9df34ce86e9fde4c0258 -->
Storybook stories for the `OnboardingStepCard` component, covering all visual states and a full list layout as seen on the Get Started page.

## Key Components

| Export | Description |
|--------|-------------|
| `Default` | Pending state — shows **Skip Step** + primary action button |
| `Completed` | Success state — shows completed badge + **Manage** button |
| `Skipped` | Skipped state — shows only the **SKIPPED** badge |
| `CheckingCompletion` | Loading skeleton while completion status is being fetched |
| `List` | Full multi-step list replicating the Get Started page layout |

## Usage Example

```typescript
// Render a pending onboarding step
<OnboardingStepCard
  step={{
    id: 'invite-users',
    title: 'Company & Team',
    description: 'Invite team members and set up roles',
    actionIcon: (color?) => <UserPlusIcon color={color} size={20} />,
    actionText: 'Invite Users',
    completedText: 'Manage Users',
    onAction: () => console.log('action'),
    onSkip: () => console.log('skip'),
  }}
  isCompleted={false}
  isSkipped={false}
  isCheckingCompletion={false}
  onAction={() => console.log('action')}
  onSkip={() => console.log('skip')}
/>
```

## Notes

- The card itself has **no hover state or click handler** — only the inner buttons (`Skip Step`, `Action`, `Manage`) are interactive.
- The `List` story is useful for verifying that hovering a row does **not** change its border or background.
- Stories use `layout: 'padded'` and are tagged with `autodocs` for automatic documentation generation.