@wix/patterns 1.468.0 → 1.470.0

package/dist/docs/CustomColumns.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description
@@ -18,7 +20,7 @@ import { CustomColumns } from '@wix/patterns';
 
 A basic table with the custom columns feature.
 
-Example code: read `dist/docs/CustomColumns/basic.tsx`
+Example code: read `dist/examples/CustomColumns/basic.tsx`
 
 ---
 
@@ -30,7 +32,7 @@ Customize a column to be hidden by default.
 
  **Note:** By default, new columns added to an existing table are visible to users. Set `defaultHidden` to `true` to hide them.
 
-Example code: read `dist/docs/CustomColumns/hide-specific-columns-by-default.tsx`
+Example code: read `dist/examples/CustomColumns/hide-specific-columns-by-default.tsx`
 
 ---
 
@@ -38,7 +40,7 @@ Example code: read `dist/docs/CustomColumns/hide-specific-columns-by-default.tsx
 
 Locking columns restricts users from editing the specified columns and disables the hide and show functionality (checkbox).
 
-Example code: read `dist/docs/CustomColumns/lock-columns.tsx`
+Example code: read `dist/examples/CustomColumns/lock-columns.tsx`
 
 ---
 
@@ -46,7 +48,7 @@ Example code: read `dist/docs/CustomColumns/lock-columns.tsx`
 
 Excluding columns restricts users from editing the specified columns and hides them from the custom column selection panel.
 
-Example code: read `dist/docs/CustomColumns/exclude-columns.tsx`
+Example code: read `dist/examples/CustomColumns/exclude-columns.tsx`
 
 ---
 
@@ -54,7 +56,7 @@ Example code: read `dist/docs/CustomColumns/exclude-columns.tsx`
 
 Add a tooltip next to the column's name. The tooltip allows you to add more information about the column.
 
-Example code: read `dist/docs/CustomColumns/add-a-tooltip.tsx`
+Example code: read `dist/examples/CustomColumns/add-a-tooltip.tsx`
 
 ---
 
@@ -64,7 +66,7 @@ Drag and drop columns in the side panel to reorder the columns.
 
  When adding new columns to an existing table component, the custom column order is preserved, and new columns are appended to the right of the existing columns. However, if the columns are still in their original order, the updated table overrides it.
 
-Example code: read `dist/docs/CustomColumns/reorder-columns.tsx`
+Example code: read `dist/examples/CustomColumns/reorder-columns.tsx`
 
 ---
 
@@ -74,7 +76,7 @@ To freeze columns and prevent users from reordering them, use the `reorderDisabl
  
 >**Note**: You can only freeze columns in a table starting from the first column, and in consecutive order.
 
-Example code: read `dist/docs/CustomColumns/freeze-column-reorder.tsx`
+Example code: read `dist/examples/CustomColumns/freeze-column-reorder.tsx`
 
 ---
 
@@ -82,7 +84,7 @@ Example code: read `dist/docs/CustomColumns/freeze-column-reorder.tsx`
 
 To achieve greater optimization, consider utilizing the `refreshOnColumnsChange` flag with `true` value and retrieving the `columns` array from the query object. This approach enables you to retrieve the necessary fields from your backend.
 
-Example code: read `dist/docs/CustomColumns/load-only-selected-columns.tsx`
+Example code: read `dist/examples/CustomColumns/load-only-selected-columns.tsx`
 
 ---
 
@@ -90,7 +92,7 @@ Example code: read `dist/docs/CustomColumns/load-only-selected-columns.tsx`
 
 Retrieve the visible columns from the custom columns feature.
 
-Example code: read `dist/docs/CustomColumns/get-visible-columns.tsx`
+Example code: read `dist/examples/CustomColumns/get-visible-columns.tsx`
 
 ## API
 

package/dist/docs/CustomFieldType.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description
@@ -33,25 +35,25 @@ import { defineFieldType } from '@wix/patterns';
 
 What you get: a read-only table where the custom Progress field renders as a progress bar (the `table` slot) and a Progress filter in the toolbar (the `filter` slot — check a bucket and the backend applies the raw filter value). Manage fields can add functionality and visibility on top: the field's actions and show/hide controls appear in the manage-fields and customize-columns panels.
 
