Stacked and inline pairs

// apps/docs/examples/ui/description-list.tsximport {  DescriptionItem,  DescriptionList,} from '@workspace/active-ui/components/composed/description-list';import {  Card,  CardContent,  CardHeader,  CardTitle,} from '@workspace/active-ui/components/primitives/card';
/** * Read-only label and value pairs: stacked in three columns at page width, * inline in a narrow card. An item without a value shows a dash; `0` is a * value. The data is fictitious. */export default function DescriptionListExample() {  return (    <div className="grid w-full gap-8">      <DescriptionList columns={3}>        <DescriptionItem label="Policy number">PN-2026-00418</DescriptionItem>        <DescriptionItem label="Premium" className="tabular-nums">          € 1,240.00        </DescriptionItem>        <DescriptionItem label="Start date">1 January 2026</DescriptionItem>        <DescriptionItem label="Claims">{0}</DescriptionItem>        <DescriptionItem label="End date">{null}</DescriptionItem>        <DescriptionItem label="Intermediary">Northwind Advice</DescriptionItem>      </DescriptionList>      <Card className="max-w-xs">        <CardHeader>          <CardTitle>Participant</CardTitle>        </CardHeader>        <CardContent>          <DescriptionList columns={1} orientation="inline">            <DescriptionItem label="Name">Ada Jansen</DescriptionItem>            <DescriptionItem label="Born">3 March 1971</DescriptionItem>            <DescriptionItem label="Scheme">Career average</DescriptionItem>          </DescriptionList>        </CardContent>      </Card>    </div>  );}