@wix/patterns 1.447.0 → 1.448.0

package/dist/docs/MultiBulkActionToolbar.md

@@ -1168,6 +1168,6 @@ Event   |   Description   |
 
 ### Usage
 
-All `` testkit APIs are exposed directly from the `` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
+All `<MultiBulkActionToolbar />` testkit APIs are exposed directly from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
 
 

package/dist/docs/MultiLevelSorting.md

@@ -10,7 +10,7 @@ Allows visitors to apply sorting to multiple columns (in hierarchical order).
 
 See also [Sortable Columns](./?path=/story/features-sort-sortable-columns-sortable-columns--sortable-columns).
 
-`` must be passed to a [``](./?path=/story/base-components-collections-table-table--table) `multiLevelSorting` prop. Note that only `` and `` support sorting.
+`<MultiLevelSorting>` must be passed to a [`<Table>`](./?path=/story/base-components-collections-table-table--table) `multiLevelSorting` prop. Note that only `<Table>` and `<TableGridSwitch>` support sorting.
 
 Make sure to mark each column that you want to be sortable with `sortable: true`.
 
@@ -20,7 +20,7 @@ import { MultiLevelSorting } from '@wix/patterns';
 
 ### Basic Multi Level Sorting
 
-Apply sorting to multiple columns using the `` `multiLevelSorting` prop.
+Apply sorting to multiple columns using the `<Table>` `multiLevelSorting` prop.
 
 ```tsx
 import { Avatar, Page } from '@wix/design-system';
@@ -343,7 +343,7 @@ function SortMode() {
 
 ### Usage
 
-All `` testkit APIs are exposed using the `getMultiLevelSortingPanel` method of `` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
+All `<MultiLevelSorting />` testkit APIs are exposed using the `getMultiLevelSortingPanel` method of `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
 
 
 ## BI

package/dist/docs/Next.js.md

@@ -57,12 +57,12 @@ module.exports = nextConfig;
 const Index: NextPage = () => {
   return (
     <>
-      
-        Create Next App
-        
-      
-+     
-    
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="NextJS Template" />
+      </Head>
++     <PatternsDynamicComponent />
+    </>
   );
 };
 
@@ -77,9 +77,9 @@ export default Index;
 +   {
 +     ssr: false, // Here we instruct Next.js to compile it only as a client side component.
 +     loading: () => (
-+       
-+         
-+       
++       <Box direction="vertical" height="100vh" verticalAlign="middle">
++         <Loader />
++       </Box>
 +     )
 +   }
 + );
@@ -91,11 +91,11 @@ export default Index;
 
 + export const PatternsComponent = () => {
 +   return (
-+     
-+       
-+         
-+       
-+     
++     <WixPatternsEssentialsProvider>
++       <Box height="100vh">
++         <App>
++       </Box>
++     </WixPatternsEssentialsProvider>
 +   );
 };
 
