@wix/patterns 1.499.0 → 1.501.0

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1916564447";
+var _namespace_ = "SearchOrCustomFilter276488741";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1916564447__root","search":"SearchOrCustomFilter1916564447__search","searchMobile":"SearchOrCustomFilter1916564447__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter276488741__root","search":"SearchOrCustomFilter276488741__search","searchMobile":"SearchOrCustomFilter276488741__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly3401854664";
+var _namespace_ = "AutoCompleteReadonly3338367770";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly3401854664__root"};
+export var classes = {"root":"AutoCompleteReadonly3338367770__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown1177837184";
+var _namespace_ = "ViewsDropdown1548390709";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown1177837184__root"};
+export var classes = {"root":"ViewsDropdown1548390709__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -50,6 +50,16 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     : null;
 
   const checkboxDisabled = !column.hideable;
+  const toggleColumnVisibility = () => {
+    if (checkboxDisabled) {
+      return;
+    }
+    state.onColumnCheckboxToggle(column);
+    state.customizeColumnsInSidePanelBi({
+      actionName: 'visibility',
+      key: column.id,
+    });
+  };
   const hasSearchValue = state.searchValue.trim().length > 0;
   const dragDisabled = column.reorderDisabled || hasSearchValue;
   const checked = select.isChecked(column.id);
@@ -115,13 +125,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
           appendTo: 'window',
           disabled: !checkboxDisabled,
         }}
