Sheet

import { Button } from "@/components/optics/button";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";import { Sheet, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetPopup, SheetTitle, SheetTrigger } from "@/components/optics/sheet";<Sheet>  <SheetTrigger render={<Button size="lg" variant="raised">Open Sheet</Button>} />  <SheetPopup variant="rounded">    <SheetHeader>      <SheetTitle>        Edit profile      </SheetTitle>      <SheetDescription>        Make changes to your profile here. Click save when you're done.      </SheetDescription>    </SheetHeader>    <div className="grid gap-4 p-4">      <div className="grid grid-cols-4 items-center gap-4">        <Label          className="text-right"          htmlFor="name"        >          Name        </Label>        <Input          className="col-span-3"          defaultValue="Pedro Duarte"          id="name"        />      </div>      <div className="grid grid-cols-4 items-center gap-4">        <Label          className="text-right"          htmlFor="username"        >          Username        </Label>        <Input          className="col-span-3"          defaultValue="@peduarte"          id="username"        />      </div>    </div>    <SheetFooter>      <SheetClose render={<Button type="submit">Save changes</Button>} />    </SheetFooter>  </SheetPopup></Sheet>