Dialog with custom close button

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <form>
        <DialogTrigger as-child>
          <Button variant="outline">Custom Close Button</Button>
        </DialogTrigger>
        <DialogContent
          class="[&>[data-slot=dialog-close]]:bg-background [&>[data-slot=dialog-close]]:-end-6 [&>[data-slot=dialog-close]]:-top-6 [&>[data-slot=dialog-close]]:size-7 [&>[data-slot=dialog-close]]:rounded-full [&>[data-slot=dialog-close]]:border [&>[data-slot=dialog-close]]:shadow-sm"
        >
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done. Your profile will be updated
              immediately.
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <FieldLabel for="name-1">Name</FieldLabel>
              <Input id="name-1" name="name" value="Albert Einstein" />
            </Field>
            <Field>
              <FieldLabel for="username-1">Username</FieldLabel>
              <Input id="username-1" name="username" value="@albert" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose as-child>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  </div>
</template>