Three tones, and an announced failure

// apps/docs/examples/ui/alert.tsx'use client';
import {useState} from 'react';import {AlertTriangleIcon, InfoIcon, XCircleIcon} from 'lucide-react';
import {  Alert,  AlertAction,  AlertDescription,  AlertTitle,} from '@workspace/active-ui/components/primitives/alert';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * A message in the page, in three tones. The first two are part of the page * and carry no role; the third appears after an action and is announced, so * it carries `role="alert"`. The tone is the look, the role the announcement: * you choose both. */export default function AlertExample() {  const [failed, setFailed] = useState(false);  return (    <div className="flex w-full max-w-lg flex-col gap-4">      <Alert>        <InfoIcon aria-hidden />        <AlertTitle>Statements go out on 1 November</AlertTitle>        <AlertDescription>          Changes made after 25 October appear on the next statement.        </AlertDescription>      </Alert>      <Alert variant="warning">        <AlertTriangleIcon aria-hidden />        <AlertTitle>Two participants have no address</AlertTitle>        <AlertDescription>          They receive their statement in the portal only.        </AlertDescription>        <AlertAction>          <Button variant="outline" size="sm">            Review          </Button>        </AlertAction>      </Alert>      <Button        variant="outline"        className="self-start"        onClick={() => setFailed(true)}        disabled={failed}      >        Send the statements      </Button>      {failed ? (        <Alert variant="destructive" role="alert">          <XCircleIcon aria-hidden />          <AlertTitle>The statements were not sent</AlertTitle>          <AlertDescription>            The mail service did not answer. Nothing was sent; try again in a            few minutes. (This example always fails.)          </AlertDescription>          <AlertAction>            <Button              variant="outline"              size="sm"              onClick={() => setFailed(false)}            >              Try again            </Button>          </AlertAction>        </Alert>      ) : null}    </div>  );}