@wix/patterns 1.490.0 → 1.492.0

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_ = "Edit2464275007";
 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":"Edit2464275007__root","half":"Edit2464275007__half","dateHalf":"Edit2464275007__dateHalf Edit2464275007__half","timeHalf":"Edit2464275007__timeHalf Edit2464275007__half","divider":"Edit2464275007__divider","passiveText":"Edit2464275007__passiveText","placeholderText":"Edit2464275007__placeholderText Edit2464275007__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_ = "View4031449304";
 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":"View4031449304__root","leaf":"View4031449304__leaf","datePart":"View4031449304__datePart View4031449304__leaf","timePart":"View4031449304__timePart View4031449304__leaf","placeholder":"View4031449304__placeholder View4031449304__leaf","divider":"View4031449304__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_ = "Edit3885207675";
 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":"Edit3885207675__root","emailInput":"Edit3885207675__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_ = "View3794299030";
 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":"View3794299030__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/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2300028794";
+var _namespace_ = "Edit673467467";
 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":"Edit673467467__root","numberInput":"Edit673467467__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_ = "View3835677296";
 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":"View3835677296__root","textView":"View3835677296__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_ = "View1017400932";
 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":"View1017400932__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "EmptyReferenceView260927554";
 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":"EmptyReferenceView260927554__root","placeholder":"EmptyReferenceView260927554__placeholder","placeholderIcon":"EmptyReferenceView260927554__placeholderIcon","placeholderText":"EmptyReferenceView260927554__placeholderText","arrow":"EmptyReferenceView260927554__arrow"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "Edit1562936568";
 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":"Edit1562936568__root","selectInput":"Edit1562936568__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_ = "Edit1240238878";
 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":"Edit1240238878__root","editWrapper":"Edit1240238878__editWrapper","inputArea":"Edit1240238878__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_ = "View1177071391";
 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":"View1177071391__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_ = "Edit290340085";
 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":"Edit290340085__root","wrapper":"Edit290340085__wrapper","overlay":"Edit290340085__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_ = "Edit1904012015";
 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":"Edit1904012015__root","urlInput":"Edit1904012015__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_ = "View388172288";
 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":"View388172288__root","textView":"View388172288__textView","urlText":"View388172288__urlText","suffix":"View388172288__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_ = "EmptyStateBase786434541";
 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":"EmptyStateBase786434541__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_ = "EntityPagePlain3613622080";
 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":"EntityPagePlain3613622080__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_ = "EntityPageField1728443665";
 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":"EntityPageField1728443665__root","row":"EntityPageField1728443665__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_ = "Fade612468296";
 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":"Fade612468296__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

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -8,15 +8,29 @@ import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import type { FormPageSaveSplitActionProps } from './FormPageSaveSplitAction';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 const FormPageSaveSplitActionFallback = ({
   size,
   label,
   onSave,
+  disabled,
+  disabledReason,
 }: FormPageSaveSplitActionProps) => (
-  <Button size={size} dataHook="form-page-save-btn" onClick={onSave}>
-    {label}
-  </Button>
+  <DisabledTooltip
+    content={disabledReason}
+    disabled={!disabledReason}
+    dataHook="form-page-save-btn-disabled-tooltip"
+  >
+    <Button
+      size={size}
+      dataHook="form-page-save-btn"
+      onClick={onSave}
+      disabled={disabled}
+    >
+      {label}
+    </Button>
+  </DisabledTooltip>
 );
 
 // Lazy loaded so the split action and its popover stay out of the EntityPage bundle for consumers that pass no secondary actions.
@@ -62,16 +76,30 @@ export function _FormPageActionsBar({
     (actionsBarConfig?.saveCta?.consumerText ??
       t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE']))
   );
-  const saveButton = (
+  const saveDisabled = actionsBarConfig?.saveCta?.disabled;
+  const saveDisabledReason = actionsBarConfig?.saveCta?.disabledReason;
+  const saveCtaButton = (
     <Button
       fullWidth={isMobile}
       size={size}
       dataHook="form-page-save-btn"
       onClick={onSave}
+      disabled={saveDisabled}
     >
       {saveLabel}
     </Button>
   );
+  const saveButton = isMobile ? (
+    saveCtaButton
+  ) : (
+    <DisabledTooltip
+      content={saveDisabledReason}
+      disabled={!saveDisabledReason}
+      dataHook="form-page-save-btn-disabled-tooltip"
+    >
+      {saveCtaButton}
+    </DisabledTooltip>
+  );
 
   return (
     <Box gap="SP2">
@@ -96,6 +124,8 @@ export function _FormPageActionsBar({
             secondaryActions={secondaryActions}
             isSaving={state.submitTask.status.isLoading}
             onSave={onSave}
+            disabled={saveDisabled}
+            disabledReason={saveDisabledReason}
           />
         </Suspense>
       ) : (