@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/NumberRangeFilter.md

@@ -214,17 +214,10 @@ function DecimalNumberRangeFilter() {
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `filter` | `Filter<RangeItem<number>>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
-| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
-| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
-| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
-| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
-| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
-| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
-| `popoverProps` | `PopoverCommonProps` | No | - | @deprecated |
-| `onAppliedFilterTagRemove` | `((item: RangeItem<number>) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
-| `renderToolbarTag` | `((item: RangeItem<number>) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
-| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |
+Read `dist/dts-bundle/components/NumberRangeFilter.d.ts` for `NumberRangeFilter`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 

package/dist/docs/OperatorFilterPicker.md

@@ -179,17 +179,10 @@ export default operatorFilterWithTableExample;
 
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `filter` | `Filter<OperatorFilterValue<T>>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
-| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
-| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
-| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
-| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
-| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
-| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
-| `popoverProps` | `PopoverCommonProps` | No | - | @deprecated |
-| `onAppliedFilterTagRemove` | `((item: OperatorFilterValue<T>) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
-| `renderToolbarTag` | `((item: OperatorFilterValue<T>) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
-| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |
+Read `dist/dts-bundle/components/OperatorFilterPicker.d.ts` for `OperatorFilterPicker`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 

package/dist/docs/PatternsReactRoute.md

@@ -19,13 +19,12 @@ import { PatternsReactRoute } from '@wix/patterns/router';
 
 ## API
 
-### Extends
-
-[React Router Route](https://reactrouter.com/en/main/route/route)
-
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `type` | `"collection" \| "other" \| "createEntity" \| "editEntity"` | Yes | - | Page type. Supported values: <br /> - `"collection"` <br /> - `"createEntity"` <br /> - `"editEntity"` <br /> - `"other"` <br /> |
+Read `dist/dts-bundle/components/PatternsReactRoute.d.ts` for `PatternsReactRoute`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 

package/dist/docs/PatternsReactRouter.md

@@ -98,3 +98,12 @@ import { PatternsReactRouter } from '@wix/patterns/router';
 
 ## API
 
+### Props
+
+Read `dist/dts-bundle/components/PatternsReactRouter.d.ts` for `PatternsReactRouter`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
+

package/dist/docs/PickerModal/multi-select.tsx

@@ -0,0 +1,97 @@
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  stringsArrayFilter,
+  usePickerContent,
+  Filter,
+} from '@wix/patterns';
+import { usePickerModal } from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function PickerModalMultiSelect() {
+  const httpClient = useHttpClient();
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact, ContactsFilters>,
+    ) {
+      const state = usePickerContent({
+        fetchErrorMessage: ({ err }) => String(err),
+        modalState: props.modalState,
+        filters: {
+          level: stringsArrayFilter(props.modalState.filters.level),
+        },
+        itemName: (contact) => contact.id as string,
+      });
+
+      return (
+        <PickerContent
+          state={state}
+          showSelectAllCheckbox
+          renderItem={(contact) => ({
+            subtitle: contact.level,
+            image: <Avatar size="size60" shape="square" name={contact.name} />,
+          })}
+          {...props}
+        />
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact, ContactsFilters>({
+    queryName: 'PickerModalSelectAll',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => ({
+          items: contacts as Contact[],
+          total: pagingMetadata?.total,
+        }));
+    },
+    limit: 100,
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select Contacts
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select Contacts"
+              state={state}
+              multiple
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}

package/dist/docs/PickerModal/pre-selected-item.tsx

@@ -0,0 +1,120 @@
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  usePickerContent,
+} from '@wix/patterns';
+import {
+  WixPatternsEssentialsProvider,
+  usePickerModal,
+} from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+function PickerModalInitialSelect() {
+  const httpClient = useHttpClient();
+
+  const selection = React.useRef<Contact[]>([]);
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact>,
+    ) {
+      const state = usePickerContent({
+        modalState: props.modalState,
+        fetchErrorMessage: ({ err }) => String(err),
+        initialSelect: {
+          defaultStatus: 'unchecked',
+          values: selection.current.map((value) => ({
+            value,
+            status: 'checked',
+          })),
+        },
+        itemName: (contact) => contact.id as string,
+      });
+
+      return (
+        // wrap with a provider that suits your environment
+        <WixPatternsEssentialsProvider>
+          <PickerContent
+            state={state}
+            renderItem={(contact) => ({
+              subtitle: contact.level,
+              image: (
+                <Avatar size="size60" shape="square" name={contact.name} />
+              ),
+            })}
+            renderEmptyState={() => (
+              <EmptyState title="You don’t have any contacts that support this action." />
+            )}
+            {...props}
+          />
+        </WixPatternsEssentialsProvider>
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact>({
+    queryName: 'PickerModalExample',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => ({
+          items: contacts as Contact[],
+          total: pagingMetadata?.total,
+        }));
+    },
+    fetchInitialProps: () => {
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit: 25, offset: 0 }, filter: {} },
+          }),
+        )
+        .then(({ data: { contacts = [] } }) => {
+          selection.current = contacts.slice(3, 6);
+        });
+    },
+
+    limit: 25,
+    // Usually we will use dynamic import, i.e pickerContentComponent: () => import('./ContactsPicker')
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select a Contact
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select a Contact"
+              state={state}
+              multiple
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}

