Popup Wrapper

Popup Wrapper is a flexible modal container that dynamically loads and displays any component with configurable header, close button, and handlebar options.

Visual Specifications

Property	Modal	Sheet
Max-width	500-600px	100%
Border Radius	12-16px	16-20px (top)
Padding	24px	20px
Backdrop	rgba(0,0,0,0.5)	rgba(0,0,0,0.5)
Animation	Fade + scale	Slide from bottom

Wrapper Variants

Centered modal with close button

Bottom sheet with handlebar, slides up

Full-screen content, no padding

Custom header with branding and actions

Configuration Options

Option	Description
Component	Dynamic component to load
Input props	Data passed to child component
Handlebar	Show drag handle on mobile
Close button	X button in header
Order summary layout	Special checkout mode

Layout Modes

Mode	Description	Use Case
Standard	Centered modal with padding	Forms, confirmations
Order Summary	Special layout for orders	Checkout review
Full Content	No padding, edge-to-edge	Media, full-screen content
Bottom Sheet	Mobile slide-up panel	Mobile actions, options

Close Behaviors

Method	Trigger
Close Button	X button in header
Backdrop Click	Click outside panel (optional)
ESC Key	Keyboard dismissal
Child Action	Component can request close

Usage Guidance

When to use

Wrapping dynamic content in modals
Reusable modal containers
Consistent modal styling
Mobile sheet presentations

Best practices

✅ Do	❌ Don’t
Use for consistent modal styling	Create one-off modals
Pass clean input props	Overcomplicate data flow
Handle close in child component	Leave no exit method
Consider mobile handlebar	Skip mobile UX
Proper cleanup on destroy	Memory leaks
Test component integration	Broken child rendering

Responsive Behavior

Screen	Behavior
Desktop	Centered modal, fixed width
Tablet	Modal with responsive width
Mobile	Bottom sheet with handlebar