@wix/patterns 1.446.0 → 1.448.0

package/dist/docs/EntityPage.MainContent.md

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

package/dist/docs/EntityPageState.md

@@ -14,7 +14,7 @@
 - **Dirty-form protection** — warns on `beforeunload` when the form has unsaved changes
 - **Navigation** — supports both Patterns Router (`parentPath`) and legacy BM navigation (`parentPageId`)
 
-Pass the returned state to `` and use [`useEntity`](./?path=/story/base-components-pages-entity-page-hooks-useentity--useentity) to read the entity reactively.
+Pass the returned state to `<EntityPage state={state}>` and use [`useEntity`](./?path=/story/base-components-pages-entity-page-hooks-useentity--useentity) to read the entity reactively.
 
 ```tsx
 import { useEntityPage } from '@wix/patterns';

package/dist/docs/Explore Apps.md

@@ -21,7 +21,14 @@ pass the explore apps modal props that will be render on user demand and we will
 To pass the necessary properties to the `MoreActions` component, use the following code:
 
 ```jsx
-
+<MoreActions
+  ...
+  exploreAppsModalProps={{
+    title: 'Explore Apps', // The modal title
+    subtitle: 'Find the right app for your business', // The modal sub-title
+    tag: '7d4d7891-2995-4bb9-8d2b-457aa7dca3f2', // The tag you generated
+  }}
+/>
 ```
 
 

package/dist/docs/ExportTo.md

@@ -728,7 +728,7 @@ const exportConfig = useExportConfig({
 
 export default () => {
   return (
-    } />
+    <Table exportButton={<ExportButton {...exportConfig} />} />
   );
 };
 ```
@@ -752,9 +752,9 @@ const exportConfig = useExportConfig({
 export default () => {
   return (
       <>
-         state.table.exportState.open()}>
-        } />
-      
+        <Button onCLick={() => state.table.exportState.open()}></Button>
+        <Table state={state} exportModal={<ExportModal {...exportConfig} />} />
+      </>
   );
 };
 ```
@@ -769,7 +769,7 @@ The `transformPlatformizedQuery` is used for mapping between the `wixPatternsQue
 For example, in case of stores' `Product`:
 
 ```ts
-const exportStateQueryProductsExportSpi = useExport({
+const exportStateQueryProductsExportSpi = useExport<Product, ProductFilters>({
   transformPlatformizedQuery: ({
     platformizedQuery,
     wixPatternsQuery,
@@ -872,7 +872,7 @@ Event   |   Description   |
 
 ### Usage
 
-`getExportButton` API is exposed from the `` [testkit](./?path=/story/components-collection--table&activeTab=Testkit)
+`getExportButton` API is exposed from the `<Table />` [testkit](./?path=/story/components-collection--table&activeTab=Testkit)
 
 ### Export `HttpClient` Mocks
 

package/dist/docs/Filter Overview.md

@@ -101,7 +101,10 @@ const levelsCollection = useStaticListFilterCollection(filter, [
   'Ultimate'
 ]);
 
-
+<MultiSelectCheckboxFilter
+  filter={filter}
+  collection={levelsCollection}
+/>
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209715656-7737593c-b98f-4bc8-a9bb-4325f04ee603.png)
@@ -122,7 +125,10 @@ const collection = useFilterCollection(filter, {
   limit: 50
 });
 
- ({
+<MultiSelectCheckboxFilter
+  filter={filter}
+  collection={collection}
+  renderItem={(item) => ({
     title: item.level,
   })}
 />
@@ -134,7 +140,7 @@ One option for filtering a date range is to use the [DateRangeFilter](./?path=/s
 ```js
 const [filter] = React.useState(() => dateRangeFilter());
 
-
+<DateRangeFilter filter={filter} />
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209724537-c2330fc5-2abb-4798-aa89-d289f170af4c.png)
@@ -157,7 +163,10 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED') }
 ]);
 
-
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+/>
 ```
 
 ![image](https://user-images.githubusercontent.com/32840800/209724490-e205019d-b990-415c-a61c-3b50aedea5cc.png)
@@ -180,7 +189,10 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED') }
 ]);
 
- ({title: item.foo, label: item.foo})}
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+  renderItem={(item) => ({title: item.foo, label: item.foo})}
 />
 ```
 
@@ -200,13 +212,16 @@ const subscriptionStatusCollection = useStaticListFilterCollection(filter, [
   { id: Subscription.UNSUBSCRIBED, name: t('contact.subscriptionStatus.UNSUBSCRIBED'), isSubscribed: false }
 ]);
 
-
+<SingleSelectFilter
+  filter={filter}
+  collection={subscriptionStatusCollection}
+/>
 ```
 
 While both the `id` and `name` properties exist and `name` will be used as the filter value, we have also included `isSubscribed` property to be passed with the other properties. For example, during the fetchData process, after the user selects the `Subscribed` filter option, the implementation might look like this:
 
 ```js
