DialogModal window for focused interactions.

import Dialog from '@/components/Dialog';import { CardTitle, CardContent } from '@/components/Card';import Button from '@/components/Button';
export function Example() {  return (    <Dialog $target={<Button>Open Dialog</Button>}>      <CardTitle>Lorem Dialog</CardTitle>      <CardContent>        Lorem ipsum dolor sit amet, consectetur adipiscing elit.        Sed do eiusmod tempor incididunt ut labore et dolore.      </CardContent>    </Dialog>  );}

import Dialog from '@/components/Dialog';import { CardTitle, CardContent, CardFooter } from '@/components/Card';import Button from '@/components/Button';
export function Example() {  return (    <Dialog $target={<Button $type="danger">Delete Item</Button>}>      <CardTitle>Confirm Delete</CardTitle>      <CardContent>        Are you sure you want to delete this item? This action cannot be undone.      </CardContent>      <CardFooter>        <Button $type="danger">Delete</Button>        <Button $type="ghost">Cancel</Button>      </CardFooter>    </Dialog>  );}

import Dialog from '@/components/Dialog';import { CardTitle, CardContent, CardFooter } from '@/components/Card';import Button from '@/components/Button';import Input from '@/components/Input';
export function Example() {  return (    <Dialog $target={<Button>Add User</Button>}>      <CardTitle>Create New User</CardTitle>      <CardContent>        Enter the details for the new user account.        <Input $title="Name" placeholder="Enter full name" />        <Input $title="Email" type="email" placeholder="Enter email address" />      </CardContent>      <CardFooter>        <Button>Create User</Button>        <Button $type="ghost">Cancel</Button>      </CardFooter>    </Dialog>  );}