@wix/patterns 1.490.0 → 1.493.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3139048260";
+var _namespace_ = "View3026079960";
 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":"View3139048260__root"};
+export var classes = {"root":"View3026079960__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_ = "Edit1752866593";
+var _namespace_ = "Edit2461500534";
 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":"Edit1752866593__root","half":"Edit1752866593__half","dateHalf":"Edit1752866593__dateHalf Edit1752866593__half","timeHalf":"Edit1752866593__timeHalf Edit1752866593__half","divider":"Edit1752866593__divider","passiveText":"Edit1752866593__passiveText","placeholderText":"Edit1752866593__placeholderText Edit1752866593__passiveText"};
+export var classes = {"root":"Edit2461500534__root","half":"Edit2461500534__half","dateHalf":"Edit2461500534__dateHalf Edit2461500534__half","timeHalf":"Edit2461500534__timeHalf Edit2461500534__half","divider":"Edit2461500534__divider","passiveText":"Edit2461500534__passiveText","placeholderText":"Edit2461500534__placeholderText Edit2461500534__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_ = "View868691029";
+var _namespace_ = "View1579431455";
 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":"View868691029__root","leaf":"View868691029__leaf","datePart":"View868691029__datePart View868691029__leaf","timePart":"View868691029__timePart View868691029__leaf","placeholder":"View868691029__placeholder View868691029__leaf","divider":"View868691029__divider"};
+export var classes = {"root":"View1579431455__root","leaf":"View1579431455__leaf","datePart":"View1579431455__datePart View1579431455__leaf","timePart":"View1579431455__timePart View1579431455__leaf","placeholder":"View1579431455__placeholder View1579431455__leaf","divider":"View1579431455__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_ = "Edit1886161632";
+var _namespace_ = "Edit1419928138";
 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":"Edit1886161632__root","emailInput":"Edit1886161632__emailInput"};
+export var classes = {"root":"Edit1419928138__root","emailInput":"Edit1419928138__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_ = "View3253746463";
+var _namespace_ = "View2448780567";
 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":"View3253746463__root"};
+export var classes = {"root":"View2448780567__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -11,6 +11,7 @@ import { colorCellType } from './color';
 import { objectCellType } from './object';
 import { arrayCellType } from './array';
 import { imageCellType } from './image';
+import { mediaImageCellType } from './mediaImage';
 import { documentCellType } from './document';
 import { multiDocumentCellType } from './multiDocument';
 import { richContentCellType } from './richContent';
@@ -35,6 +36,7 @@ export {
   objectCellType,
   arrayCellType,
   imageCellType,
+  mediaImageCellType,
   documentCellType,
   multiDocumentCellType,
   richContentCellType,
@@ -61,6 +63,7 @@ export const builtInCellTypes: CellType[] = [
   objectCellType,
   arrayCellType,
   imageCellType,
+  mediaImageCellType,
   documentCellType,
   multiDocumentCellType,
   richContentCellType,

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CellMediaImageEdit, type MediaImageValue } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const MediaImageEdit: React.FC<
+  CellEditProps<MediaImageValue | null>
+> = ({ value, onChange, onCommit, onCancel, onStartEdit, inputRef }) => (
+  <CellMediaImageEdit
+    value={value}
+    onChange={onChange}
+    onCommit={onCommit}
+    onCancel={onCancel}
+    onStartEdit={onStartEdit}
+    inputRef={inputRef}
+    dataHook="media-image-edit"
+  />
+);

package/src/components/EditableTable/cellTypes/mediaImage/Edit.uni.driver.ts

@@ -0,0 +1,77 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  CustomModalLayoutUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { InputUniDriver as InputUniDriverFactory } from '@wix/design-system/dist/types/Input/Input.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../../../unidriver';
+
+/** The popover, its menu, the preview and the URL form render in the body. */
+export function MediaImageEditUniDriver(base: UniDriver, body: UniDriver) {
+  const addButton = base.$('[data-hook="media-image-edit-add-button"]');
+  const pasteUrlButton = base.$(
+    '[data-hook="media-image-edit-paste-url-button"]',
+  );
+  const altInput = (InputUniDriver as UniDriverFactory<InputUniDriverFactory>)(
+    body.$('[data-hook="media-image-edit-alt-input"]'),
+    body,
+  );
+  const pasteUrlForm = body.$('[data-hook="paste-url-form.layout"]');
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () => addButton.exists(),
+    clickAdd: () => addButton.click(),
+    hasPasteUrlButton: () => pasteUrlButton.exists(),
+    clickPasteUrl: () => pasteUrlButton.click(),
+    isPasteUrlFormOpen: () => pasteUrlForm.exists(),
+    cancelUrl: async () =>
+      (
+        await CustomModalLayoutUniDriver(
+          pasteUrlForm,
+          body,
+        ).getSecondaryButtonDriver()
+      ).click(),
+    isPopoverOpen: () =>
+      body.$('[data-hook="media-image-edit-popover"]').exists(),
+    getAltText: () => altInput.getValue(),
+    enterAltText: (text: string) => altInput.enterText(text),
+    /** Native dispatch in jsdom — the editor listens on the document with native addEventListener */
+    pressKey: async (key: string) => {
+      const el = await base.getNative();
+      if (isSled2(el) || isSled3(el)) {
+        await (await base.unwrap()).press(key);
+      } else {
+        el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+      }
+    },
+    openPreview: async () => {
+      await body.$('[data-hook="media-image-edit-more-button"]').click();
+      await body.$('[data-hook="media-image-edit-action-preview"]').click();
+    },
+    isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
+    replaceWithUrl: async () => {
+      await body.$('[data-hook="media-image-edit-more-button"]').click();
+      await body.$('[data-hook="media-image-edit-action-replace-url"]').click();
+    },
+    /**
+     * WDS Popover detects an outside click on mouseup, which click() doesn't
+     * fire in jsdom. In a browser a real click on the body could land on the
+     * table, so dispatch the mouseup there too.
+     */
+    clickOutside: async () => {
+      const el = await body.getNative();
+      if (isSled2(el)) {
+        await (
+          await body.unwrap()
+        ).evaluate((node: Element) =>
+          node.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })),
+        );
+      } else if (isSled3(el)) {
+        await (await body.unwrap()).dispatchEvent('mouseup');
+      } else {
+        el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+      }
+    },
+  };
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import {
+  MediaImageView as FieldsMediaImageView,
+  type MediaImageValue,
+} from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+
+export const MediaImageView: React.FC<
+  CellViewProps<MediaImageValue | null>
+> = ({ value }) => (
+  <FieldsMediaImageView value={value} dataHook="media-image-view" />
+);

package/src/components/EditableTable/cellTypes/mediaImage/View.uni.driver.ts

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MediaImageViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    isEmpty: async () => {
+      const thumbnail = base.$('[data-hook="media-image-view-thumbnail"]');
+      return (await thumbnail.attr('data-empty')) === 'true';
+    },
+    getAltText: () => base.$('[data-hook="media-image-view-alt-text"]').text(),
+  };
+}

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

@@ -0,0 +1,42 @@
+import {
+  isMediaImageEmpty,
+  toMediaImageValue,
+  type MediaImageValue,
+} from '@wix/patterns-fields';
+import { defineCellType } from '../../types';
+import { MediaImageView } from './View';
+import { MediaImageEdit } from './Edit';
+
+export { MediaImageView, MediaImageEdit };
+
+export const mediaImageCellType = defineCellType<MediaImageValue | null>({
+  type: 'mediaImage',
+  ViewComponent: MediaImageView,
+  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;
+  },
+  validate: (value, rules, translate) => {
+    if (value == null) {
+      return null;
+    }
+    // A cell copied from another image column skips `deserialize`, and its
+    // stored value can be a string.
+    if (typeof value !== 'object' || Array.isArray(value)) {
+      return translate!('cairo.editableTable.cell.validation.notCompatible');
+    }
+    // The generic required check passes any object, alt text alone included.
+    const required = rules?.find((rule) => rule.type === 'required');
+    return required && isMediaImageEmpty(value) ? required.message : null;
+  },
+  editOnClick: () => true,
+});

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