package/dist/docs/PickerModal/search-override.tsx

@@ -0,0 +1,99 @@
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  stringsArrayFilter,
+  usePickerContent,
+  Filter,
+  CollectionSearch,
+} from '@wix/patterns';
+import { usePickerModal } from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function SearchOverride() {
+  const httpClient = useHttpClient();
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact, ContactsFilters>,
+    ) {
+      const state = usePickerContent({
+        fetchErrorMessage: ({ err }) => String(err),
+        modalState: props.modalState,
+        filters: {
+          level: stringsArrayFilter(props.modalState.filters.level),
+        },
+        itemName: (contact) => contact.id as string,
+      });
+
+      return (
+        <PickerContent
+          state={state}
+          search={<CollectionSearch placeholder="Custom placeholder..." />}
+          showSelectAllCheckbox
+          renderItem={(contact) => ({
+            subtitle: contact.level,
+            image: <Avatar size="size60" shape="square" name={contact.name} />,
+          })}
+          {...props}
+        />
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact, ContactsFilters>({
+    queryName: 'PickerModalSelectAll',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => ({
+          items: contacts as Contact[],
+          total: pagingMetadata?.total,
+        }));
+    },
+    limit: 100,
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select Contacts
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select Contacts"
+              state={state}
+              multiple
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}

package/dist/docs/PickerModal/single-selection.tsx

@@ -0,0 +1,98 @@
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  usePickerContent,
+} from '@wix/patterns';
+import {
+  WixPatternsEssentialsProvider,
+  usePickerModal,
+} from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+function PickerModalSingleSelectExample() {
+  const httpClient = useHttpClient();
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact>,
+    ) {
+      const state = usePickerContent({
+        modalState: props.modalState,
+        fetchErrorMessage: ({ err }) => String(err),
+        itemName: (contact) => contact.id as string,
+      });
+
+      return (
+        // wrap with a provider that suits your environment
+        <WixPatternsEssentialsProvider>
+          <PickerContent
+            state={state}
+            renderItem={(contact) => ({
+              subtitle: contact.level,
+              image: (
+                <Avatar size="size60" shape="square" name={contact.name} />
+              ),
+            })}
+            renderEmptyState={() => (
+              <EmptyState title="You don’t have any contacts that support this action." />
+            )}
+            {...props}
+          />
+        </WixPatternsEssentialsProvider>
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact>({
+    queryName: 'PickerModalSingleSelectExample',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => ({
+          items: contacts as Contact[],
+          total: pagingMetadata?.total,
+        }));
+    },
+    limit: 25,
+    // Usually we will use dynamic import, i.e pickerContentComponent: () => import('./ContactsPicker')
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select a Contact
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select a Contact"
+              state={state}
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}

package/dist/docs/PickerModal/with-filter-dropdown.tsx

@@ -0,0 +1,139 @@
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  usePickerContent,
+  idNameArrayFilter,
+  SingleSelectFilter,
+  Filter,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import {
+  WixPatternsEssentialsProvider,
+  usePickerModal,
+} from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+type ContactFilters = {
+  level: Filter<{ id: string; name: string }[]>;
+};
+
+function PickerModalFilterDropdownExample() {
+  const httpClient = useHttpClient();
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact, ContactFilters>,
+    ) {
+      const state = usePickerContent({
+        modalState: props.modalState,
+        fetchErrorMessage: ({ err }) => String(err),
+        filters: {
+          level: idNameArrayFilter(props.modalState.filters.level),
+        },
+        itemName: (contact) => contact.id as string,
+      });
+
+      const filterTypesCollection = useStaticListFilterCollection(
+        state.filters.level,
+        [
+          { id: '1', name: 'Beginner' },
+          { id: '2', name: 'Amateur' },
+          { id: '3', name: 'Semi-Pro' },
+          { id: '4', name: 'Professional' },
+          { id: '5', name: 'World Class' },
+          { id: '6', name: 'Legendary' },
+          { id: '7', name: 'Ultimate' },
+          { id: '8', name: 'Ye' },
+        ],
+      );
+
+      return (
+        // wrap with a provider that suits your environment
+        <WixPatternsEssentialsProvider>
+          <PickerContent
+            filterComponent={
+              <SingleSelectFilter
+                filter={state?.filters?.level}
+                collection={filterTypesCollection}
+                renderItem={(item, index) => ({
+                  title: item.name,
+                })}
+              />
+            }
+            state={state}
+            renderItem={(contact) => ({
+              subtitle: contact.level,
+              image: (
+                <Avatar size="size60" shape="square" name={contact.name} />
+              ),
+            })}
+            {...props}
+          />
+        </WixPatternsEssentialsProvider>
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact, ContactFilters>({
+    queryName: 'PickerModalSingleSelectExample',
+    filters: {
+      level: {
+        initialValue: [{ id: '1', name: 'Beginner' }],
+      },
+    },
+    fetchData: (query: OffsetQuery<ContactFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: {
+              paging: { limit, offset },
+              filter: { level: filters.level?.[0].id },
+            },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => {
+          return {
+            items: contacts as Contact[],
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    limit: 25,
+    // Usually we will use dynamic import, i.e pickerContentComponent: () => import('./ContactsPicker')
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select a Contact
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select a Contact"
+              state={state}
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}