@wix/patterns 1.438.0 → 1.440.0

package/dist/docs/CustomFieldType.md

@@ -0,0 +1,485 @@
+# CustomFieldType
+
+**Category:** Features/Enrich/Custom Field Types
+
+## Design
+
+### Description
+
+A **custom field type** is a consumer-defined field that plugs into every schema-driven surface. Define it once with `defineFieldType()` and register it on the schema source via `fieldTypes` — the page wires nothing per surface. Each surface resolves its own slot from the definition:
+
+- `table` — the read-only table cell and column layout.
+- `editableTable` — the editable cell: view, inline editor, and clipboard behavior.
+- `filter` — the filter registered on the collection query and its toolbar element. This slot is required: provide a config, or opt out explicitly with `{ filterable: false }`.
+- `value` — value semantics (`defaultValue`, `isEmpty`, `validate`) used by every surface.
+- `capabilities` — e.g. `sortable`.
+- `actions` — extra items on the field's "more actions" menus.
+- `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.
+
+See the **API** tab for the full configuration of each slot.
+
+
+```tsx
+import { defineFieldType } from '@wix/patterns';
+```
+
+### Table cell and filter
+
+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.
+
+```tsx
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  defineFieldType,
+  idNameArrayFilter,
+  MultiInlineCheckboxFilter,
+} from '@wix/patterns';
+import type { Field, FilterProps } from '@wix/patterns';
+import { useSchemaSource, useTableCollection } from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+
+type Task = { id: string; name: string; progress?: number };
+type Bucket = { id: string; name: string };
+
+function CustomFieldTypeTable() {
+  const tasks: Task[] = [
+    { id: '1', name: 'Design homepage', progress: 80 },
+    { id: '2', name: 'Set up payments', progress: 100 },
+    { id: '3', name: 'Write product descriptions', progress: 25 },
+    { id: '4', name: 'Configure shipping', progress: 55 },
+    { id: '5', name: 'Launch campaign', progress: 0 },
+  ];
+
+  const ProgressCell = ({ 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: `${value ?? 0}%`,
+            height: '100%',
+            background: '#3899EC',
+          }}
+        />
+      </div>
+      <span>{value ?? 0}%</span>
+    </div>
+  );
+
+  // The option id encodes the range; the backend parses it back.
+  const BUCKETS: Bucket[] = [
+    { id: '0-33', name: 'Low (0-33%)' },
+    { id: '34-66', name: 'Medium (34-66%)' },
+    { id: '67-100', name: 'High (67-100%)' },
+  ];
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    filter: {
+      createFilter: () => idNameArrayFilter<Bucket>(),
+      Component: (props: FilterProps<Bucket[]>) => (
+        <MultiInlineCheckboxFilter {...props} data={BUCKETS} />
+      ),
+    },
+    value: { defaultValue: 0, isEmpty: (v) => v == null },
+    capabilities: { sortable: true },
+    table: {
+      CellComponent: ({ value }) => <ProgressCell value={value} />,
+      width: '160px',
+    },
+    actions: {
+      items: [
+        {
+          key: 'about-progress',
+          label: 'About this field type',
+          onClick: (field) =>
+            window.alert(`"${field.displayName}" is a custom field type.`),
+        },
+      ],
+    },
+  });
+
+  // The field is typed CUSTOM and points at the definition through `customType`.
+  const progressField: Field = {
+    id: 'progress',
+    displayName: 'Progress',
+    type: 'CUSTOM',
+    customType: 'docs.progress',
+  };
+
+  const schema: Schema = {
+    id: 'docs-custom-field-type-table',
+    fields: { progress: progressField },
+    displayField: 'name',
+    idField: 'id',
+  };
+
+  // Like filtering, sorting is delegated to the backend: `find` receives
+  // `sort` ({ fieldName, order }[]) and owns applying it.
+  const backend: CollectionBackend<Task> = {
+    find: async ({ search = '', filters = {}, sort = [] }) => {
+      const buckets = (filters as { progress?: Bucket[] }).progress;
+      const found = tasks.filter(
+        (task) =>
+          task.name.toLowerCase().includes(search.toLowerCase()) &&
+          (!buckets?.length ||
+            buckets.some(({ id }) => {
+              // parseInt, not Number — the example scope shadows `Number`.
+              const [min, max] = id
+                .split('-')
+                .map((part) => parseInt(part, 10));
+              const progress = task.progress ?? 0;
+              return progress >= min && progress <= max;
+            })),
+      );
+      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 };
+    },
+  };
+
+  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
+    schema,
+    backend,
+  });
+
+  const source = useSchemaSource<Task>({
+    collectionId: 'docs-custom-field-type-table',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+  });
+  const state = useTableCollection<Task>(source);
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Tasks' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'name',
+              title: 'Name',
+              render: (task) => task.name,
+              width: '220px',
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+### 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`. The Progress column's header menu has "This is action only for progress bar" (the `actions` slot) — it appears only on this field type. Filtering is opted out with `{ filterable: false }`, so the toolbar shows no Progress filter.
+
+```tsx
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import { EditableTable, defineFieldType } from '@wix/patterns';
+import type { CellEditProps, EditableColumn, Field } from '@wix/patterns';
+import {
+  useSchemaSource,
+  useEditableTableCollection,
+} from '@wix/patterns/schema';
+import type {
+  CollectionBackend,
+  LoadedSchema,
+  Schema,
+} from '@wix/patterns/schema';
+
+type Task = { id: string; name: string; progress?: number };
+
+function CustomFieldTypeSpreadsheet() {
+  // Plain object store (the live-example scope shadows the global `Map`).
+  const [store] = React.useState<{ tasks: Task[]; nextId: number }>(() => ({
+    nextId: 6,
+    tasks: [
+      { id: '1', name: 'Design homepage', progress: 80 },
+      { id: '2', name: 'Set up payments', progress: 100 },
+      { id: '3', name: 'Write product descriptions', progress: 25 },
+      { id: '4', name: 'Configure shipping', progress: 55 },
+      { id: '5', name: 'Launch campaign', progress: 0 },
+    ],
+  }));
+
+  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 ProgressCellEdit = ({
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    inputRef,
+  }: CellEditProps<number>) => {
+    const input = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(inputRef, () => ({
+      focus: () => input.current?.focus(),
+    }));
+    return (
+      <input
+        ref={input}
+        type="number"
+        min={0}
+        max={100}
+        value={value ?? 0}
+        // parseFloat, not Number — the example scope shadows `Number`.
+        onChange={(event) => onChange(parseFloat(event.target.value))}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            onCommit();
+          }
+          if (event.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          outline: 'none',
+        }}
+      />
+    );
+  };
+
+  const progressFieldType = defineFieldType<number>({
+    type: 'docs.progress',
+    display: {
+      label: 'Progress',
+      icons: { Small: () => <span>%</span>, Medium: () => <span>%</span> },
+    },
+    // This example focuses on the editable cell; opt out of filtering explicitly.
+    filter: { filterable: false },
+    value: { defaultValue: 0, isEmpty: (v) => v == null },
+    capabilities: { sortable: true },
+    editableTable: {
+      ViewComponent: ProgressCellView,
+      EditComponent: ProgressCellEdit,
+      serialize: (v) => String(clamp(v ?? 0)),
+      deserialize: (raw) => clamp(parseFloat(raw)),
+      normalizeOnCommit: (v) => clamp(v ?? 0),
+      onTypeToEdit: ({ key }) =>
+        /^\d$/.test(key) ? { value: parseInt(key, 10) } : undefined,
+    },
+    // Items here appear on the field's actions menus (e.g. the editable
+    // table's column header menu) — only for fields of this type.
+    actions: {
+      items: [
+        {
+          key: 'progress-only-action',
+          label: 'This is action only for progress bar',
+          onClick: () => window.alert('This is action only for progress bar'),
+        },
+      ],
+    },
+  });
+
+  const progressField: Field = {
+    id: 'progress',
+    displayName: 'Progress',
+    type: 'CUSTOM',
+    customType: 'docs.progress',
+  };
+
+  const schema: Schema = {
+    id: 'docs-custom-field-type-editable',
+    fields: { progress: progressField },
+    displayField: 'name',
+    idField: 'id',
+    itemPermissions: { createItem: true, updateItem: true, deleteItem: true },
+  };
+
+  const backend: CollectionBackend<Task> = {
+    // Sorting is delegated to the backend: `find` receives `sort`
+    // ({ fieldName, order }[]) and owns applying it.
+    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,
+  });
+
+  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-editable',
+    loadSchema,
+    fieldTypes: [progressFieldType],
+  });
+  const state = useEditableTableCollection<Task>(source);
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Tasks' }} />
+      <CollectionPage.Content>
+        <EditableTable state={state} columns={columns} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}
+```
+
+## API
+
+### Overview
+
+Full configuration of each slot on `FieldTypeDefinition` (`V` is the field's value type — `defineFieldType` infers it and keeps all slots consistent).
+
+#### `type: string`
+
+Unique key for the type (e.g. `'myvertical.rating'`). Fields reference it via `customType` — an unmatched key falls back to a read-only object cell.
+
+#### `display` — label and icons in field menus
+
+- `label: string`
+- `icons: { Small: ComponentType; Medium: ComponentType }`
+
+#### `filter` — toolbar filter (required slot)
+
+Provide a config, or opt out explicitly with `{ filterable: false }` — never silently absent.
+
+- `createFilter(field): Filter` — the filter state registered on the collection query (e.g. `idNameArrayFilter()`).
+- `Component` — the toolbar element; receives `FilterProps` (`filter`, plus `toolbarItemProps` / `toolbarTagProps` / `accordionItemProps` labels). Typically wraps a built-in filter element like `MultiInlineCheckboxFilter`.
+
+The backend owns the translation: `find({ filters })` receives the raw filter value exactly as the filter state produced it.
+
+#### `value` — value semantics, used by every surface
+
+- `defaultValue?: V`
+- `isEmpty?(value: V): boolean`
+- `validate?(value: V, rules?: ValidationRule[]): string | null` — return an error message or `null`; every surface that validates a field of this type runs this. `ValidationRule` covers `required`, `min`/`max`, `minLength`/`maxLength`, `pattern`, `custom`, and `specificValues`.
+
+#### `capabilities`
+
+- `sortable: boolean` — turns the sort controls on. The backend receives `sort` (`{ fieldName, order }[]`) on `find` and owns applying it, same as filters.
+
+#### `table` — the read-only table cell and column layout
+
+- `CellComponent(props: { value: V })` — renders the cell.
+- `width: string` — required; custom types get no built-in layout default.
+- `align?: 'start' | 'center' | 'end'` — default `'start'`.
+
+#### `editableTable` — the editable cell: view, inline editor, clipboard
+
+- `ViewComponent(props: CellViewProps)` — view mode. Props: `value`, `typeConfig`, `validation`, `columnId`, `rowKey`.
+- `EditComponent?(props: CellEditProps)` — edit mode; omit for view-only cells. Props: `value`, `onChange(value)` (call on **every** change — Tab-commit reads the editing value synchronously before blur), `onCommit()`, `onCancel()` (wire Escape to it), `onStartEdit?()` (call before opening external UI like a modal so the table keeps cell focus), `inputRef` (expose `{ focus }` via `useImperativeHandle` for type-to-edit), `editTrigger`, `validation`, `typeConfig`, `columnId`, `rowKey`.
+- `serialize?(value: V): string` / `deserialize?(raw: string): V` — clipboard copy/paste. Serialized values must be single-line (TSV).
+- `editable?: boolean` — default `true`.
+- `clearable?: boolean` — can the Delete key clear the cell; default `true`.
+- `toggleValue?(value: V): V` — toggle on single click (e.g. boolean checkbox), skipping the focus→edit flow.
+- `editOnClick?(value: V): boolean` — enter edit mode on single click (e.g. an empty image cell).
+- `showEditWhenFocused?: boolean` — render the EditComponent while merely focused, keyboard navigation stays active.
+- `growable?: boolean` — cell content may grow past row height when focused (only with `showEditWhenFocused`).
+- `onTypeToEdit?({ key, validation })` — handle type-to-edit: return `{ value }` to seed and enter edit, `{}` to enter edit unchanged, `undefined` to block the key. Without it, typing on a focused cell does nothing.
+- `nativeTypeToEdit?: boolean` — flush edit mode synchronously on keydown and let the browser deliver the keystroke to the focused input (for controlled inputs that can't be seeded via props).
+- `normalizeOnCommit?(value: V): V` — normalize just before the edit commits (e.g. clamp a number, prepend `https://`).
+- `EditWrapper?: ComponentType` — optional wrapper kept mounted across the edit↔view transition, for behavior that must outlive the inline editor.
+
+#### `actions` — extra items on the field's "more actions" menus
+
+Items appear on every field-actions menu (editable table column header, manage-fields panel, customize-columns panel) — only for fields of this type.
+
+- `items?: Array` — `disabledTooltip` returning a string disables the item and shows the tooltip.
+
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `type` | `string` | Yes | - | Unique key for the type. A built-in type uses its `PatternsFieldType`; a consumer-defined type uses the string its fields reference via `customType`. |
+| `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. |
+| `actions` | `FieldActionsConfig` | No | - | Extra items for the field's "more actions" menu. |
+

package/dist/docs/index.json

@@ -1,8 +1,4 @@
 {
-  "ActionSubItem": {
-    "file": "ActionSubItem.md",
-    "category": "Common/Types"
-  },
   "AI Assistant": {
     "file": "AI Assistant.md",
     "category": "Integrations/AI Assistant"
@@ -11,14 +7,14 @@
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components"
   },
+  "ActionSubItem": {
+    "file": "ActionSubItem.md",
+    "category": "Common/Types"
+  },
   "CollectionEmptyState": {
     "file": "CollectionEmptyState.md",
     "category": "Features/Display/Empty States"
   },
-  "CollectionNoResultsState": {
-    "file": "CollectionNoResultsState.md",
-    "category": "Features/Display/Empty States"
-  },
   "CollectionErrorState": {
     "file": "CollectionErrorState.md",
     "category": "Common/State"
@@ -27,6 +23,10 @@
     "file": "CollectionPage.md",
     "category": "Base Components/Pages/Collection Page"
   },
+  "CollectionNoResultsState": {
+    "file": "CollectionNoResultsState.md",
+    "category": "Features/Display/Empty States"
+  },
   "CollectionOptimisticActions": {
     "file": "CollectionOptimisticActions.md",
     "category": "Features/Actions/Updates"
@@ -35,10 +35,6 @@
     "file": "CollectionPage.Content.md",
     "category": "Base Components/Pages/Collection Page"
   },
-  "CollectionPage.Header": {
-    "file": "CollectionPage.Header.md",
-    "category": "Base Components/Pages/Collection Page"
-  },
   "CollectionSearch": {
     "file": "CollectionSearch.md",
     "category": "Features/Filter/Components"
@@ -47,6 +43,10 @@
     "file": "CollectionPremiumEmptyState.md",
     "category": "Features/Display/Empty States"
   },
+  "CollectionPage.Header": {
+    "file": "CollectionPage.Header.md",
+    "category": "Base Components/Pages/Collection Page"
+  },
   "CollectionSubToolbar": {
     "file": "CollectionSubToolbar.md",
     "category": "Common/Components"
@@ -63,6 +63,10 @@
     "file": "CustomColumns.md",
     "category": "Features/Display/Custom Columns"
   },
+  "CustomFieldType": {
+    "file": "CustomFieldType.md",
+    "category": "Features/Enrich/Custom Field Types"
+  },
   "CustomFieldsViewWidget": {
     "file": "CustomFieldsViewWidget.md",
     "category": "Features/Enrich/Data Extension/Components"
@@ -79,14 +83,14 @@
     "file": "EntityPage.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.AdditionalContent": {
-    "file": "EntityPage.AdditionalContent.md",
-    "category": "Base Components/Pages/Entity Page"
-  },
   "EntityPage.Card": {
     "file": "EntityPage.Card.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage.AdditionalContent": {
+    "file": "EntityPage.AdditionalContent.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "EntityPage.Content": {
     "file": "EntityPage.Content.md",
     "category": "Base Components/Pages/Entity Page"
@@ -399,14 +403,14 @@
     "file": "BulkActionModalRenderProp.md",
     "category": "Common/Types"
   },
-  "BulkSelectState": {
-    "file": "BulkSelectState.md",
-    "category": "Common/State"
-  },
   "Category": {
     "file": "Category.md",
     "category": "Common/Types"
   },
+  "BulkSelectState": {
+    "file": "BulkSelectState.md",
+    "category": "Common/State"
+  },
   "CollectionSection": {
     "file": "CollectionSection.md",
     "category": "Common/Types"
@@ -427,10 +431,6 @@
     "file": "customFilter.md",
     "category": "Features/Filter/Factories"
   },
-  "DataResultRaw": {
-    "file": "DataResultRaw.md",
-    "category": "Common/Types"
-  },
   "Data Extension Overview": {
     "file": "Data Extension Overview.md",
     "category": "Features/Enrich/Data Extension"
@@ -447,6 +447,10 @@
     "file": "Allow Users to Add Extended Fields.md",
     "category": "Features/Enrich/Data Extension"
   },
+  "DataResultRaw": {
+    "file": "DataResultRaw.md",
+    "category": "Common/Types"
+  },
   "EntityPageState": {
     "file": "EntityPageState.md",
     "category": "Base Components/Pages/Entity Page/State"

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_ = "CardContainer3291627948";
+var _namespace_ = "CardContainer2683001775";
 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": "CardContainer3291627948__root" };
+export var classes = { "root": "CardContainer2683001775__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_ = "CmsFieldForm1804752447";
+var _namespace_ = "CmsFieldForm3732479235";
 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": "CmsFieldForm1804752447__root", "fullBleedDivider": "CmsFieldForm1804752447__fullBleedDivider" };
+export var classes = { "root": "CmsFieldForm3732479235__root", "fullBleedDivider": "CmsFieldForm3732479235__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_ = "CmsFieldModal2942131533";
+var _namespace_ = "CmsFieldModal2659787844";
 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": "CmsFieldModal2942131533__root", "modal": "CmsFieldModal2942131533__modal" };
+export var classes = { "root": "CmsFieldModal2659787844__root", "modal": "CmsFieldModal2659787844__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_ = "ValidationAndDefaultsSection3910330885";
+var _namespace_ = "ValidationAndDefaultsSection1624267018";
 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": "ValidationAndDefaultsSection3910330885__root", "accordionWrapper": "ValidationAndDefaultsSection3910330885__accordionWrapper" };
+export var classes = { "root": "ValidationAndDefaultsSection1624267018__root", "accordionWrapper": "ValidationAndDefaultsSection1624267018__accordionWrapper" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};