Build a Toast Notification System

Problem/Feature Description

A SaaS dashboard needs a reusable toast notification system to display feedback messages to users. Build it using React and TypeScript.

The system should support three notification types:

• Success -- green, with a checkmark icon (e.g., "Changes saved successfully")
• Error -- red, with an X/warning icon (e.g., "Failed to save. Please try again.")
• Info -- blue, with an info icon (e.g., "New version available")

Behavior:

• Toasts appear in the top-right corner of the viewport, stacked vertically
• Each toast auto-dismisses after 5 seconds
• Each toast has a close button (X icon) for manual dismissal
• Toasts slide in from the right with a CSS animation
• Multiple toasts can be visible at once (max 5, oldest dismissed first)

Provide a useToast hook that other components can use:

const { showToast } = useToast();
showToast({ type: 'success', message: 'Item created!' });
showToast({ type: 'error', message: 'Failed to delete item.' });
showToast({ type: 'info', message: 'Your session will expire in 5 minutes.' });

Also build a small demo component that has three buttons (one for each toast type) to test the system.

Output Specification

Produce:

• src/components/ToastProvider.tsx -- context provider and toast container
• src/components/Toast.tsx -- individual toast component
• src/hooks/useToast.ts -- the hook for triggering toasts
• src/components/Toast.css -- styles and animations
• src/components/ToastDemo.tsx -- demo component with trigger buttons