Several events from a searchable list

// apps/docs/examples/ui/search-multi-combobox.tsx'use client';
import {useState} from 'react';
import {SearchMultiCombobox} from '@workspace/active-ui/components/composed/search-multi-combobox';import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';
const EVENTS = [  {    value: 'participant.created',    label: 'Participant added',    keywords: 'participant.created',  },  {    value: 'participant.updated',    label: 'Participant changed',    keywords: 'participant.updated',  },  {    value: 'statement.sent',    label: 'Statement sent',    keywords: 'statement.sent',  },  {    value: 'statement.failed',    label: 'Statement failed',    keywords: 'statement.failed',  },  {    value: 'import.finished',    label: 'Import finished',    keywords: 'import.finished',  },];
/** * A searchable multiple choice. The menu stays open while you choose; the * closed button shows up to two labels and then the count. The technical * event keys are searchable but not shown. What an empty choice means is the * application's decision. */export default function SearchMultiComboboxExample() {  const [events, setEvents] = useState<string[]>(['statement.sent']);  return (    <Field className="w-full max-w-xs">      <FieldLabel htmlFor="webhook-events">Send a webhook on</FieldLabel>      <SearchMultiCombobox        id="webhook-events"        options={EVENTS}        value={events}        onValueChange={setEvents}        placeholder="Choose events"        searchLabel="Search events"        searchPlaceholder="Search…"        emptyText="No event found."        summaryText={(count) => (count === 1 ? '1 event' : `${count} events`)}        clearLabel="Clear the choice"        locale="en"        aria-describedby="webhook-events-value"      />      <FieldDescription id="webhook-events-value">        Value: <code>{JSON.stringify(events)}</code>      </FieldDescription>    </Field>  );}