-        onCheckboxChange={() => {
-          if (checkboxDisabled) {
-            return;
-          }
-          state.onColumnCheckboxToggle(column);
-          state.customizeColumnsInSidePanelBi({ actionName: 'visibility' });
-        }}
+        onCheckboxChange={() => toggleColumnVisibility()}
         {...(hasSearchValue
           ? {}
           : {
@@ -159,12 +163,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     overflow: 'hidden',
                     minWidth: 0,
                   }}
-                  onClick={() => {
-                    if (checkboxDisabled) {
-                      return;
-                    }
-                    state.onColumnCheckboxToggle(column);
-                  }}
+                  onClick={toggleColumnVisibility}
                 >
                   {prefixIcon && (
                     <Box

package/src/components/CustomFieldModal/CustomFieldCollectionInput.tsx

@@ -7,9 +7,14 @@ import {
   Divider,
   ListItemAction,
   FormField,
+  listItemSectionBuilder,
   listItemSelectBuilder,
 } from '@wix/design-system';
 import { CustomFieldModalState } from '@wix/bex-core';
+import type {
+  FieldModalCollectionEntry,
+  FieldModalCollectionOption,
+} from '@wix/bex-core';
 
 export interface CustomFieldCollectionInputProps {
   state: CustomFieldModalState;
@@ -46,14 +51,52 @@ export const _CustomFieldCollectionInput = ({
     return null;
   }
 
-  const options = query
-    ? state.collectionOptions.filter((option) =>
-        option.label.toLowerCase().includes(query),
-      )
-    : state.collectionOptions;
   const selectedOption = state.collectionOptions.find(
     (option) => option.id === referencedCollectionId.value,
   );
+  const toOption = (option: FieldModalCollectionOption) =>
+    listItemSelectBuilder({
+      dataHook: `custom-field-modal-reference-collection-${option.id}`,
+      id: option.id,
+      title: option.label,
+      label: option.label,
+    });
+  const matchesSearch = (option: FieldModalCollectionOption) =>
+    option.label.toLowerCase().includes(query);
+  const toDropdownOptions = (
+    entries: FieldModalCollectionEntry[],
+    path: number[] = [],
+  ): (
+    | ReturnType<typeof listItemSectionBuilder>
+    | ReturnType<typeof listItemSelectBuilder>
+  )[] =>
+    entries.flatMap((entry, index) => {
+      if ('options' in entry) {
+        const groupPath = [...path, index];
+        const options = toDropdownOptions(entry.options, groupPath);
+        return options.length
+          ? [
+              listItemSectionBuilder({
+                id: `custom-field-modal-reference-collection-group-${groupPath.join(
+                  '-',
+                )}`,
+                dataHook: `custom-field-modal-reference-collection-group-${groupPath.join(
+                  '-',
+                )}`,
+                type:
+                  path.length === 0 &&
+                  entry.options.some((option) => 'options' in option)
+                    ? 'title'
+                    : 'subheader',
+                title: entry.heading,
+              }),
+              ...options,
+            ]
+          : [];
+      }
+      return matchesSearch(entry) ? [toOption(entry)] : [];
+    });
+  const dropdownOptions = toDropdownOptions(state.collectionOptionEntries);
 
   return (
     <Cell span={12}>
@@ -88,14 +131,7 @@ export const _CustomFieldCollectionInput = ({
           }
           placeholder={state.collectionInputPlaceholder}
           emptyStateMessage={state.collectionInputEmptyStateMessage}
-          options={options.map((option) =>
-            listItemSelectBuilder({
-              dataHook: `custom-field-modal-reference-collection-${option.id}`,
-              id: option.id,
-              title: option.label,
-              label: option.label,
-            }),
-          )}
+          options={dropdownOptions}
           fixedFooter={
             dropdownAction && (
               <Box direction="vertical">

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields2601668734";
+var _namespace_ = "CustomFieldFormPiiFields672821529";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CustomFieldFormPiiFields2601668734__root","tooltipText":"CustomFieldFormPiiFields2601668734__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields672821529__root","tooltipText":"CustomFieldFormPiiFields672821529__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3260421889";
+var _namespace_ = "DragHandle4055671537";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle3260421889__root"};
+export var classes = {"root":"DragHandle4055671537__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1360442001";
+var _namespace_ = "EditableCell4210248140";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell1360442001__root","textInputArea":"Edit3783343796__inputArea","selectorRow":"EditableCell1360442001__selectorRow","errorPopover":"EditableCell1360442001__errorPopover","errorMessage":"EditableCell1360442001__errorMessage"};
+export var classes = {"root":"EditableCell4210248140__root","textInputArea":"Edit3808948985__inputArea","selectorRow":"EditableCell4210248140__selectorRow","errorPopover":"EditableCell4210248140__errorPopover","errorMessage":"EditableCell4210248140__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1852421654";
+var _namespace_ = "HeaderActionsPopover3965778114";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover1852421654__root"};
+export var classes = {"root":"HeaderActionsPopover3965778114__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout531663116";
+var _namespace_ = "CellViewLayout1523452299";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout531663116__root"};
+export var classes = {"root":"CellViewLayout1523452299__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/JsonInputEdit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit2722664150";
+var _namespace_ = "JsonInputEdit2237082912";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"JsonInputEdit2722664150__root","jsonInput":"JsonInputEdit2722664150__jsonInput"};
+export var classes = {"root":"JsonInputEdit2237082912__root","jsonInput":"JsonInputEdit2237082912__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3940813357";
+var _namespace_ = "Edit2028082261";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3940813357__root","addressInput":"Edit3940813357__addressInput"};
+export var classes = {"root":"Edit2028082261__root","addressInput":"Edit2028082261__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1914450979";
+var _namespace_ = "Edit3102596850";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1914450979__root","booleanEdit":"Edit1914450979__booleanEdit"};
+export var classes = {"root":"Edit3102596850__root","booleanEdit":"Edit3102596850__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4108547499";
+var _namespace_ = "View2702061172";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View4108547499__root","booleanView":"View4108547499__booleanView"};
+export var classes = {"root":"View2702061172__root","booleanView":"View2702061172__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1689898236";
+var _namespace_ = "Edit2711441324";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1689898236__root"};
+export var classes = {"root":"Edit2711441324__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2678059480";
+var _namespace_ = "Edit1431342840";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2678059480__root","dateInput":"Edit2678059480__dateInput"};
+export var classes = {"root":"Edit1431342840__root","dateInput":"Edit1431342840__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1385657872";
+var _namespace_ = "View2372644041";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1385657872__root"};
+export var classes = {"root":"View2372644041__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2179174434";
+var _namespace_ = "Edit251942497";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2179174434__root","half":"Edit2179174434__half","dateHalf":"Edit2179174434__dateHalf Edit2179174434__half","timeHalf":"Edit2179174434__timeHalf Edit2179174434__half","divider":"Edit2179174434__divider","passiveText":"Edit2179174434__passiveText","placeholderText":"Edit2179174434__placeholderText Edit2179174434__passiveText"};
+export var classes = {"root":"Edit251942497__root","half":"Edit251942497__half","dateHalf":"Edit251942497__dateHalf Edit251942497__half","timeHalf":"Edit251942497__timeHalf Edit251942497__half","divider":"Edit251942497__divider","passiveText":"Edit251942497__passiveText","placeholderText":"Edit251942497__placeholderText Edit251942497__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2988568178";
+var _namespace_ = "View2257939087";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2988568178__root","leaf":"View2988568178__leaf","datePart":"View2988568178__datePart View2988568178__leaf","timePart":"View2988568178__timePart View2988568178__leaf","placeholder":"View2988568178__placeholder View2988568178__leaf","divider":"View2988568178__divider"};
+export var classes = {"root":"View2257939087__root","leaf":"View2257939087__leaf","datePart":"View2257939087__datePart View2257939087__leaf","timePart":"View2257939087__timePart View2257939087__leaf","placeholder":"View2257939087__placeholder View2257939087__leaf","divider":"View2257939087__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3917831843";
+var _namespace_ = "Edit1107034039";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3917831843__root","emailInput":"Edit3917831843__emailInput"};
+export var classes = {"root":"Edit1107034039__root","emailInput":"Edit1107034039__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View764858572";
+var _namespace_ = "View2305925013";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View764858572__root"};
+export var classes = {"root":"View2305925013__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/mediaImage/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit655554985";
+var _namespace_ = "Edit4137834564";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit655554985__root"};
+export var classes = {"root":"Edit4137834564__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/mediaImage/index.ts

@@ -1,6 +1,6 @@
 import {
   isMediaImageEmpty,
-  toMediaImageValue,
+  deserializeMediaImageValue,
   type MediaImageValue,
 } from '@wix/patterns-fields';
 import { defineCellType } from '../../types';
@@ -15,16 +15,7 @@ export const mediaImageCellType = defineCellType<MediaImageValue | null>({
   EditComponent: MediaImageEdit,
   // JSON escapes tabs and newlines, so a copied value stays one TSV cell.
   serialize: (value) => (value == null ? '' : JSON.stringify(value)),
-  deserialize: (raw) => {
-    if (raw.trim() === '') {
-      return null;
-    }
-    const image = toMediaImageValue(JSON.parse(raw));
-    if (!image) {
-      throw new Error('Not an image value');
-    }
-    return image;
-  },
+  deserialize: deserializeMediaImageValue,
   validate: (value, rules, translate) => {
     if (value == null) {
       return null;

package/src/components/EditableTable/cellTypes/multiDocument/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2498785527";
+var _namespace_ = "Edit703702566";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2498785527__root","editor":"Edit2498785527__editor"};
+export var classes = {"root":"Edit703702566__root","editor":"Edit703702566__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/multiReference/Edit.tsx

@@ -11,7 +11,7 @@ import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
 import { FilterTranslationProvider } from '../../../../providers';
-import { getImageFieldId } from '../reference/getImageFieldId';
+import { getImageFieldId } from '../../../../utils/referenceImage';
 import { useOpenReferencedCollection } from '../reference/openCollectionContext';
 import type {
   MultiReferenceValue,
@@ -79,7 +79,7 @@ function _MultiReferenceEditContent({
       selectedRefs.map((ref, i) => ({
         id: String(ref[idField] ?? i),
         name: String(ref[displayField] ?? ''),
-        image: imageField ? (ref[imageField] as string | undefined) : undefined,
+        image: imageField ? ref[imageField] : undefined,
       })),
     [selectedRefs, idField, displayField, imageField],
   );

package/src/components/EditableTable/cellTypes/multiReference/View.tsx

@@ -3,7 +3,7 @@ import { AddSmall } from '@wix/wix-ui-icons-common/lazy';
 import { CellMultiReferenceView, useTranslations } from '@wix/patterns-fields';
 import type { CellMultiReferenceItem } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
-import { getImageFieldId } from '../reference/getImageFieldId';
+import { getImageFieldId } from '../../../../utils/referenceImage';
 import { EmptyReferenceView } from '../reference/EmptyReferenceView';
 import type { MultiReferenceValue, ReferenceTypeConfig } from './types';
 
@@ -29,7 +29,7 @@ export const MultiReferenceView: React.FC<
   const items: CellMultiReferenceItem[] = refs.map((ref, i) => ({
     id: String(ref[idField] ?? i),
     name: String(ref[displayField] ?? ''),
-    image: imageField ? (ref[imageField] as string | undefined) : undefined,
+    image: imageField ? ref[imageField] : undefined,
   }));
 
   return (

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1140549331";
+var _namespace_ = "Edit4049543163";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1140549331__root","numberInput":"Edit1140549331__numberInput"};
+export var classes = {"root":"Edit4049543163__root","numberInput":"Edit4049543163__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3528508322";
+var _namespace_ = "View1059188368";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3528508322__root","textView":"View3528508322__textView"};
+export var classes = {"root":"View1059188368__root","textView":"View1059188368__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View517716605";
+var _namespace_ = "View1218735242";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View517716605__root"};
+export var classes = {"root":"View1218735242__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};