<!-- source-hash: a814b843aeaf82abd73ff945b405ef13 -->
Storybook stories for the `Modal` UI component, demonstrating two interaction patterns: a basic modal with header/content/footer, and a modal containing an `Autocomplete` dropdown with portal-aware rendering.

## Key Components

| Export | Description |
|---|---|
| `Default` | Basic modal story with open/close toggle, header, body text, and Cancel/Confirm footer buttons |
| `WithAutocomplete` | Modal story embedding an `Autocomplete` multi-select with `overflow-visible` and a `ref` callback to capture the modal DOM node for portal containment |

## Usage Example

```typescript
// Default modal pattern
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <ModalHeader>
    <ModalTitle>Modal Title</ModalTitle>
  </ModalHeader>
  <ModalContent className="px-6 py-4">
    <p>Modal body content</p>
  </ModalContent>
  <ModalFooter>
    <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
    <Button variant="accent" onClick={() => setIsOpen(false)}>Confirm</Button>
  </ModalFooter>
</Modal>

// Autocomplete inside modal — capture modal ref to avoid z-index conflicts
const [modalElement, setModalElement] = useState<HTMLDivElement | null>(null)
const modalRef = useCallback((node: HTMLDivElement | null) => {
  setModalElement(node)
}, [])

<Modal ref={modalRef} isOpen={isOpen} onClose={...} className="max-w-lg overflow-visible">
  <ModalContent className="px-6 py-4">
    <Autocomplete
      options={options}
      value={selected}
      onChange={setSelected}
      placeholder="Search..."
    />
  </ModalContent>
</Modal>
```

## Notes

- `WithAutocomplete` uses `useCallback` ref to capture the modal DOM node, enabling dropdown portals to render inside the modal's subtree and avoid z-index stacking issues.
- Both stories manage `isOpen` via local `useState`, decoupled from Storybook's `args.isOpen` control after initial render.