@wix/patterns 1.437.0 → 1.439.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,4 +1,8 @@
 {
+  "ActionSubItem": {
+    "file": "ActionSubItem.md",
+    "category": "Common/Types"
+  },
   "AI Assistant": {
     "file": "AI Assistant.md",
     "category": "Integrations/AI Assistant"
@@ -7,10 +11,6 @@
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components"
   },
-  "ActionSubItem": {
-    "file": "ActionSubItem.md",
-    "category": "Common/Types"
-  },
   "CollectionEmptyState": {
     "file": "CollectionEmptyState.md",
     "category": "Features/Display/Empty States"
@@ -23,14 +23,14 @@
     "file": "CollectionNoResultsState.md",
     "category": "Features/Display/Empty States"
   },
-  "CollectionOptimisticActions": {
-    "file": "CollectionOptimisticActions.md",
-    "category": "Features/Actions/Updates"
-  },
   "CollectionPage": {
     "file": "CollectionPage.md",
     "category": "Base Components/Pages/Collection Page"
   },
+  "CollectionOptimisticActions": {
+    "file": "CollectionOptimisticActions.md",
+    "category": "Features/Actions/Updates"
+  },
   "CollectionPage.Content": {
     "file": "CollectionPage.Content.md",
     "category": "Base Components/Pages/Collection Page"
@@ -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"
@@ -83,22 +87,22 @@
     "file": "EntityPage.AdditionalContent.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "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.MainContent": {
-    "file": "EntityPage.MainContent.md",
+  "EntityPage.Content": {
+    "file": "EntityPage.Content.md",
     "category": "Base Components/Pages/Entity Page"
   },
   "EntityPage.Header": {
     "file": "EntityPage.Header.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage.MainContent": {
+    "file": "EntityPage.MainContent.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "EntityPage.Slots": {
     "file": "EntityPage.Slots.md",
     "category": "Base Components/Pages/Entity Page"

package/dist/esm/components/BulkActionToolbar/BulkActionToolbar.js

@@ -2,15 +2,17 @@ import { Box, TableToolbar } from '@wix/design-system';
 import React, { cloneElement } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 export function _BulkActionToolbar(props) {
     const { actionButton } = props;
     const toolbarCollectionState = useToolbarCollectionContext();
+    const isBmHarmonyTheme = useBmHarmonyTheme();
     const { collection, hasToolbarTabs, featuredComponents } = toolbarCollectionState;
     const { value: exportButton } = featuredComponents.exportButton;
     const TagsAssignButton = toolbarCollectionState.tagsCollectionState?.components.AssignButton;
     const { bulkSelect: { selectedCountOrTotal: selectedCount }, translate: t, } = collection;
-    return (React.createElement(Box, { minHeight: "60px" },
-        React.createElement(TableToolbar, { removeVerticalPadding: hasToolbarTabs, dataHook: "bulk-action-toolbar" },
+    return (React.createElement(Box, { minHeight: isBmHarmonyTheme ? undefined : '60px' },
+        React.createElement(TableToolbar, { removeVerticalPadding: !isBmHarmonyTheme && hasToolbarTabs, dataHook: "bulk-action-toolbar" },
             React.createElement(TableToolbar.ItemGroup, { position: "start" },
                 React.createElement(TableToolbar.Item, null,
                     React.createElement(TableToolbar.SelectedCount, { dataHook: "selected-count" }, t('cairo.bulkSelected', {

package/dist/esm/components/BulkActionToolbar/BulkActionToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActionToolbar.js","sourceRoot":"","sources":["../../../../src/components/BulkActionToolbar/BulkActionToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAM1E,MAAM,UAAU,kBAAkB,CAAC,KAA6B;IAC9D,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/B,MAAM,sBAAsB,GAAG,2BAA2B,EAAE,CAAC;IAE7D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,GACtD,sBAAsB,CAAC;IAEzB,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,kBAAkB,CAAC,YAAY,CAAC;IAChE,MAAM,gBAAgB,GACpB,sBAAsB,CAAC,mBAAmB,EAAE,UAAU,CAAC,YAAY,CAAC;IAEtE,MAAM,EACJ,UAAU,EAAE,EAAE,oBAAoB,EAAE,aAAa,EAAE,EACnD,SAAS,EAAE,CAAC,GACb,GAAG,UAAU,CAAC;IAEf,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM;QACnB,oBAAC,YAAY,IACX,qBAAqB,EAAE,cAAc,EACrC,QAAQ,EAAC,qBAAqB;YAE9B,oBAAC,YAAY,CAAC,SAAS,IAAC,QAAQ,EAAC,OAAO;gBACtC,oBAAC,YAAY,CAAC,IAAI;oBAChB,oBAAC,YAAY,CAAC,aAAa,IAAC,QAAQ,EAAC,gBAAgB,IAClD,CAAC,CAAC,oBAAoB,EAAE;wBACvB,GAAG,EAAE,aAAa;qBACnB,CAAC,CACyB,CACX;gBACnB,gBAAgB,IAAI,CACnB,oBAAC,YAAY,CAAC,IAAI;oBAChB,oBAAC,gBAAgB,OAAG,CACF,CACrB;gBACA,YAAY,IAAI,CACf,oBAAC,YAAY,CAAC,IAAI,QACf,YAAY,CAAC,YAAY,EAAE;oBAC1B,WAAW,EAAE,SAAS;iBACvB,CAAC,CACgB,CACrB,CACsB;YACxB,YAAY,IAAI,CACf,oBAAC,YAAY,CAAC,SAAS,IAAC,QAAQ,EAAC,KAAK;gBACpC,oBAAC,YAAY,CAAC,IAAI,IAAC,MAAM,EAAC,QAAQ,IAC/B,YAAY,CACK,CACG,CAC1B,CACY,CACX,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"BulkActionToolbar.js","sourceRoot":"","sources":["../../../../src/components/BulkActionToolbar/BulkActionToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAMlE,MAAM,UAAU,kBAAkB,CAAC,KAA6B;IAC9D,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/B,MAAM,sBAAsB,GAAG,2BAA2B,EAAE,CAAC;IAC7D,MAAM,gBAAgB,GAAG,iBAAiB,EAAE,CAAC;IAE7C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,GACtD,sBAAsB,CAAC;IAEzB,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,kBAAkB,CAAC,YAAY,CAAC;IAChE,MAAM,gBAAgB,GACpB,sBAAsB,CAAC,mBAAmB,EAAE,UAAU,CAAC,YAAY,CAAC;IAEtE,MAAM,EACJ,UAAU,EAAE,EAAE,oBAAoB,EAAE,aAAa,EAAE,EACnD,SAAS,EAAE,CAAC,GACb,GAAG,UAAU,CAAC;IAEf,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;QACnD,oBAAC,YAAY,IACX,qBAAqB,EAAE,CAAC,gBAAgB,IAAI,cAAc,EAC1D,QAAQ,EAAC,qBAAqB;YAE9B,oBAAC,YAAY,CAAC,SAAS,IAAC,QAAQ,EAAC,OAAO;gBACtC,oBAAC,YAAY,CAAC,IAAI;oBAChB,oBAAC,YAAY,CAAC,aAAa,IAAC,QAAQ,EAAC,gBAAgB,IAClD,CAAC,CAAC,oBAAoB,EAAE;wBACvB,GAAG,EAAE,aAAa;qBACnB,CAAC,CACyB,CACX;gBACnB,gBAAgB,IAAI,CACnB,oBAAC,YAAY,CAAC,IAAI;oBAChB,oBAAC,gBAAgB,OAAG,CACF,CACrB;gBACA,YAAY,IAAI,CACf,oBAAC,YAAY,CAAC,IAAI,QACf,YAAY,CAAC,YAAY,EAAE;oBAC1B,WAAW,EAAE,SAAS;iBACvB,CAAC,CACgB,CACrB,CACsB;YACxB,YAAY,IAAI,CACf,oBAAC,YAAY,CAAC,SAAS,IAAC,QAAQ,EAAC,KAAK;gBACpC,oBAAC,YAAY,CAAC,IAAI,IAAC,MAAM,EAAC,QAAQ,IAC/B,YAAY,CACK,CACG,CAC1B,CACY,CACX,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC"}

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_ = "CardContainer2701829786";
+var _namespace_ = "CardContainer2848505373";
 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": "CardContainer2701829786__root" };
+export var classes = { "root": "CardContainer2848505373__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_ = "CmsFieldForm575910876";
+var _namespace_ = "CmsFieldForm1740606650";
 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": "CmsFieldForm575910876__root", "fullBleedDivider": "CmsFieldForm575910876__fullBleedDivider" };
+export var classes = { "root": "CmsFieldForm1740606650__root", "fullBleedDivider": "CmsFieldForm1740606650__fullBleedDivider" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

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

@@ -1 +1 @@
-{"version":3,"file":"CmsFieldForm.st.css.js","sourceRoot":"","sources":["../../../../src/components/CmsFieldManagement/CmsFieldForm.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,uBAAuB,CAAC;AAC1C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,6BAA6B,EAAC,kBAAkB,EAAC,yCAAyC,EAAC,CAAC;AACzH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,eAAe,EAAC,iBAAiB,EAAC,6CAA6C,EAAC,+CAA+C,EAAC,CAAC"}
+{"version":3,"file":"CmsFieldForm.st.css.js","sourceRoot":"","sources":["../../../../src/components/CmsFieldManagement/CmsFieldForm.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,wBAAwB,CAAC;AAC3C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,8BAA8B,EAAC,kBAAkB,EAAC,0CAA0C,EAAC,CAAC;AAC3H,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,eAAe,EAAC,iBAAiB,EAAC,6CAA6C,EAAC,+CAA+C,EAAC,CAAC"}

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_ = "CmsFieldModal1547597840";
+var _namespace_ = "CmsFieldModal3795014477";
 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": "CmsFieldModal1547597840__root", "modal": "CmsFieldModal1547597840__modal" };
+export var classes = { "root": "CmsFieldModal3795014477__root", "modal": "CmsFieldModal3795014477__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_ = "ValidationAndDefaultsSection2817891564";
+var _namespace_ = "ValidationAndDefaultsSection4139158258";
 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": "ValidationAndDefaultsSection2817891564__root", "accordionWrapper": "ValidationAndDefaultsSection2817891564__accordionWrapper" };
+export var classes = { "root": "ValidationAndDefaultsSection4139158258__root", "accordionWrapper": "ValidationAndDefaultsSection4139158258__accordionWrapper" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};