<!-- source-hash: de46e328067be52e6b8316046dcf529b -->
A client-side React component that renders a styled vertical list of feature items, each with an icon, title, and description.

## Key Components

### Interfaces
- **`FeatureListItemData`** — Shape of each list item: `icon` (ReactNode), `title` (string), `description` (string)
- **`FeatureListProps`** — Component props: `items` array, optional `className`, optional `iconBoxSize` (default: `72`)

### Component
- **`FeatureList`** — Renders a bordered card list where each row displays a square icon box alongside a title and description. Dividers are automatically added between items.

## Usage Example

```typescript
import { FeatureList, FeatureListItemData } from './feature-list';
import { ShieldIcon, ZapIcon, CloudIcon } from 'lucide-react';

const features: FeatureListItemData[] = [
  {
    icon: <ShieldIcon size={32} />,
    title: 'Secure by Default',
    description: 'All connections are encrypted end-to-end.',
  },
  {
    icon: <ZapIcon size={32} />,
    title: 'Lightning Fast',
    description: 'Sub-100ms response times across all regions.',
  },
  {
    icon: <CloudIcon size={32} />,
    title: 'Cloud Native',
    description: 'Built for scalable, distributed infrastructure.',
  },
];

export default function Page() {
  return (
    <FeatureList
      items={features}
      iconBoxSize={64}
      className="max-w-xl"
    />
  );
}
```

> **Note:** The `iconBoxSize` prop controls both width and height of the icon container in pixels. Icon content is not automatically sized — size your icon element to fit within the box.