-const fetchData = (query: OffsetQuery) => {
+const fetchData = (query: OffsetQuery<ContactsFilters>) => {
   const { limit, offset, search, filters } = query;
   console.log(filters.subscription); // [{id: '1', name: 'Subscribed', isSubscribed: true}]
   const isSubscribed = filters.subscription[0]?.isSubscribed
@@ -219,7 +234,7 @@ const fetchData = (query: OffsetQuery) => {
 The search parameter is not technically part of the filters panel, but it can be initialized using [stringFilter](./?path=/story/features-filter-factories--stringfilter). This filter is usually opt-in by default, but if you want to pass an initial value for the search input, you can do so by passing your own filter to it.
 
 ```js
-const collection = useCollection({
+const collection = useCollection<Contact, ContactsFilters>({
   queryName: 'query-contacts',
   search: stringFilter({initialValue: searchFromParams}),
   // ...

package/dist/docs/Grid.md

@@ -104,7 +104,7 @@ function Demo() {
 
 ### Card with a CTA that opens a modal
 
-This example utilizes the `` `renderAddItem` prop and the `` `onClick()` prop to run a function that opens a modal.
+This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a modal.
 
 ```tsx
 import React from 'react';
@@ -214,7 +214,7 @@ function AddItemCardWithModal() {
 
 ### Card with a CTA that opens a popup
 
-This example utilizes the `` `renderAddItem` prop and the `` `onClick()` prop to run a function that opens a popup.
+This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a popup.
 
 ```tsx
 import React from 'react';
@@ -312,7 +312,7 @@ function AddItemCardWithPopoverMenu() {
 
 ### Grid with a reduced width
 
-This example utilizes the `` `span` prop to set the width of the Grid to 2/3 of the page.
+This example utilizes the `<Cell>` `span` prop to set the width of the Grid to 2/3 of the page.
 
 ```tsx
 import React from 'react';

package/dist/docs/ImportButton.md

@@ -17,18 +17,18 @@ It renders an import action in the collection toolbar. On the default toolbar it
 
 Like `ExportTo`, the feature has two parts:
 
-- **Client** — the button and modal, shipped in `@wix/patterns`. Place it with the `` `importButton` prop; it reads what it needs off the table's source when the modal opens, and an optional `config` object carries only what the source can't supply (see [Choosing a source](#choosing-a-source)).
+- **Client** — the button and modal, shipped in `@wix/patterns`. Place it with the `<Table>` `importButton` prop; it reads what it needs off the table's source when the modal opens, and an optional `config` object carries only what the source can't supply (see [Choosing a source](#choosing-a-source)).
 - **Server** — the actual write is done by a Wix Hub **Data Movement** job (see the [data-hub infrastructure](#data-hub-infrastructure) section). The client uploads the file, submits the job, and polls it to completion.
 
 #### Configuring it
 
-`` reads what it needs off the table's source when the modal opens; the optional `config` (`ImportConfig`) fills in what the source can't supply. Two things vary — **where the rows are written** (a Wix Data collection, or a platformized `destination`) and **where the mappable fields come from** (a declared schema source, or a `fields` list you pass) — giving three setups:
+`<ImportButton>` reads what it needs off the table's source when the modal opens; the optional `config` (`ImportConfig`) fills in what the source can't supply. Two things vary — **where the rows are written** (a Wix Data collection, or a platformized `destination`) and **where the mappable fields come from** (a declared schema source, or a `fields` list you pass) — giving three setups:
 
-- **CMS (Wix Data) — schema-based, no `config`.** `useCmsSchemaSource` → `useTableCollection(source)`; the source supplies the collection, its fields, and create-new-field, and the CMS create/edit-field modal loads on demand. `` takes no props.
+- **CMS (Wix Data) — schema-based, no `config`.** `useCmsSchemaSource` → `useTableCollection(source)`; the source supplies the collection, its fields, and create-new-field, and the CMS create/edit-field modal loads on demand. `<ImportButton />` takes no props.
 
   ```jsx
   // `state` comes from `useTableCollection(source)` (@wix/patterns/schema).
-  } />;
+  <Table state={state} importButton={<ImportButton />} />;
   ```
 
 - **Platformized, from a source — schema-based, `config` names the destination.** A non–Wix-Data entity backed by `usePlatformizedSource`: the source supplies the fields to map onto, and you name the `destination` (a platformized target has no Wix Data collection to derive it from).
@@ -36,14 +36,24 @@ Like `ExportTo`, the feature has two parts:
   ```jsx
   const source = usePlatformizedSource({ fqdn, backend, itemKey, itemName });
   const state = useTableCollection(source);
-  }
+  <Table
+    state={state}
+    importButton={<ImportButton config={{ destination: { storesCatalogProducts: {} } }} />}
   />;
   ```
 
 - **Platformized, fields listed inline — non-schema, `config` names the destination and the fields.** No source; you list the `fields` to map onto (see `ProductsTable` in `example-bm`).
 
   ```jsx
-  
+  <Table
+    state={state}
+    importButton={
+      <ImportButton
+        config={{
+          destination: { storesCatalogProducts: {} },
+          fields: [{ id: 'name', header: 'Name', required: true }],
+        }}
+      />
     }
   />;
   ```
@@ -74,7 +84,7 @@ import { ImportButton } from '@wix/patterns';
 
 ### CMS import
 
-A Wix Data (CMS) collection. `` needs no config — it reads the import inputs live from the table’s schema source, and the CMS create/edit-field modal is loaded on demand.
+A Wix Data (CMS) collection. `<ImportButton />` needs no config — it reads the import inputs live from the table’s schema source, and the CMS create/edit-field modal is loaded on demand.
 
 ```tsx
 import React from 'react';
@@ -328,7 +338,7 @@ export default RequiredFields;
 
 ### Create new field
 
-A CMS capability: when the collection’s schema permits adding fields, unmapped CSV columns default to creating a new field (with an "Edit field" affordance) instead of being skipped. `` wires it from the schema automatically.
+A CMS capability: when the collection’s schema permits adding fields, unmapped CSV columns default to creating a new field (with an "Edit field" affordance) instead of being skipped. `<ImportButton />` wires it from the schema automatically.
 
 ```tsx
 import React from 'react';

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';