@wix/patterns 1.439.0 → 1.442.0

package/dist/docs/CustomFieldType.md

@@ -14,6 +14,8 @@ A **custom field type** is a consumer-defined field that plugs into every schema
 - `value` — value semantics (`defaultValue`, `isEmpty`, `validate`) used by every surface.
 - `capabilities` — e.g. `sortable`.
 - `actions` — extra items on the field's "more actions" menus.
+- `form` — the field's input in the entity-page form.
+- `fieldModal` — opts the type into the add/edit-field modal's type picker, so users can create fields of this type.
 - `display` — the type's label and icons in field menus.
 
 A field uses the type via `type: 'CUSTOM'` and `customType` pointing at the definition's key. `table` and `editableTable` are independent — neither falls back to the other, so implement only the surfaces you need.
@@ -410,6 +412,359 @@ function CustomFieldTypeSpreadsheet() {
 }
 ```
 
+### 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).
+
+```tsx
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { EditableTable, defineFieldType } from '@wix/patterns';
+import type { EditableColumn, Field } from '@wix/patterns';
+import {
+  useSchemaSource,
+  useEditableTableCollection,
+} from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  FieldActions,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+
+type Task = { id: string; name: string; progress?: number };
+
+function CustomFieldTypeFieldModal() {
+  // Plain object store (the live-example scope shadows the global `Map`).
+  const [store] = React.useState<{ tasks: Task[]; nextId: number }>(() => ({
+    nextId: 4,
+    tasks: [
+      { id: '1', name: 'Design homepage', progress: 80 },
+      { id: '2', name: 'Set up payments', progress: 100 },
+      { id: '3', name: 'Write product descriptions', progress: 25 },
+    ],
+  }));
+
+  const clamp = (value: number) =>
+    Math.max(0, Math.min(100, Math.round(value) || 0));
+
+  const ProgressCellView = ({ value }: { value: number }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <div
+        style={{
+          width: '80px',
+          height: '6px',
+          borderRadius: '3px',
+          background: '#DFE5EB',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            width: `${clamp(value ?? 0)}%`,
+            height: '100%',
+            background: '#3899EC',
+          }}
+        />
+      </div>
+      <span>{clamp(value ?? 0)}%</span>
+    </div>
+  );
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    filter: { filterable: false },
+    value: { defaultValue: 0, isEmpty: (v) => v == null },
+    capabilities: { sortable: true },
+    editableTable: {
+      ViewComponent: ProgressCellView,
+      serialize: (v) => String(clamp(v ?? 0)),
+      deserialize: (raw) => clamp(parseFloat(raw)),
+    },
+    // Opts the type into the add-field modal: it shows in the type picker with
+    // the definition's label and icons, and a created field arrives at the
+    // source's addField as { type: 'CUSTOM', customType: 'docs.progress' }.
+    fieldModal: {
+      creatable: true,
+      namePlaceholder: 'e.g. Progress',
+      subtitle: 'A 0–100% progress bar',
+      group: 'Custom types',
+    },
+  });
+
+  const [schema] = React.useState<Schema>(() => ({
+    id: 'docs-custom-field-type-modal',
+    fields: {},
+    displayField: 'name',
+    idField: 'id',
+    itemPermissions: { createItem: true, updateItem: true, deleteItem: true },
+    // Enables the add-field flow — the editable table shows the "+" header
+    // button, which opens the add-field modal.
+    schemaPermissions: {
+      createField: true,
+      updateField: true,
+      deleteField: true,
+    },
+  }));
+
+  // In-memory field CRUD: each mutation returns the updated fields map, which
+  // the source merges into the loaded schema so the columns update in place.
+  const fieldActions: FieldActions = {
+    addField: async (field) => {
+      schema.fields = { ...schema.fields, [field.id]: field };
+      return schema.fields;
+    },
+    editField: async (fieldId, updates) => {
+      const existing = schema.fields[fieldId];
+      if (existing) {
+        schema.fields = {
+          ...schema.fields,
+          [fieldId]: { ...existing, ...updates } as Field,
+        };
+      }
+      return schema.fields;
+    },
+    deleteField: async (fieldId) => {
+      const rest = { ...schema.fields };
+      delete rest[fieldId];
+      schema.fields = rest;
+      return schema.fields;
+    },
+  };
+
+  const backend: CollectionBackend<Task> = {
+    find: async ({ search = '', sort = [] }) => {
+      const found = store.tasks.filter((task) =>
+        task.name.toLowerCase().includes(search.toLowerCase()),
+      );
+      if (sort.length) {
+        const [{ fieldName, order }] = sort;
+        found.sort((a, b) => {
+          const left = a[fieldName as keyof Task] ?? 0;
+          const right = b[fieldName as keyof Task] ?? 0;
+          const diff = left < right ? -1 : left > right ? 1 : 0;
+          return order === 'asc' ? diff : -diff;
+        });
+      }
+      return { items: found, total: found.length };
+    },
+    create: async (entity) => {
+      const created = { id: `task-${store.nextId++}`, name: '', ...entity };
+      store.tasks = [...store.tasks, created];
+      return created;
+    },
+    update: async (entity) => {
+      store.tasks = store.tasks.map((task) =>
+        task.id === entity.id ? entity : task,
+      );
+      return entity;
+    },
+    bulkDelete: async (entityIds) => {
+      store.tasks = store.tasks.filter((task) => !entityIds.includes(task.id));
+    },
+  };
+
+  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
+    schema,
+    backend,
+    fieldActions,
+  });
+
+  const columns: EditableColumn<Task>[] = [
+    {
+      id: 'name',
+      title: 'Name',
+      cellType: 'text',
+      getValue: (task) => task.name,
+      setValue: (task, value) => ({ ...task, name: value }),
+      width: 220,
+    },
+  ];
+
+  const source = useSchemaSource<Task>({
+    collectionId: 'docs-custom-field-type-modal',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+    // The modal renders only what the source declares: these standard picker
+    // options plus every creatable custom type (appended automatically).
+    fieldModal: {
+      text: {
+        addTitle: 'Add a field',
+        editTitle: 'Edit field',
+      },
+      types: [
+        {
+          patternsType: 'SHORT_TEXT',
+          label: 'Text',
+          subtitle: 'Titles, paragraph',
+          group: 'Essentials',
+        },
+        {
+          patternsType: 'NUMBER',
+          label: 'Number',
+          subtitle: 'ID, rating, order number',
+          group: 'Essentials',
+        },
+      ],
+    },
+  });
+  const state = useEditableTableCollection<Task>(source);
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Tasks' }} />
+      <CollectionPage.Content>
+        <EditableTable state={state} columns={columns} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+### 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.
+
+```tsx
+import React from 'react';
+import { defineFieldType } from '@wix/patterns';
+import type { Field, FormFieldComponentProps } from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import {
+  EntityPage,
+  EntityPageFieldsCard,
+  useEntityPage,
+  useSchemaSource,
+} from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+import { Input } from '@wix/design-system';
+
+type Task = { id: string; name: string; progress?: number };
+
+function CustomFieldTypeEntityPage() {
+  // Plain object store (the live-example scope shadows the global `Map`).
+  const [store] = React.useState<{ task: Task }>(() => ({
+    task: { id: '1', name: 'Design homepage', progress: 80 },
+  }));
+
+  const clamp = (value: number) =>
+    Math.max(0, Math.min(100, Math.round(value) || 0));
+
+  // The entity-page form input. The entity page owns the form wiring and the
+  // field UI (label, error message from the definition's value.validate) —
+  // this renders only the input.
+  const ProgressFormField = ({
+    value,
+    onChange,
+    onBlur,
+  }: FormFieldComponentProps<number>) => (
+    <Input
+      type="number"
+      min={0}
+      max={100}
+      suffix={<Input.Affix>%</Input.Affix>}
+      value={String(value ?? 0)}
+      // parseFloat, not Number — the example scope shadows `Number`.
+      onChange={(event) => onChange(clamp(parseFloat(event.target.value)))}
+      onBlur={onBlur}
+    />
+  );
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    filter: { filterable: false },
+    value: {
+      defaultValue: 0,
+      isEmpty: (v) => v == null,
+      // Runs on every surface that validates the field — the entity-page
+      // form wires it into its own validation.
+      validate: (v) =>
+        v != null && (v < 0 || v > 100)
+          ? 'Progress must be between 0 and 100'
+          : null,
+    },
+    // Required once the field renders on an entity page — development throws
+    // without it; production skips the field.
+    form: { Component: ProgressFormField },
+  });
+
+  const progressField: Field = {
+    id: 'progress',
+    displayName: 'Progress',
+    type: 'CUSTOM',
+    customType: 'docs.progress',
+  };
+
+  const schema: Schema = {
+    id: 'docs-custom-field-type-entity-page',
+    fields: {
+      name: { id: 'name', displayName: 'Name', type: 'SHORT_TEXT' } as Field,
+      progress: progressField,
+    },
+    displayField: 'name',
+    idField: 'id',
+  };
+
+  // The entity page reads and writes the entity through the source's backend:
+  // `fetch` derives from `get`, saving from `update`.
+  const backend: CollectionBackend<Task> = {
+    find: async () => ({ items: [store.task], total: 1 }),
+    get: async () => store.task,
+    update: async (entity) => {
+      store.task = entity;
+      return entity;
+    },
+  };
+
+  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
+    schema,
+    backend,
+  });
+
+  const source = useSchemaSource<Task>({
+    collectionId: 'docs-custom-field-type-entity-page',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+  });
+
+  const form = useForm();
+  const state = useEntityPage<Task>(source, {
+    parentPageId: '',
+    form,
+    entityId: '1',
+    saveSuccessToast: 'Saved',
+    saveErrorToast: () => 'Failed to save',
+  });
+
+  return (
+    <EntityPage state={state} dataHook="docs-custom-field-type-entity-page">
+      <EntityPage.Header title={{ text: store.task.name }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPageFieldsCard
+            title="Fields"
+            subtitle="The Progress field renders through its `form` slot"
+            minHeight="204px"
+          />
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}
+```
+
 ## API
 
 ### Overview
