import { useState } from "react"import {  DialogStack,  DialogStackBody,  DialogStackContent,  DialogStackDescription,  DialogStackFooter,  DialogStackHeader,  DialogStackNext,  DialogStackOverlay,  DialogStackPrevious,  DialogStackTitle,  DialogStackTrigger,} from "@/components/kibo-ui/dialog-stack/index"import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"export default function DialogStackDemo() {  const [open, setOpen] = useState(true)  return (    <DialogStack open={open} onOpenChange={setOpen} className="w-full max-w-sm">      <DialogStackTrigger onClick={() => setOpen(true)}>Edit profile</DialogStackTrigger>      <DialogStackOverlay />      <DialogStackBody>        <DialogStackContent>          <DialogStackHeader>            <DialogStackTitle>Update your profile</DialogStackTitle>            <DialogStackDescription>Keep your account details up to date.</DialogStackDescription>          </DialogStackHeader>          <div className="grid gap-3 py-4">            <div className="grid gap-2">              <Label htmlFor="name">Name</Label>              <Input id="name" defaultValue="Alex Morgan" />            </div>            <div className="grid gap-2">              <Label htmlFor="email">Email</Label>              <Input id="email" type="email" defaultValue="alex@example.com" />            </div>          </div>          <DialogStackFooter>            <DialogStackNext asChild>              <Button>Continue</Button>            </DialogStackNext>          </DialogStackFooter>        </DialogStackContent>        <DialogStackContent>          <DialogStackHeader>            <DialogStackTitle>Review changes</DialogStackTitle>            <DialogStackDescription>Your profile is ready to be updated.</DialogStackDescription>          </DialogStackHeader>          <DialogStackFooter>            <DialogStackPrevious asChild>              <Button variant="outline">Back</Button>            </DialogStackPrevious>            <DialogStackTrigger asChild onClick={() => setOpen(false)}>              <Button>Save changes</Button>            </DialogStackTrigger>          </DialogStackFooter>        </DialogStackContent>      </DialogStackBody>    </DialogStack>  )}