@wix/patterns 1.489.0 → 1.492.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2585657898";
+var _namespace_ = "Edit1888652970";
 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":"Edit2585657898__root","booleanEdit":"Edit2585657898__booleanEdit"};
+export var classes = {"root":"Edit1888652970__root","booleanEdit":"Edit1888652970__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_ = "View3337898101";
+var _namespace_ = "View3356383879";
 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":"View3337898101__root","booleanView":"View3337898101__booleanView"};
+export var classes = {"root":"View3356383879__root","booleanView":"View3356383879__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_ = "Edit1540632276";
+var _namespace_ = "Edit378945840";
 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":"Edit1540632276__root"};
+export var classes = {"root":"Edit378945840__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_ = "Edit3653339447";
+var _namespace_ = "Edit3040442536";
 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":"Edit3653339447__root","dateInput":"Edit3653339447__dateInput"};
+export var classes = {"root":"Edit3040442536__root","dateInput":"Edit3040442536__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_ = "View1526289710";
+var _namespace_ = "View3707917030";
 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":"View1526289710__root"};
+export var classes = {"root":"View3707917030__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_ = "Edit3097552316";
+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":"Edit3097552316__root","half":"Edit3097552316__half","dateHalf":"Edit3097552316__dateHalf Edit3097552316__half","timeHalf":"Edit3097552316__timeHalf Edit3097552316__half","divider":"Edit3097552316__divider","passiveText":"Edit3097552316__passiveText","placeholderText":"Edit3097552316__placeholderText Edit3097552316__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_ = "View4161902837";
+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":"View4161902837__root","leaf":"View4161902837__leaf","datePart":"View4161902837__datePart View4161902837__leaf","timePart":"View4161902837__timePart View4161902837__leaf","placeholder":"View4161902837__placeholder View4161902837__leaf","divider":"View4161902837__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_ = "Edit2757947987";
+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":"Edit2757947987__root","emailInput":"Edit2757947987__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_ = "View3816612283";
+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":"View3816612283__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_ = "Edit2611956171";
+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":"Edit2611956171__root","numberInput":"Edit2611956171__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_ = "View520455076";
+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":"View520455076__root","textView":"View520455076__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_ = "View53998113";
+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":"View53998113__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_ = "EmptyReferenceView2001486617";
+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":"EmptyReferenceView2001486617__root","placeholder":"EmptyReferenceView2001486617__placeholder","placeholderIcon":"EmptyReferenceView2001486617__placeholderIcon","placeholderText":"EmptyReferenceView2001486617__placeholderText","arrow":"EmptyReferenceView2001486617__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_ = "Edit363092264";
+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":"Edit363092264__root","selectInput":"Edit363092264__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_ = "Edit370532703";
+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":"Edit370532703__root","editWrapper":"Edit370532703__editWrapper","inputArea":"Edit370532703__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_ = "View3335587135";
+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":"View3335587135__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_ = "Edit1207556939";
+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":"Edit1207556939__root","wrapper":"Edit1207556939__wrapper","overlay":"Edit1207556939__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_ = "Edit2535137660";
+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":"Edit2535137660__root","urlInput":"Edit2535137660__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_ = "View223563120";
+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":"View223563120__root","textView":"View223563120__textView","urlText":"View223563120__urlText","suffix":"View223563120__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_ = "EmptyStateBase1180215919";
+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":"EmptyStateBase1180215919__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_ = "EntityPagePlain2937287753";
+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":"EntityPagePlain2937287753__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_ = "EntityPageField1863354397";
+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":"EntityPageField1863354397__root","row":"EntityPageField1863354397__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_ = "Fade384913750";
+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":"Fade384913750__root"};
+export var classes = {"root":"Fade612468296__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};