@@ -120,18 +120,18 @@ import { createBrowserHistory } from '@wix/patterns/history';
 
 export const Patterns = () => {
   const router = useRouter();
-  const [wixPatternsContainerOverrides] = useState>(
+  const [wixPatternsContainerOverrides] = useState<Partial<WixPatternsContainerParams>>(
     () => ({
       history: { ...createBrowserHistory(), push: router.push, replace: router.replace }
     }),
   );
 
   return (
-    
-      
+    <WixPatternsContainerOverridesProvider value={wixPatternsContainerOverrides}>
+      <WixPatternsEssentialsProvider>
         The children
-      
-    
+      </WixPatternsEssentialsProvider>
+    </WixPatternsContainerOverridesProvider>
   );
 };
 ```

package/dist/docs/NumberRangeFilter.md

@@ -23,7 +23,7 @@ function PriceRangeExample() {
     }),
   );
 
-  return ;
+  return <NumberRangeFilter filter={filter} min={0} max={100} />;
 }
 ```
 
@@ -31,7 +31,7 @@ function PriceRangeExample() {
 
 | Prop      | Type                             | Default     | Description                                                     |
 | --------- | -------------------------------- | ----------- | --------------------------------------------------------------- |
-| `filter`  | `FilterProps>` | Required    | Filter object containing current range values and update method |
+| `filter`  | `FilterProps<RangeItem<number>>` | Required    | Filter object containing current range values and update method |
 | `decimal` | `boolean`                        | `false`     | Enable decimal number support                                   |
 | `min`     | `number`                         | `undefined` | Minimum allowed value                                           |
 | `max`     | `number`                         | `undefined` | Maximum allowed value                                           |
@@ -50,10 +50,10 @@ The component displays error messages in the following scenarios:
 
 ```typescript
 // Below minimum value error
- // "Value must be greater than or equal to 10"
+<NumberRangeFilter min={10} /> // "Value must be greater than or equal to 10"
 
 // Above maximum value error
- // "Value must be less than or equal to 100"
+<NumberRangeFilter max={100} /> // "Value must be less than or equal to 100"
 
 // Invalid range error
 // When 'from' value is greater than 'to' value
@@ -100,7 +100,7 @@ function ProductFilters() {
   });
 
   return (
-    
+    <NumberRangeFilter filter={priceFilter} decimal={true} min={0} max={1000} />
   );
 }
 ```

package/dist/docs/PageWrapper.md

@@ -6,7 +6,7 @@
 
 ### Description
 
-`PageWrapper` is designed to wrap `` from `@wix/design-system`.
+`PageWrapper` is designed to wrap `<Page/>` from `@wix/design-system`.
 
 It provides the following capabilities children components:
 

package/dist/docs/PatternsReactRouter.md

@@ -13,7 +13,83 @@ This component extends [`BrowserRouter`](https://reactrouter.com/en/main/router-
 ### Usage
 
 1. Import `PatternsReactRouter` and `PatternsReactRoute`.
-1. For each page you want to route to, add a [`PatternsReactRoute`](./?path=%2Fstory%2Fbase-components-pages-routing--patternsreactroute) component inside the the `PatternsReactRouter` component.
+1. For each page you want to route to, add a [`PatternsReactRoute`](./?path=%2Fstory%2Fbase-components-pages-routing--patternsreactroute) component inside the `PatternsReactRouter` component.
+
+### Requirements
+
+`PatternsReactRouter` reads the current page location through
+`container.usePageLocation()`. That value comes from bex-core's dashboard
+context, which is rendered **only** by `withDashboard`, from its `location`
+prop. `WixPatternsProvider` does not supply it — the provider's own
+`environment.pageLocation` feeds the container's `componentId`, not this hook.
+
+Without `withDashboard` above the router, `usePageLocation()` returns
+`undefined` and the router throws:
+
+> It appears that `PatternsReactRouter` is being used incorrectly. Please refer
+> to the documentation to ensure proper implementation.
+
+Nothing catches this before runtime — type checking and bundling both pass,
+because neither renders the page.
+
+So: wrap the routing page with `withDashboard()`, and pass it a `location`.
+
+```jsx
+import { withDashboard } from '@wix/patterns';
+import { WixPatternsProvider } from '@wix/patterns/provider';
+import { PatternsReactRouter, PatternsReactRoute } from '@wix/patterns/router';
+
+const App = withDashboard(() => (
+  <WixPatternsProvider>
+    <PatternsReactRouter>
+      <PatternsReactRoute
+        type="collection"
+        path="/"
+        element={<MyCollectionPage />}
+      />
+      <PatternsReactRoute
+        type="editEntity"
+        path="/:entityId"
+        element={<MyEntityPage />}
+      />
+    </PatternsReactRouter>
+  </WixPatternsProvider>
+));
+```
+
+Under Yoshi BM flow the host passes `location` to your page component, so
+`export default withDashboard(MyPage)` is enough.
+
+In a **Wix CLI app** nothing passes props to the dashboard page component, so
+you must supply `location` yourself from the dashboard SDK:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { dashboard } from '@wix/dashboard';
+import { WixDesignSystemProvider } from '@wix/design-system';
+
+export default function Page() {
+  const [location, setLocation] = useState();
+
+  useEffect(() => {
+    const subscription = dashboard.observeState((_pageParams, environment) => {
+      setLocation(environment.pageLocation);
+    });
+
+    return () => subscription.disconnect();
+  }, []);
+
+  return (
+    <WixDesignSystemProvider>
+      {location ? <App location={location} /> : null}
+    </WixDesignSystemProvider>
+  );
+}
+```
+
+Also use `parentPath`, not `parentPageId`, in the
+[`useEntityPage()`](./?path=%2Fstory%2Fbase-components-pages-entity-page-hooks-useentitypage--useentitypage)
+hook when routing with Patterns Router.
 
 
 ```tsx

package/dist/docs/PickerContent.md

@@ -18,19 +18,19 @@ import { PickerContent } from '@wix/patterns';
 
 #### Overview
 
-Use `` to render a picker inside a ``.
+Use `<PickerContent />` to render a picker inside a `<PickerModal />`.
 
 Use a dynamic import to pass your custom picker content component to `usePickerModal.pickerContentComponent`.
 
 #### API
 
-A picker content component accepts props that are being passed by the parent ``.
+A picker content component accepts props that are being passed by the parent `<PickerModal />`.
 
 We should do the following with those props:
 
-- Forward them to `` and to [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent)
+- Forward them to `<PickerContent />` and to [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent)
 - If we have filters, we should build the filters schema using `props.modalState.filters` raw parameters (see ["With Filters" example](./?path=/story/base-components-collections-picker--pickermodal))
-- We also must wrap with [``](./?path=/story/base-components-providers--wixpatternsprovider) because the parent doesn't do that as it's just a modal and not a collection component.
+- We also must wrap with [`<WixPatternsProvider />`](./?path=/story/base-components-providers--wixpatternsprovider) because the parent doesn't do that as it's just a modal and not a collection component.
 
 ##### `usePickerContent`
 
@@ -59,18 +59,20 @@ export default function ContactsPicker(props) {
   });
 
   return (
-    
-       ({
+    <WixPatternsBMProvider>
+      <PickerContent
+        state={state}
+        renderItem={(contact) => ({
           title: contact.name,
           subtitle: contact.email,
         })}
         renderEmptyState={() => (
-          
+          <EmptyState title="You don’t have any contacts that support this action." />
         )}
         // we must forward the props
         {...props}
       />
-    
+    </WixPatternsBMProvider>
   );
 }
 ```
@@ -87,7 +89,10 @@ export function PickerModalExample() {
     // ...
   });
   return (
-    
+    <PickerModal
+      state={state}
+      // ...
+    />
   );
 }
 ```

package/dist/docs/PickerModal.md

@@ -507,7 +507,7 @@ function PickerModalFilterDropdownExample() {
 
 ### Search Override
 
-You can override the search behavior using the `search` prop. Pass `false` to hide search, or a custom ``
+You can override the search behavior using the `search` prop. Pass `false` to hide search, or a custom `<CollectionSearch />`
 
 ```tsx
 import { Avatar, EmptyState, Page } from '@wix/design-system';
@@ -625,10 +625,10 @@ To allow this feature to work, we split the modal integration to 2 components -
 
 Integrating with `PickerModal` is usually done by the following steps
 
-- Writing a custom component for the modal content using [``](./?path=/story/base-components-collections-picker--pickercontent)
+- Writing a custom component for the modal content using [`<PickerContent />`](./?path=/story/base-components-collections-picker--pickercontent)
 - Initializing a state object using [`usePickerModal`](./?path=/story/base-components-collections-picker-hooks--usepickermodal) by passing the custom modal content component as a dynamic import to the `pickerContentComponent` option
-- Passing the state object to ``
-- Rendering a button that will open the modal (`Wix Patterns` provides a ready-to-use button ``)
+- Passing the state object to `<PickerModal />`
+- Rendering a button that will open the modal (`Wix Patterns` provides a ready-to-use button `<PickerModalOpenButton />`)
 
 
 

package/dist/docs/PrimaryActionButton.md

@@ -11,7 +11,7 @@ The `PrimaryActionButton` component displays a primary action button in the tabl
 
 ### Basic Primary Action Button
 
-Adds a Primary Action Button using the `` `primaryActionButton` prop.
+Adds a Primary Action Button using the `<Table>` `primaryActionButton` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -79,7 +79,7 @@ function Default() {
 
 ### Customized Primary Action Button
 
-`` is customized using its props and children.
+`<PrimaryActionButton>` is customized using its props and children.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */

package/dist/docs/SettingsPage.AdditionalContent.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A slot component for the side panel of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside `` alongside ``. Supports an optional `sticky` prop to keep the content fixed while scrolling.
+A slot component for the side panel of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside `<SettingsPage.Content>` alongside `<SettingsPage.MainContent>`. Supports an optional `sticky` prop to keep the content fixed while scrolling.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns/page';

package/dist/docs/SettingsPage.Card.md

@@ -213,18 +213,18 @@ import { SettingsPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
-
-  
-  
-    
-        {/* ← this component */}
-        
+<SettingsPage state={state}>
+  <SettingsPage.Header title={{ text: "Settings" }} />
+  <SettingsPage.Content>
+    <SettingsPage.MainContent>
+      <SettingsPage.Card>  {/* ← this component */}
+        <SettingsPage.Card.Content>
           {/* form fields */}
-        
-      
-    
-  
-
+        </SettingsPage.Card.Content>
+      </SettingsPage.Card>
+    </SettingsPage.MainContent>
+  </SettingsPage.Content>
+</SettingsPage>
 ```
 
 ### Props

package/dist/docs/SettingsPage.Content.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A layout slot for the body of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Wraps `` and optionally `` to create the two-column layout.
+A layout slot for the body of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Wraps `<SettingsPage.MainContent>` and optionally `<SettingsPage.AdditionalContent>` to create the two-column layout.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns/page';

package/dist/docs/SettingsPage.Header.md

@@ -149,7 +149,7 @@ function Basic() {
 
 ### Overview
 
-The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of ``.
+The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of `<SettingsPage>`.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns/page';
@@ -158,11 +158,14 @@ import { SettingsPage } from '@wix/patterns/page';
 ### Composition
 
 ```tsx
-
-  }
+<SettingsPage state={state}>
+  <SettingsPage.Header  {/* ← this component */}
+    title={{ text: "Settings" }}
+    subtitle="Configure your preferences"
+    moreActions={<MoreActions items={[...]} />}
   />
-  ...
-
+  <SettingsPage.Content>...</SettingsPage.Content>
+</SettingsPage>
 ```
 
 ### Props

package/dist/docs/SettingsPage.MainContent.md

@@ -6,7 +6,7 @@
 
 ### Overview
 
-A slot component for the main content area of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside ``. This is where you render the primary form fields and cards.
+A slot component for the main content area of a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Place it inside `<SettingsPage.Content>`. This is where you render the primary form fields and cards.
 
 ```tsx
 import { SettingsPage } from '@wix/patterns/page';

package/dist/docs/SettingsPageState.md

@@ -13,7 +13,7 @@
 - **Save / cancel flow** — calls `onSave` and `onCancel` with success/error toasts
 - **Dirty-form protection** — warns on `beforeunload` when the form has unsaved changes
 
-Pass the returned state to ``.
+Pass the returned state to `<SettingsPage state={state}>`.
 
 ```tsx
 import { useSettingsPage } from '@wix/patterns';

package/dist/docs/Suggestions.md

@@ -334,14 +334,14 @@ import { SuggestionsUniDriver } from '@wix/patterns/testkit/unidriver';
 
 | Method | Return Type | Description |
 |--------|-------------|-------------|
-| `exists()` | `Promise` | Returns true if the suggestions component exists in the DOM |
-| `isLoading()` | `Promise` | Returns true if the component is in loading state |
-| `hasOffers()` | `Promise` | Returns true if offers are displayed |
-| `isEmpty()` | `Promise` | Returns true if no offers or loading state are present |
-| `getCardsCount()` | `Promise` | Returns the number of cards currently displayed |
-| `getCardAt(index)` | `Promise` | Returns the card element at the specified index |
-| `carousel()` | `Promise` | Returns the carousel driver (when in carousel mode) |
-| `container()` | `Promise` | Returns the container element (when in inline mode) |
+| `exists()` | `Promise<boolean>` | Returns true if the suggestions component exists in the DOM |
+| `isLoading()` | `Promise<boolean>` | Returns true if the component is in loading state |
+| `hasOffers()` | `Promise<boolean>` | Returns true if offers are displayed |
+| `isEmpty()` | `Promise<boolean>` | Returns true if no offers or loading state are present |
+| `getCardsCount()` | `Promise<number>` | Returns the number of cards currently displayed |
+| `getCardAt(index)` | `Promise<UniDriver>` | Returns the card element at the specified index |
+| `carousel()` | `Promise<CarouselUniDriver>` | Returns the carousel driver (when in carousel mode) |
+| `container()` | `Promise<UniDriver>` | Returns the container element (when in inline mode) |
 
 ---
 
@@ -359,8 +359,8 @@ import { MarketingCardUniDriver } from '@wix/patterns/testkit/unidriver';
 
 | Method | Return Type | Description |
 |--------|-------------|-------------|
-| `exists()` | `Promise` | Returns true if the card exists in the DOM |
-| `getTitleText()` | `Promise` | Returns the card's title text |
+| `exists()` | `Promise<boolean>` | Returns true if the card exists in the DOM |
+| `getTitleText()` | `Promise<string>` | Returns the card's title text |
 | `description.subtitle` | `TextUniDriver` | Driver for the card's subtitle text |
 | `description.learnMore` | `TextButtonUniDriver` | Driver for the "Learn More" text button |
 | `ctaButton` | `ButtonUniDriver` | Driver for the card's CTA button |

package/dist/docs/SummaryBar.md

@@ -12,7 +12,7 @@ This data is not updated dynamically as part of a collection's fetch, meaning yo
 
 ### Success
 
-This example shows the summary bar in the `"success"` state using the `` `status` prop.
+This example shows the summary bar in the `"success"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -94,7 +94,7 @@ function SuccessState() {
 
 ### Loading
 
-This example shows the summary bar in the `"loading"` state using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -176,7 +176,7 @@ function LoadingState() {
 
 ### Error
 
-This example shows the summary bar in the `"error"` state using the `` `status` prop.
+This example shows the summary bar in the `"error"` state using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -260,7 +260,7 @@ function ErrorState() {
 
 ### Loading with success
 
-This example shows the summary bar in the `"loading"` state, that changes to the `"success"` state when the data is fetched, using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state, that changes to the `"success"` state when the data is fetched, using the `<SummaryBar>` `status` prop.
 
 ```tsx
 /* eslint-disable import/no-extraneous-dependencies */
@@ -374,7 +374,7 @@ function LoadWithSuccess() {
 
 ### Loading with error
 
-This example shows the summary bar in the `"loading"` state, that changes to the `"error"` state when the data fetch fails, using the `` `status` prop.
+This example shows the summary bar in the `"loading"` state, that changes to the `"error"` state when the data fetch fails, using the `<SummaryBar>` `status` prop.
 The `onRetry` prop is used to retry the fetch the data when **Reload** is clicked.
 
 ```tsx
@@ -510,6 +510,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getSummaryBar` API is exposed from the `` [testkit](./?path=/story/components-collection--table&tab=Testkit)
+`getSummaryBar` API is exposed from the `<Table />` [testkit](./?path=/story/components-collection--table&tab=Testkit)
 
 

package/dist/docs/TableTopNotification.md

@@ -311,6 +311,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getTopNotification` API is exposed from the `` [testkit](./?path=/story/base-components-collections-table-table--table&tab=Testkit)
+`getTopNotification` API is exposed from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&tab=Testkit)
 
 

package/dist/docs/TabsFilter.md

@@ -24,7 +24,7 @@ import { TabsFilter } from '@wix/patterns';
 
 ### Basic Tabs
 
-This example uses the `` `data` prop to include filter tabs in the table.
+This example uses the `<TabsFilter>` `data` prop to include filter tabs in the table.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -127,7 +127,7 @@ function TabsFilterExample() {
 
 ### Tabs with a basic counter
 
-This example uses the `` `counterBadge` prop to include a counter badge in the table's filter tabs.
+This example uses the `<TabsFilter>` `counterBadge` prop to include a counter badge in the table's filter tabs.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -283,7 +283,7 @@ function TabsFilterTotalParensExample() {
 
 ### Tabs with a counter badge
 
-This example uses the `` `counterBadge` prop to include a counter badge in the table's filter tabs.
+This example uses the `<TabsFilter>` `counterBadge` prop to include a counter badge in the table's filter tabs.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -441,7 +441,7 @@ function TabsFilterTotalBadgeExample() {
 
 ### Disabled tabs
 
-This example uses the `` `disabled` prop to make tabs with no items non-interactive.
+This example uses the `<TabsFilter>` `disabled` prop to make tabs with no items non-interactive.
 
 ```tsx
 import { Avatar } from '@wix/design-system';
@@ -587,6 +587,6 @@ Event   |   Description   |
 
 ### Usage
 
-`getToolbarTabs` API is exposed from the `` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
+`getToolbarTabs` API is exposed from the `<Table />` [testkit](./?path=/story/base-components-collections-table-table--table&activeTab=Testkit)
 
 

package/dist/docs/Tags.md

@@ -40,7 +40,7 @@ import { CollectionPage } from '@wix/patterns/page';
   function TableWithTags() {
   const httpClient = useHttpClient();
 
-  const state = useTableCollection({
+  const state = useTableCollection<MyEntity>({
     queryName: 'my-entity-table-name',
     paginationMode: 'offset',
     fqdn: 'wix.domain.MyEntityService.v1.myEntity',
@@ -79,12 +79,20 @@ import { CollectionPage } from '@wix/patterns/page';
 
 
   return (
-    
-      
-        
+    <CollectionPage
+      <CollectionPage.Header />
+      <CollectionPage.Content>
+        <Table
+          showSelection
+          state={state}
++          tags={
++            <Tags
++              entityTypeName="My Entity Name"
++              bulkUpdateTags={handleBulkUpdateTags}
++            />
 +          }
           bulkActionToolbar={() => (
-            
+            <MultiBulkActionToolbar />
           )}
           columns={[
             {
@@ -96,8 +104,8 @@ import { CollectionPage } from '@wix/patterns/page';
             },
           ]}
         />
-      
-    
+      </Page.Content>
+    </CollectionPage>
     );
   }
 ```