-Example code: read `dist/docs/CustomFieldType/table-cell-and-filter.tsx`
+Example code: read `dist/examples/CustomFieldType/table-cell-and-filter.tsx`
 
 ### Editable cell
 
 What you get: the same field type in an editable spreadsheet — the `editableTable` slot renders progress bars in view mode and a number input in edit mode. Try it: double-click a Progress cell (or focus it and type a digit) to edit — Enter or Tab commits, Escape cancels, values clamp to 0–100 on commit (`normalizeOnCommit`), and copy/paste round-trips through `serialize`/`deserialize`. Right-click a Progress cell: Cut is always disabled with the type's tooltip, while Clear is disabled only when the value is 100. The Progress column's header menu also has "This is action only for progress bar" (the separate `actions` slot). Filtering is opted out with `{ filterable: false }`, so the toolbar shows no Progress filter.
 
-Example code: read `dist/docs/CustomFieldType/editable-cell.tsx`
+Example code: read `dist/examples/CustomFieldType/editable-cell.tsx`
 
 ### Add-field modal
 
 What you get: a custom type users can create fields of. The `fieldModal` slot opts the Progress type into the add-field modal — click the "+" header button, pick "Progress" in the type picker (it shows the definition's label, icons, subtitle, and group), name it, and confirm. The new field arrives at the source's `fieldActions.addField` as `{ type: 'CUSTOM', customType: 'docs.progress' }` and its column appears immediately, rendered by the type's `editableTable` slot. Requires `schemaPermissions.createField` and `fieldActions.addField` on the source. Note the picker offers only what the source declares (`fieldModal.types`) plus creatable custom types, and persistence belongs to the source's `FieldActions` — this demo stores fields in memory, so they reset on refresh; a source backed by a real service persists them (see the API tab).
 
-Example code: read `dist/docs/CustomFieldType/add-field-modal.tsx`
+Example code: read `dist/examples/CustomFieldType/add-field-modal.tsx`
 
 ### Entity-page form
 
 What you get: the custom type in the entity-page form. The `form` slot's component renders only the Progress input — it receives `value`/`onChange` props, and the entity page owns the form wiring (registration on the form, validation from the definition's `value.validate`) and the field UI (label, required marker, error message). Without a `form` slot, an entity page rendering the field throws in development (production skips it). Try it: change the progress, save from the header, and the value round-trips through the source's backend.
 
-Example code: read `dist/docs/CustomFieldType/entity-page-form.tsx`
+Example code: read `dist/examples/CustomFieldType/entity-page-form.tsx`
 
 ## API
 

package/dist/docs/CustomFieldsViewWidget.md

@@ -2,6 +2,10 @@
 
 **Category:** Features/Enrich/Data Extension/Components
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types`, `@wix/ambassador-v1-entity/types`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Overview
 
 ### Introduction

package/dist/docs/CustomFieldsWidget.md

@@ -4,6 +4,10 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-cairo-dummyservice-v1-dummy-entity/http`, `@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types`, `@wix/ambassador-v1-entity/http`, `@wix/ambassador-v1-entity/types`, `@wix/yoshi-flow-bm`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Overview
 
 ### Introduction
