Controlled, without the corner button

// apps/docs/examples/ui/dialog-controlled.tsx'use client';
import {useState} from 'react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,} from '@workspace/active-ui/components/primitives/dialog';
/** * Open state owned by the application: `open` and `onOpenChange`. Without * the corner button (`showCloseButton={false}`), the dialog still closes * with Escape, a click outside it, or the buttons in the footer. */export default function DialogControlled() {  const [open, setOpen] = useState(false);  const [last, setLast] = useState('none yet');  const close = (reason: string) => {    setLast(reason);    setOpen(false);  };  return (    <div className="flex flex-wrap items-center gap-3">      <Button variant="outline" onClick={() => setOpen(true)}>        Show the terms      </Button>      <span className="text-muted-foreground text-sm" role="status">        Last choice: {last}      </span>      <Dialog        open={open}        onOpenChange={(next) => {          if (!next) close('dismissed');        }}      >        <DialogContent showCloseButton={false}>          <DialogHeader>            <DialogTitle>Terms of use</DialogTitle>            <DialogDescription>              Read the terms before you continue.            </DialogDescription>          </DialogHeader>          <p>            The service is provided as is. You keep the rights to the data you            enter, and you can export it at any time.          </p>          <DialogFooter>            <Button variant="outline" onClick={() => close('declined')}>              Decline            </Button>            <Button onClick={() => close('accepted')}>Accept</Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  );}