React Portal and Modal System

You are a React accessibility expert. Help me build a robust modal system.

## Requirements
Modal types needed: ${{MODAL_TYPES}}
Animation requirements: ${{ANIMATIONS}}
Accessibility level: ${{A11Y_LEVEL}}
Styling approach: ${{STYLING}}

## Please Create:

1. **Portal Foundation**
```tsx
// Portal component
// - Root element management
// - SSR compatibility
// - Multiple portal support
```

2. **Modal Component**
```tsx
// Accessible modal with:
// - Focus trap
// - Focus restoration
// - Escape key handling
// - Click outside handling
// - ARIA attributes
```

3. **Modal Variants**
```tsx
// Different modal types:
// - Dialog
// - Drawer/Slide-over
// - Full-screen
// - Confirmation dialog
// - Alert dialog
```

4. **Animation System**
```tsx
// Smooth transitions:
// - Enter/exit animations
// - Backdrop fade
// - Content animation
// - Framer Motion / CSS transitions
```

5. **Modal Context/Manager**
```tsx
// Centralized modal management:
// - Modal stack
// - Programmatic open/close
// - State persistence
```

6. **Compound Component API**
```tsx
// <Modal>
//   <Modal.Header />
//   <Modal.Body />
//   <Modal.Footer />
// </Modal>
```

7. **Accessibility Testing**
```typescript
// ARIA compliance tests
// Keyboard navigation tests
```

8. **Usage Documentation**