@wix/patterns 1.498.0 → 1.500.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar403683427";
+var _namespace_ = "CollectionToolbar3933178743";
 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":"CollectionToolbar403683427__root","right":"CollectionToolbar403683427__right","left":"CollectionToolbar403683427__left","fullWidth":"CollectionToolbar403683427__fullWidth"};
+export var classes = {"root":"CollectionToolbar3933178743__root","right":"CollectionToolbar3933178743__right","left":"CollectionToolbar3933178743__left","fullWidth":"CollectionToolbar3933178743__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2320104495";
+var _namespace_ = "SearchOrCustomFilter2487213044";
 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":"SearchOrCustomFilter2320104495__root","search":"SearchOrCustomFilter2320104495__search","searchMobile":"SearchOrCustomFilter2320104495__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2487213044__root","search":"SearchOrCustomFilter2487213044__search","searchMobile":"SearchOrCustomFilter2487213044__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_ = "AutoCompleteReadonly389994780";
+var _namespace_ = "AutoCompleteReadonly1247611917";
 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":"AutoCompleteReadonly389994780__root"};
+export var classes = {"root":"AutoCompleteReadonly1247611917__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_ = "ViewsDropdown3991619890";
+var _namespace_ = "ViewsDropdown2770095441";
 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":"ViewsDropdown3991619890__root"};
+export var classes = {"root":"ViewsDropdown2770095441__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_ = "CustomFieldFormPiiFields3841276795";
+var _namespace_ = "CustomFieldFormPiiFields1586461540";
 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":"CustomFieldFormPiiFields3841276795__root","tooltipText":"CustomFieldFormPiiFields3841276795__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields1586461540__root","tooltipText":"CustomFieldFormPiiFields1586461540__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_ = "DragHandle3841274347";
+var _namespace_ = "DragHandle4258833218";
 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":"DragHandle3841274347__root"};
+export var classes = {"root":"DragHandle4258833218__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_ = "EditableCell3911066076";
+var _namespace_ = "EditableCell620503216";
 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":"EditableCell3911066076__root","textInputArea":"Edit3013026992__inputArea","selectorRow":"EditableCell3911066076__selectorRow","errorPopover":"EditableCell3911066076__errorPopover","errorMessage":"EditableCell3911066076__errorMessage"};
+export var classes = {"root":"EditableCell620503216__root","textInputArea":"Edit2116025688__inputArea","selectorRow":"EditableCell620503216__selectorRow","errorPopover":"EditableCell620503216__errorPopover","errorMessage":"EditableCell620503216__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_ = "HeaderActionsPopover196658962";
+var _namespace_ = "HeaderActionsPopover4006224701";
 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":"HeaderActionsPopover196658962__root"};
+export var classes = {"root":"HeaderActionsPopover4006224701__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_ = "CellViewLayout2730238222";
+var _namespace_ = "CellViewLayout1454011264";
 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":"CellViewLayout2730238222__root"};
+export var classes = {"root":"CellViewLayout1454011264__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_ = "JsonInputEdit3868361337";
+var _namespace_ = "JsonInputEdit4294019092";
 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":"JsonInputEdit3868361337__root","jsonInput":"JsonInputEdit3868361337__jsonInput"};
+export var classes = {"root":"JsonInputEdit4294019092__root","jsonInput":"JsonInputEdit4294019092__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_ = "Edit2766793902";
+var _namespace_ = "Edit4077637342";
 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":"Edit2766793902__root","addressInput":"Edit2766793902__addressInput"};
+export var classes = {"root":"Edit4077637342__root","addressInput":"Edit4077637342__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_ = "Edit108432384";
+var _namespace_ = "Edit1087762724";
 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":"Edit108432384__root","booleanEdit":"Edit108432384__booleanEdit"};
+export var classes = {"root":"Edit1087762724__root","booleanEdit":"Edit1087762724__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_ = "View1431702287";
+var _namespace_ = "View1418536366";
 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":"View1431702287__root","booleanView":"View1431702287__booleanView"};
+export var classes = {"root":"View1418536366__root","booleanView":"View1418536366__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_ = "Edit3914716816";
+var _namespace_ = "Edit3671364186";
 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":"Edit3914716816__root"};
+export var classes = {"root":"Edit3671364186__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_ = "Edit3120726298";
+var _namespace_ = "Edit1759392197";
 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":"Edit3120726298__root","dateInput":"Edit3120726298__dateInput"};
+export var classes = {"root":"Edit1759392197__root","dateInput":"Edit1759392197__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_ = "View707882467";
+var _namespace_ = "View3791886530";
 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":"View707882467__root"};
+export var classes = {"root":"View3791886530__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_ = "Edit2445160163";
+var _namespace_ = "Edit550703932";
 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":"Edit2445160163__root","half":"Edit2445160163__half","dateHalf":"Edit2445160163__dateHalf Edit2445160163__half","timeHalf":"Edit2445160163__timeHalf Edit2445160163__half","divider":"Edit2445160163__divider","passiveText":"Edit2445160163__passiveText","placeholderText":"Edit2445160163__placeholderText Edit2445160163__passiveText"};
+export var classes = {"root":"Edit550703932__root","half":"Edit550703932__half","dateHalf":"Edit550703932__dateHalf Edit550703932__half","timeHalf":"Edit550703932__timeHalf Edit550703932__half","divider":"Edit550703932__divider","passiveText":"Edit550703932__passiveText","placeholderText":"Edit550703932__placeholderText Edit550703932__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_ = "View3360862953";
+var _namespace_ = "View2705583012";
 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":"View3360862953__root","leaf":"View3360862953__leaf","datePart":"View3360862953__datePart View3360862953__leaf","timePart":"View3360862953__timePart View3360862953__leaf","placeholder":"View3360862953__placeholder View3360862953__leaf","divider":"View3360862953__divider"};
+export var classes = {"root":"View2705583012__root","leaf":"View2705583012__leaf","datePart":"View2705583012__datePart View2705583012__leaf","timePart":"View2705583012__timePart View2705583012__leaf","placeholder":"View2705583012__placeholder View2705583012__leaf","divider":"View2705583012__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_ = "Edit317747648";
+var _namespace_ = "Edit1109830132";
 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":"Edit317747648__root","emailInput":"Edit317747648__emailInput"};
+export var classes = {"root":"Edit1109830132__root","emailInput":"Edit1109830132__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_ = "View3850724564";
+var _namespace_ = "View1463691207";
 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":"View3850724564__root"};
+export var classes = {"root":"View1463691207__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_ = "Edit1355542424";
+var _namespace_ = "Edit1656569342";
 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":"Edit1355542424__root"};
+export var classes = {"root":"Edit1656569342__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_ = "Edit1521901539";
+var _namespace_ = "Edit3492662923";
 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":"Edit1521901539__root","editor":"Edit1521901539__editor"};
+export var classes = {"root":"Edit3492662923__root","editor":"Edit3492662923__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_ = "Edit889845620";
+var _namespace_ = "Edit2270565236";
 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":"Edit889845620__root","numberInput":"Edit889845620__numberInput"};
+export var classes = {"root":"Edit2270565236__root","numberInput":"Edit2270565236__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_ = "View1690477885";
+var _namespace_ = "View2262557665";
 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":"View1690477885__root","textView":"View1690477885__textView"};
+export var classes = {"root":"View2262557665__root","textView":"View2262557665__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};