@@ -234,6 +234,7 @@ function _MultiReferenceEditContent({
       <CellMultiReferenceInput
         ref={acHandle}
         items={items}
+        loading={showInitialLoader}
         selectedItems={selectedItems}
         value={searchValue}
         onChange={handleSearchChange}

package/src/components/EditableTable/cellTypes/multiReference/Edit.uni.driver.ts

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
+import { MultiSelectUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
@@ -20,6 +21,14 @@ export function MultiReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
     ...baseUniDriverFactory(base),
     hasInput: () => base.$('input').exists(),
     getInputValue: () => base.$('input').value(),
+    hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    hasNoResultsMessage: () =>
+      MultiSelectUniDriver(
+        base.$('[data-hook="multi-reference-input-multiselect"]'),
+        body,
+      ).dropdownLayoutDriver.isOptionExists(
+        'auto-patterns.fields.no_results_found',
+      ),
     getTagsCount: () =>
       base.$$('[data-hook="multi-reference-edit-tag"]').count(),
     typeInInput: async (value: string) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2300028794";
+var _namespace_ = "Edit2580979847";
 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":"Edit2300028794__root","numberInput":"Edit2300028794__numberInput"};
+export var classes = {"root":"Edit2580979847__root","numberInput":"Edit2580979847__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_ = "View3544775576";
+var _namespace_ = "View1345697054";
 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":"View3544775576__root","textView":"View3544775576__textView"};
+export var classes = {"root":"View1345697054__root","textView":"View1345697054__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_ = "View3973601946";
+var _namespace_ = "View75998501";
 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":"View3973601946__root"};
+export var classes = {"root":"View75998501__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/reference/Edit.uni.driver.ts

@@ -51,6 +51,7 @@ export function ReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
     hasAvatarPrefix: () =>
       base.$('[data-hook="reference-input-avatar-prefix"]').exists(),
     hasInitialLoader: () => body.$('[data-hook="initial-loader"]').exists(),
+    hasEmptyState: () => body.$('[data-hook="empty-state"]').exists(),
     // Dropdown is portal-mounted to document.body, so search in body, not base.
     getOptionCount: async () =>
       body.$$('[data-hook="list-item-select"]').count(),

package/src/components/EditableTable/cellTypes/reference/EmptyReferenceView.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "EmptyReferenceView4149596897";
+var _namespace_ = "EmptyReferenceView119771614";
 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":"EmptyReferenceView4149596897__root","placeholder":"EmptyReferenceView4149596897__placeholder","placeholderIcon":"EmptyReferenceView4149596897__placeholderIcon","placeholderText":"EmptyReferenceView4149596897__placeholderText","arrow":"EmptyReferenceView4149596897__arrow"};
+export var classes = {"root":"EmptyReferenceView119771614__root","placeholder":"EmptyReferenceView119771614__placeholder","placeholderIcon":"EmptyReferenceView119771614__placeholderIcon","placeholderText":"EmptyReferenceView119771614__placeholderText","arrow":"EmptyReferenceView119771614__arrow"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -25,5 +25,6 @@ export const referenceCellType = defineCellType<ReferenceValue>({
     return parsed;
   },
   editable: true,
+  editOnClick: () => true,
   onTypeToEdit: () => ({}),
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2722278753";
+var _namespace_ = "Edit2752490547";
 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":"Edit2722278753__root","selectInput":"Edit2722278753__selectInput"};
+export var classes = {"root":"Edit2752490547__root","selectInput":"Edit2752490547__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3657017943";
+var _namespace_ = "Edit3912961716";
 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":"Edit3657017943__root","editWrapper":"Edit3657017943__editWrapper","inputArea":"Edit3657017943__inputArea"};
+export var classes = {"root":"Edit3912961716__root","editWrapper":"Edit3912961716__editWrapper","inputArea":"Edit3912961716__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1708771445";
+var _namespace_ = "View701321201";
 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":"View1708771445__root"};
+export var classes = {"root":"View701321201__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2549157583";
+var _namespace_ = "Edit3522673778";
 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":"Edit2549157583__root","wrapper":"Edit2549157583__wrapper","overlay":"Edit2549157583__overlay"};
+export var classes = {"root":"Edit3522673778__root","wrapper":"Edit3522673778__wrapper","overlay":"Edit3522673778__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit696354502";
+var _namespace_ = "Edit4150578603";
 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":"Edit696354502__root","urlInput":"Edit696354502__urlInput"};
+export var classes = {"root":"Edit4150578603__root","urlInput":"Edit4150578603__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3252966235";
+var _namespace_ = "View362781891";
 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":"View3252966235__root","textView":"View3252966235__textView","urlText":"View3252966235__urlText","suffix":"View3252966235__suffix"};
+export var classes = {"root":"View362781891__root","textView":"View362781891__textView","urlText":"View362781891__urlText","suffix":"View362781891__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase1463896951";
+var _namespace_ = "EmptyStateBase3724592841";
 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":"EmptyStateBase1463896951__root"};
+export var classes = {"root":"EmptyStateBase3724592841__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain3886472237";
+var _namespace_ = "EntityPagePlain2436834204";
 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":"EntityPagePlain3886472237__root"};
+export var classes = {"root":"EntityPagePlain2436834204__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageField.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPageField1294009975";
+var _namespace_ = "EntityPageField2940768879";
 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":"EntityPageField1294009975__root","row":"EntityPageField1294009975__row"};
+export var classes = {"root":"EntityPageField2940768879__root","row":"EntityPageField2940768879__row"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -25,6 +25,7 @@ import {
   FormEmail,
   FormColor,
   FormImageInput,
+  FormMediaImageInput,
   FormVideo,
   FormArray,
   FormObject,
@@ -96,6 +97,7 @@ const FIELD_INPUTS: Record<
   EMAIL: FormEmail,
   COLOR: FormColor,
   IMAGE: FormImageInput,
+  MEDIA_IMAGE: FormMediaImageInput,
   VIDEO: FormVideo,
   AUDIO: FormAudio,
   MEDIA_GALLERY: FormMediaGallery,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade1462614097";
+var _namespace_ = "Fade3692422673";
 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":"Fade1462614097__root"};
+export var classes = {"root":"Fade3692422673__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FieldCell/FieldCell.tsx

@@ -37,6 +37,7 @@ const CellRichContentView = lazyCell((m) => m.CellRichContentView);
 const CellRichTextView = lazyCell((m) => m.CellRichTextView);
 const ImageView = lazyCell((m) => m.ImageView);
 const JsonView = lazyCell((m) => m.JsonView);
+const MediaImageView = lazyCell((m) => m.MediaImageView);
 
 export interface FieldCellProps {
   value?: unknown;
@@ -120,6 +121,8 @@ function _FieldCell(props: FieldCellProps) {
       return (
         <ImageView value={props.value as string | null} dataHook="video-view" />
       );
+    case 'MEDIA_IMAGE':
+      return <MediaImageView value={props.value} dataHook="media-image-view" />;
     case 'AUDIO':
       return (
         <CellAudioView