@@ -472,6 +827,56 @@ Items appear on every field-actions menu (editable table column header, manage-f
 
 - `items?: Array` — `disabledTooltip` returning a string disables the item and shows the tooltip.
 
+#### `form` — the entity-page form input
+
+Required once a field of this type renders on an entity page — development throws a clear error without it; production skips the field.
+
+- `Component` — receives `FormFieldComponentProps` (`field`, `value`, `onChange(value)`, `onBlur`, `dataHook?`) and renders only the input. The entity page owns the form wiring and the field UI: it registers the field on the form (seeding the value from the entity, falling back to `value.defaultValue`), runs `value.validate` on it, and wraps the component in a WDS `FormField` with the label, required marker, and error message.
+
+#### `fieldModal` — the add/edit-field modal (opt-in)
+
+Absent ⇒ the modal never offers this type. With it, the type shows in the add-field type picker (using `display.label` and `display.icons`), and a created field arrives at the source's `FieldActions.addField` as `{ type: 'CUSTOM', customType:  }`. Requires the source to support field creation (`schemaPermissions.createField` + `fieldActions.addField`).
+
+- `creatable: boolean` — true ⇒ offered in the picker.
+- `namePlaceholder?: string` — placeholder for the name input; absent ⇒ the modal's generic placeholder.
+- `subtitle?: string` — one-line description under the type in the picker.
+- `group?: string` — group heading the type is listed under.
+- `supportsPii?: boolean` — absent ⇒ follows the source-wide setting.
+- `piiWarning?: () => FieldPiiWarning | undefined` — warning shown while the PII toggle is on.
+- `settingsSection?: FieldSettingsSection` — the type's own collapsible settings section (`Component`, `hasError`, `getValues`, `setValues`); its values reach the source's `addField`/`editField` as `settings`, untouched.
+
+##### What the modal offers, and who persists it
+
+The modal renders only what the source declares — there is no built-in list of standard types, because offering a type is a promise the source's backend can store it. A source adapter declares its creatable set once (`fieldModal.types` on the source, e.g. `useCmsSchemaSource` declares the types `@wix/data` can create); creatable custom types are appended to that set automatically.
+
+Saving goes through the source's `FieldActions` — **persistence is the source's responsibility, Cairo only routes the modal's confirm**:
+
+```ts
+const fieldActions: FieldActions = {
+  // Called on confirm with the new field — a custom type arrives as
+  // { type: 'CUSTOM', customType } — plus the settings section's values.
+  // Persist it in your service, then return the collection's updated fields
+  // map; Cairo merges it into the loaded schema so the columns update
+  // without a reload.
+  addField: async (field, settings) => {
+    await myService.createField(collectionId, field, settings);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+  editField: async (fieldId, updates, settings) => {
+    await myService.updateField(collectionId, fieldId, updates, settings);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+  deleteField: async (fieldId) => {
+    await myService.deleteField(collectionId, fieldId);
+    return (await myService.getSchema(collectionId)).fields;
+  },
+};
+
+const loadSchema = async () => ({ schema, backend, fieldActions });
+```
+
+Your backend must be able to store and serve fields of the custom type — that verification is the consumer's responsibility. The live examples here keep fields in memory, so their changes reset on refresh; a source backed by a real service (e.g. the CMS adapter, which calls the collection APIs) persists them.
+
 
 ### Props
 
@@ -481,5 +886,7 @@ Items appear on every field-actions menu (editable table column header, manage-f
 | `filter` | `FilterTypeConfig \| { filterable: false; }` | Yes | - | Filter behavior, or an explicit opt-out — never silently absent. |
 | `table` | `TableCellConfig<V>` | No | - | Absent ⇒ the field renders with the default cell in the read-only table. |
 | `editableTable` | `EditableCellConfig<V>` | No | - | Absent ⇒ the field renders as a read-only cell in editable surfaces. |
+| `form` | `FormTypeConfig<V>` | No | - | Required once a field of this type renders on an entity page: development throws without it; production skips the field. |
 | `actions` | `FieldActionsConfig` | No | - | Extra items for the field's "more actions" menu. |
+| `fieldModal` | `FieldModalConfig` | No | - | Absent ⇒ the add/edit field modal never offers this type. Fields of the type created elsewhere still open in the modal for name/PII edits. |
 

package/dist/docs/MultiAutoInlineCheckboxFilter.md

@@ -65,9 +65,9 @@ import { MultiAutoInlineCheckboxFilter } from '@wix/patterns';
 | `align` | `"right" \| "left" \| "center" \| "space-between"` | No | - | Defines how the children are aligned according to the X axis |
 | `page` | `Page` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `auto \| <custom-ident>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **85** \| **110** \| **1** \| **85** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/page |
 | `inline` | `boolean` | No | - | Defines if the box behaves as an inline element |
+| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `width` | `any` | No | - | Sets the width of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/width |
 | `zIndex` | `ZIndex` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <integer>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/z-index |
-| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `grid` | `Grid` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017. **Syntax**: `<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :------: \| :----: \| :-: \| \| **57** \| **52** \| **10.1** \| **16** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid |
 | `fill` | `Fill` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<paint>` **Initial value**: `black` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **3** \| **4** \| **≤15** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill |
 | `container` | `Container` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `<'container-name'> [ / <'container-type'> ]?` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :----: \| :-----: \| :-: \| \| **105** \| **110** \| **16** \| **105** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container |

package/dist/docs/MultiInlineCheckboxFilter.md

@@ -86,9 +86,9 @@ function BasicMultiInlineCheckboxFilter() {
 | `align` | `"right" \| "left" \| "center" \| "space-between"` | No | - | Defines how the children are aligned according to the X axis |
 | `page` | `Page` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `auto \| <custom-ident>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **85** \| **110** \| **1** \| **85** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/page |
 | `inline` | `boolean` | No | - | Defines if the box behaves as an inline element |
+| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `width` | `any` | No | - | Sets the width of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/width |
 | `zIndex` | `ZIndex` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <integer>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/z-index |
-| `minHeight` | `any` | No | - | Sets the minimum height of the box in pixels This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **3** \| **1.3** \| **12** \| **7** \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/min-height |
 | `grid` | `Grid` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017. **Syntax**: `<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :------: \| :----: \| :-: \| \| **57** \| **52** \| **10.1** \| **16** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid |
 | `fill` | `Fill` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<paint>` **Initial value**: `black` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **3** \| **4** \| **≤15** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill |
 | `container` | `Container` | No | - | This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023. **Syntax**: `<'container-name'> [ / <'container-type'> ]?` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :----: \| :-----: \| :-: \| \| **105** \| **110** \| **16** \| **105** \| No \| @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container |

package/dist/docs/TableColumn.md

@@ -37,4 +37,5 @@ A column of a [`Table`](./?path=/story/base-components-collections-table-table--
 | `render` | `(row: any, rowNum: number) => ReactNode` | Yes | - | A callback that is called for each row in the data to display the value of this row for the specified column. |
 | `mobile` | `ColumnMobileConfig` | No | - | Mobile column configuration. Determines how this column is displayed on mobile devices. - column: 'first' - Stacks vertically with other 'first' columns - column: 'second' - Displays as standalone second column - undefined - Hidden on mobile |
 | `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 column. Cairo maps this to the appropriate icon internally. |
+| `fieldTypeIcons` | `{ Small: ComponentType<{}>; Medium: ComponentType<{}>; }` | No | - | Explicit prefix icons for the column (e.g. a custom field type's `display.icons`). When present, used instead of the `fieldType` mapping. |
 

package/dist/docs/index.json

@@ -1,12 +1,12 @@
 {
-  "ActionSubItem": {
-    "file": "ActionSubItem.md",
-    "category": "Common/Types"
-  },
   "AI Assistant": {
     "file": "AI Assistant.md",
     "category": "Integrations/AI Assistant"
   },
+  "ActionSubItem": {
+    "file": "ActionSubItem.md",
+    "category": "Common/Types"
+  },
   "AutoCompleteFilter": {
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components"
@@ -23,14 +23,14 @@
     "file": "CollectionNoResultsState.md",
     "category": "Features/Display/Empty States"
   },
-  "CollectionPage": {
-    "file": "CollectionPage.md",
-    "category": "Base Components/Pages/Collection Page"
-  },
   "CollectionOptimisticActions": {
     "file": "CollectionOptimisticActions.md",
     "category": "Features/Actions/Updates"
   },
+  "CollectionPage": {
+    "file": "CollectionPage.md",
+    "category": "Base Components/Pages/Collection Page"
+  },
   "CollectionPage.Content": {
     "file": "CollectionPage.Content.md",
     "category": "Base Components/Pages/Collection Page"
@@ -47,26 +47,26 @@
     "file": "CollectionSearch.md",
     "category": "Features/Filter/Components"
   },
-  "CollectionSubToolbar": {
-    "file": "CollectionSubToolbar.md",
-    "category": "Common/Components"
-  },
   "CollectionToolbar": {
     "file": "CollectionToolbar.md",
     "category": "Common/Components"
   },
+  "CollectionSubToolbar": {
+    "file": "CollectionSubToolbar.md",
+    "category": "Common/Components"
+  },
   "ToolbarFilters": {
     "file": "ToolbarFilters.md",
     "category": "Features/Filter/Components"
   },
-  "CustomColumns": {
-    "file": "CustomColumns.md",
-    "category": "Features/Display/Custom Columns"
-  },
   "CustomFieldType": {
     "file": "CustomFieldType.md",
     "category": "Features/Enrich/Custom Field Types"
   },
+  "CustomColumns": {
+    "file": "CustomColumns.md",
+    "category": "Features/Display/Custom Columns"
+  },
   "CustomFieldsViewWidget": {
     "file": "CustomFieldsViewWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
@@ -75,10 +75,6 @@
     "file": "CustomFieldsWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
   },
-  "DateRangeFilter": {
-    "file": "DateRangeFilter.md",
-    "category": "Features/Filter/Components"
-  },
   "EntityPage": {
     "file": "EntityPage.md",
     "category": "Base Components/Pages/Entity Page"
@@ -87,14 +83,18 @@
     "file": "EntityPage.AdditionalContent.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.Card": {
-    "file": "EntityPage.Card.md",
-    "category": "Base Components/Pages/Entity Page"
+  "DateRangeFilter": {
+    "file": "DateRangeFilter.md",
+    "category": "Features/Filter/Components"
   },
   "EntityPage.Content": {
     "file": "EntityPage.Content.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage.Card": {
+    "file": "EntityPage.Card.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "EntityPage.Header": {
     "file": "EntityPage.Header.md",
     "category": "Base Components/Pages/Entity Page"

package/dist/esm/components/CardContainer/CardContainer.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CardContainer2848505373";
+var _namespace_ = "CardContainer4012966892";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CardContainer2848505373__root" };
+export var classes = { "root": "CardContainer4012966892__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldForm.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldForm1740606650";
+var _namespace_ = "CmsFieldForm3516791577";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldForm1740606650__root", "fullBleedDivider": "CmsFieldForm1740606650__fullBleedDivider" };
+export var classes = { "root": "CmsFieldForm3516791577__root", "fullBleedDivider": "CmsFieldForm3516791577__fullBleedDivider" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldModal.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldModal3795014477";
+var _namespace_ = "CmsFieldModal2279318908";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldModal3795014477__root", "modal": "CmsFieldModal3795014477__modal" };
+export var classes = { "root": "CmsFieldModal2279318908__root", "modal": "CmsFieldModal2279318908__modal" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "ValidationAndDefaultsSection4139158258";
+var _namespace_ = "ValidationAndDefaultsSection3388606183";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ValidationAndDefaultsSection4139158258__root", "accordionWrapper": "ValidationAndDefaultsSection4139158258__accordionWrapper" };
+export var classes = { "root": "ValidationAndDefaultsSection3388606183__root", "accordionWrapper": "ValidationAndDefaultsSection3388606183__accordionWrapper" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "CharactersLimitInput4136386049";
+var _namespace_ = "CharactersLimitInput1150986335";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CharactersLimitInput4136386049__root", "field": "CharactersLimitInput4136386049__field" };
+export var classes = { "root": "CharactersLimitInput1150986335__root", "field": "CharactersLimitInput1150986335__field" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};