Storybook stories for the `Modal` UI component, demonstrating default usage and a modal containing an `Autocomplete` dropdown.
## Key Components
| Export | Type | Description |
|---|---|---|
| `Default` | `Story` | Basic modal with header, content, and footer sections |
| `WithAutocomplete` | `Story` | Modal containing a multi-select `Autocomplete`, using `portalContainer` to avoid z-index conflicts |
## Usage Example
```typescript
// Default modal
setIsOpen(false)}>
Modal Title
Modal body content.
// Modal with Autocomplete — attach a ref to keep the dropdown in the modal's DOM tree
const [modalElement, setModalElement] = useState(null)
const modalRef = useCallback((node: HTMLDivElement | null) => setModalElement(node), [])
setIsOpen(false)} className="max-w-lg overflow-visible">
```
## Notes
- Both stories manage open/close state locally via `useState`, keeping each story self-contained with a trigger `Button`.
- The `WithAutocomplete` story captures the modal's DOM node via a `useCallback` ref. Pass `modalElement` as `portalContainer` to the `Autocomplete` if your implementation renders the dropdown in a portal, preventing z-index stacking issues.
- The `isOpen` and `className` args are exposed as Storybook controls (`boolean` and `text` respectively).
**Source:** [`Modal.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/Modal.stories.tsx)