Five tones in two appearances

// apps/docs/examples/ui/status-badge.tsximport {  StatusBadge,  type StatusTone,} from '@workspace/active-ui/components/composed/status-badge';
// A domain status mapped to a generic tone: the mapping is the application's.const STATUSES: {label: string; tone: StatusTone}[] = [  {label: 'Draft', tone: 'neutral'},  {label: 'Scheduled', tone: 'info'},  {label: 'Sent', tone: 'success'},  {label: 'Waiting for approval', tone: 'warning'},  {label: 'Failed', tone: 'danger'},];
/** * The five tones, as a pill to scan and as a dot for dense lists. The word * carries the meaning; the colour supports it. */export default function StatusBadgeExample() {  return (    <div className="grid gap-6 sm:grid-cols-2">      <ul className="grid justify-items-start gap-2" aria-label="Soft">        {STATUSES.map((status) => (          <li key={status.tone}>            <StatusBadge tone={status.tone}>{status.label}</StatusBadge>          </li>        ))}      </ul>      <ul className="grid gap-2" aria-label="Dot">        {STATUSES.map((status) => (          <li key={status.tone}>            <StatusBadge tone={status.tone} appearance="dot">              {status.label}            </StatusBadge>          </li>        ))}      </ul>    </div>  );}