A value, groups and the small size

// apps/docs/examples/ui/select.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  Select,  SelectContent,  SelectGroup,  SelectItem,  SelectLabel,  SelectSeparator,  SelectTrigger,  SelectValue,} from '@workspace/active-ui/components/primitives/select';
/** * One choice from a list in a popup. The trigger shows the label of the * chosen item, not its value: `Select` derives the labels from its items. * Items can be grouped under labels and disabled. */export default function SelectExample() {  const [frequency, setFrequency] = useState<string | null>('monthly');  return (    <div className="grid w-full max-w-xs gap-6">      <Field>        <FieldLabel id="select-frequency-label">Statement frequency</FieldLabel>        <Select          value={frequency}          onValueChange={(value) => setFrequency(value)}        >          <SelectTrigger            className="w-full"            aria-labelledby="select-frequency-label"          >            <SelectValue />          </SelectTrigger>          <SelectContent>            <SelectItem value="monthly">Every month</SelectItem>            <SelectItem value="quarterly">Every quarter</SelectItem>            <SelectItem value="yearly">Every year</SelectItem>            <SelectItem value="never" disabled>              Never (required by law)            </SelectItem>          </SelectContent>        </Select>        <FieldDescription>Value: {frequency}</FieldDescription>      </Field>
      <Field>        <FieldLabel id="select-zone-label">Time zone</FieldLabel>        <Select>          <SelectTrigger className="w-full" aria-labelledby="select-zone-label">            <SelectValue placeholder="Choose a time zone" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectLabel>Europe</SelectLabel>              <SelectItem value="Europe/Amsterdam">Amsterdam</SelectItem>              <SelectItem value="Europe/London">London</SelectItem>            </SelectGroup>            <SelectSeparator />            <SelectGroup>              <SelectLabel>America</SelectLabel>              <SelectItem value="America/New_York">New York</SelectItem>              <SelectItem value="America/Chicago">Chicago</SelectItem>            </SelectGroup>          </SelectContent>        </Select>      </Field>
      <Field>        <FieldLabel id="select-size-label">Rows per page</FieldLabel>        <Select defaultValue="25">          <SelectTrigger size="sm" aria-labelledby="select-size-label">            <SelectValue />          </SelectTrigger>          <SelectContent>            <SelectItem value="10">10</SelectItem>            <SelectItem value="25">25</SelectItem>            <SelectItem value="50">50</SelectItem>          </SelectContent>        </Select>      </Field>    </div>  );}