@@ -107,7 +111,7 @@ export const MyPageProvider = ({ children }) => {
 
 This example demonstrates the component with all existing field types including initial values.
 
-Example code: read `dist/docs/CustomFieldsWidget/basic.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/basic.tsx`
 
 ---
 
@@ -115,7 +119,7 @@ Example code: read `dist/docs/CustomFieldsWidget/basic.tsx`
 
 This example demonstrates the component in a responsive layout.
 
-Example code: read `dist/docs/CustomFieldsWidget/responsive.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/responsive.tsx`
 
 ---
 
@@ -123,7 +127,7 @@ Example code: read `dist/docs/CustomFieldsWidget/responsive.tsx`
 
 This example demonstrates the component in an empty state.
 
-Example code: read `dist/docs/CustomFieldsWidget/empty-state.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/empty-state.tsx`
 
 ---
 
@@ -131,7 +135,7 @@ Example code: read `dist/docs/CustomFieldsWidget/empty-state.tsx`
 
 This example shows the component in an inline layout - without card.
 
-Example code: read `dist/docs/CustomFieldsWidget/inline-theme.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/inline-theme.tsx`
 
 ---
 
@@ -139,7 +143,7 @@ Example code: read `dist/docs/CustomFieldsWidget/inline-theme.tsx`
 
 This example shows how to control the state, and use custom loading and error UIs
 
-Example code: read `dist/docs/CustomFieldsWidget/controllable-state.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/controllable-state.tsx`
 
 ---
 
@@ -147,7 +151,7 @@ Example code: read `dist/docs/CustomFieldsWidget/controllable-state.tsx`
 
 This example demonstrates how to use the component without an entity page. Use the hook useCustomFields with your fqdn and get the change in `onChange` callback.
 
-Example code: read `dist/docs/CustomFieldsWidget/without-entity-page.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/without-entity-page.tsx`
 
 ---
 
@@ -155,7 +159,7 @@ Example code: read `dist/docs/CustomFieldsWidget/without-entity-page.tsx`
 
 In case the field was created with read and write permissions for users, it will be rendered here
 
-Example code: read `dist/docs/CustomFieldsWidget/with-tpa-fields.tsx`
+Example code: read `dist/examples/CustomFieldsWidget/with-tpa-fields.tsx`
 
 ## API
 

package/dist/docs/DateRangeFilter.Components.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Overview

package/dist/docs/Display Extended Fields.md

@@ -2,6 +2,10 @@
 
 **Category:** Features/Enrich/Data Extension
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-contacts-v4-contact/http`, `@wix/ambassador-contacts-v4-contact/types`, `@wix/ambassador-contacts-v5-contact/http`, `@wix/ambassador-contacts-v5-contact/types`, `@wix/ambassador-v1-entity/types`, `@wix/yoshi-flow-bm`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Guide
 
 This guide explains how to display extended fields in your table.

package/dist/docs/Enable Filters for Extended Fields.md

@@ -2,6 +2,10 @@
 
 **Category:** Features/Enrich/Data Extension
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-contacts-v5-contact/http`, `@wix/ambassador-contacts-v5-contact/types`, `@wix/yoshi-flow-bm`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Guide
 
 This article explains how to enable filters on your extended fields.

package/dist/docs/EntityPage.AdditionalContent.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## API
 
 ### Overview

package/dist/docs/EntityPage.Card.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Examples
 
 ### Basic

package/dist/docs/EntityPage.Content.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## API
 
 ### Overview

package/dist/docs/EntityPage.Header.md

@@ -2,6 +2,10 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Examples
 
 ### Basic

package/dist/docs/EntityPage.MainContent.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## API
 
 ### Overview

package/dist/docs/EntityPage.Slots.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Pages/Entity Page
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Examples
 
 ### Basic

package/dist/docs/EntityPage.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Overview
 
 ### Introduction
@@ -40,7 +42,7 @@ This comprehensive demo demonstrates all the key functionalities supported by `E
 Explore the [Examples](./?path=/story/components-page-entitypage--entitypage&tab=Examples) section for a clearer understanding of the various states of the entity state, and examine each sub-component to see their available states and examples.
 
 
-Example code: read `dist/docs/EntityPage/demo.tsx`
+Example code: read `dist/examples/EntityPage/demo.tsx`
 
 ## Examples
 
@@ -50,7 +52,7 @@ Example code: read `dist/docs/EntityPage/demo.tsx`
 
 This example demonstrates a basic usage of the `EntityPage`.
 
-Example code: read `dist/docs/EntityPage/basic.tsx`
+Example code: read `dist/examples/EntityPage/basic.tsx`
 
 ---
 
@@ -58,7 +60,7 @@ Example code: read `dist/docs/EntityPage/basic.tsx`
 
 This example illustrates the use of both main and additional content.
 
-Example code: read `dist/docs/EntityPage/2-columns.tsx`
+Example code: read `dist/examples/EntityPage/2-columns.tsx`
 
 ---
 
@@ -66,7 +68,7 @@ Example code: read `dist/docs/EntityPage/2-columns.tsx`
 
 This sample illustrates the skeleton state of an entity page based on the provided structure.
 
-Example code: read `dist/docs/EntityPage/loading.tsx`
+Example code: read `dist/examples/EntityPage/loading.tsx`
 
 ---
 
@@ -74,7 +76,7 @@ Example code: read `dist/docs/EntityPage/loading.tsx`
 
 This example demonstrates the error state when fetching an entity fails.
 
-Example code: read `dist/docs/EntityPage/error-on-fetch.tsx`
+Example code: read `dist/examples/EntityPage/error-on-fetch.tsx`
 
 ---
 
@@ -82,7 +84,7 @@ Example code: read `dist/docs/EntityPage/error-on-fetch.tsx`
 
 This example demonstrates the error toast when saving an entity fails.
 
-Example code: read `dist/docs/EntityPage/error-on-save.tsx`
+Example code: read `dist/examples/EntityPage/error-on-save.tsx`
 
 ---
 
@@ -90,7 +92,7 @@ Example code: read `dist/docs/EntityPage/error-on-save.tsx`
 
 This examples demonstrates how to use the `saveCta` prop to override the default **Save** button text.
 
-Example code: read `dist/docs/EntityPage/overriding-save-button-text.tsx`
+Example code: read `dist/examples/EntityPage/overriding-save-button-text.tsx`
 
 ---
 
@@ -98,7 +100,7 @@ Example code: read `dist/docs/EntityPage/overriding-save-button-text.tsx`
 
 This example demonstrates how to enable item deletion from the entity page using the `deleteAction` option. A delete icon button appears in the actions bar. Clicking it opens a confirmation modal, and on success Cairo shows a toast and navigates back to the collection page.
 
-Example code: read `dist/docs/EntityPage/delete-action.tsx`
+Example code: read `dist/examples/EntityPage/delete-action.tsx`
 
 ---
 
@@ -106,7 +108,7 @@ Example code: read `dist/docs/EntityPage/delete-action.tsx`
 
 This example demonstrates error handling when the delete operation fails. A custom `errorToast` provides a retry action.
 
-Example code: read `dist/docs/EntityPage/delete-error-handling.tsx`
+Example code: read `dist/examples/EntityPage/delete-error-handling.tsx`
 
 ---
 
@@ -116,7 +118,7 @@ Example code: read `dist/docs/EntityPage/delete-error-handling.tsx`
 
 This demonstrates how to use [useController](https://react-hook-form.com/docs/usecontroller) with the default value set at the `Card.Content` level. Note that the `state.entity` value is initialized following the Card skeleton loader. To obtain the initial value, it must be accessed within the Card.Content child, as illustrated in the following example. Accessing it before or at a higher level will result in an `undefined` value.
 
-Example code: read `dist/docs/EntityPage/input-initialization-with-usecontroller.tsx`
+Example code: read `dist/examples/EntityPage/input-initialization-with-usecontroller.tsx`
 
 ---
 
@@ -124,7 +126,7 @@ Example code: read `dist/docs/EntityPage/input-initialization-with-usecontroller
 
 This demonstrates how to use [Controller](https://react-hook-form.com/docs/usecontroller/controller) where you can easily access the entity by using `useEntity`. This method allows for accessing the entity much earlier in the process. As a result, the default value will be dynamically updated as soon as the entity itself is updated, as shown in the example below.
 
-Example code: read `dist/docs/EntityPage/input-initialization-with-controller.tsx`
+Example code: read `dist/examples/EntityPage/input-initialization-with-controller.tsx`
 
 ## API
 

package/dist/docs/EntityPageState.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## API
 
 ### Overview

package/dist/docs/Explore Apps.md

@@ -2,6 +2,8 @@
 
 **Category:** Integrations/ExploreApps
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description

package/dist/docs/ExportTo.md

@@ -4,6 +4,10 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-contacts-v4-contact/http`, `@wix/ambassador-contacts-v4-contact/types`, `@wix/yoshi-flow-bm`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Design
 
 ### ExportTo
@@ -29,25 +33,25 @@ import { ExportButton } from '@wix/patterns';
 
 ### Export all table
 
-Example code: read `dist/docs/ExportTo/export-all-table.tsx`
+Example code: read `dist/examples/ExportTo/export-all-table.tsx`
 
 ### Export filtered table
 
 Export the table with the filters applied
 
-Example code: read `dist/docs/ExportTo/export-filtered-table.tsx`
+Example code: read `dist/examples/ExportTo/export-filtered-table.tsx`
 
 ### Export table with selection / bulk selection
 
 Export only the selected items from the table
 
-Example code: read `dist/docs/ExportTo/export-table-with-selection-bulk-selection.tsx`
+Example code: read `dist/examples/ExportTo/export-table-with-selection-bulk-selection.tsx`
 
 ### CTA is out of the table
 
 The export button is out of the table
 
-Example code: read `dist/docs/ExportTo/cta-is-out-of-the-table.tsx`
+Example code: read `dist/examples/ExportTo/cta-is-out-of-the-table.tsx`
 
 ## API
 

package/dist/docs/Filter Overview.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ##  
 
 ### Overview
@@ -249,5 +251,5 @@ Using the knowledge we gained from going through the necessary filters, let's ap
 
 ### Interactive Example
 
-Example code: read `dist/docs/Filter Overview/interactive-example.tsx`
+Example code: read `dist/examples/Filter Overview/interactive-example.tsx`
 

package/dist/docs/Grid Sections.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Display/Grid Sections
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description

package/dist/docs/Grid.md

@@ -4,6 +4,8 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description
@@ -24,7 +26,7 @@ import { Grid, useGridCollection } from '@wix/patterns';
 
 ### Demo
 
-Example code: read `dist/docs/Grid/demo.tsx`
+Example code: read `dist/examples/Grid/demo.tsx`
 
 ---
 
@@ -34,19 +36,19 @@ Example code: read `dist/docs/Grid/demo.tsx`
 
 This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a modal.
 
-Example code: read `dist/docs/Grid/card-with-a-cta-that-opens-a-modal.tsx`
+Example code: read `dist/examples/Grid/card-with-a-cta-that-opens-a-modal.tsx`
 
 ### Card with a CTA that opens a popup
 
 This example utilizes the `<Grid>` `renderAddItem` prop and the `<AddItem>` `onClick()` prop to run a function that opens a popup.
 
-Example code: read `dist/docs/Grid/card-with-a-cta-that-opens-a-popup.tsx`
+Example code: read `dist/examples/Grid/card-with-a-cta-that-opens-a-popup.tsx`
 
 ### Grid with a reduced width
 
 This example utilizes the `<Cell>` `span` prop to set the width of the Grid to 2/3 of the page.
 
-Example code: read `dist/docs/Grid/grid-with-a-reduced-width.tsx`
+Example code: read `dist/examples/Grid/grid-with-a-reduced-width.tsx`
 
 ### Use the `preset` prop
 
@@ -65,13 +67,13 @@ Grids have 3 preset card types. Change them using the `preset` prop.
         Default: `title`.
         
 
-Example code: read `dist/docs/Grid/use-the-preset-prop.tsx`
+Example code: read `dist/examples/Grid/use-the-preset-prop.tsx`
 
 ### Grid sections
 
 This example fetches sorted collection data by `jobTitle` and then groups the grid into sections based on `jobTitle`.         For more information, see [Grid Sections](./?path=/story/features-display-grid-sections--grid-sections).
 
-Example code: read `dist/docs/Grid/grid-sections.tsx`
+Example code: read `dist/examples/Grid/grid-sections.tsx`
 
 ## API
 

package/dist/docs/GridDragAndDrop.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Sort/Drag and Drop
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description

package/dist/docs/GridFolders.md

@@ -4,6 +4,10 @@
 
 Paths written as `dist/…` below are relative to the `@wix/patterns` package root — the directory holding its `package.json`.
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
+Some of that scaffolding is environment-scoped and is **not** needed to use this component: `@wix/ambassador-contacts-v4-contact/http`, `@wix/ambassador-contacts-v4-contact/types`, `@wix/yoshi-flow-bm`. Those resolve only against a Wix build environment (a Yoshi flow's runtime, a generated service client, an internal sibling package) — substitute your own data source and http client rather than installing them.
+
 ## Design
 
 ### Description

package/dist/docs/GridFoldersSection.md

@@ -2,6 +2,8 @@
 
 **Category:** Base Components/Collections/GridFolders/GridFoldersSection
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description

package/dist/docs/Highlighted Search.md

@@ -2,6 +2,8 @@
 
 **Category:** Features/Display/Highlighted Search
 
+Examples below are illustrative: each one demonstrates this page's API, and everything around it — data source, layout, http client — is only scaffolding to make that runnable.
+
 ## Design
 
 ### Description