@wix/patterns-fields 1.116.0 → 1.118.0

package/src/assets/locale/messages_sv.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_th.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_tl.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_tr.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_uk.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_vi.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/messages_zh.json

@@ -3,6 +3,7 @@
   "CMS.mediaGallery.addLink.invalidUrl": "URL invalid",
   "auto-patterns.fields.field_type_email_title": "Email",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
+  "CMS.image.altText.label": "Alt text",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
   "CMS.formTime.invalidMessage": "Invalid time format ",
@@ -157,6 +158,7 @@
   "CMS.image.download": "Download",
   "CMS.richTextEditor.toolbar.header": "Themes",
   "CMS.document.action.delete": "Delete file",
+  "CMS.image.thumbnail.label": "Image",
   "CMS.mediaGallery.preview.download": "Download",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h6.title": "Subtitle",
   "auto-patterns.fields.email_input_error": "Please enter a valid email address",

package/src/assets/locale/version_file

@@ -1 +1 @@
-1791379410
+1791878449

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput177680386";
+var _namespace_ = "addressinput1182625661";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput177680386__root","tableAddressInput":"addressinput177680386__tableAddressInput"};
+export var classes = {"root":"addressinput1182625661__root","tableAddressInput":"addressinput1182625661__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu1299345777";
+var _namespace_ = "actionsmenu61633156";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu1299345777__root","action":"actionsmenu1299345777__action"};
+export var classes = {"root":"actionsmenu61633156__root","action":"actionsmenu61633156__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield507470523";
+var _namespace_ = "formaudiofield2528348038";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield507470523__root","addItem":"formaudiofield507470523__addItem","mediaTitle":"formaudiofield507470523__mediaTitle"};
+export var classes = {"root":"formaudiofield2528348038__root","addItem":"formaudiofield2528348038__addItem","mediaTitle":"formaudiofield2528348038__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

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

package/src/components/audio/cell-audio-edit.tsx

@@ -79,7 +79,6 @@ export const CellAudioEdit: React.FC<CellAudioEditProps> = ({
     <CellMediaEditShell
       dataHook={dataHook}
       mediaEdit={mediaEdit}
-      value={value}
       fieldType={MediaFieldType.document}
       gap="SP1"
     >

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview227349116";
+var _namespace_ = "cellcolorview1789827475";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview227349116__root","hashPrefix":"cellcolorview227349116__hashPrefix"};
+export var classes = {"root":"cellcolorview1789827475__root","hashPrefix":"cellcolorview1789827475__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1194596228";
+var _namespace_ = "colorview3286888254";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview1194596228__root","view":"colorview1194596228__view","fillPreview":"colorview1194596228__fillPreview"};
+export var classes = {"root":"colorview3286888254__root","view":"colorview3286888254__view","fillPreview":"colorview3286888254__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1804176510";
+var _namespace_ = "deletedialog4134247488";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog1804176510__root","layout":"deletedialog1804176510__layout"};
+export var classes = {"root":"deletedialog4134247488__root","layout":"deletedialog4134247488__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/cell-document-edit.tsx

@@ -91,7 +91,6 @@ export const CellDocumentEdit: React.FC<CellDocumentEditProps> = ({
     <CellMediaEditShell
       dataHook={dataHook}
       mediaEdit={mediaEdit}
-      value={value}
       fieldType={MediaFieldType.document}
       gap="SP1"
     >

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield377696781";
+var _namespace_ = "formdocumentfield3466473275";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield377696781__root","viewWrapper":"formdocumentfield377696781__viewWrapper","textWidth":"formdocumentfield377696781__textWidth","documentLoader":"formdocumentfield377696781__documentLoader","addDocument":"formdocumentfield377696781__addDocument","addItemWrapper":"formdocumentfield377696781__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3466473275__root","viewWrapper":"formdocumentfield3466473275__viewWrapper","textWidth":"formdocumentfield3466473275__textWidth","documentLoader":"formdocumentfield3466473275__documentLoader","addDocument":"formdocumentfield3466473275__addDocument","addItemWrapper":"formdocumentfield3466473275__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation3711878676";
+var _namespace_ = "exclamation1889797964";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation3711878676__root","exclamation":"exclamation3711878676__exclamation","actions":"exclamation3711878676__actions","action":"exclamation3711878676__action"};
+export var classes = {"root":"exclamation1889797964__root","exclamation":"exclamation1889797964__exclamation","actions":"exclamation1889797964__actions","action":"exclamation1889797964__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "fieldvalidationsettingsinput2177441788";
+var _namespace_ = "fieldvalidationsettingsinput3230697162";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fieldvalidationsettingsinput2177441788__root","specificValuesInput":"fieldvalidationsettingsinput2177441788__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput3230697162__root","specificValuesInput":"fieldvalidationsettingsinput3230697162__specificValuesInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext4016143366";
+var _namespace_ = "highlightedtext3566174816";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext4016143366__root","substring":"highlightedtext4016143366__substring"};
-export var keyframes = {"highlighted":"highlightedtext4016143366__highlighted","highlighted-match":"highlightedtext4016143366__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3566174816__root","substring":"highlightedtext3566174816__substring"};
+export var keyframes = {"highlighted":"highlightedtext3566174816__highlighted","highlighted-match":"highlightedtext3566174816__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/cell-image-edit.tsx

@@ -62,7 +62,6 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
     <CellMediaEditShell
       dataHook={dataHook}
       mediaEdit={mediaEdit}
-      value={value}
       fieldType={MediaFieldType.image}
     >
       {value ? (

package/src/components/image/image-preview-popover.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Popover } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import { MediaImage } from '../media-image';
+
+export interface ImagePreviewPopoverProps {
+  src: string;
+  shown: boolean;
+  fluid?: boolean;
+  children: React.ReactNode;
+}
+
+/** A larger preview of the image, shown below the element it wraps. */
+export const ImagePreviewPopover: React.FC<ImagePreviewPopoverProps> = ({
+  src,
+  shown,
+  fluid,
+  children,
+}) => (
+  <Popover
+    showArrow={false}
+    shown={shown}
+    appendTo="viewport"
+    placement="bottom-start"
+    showDelay={300}
+    moveBy={{ y: 4, x: 0 }}
+    zIndex={9999}
+    fluid={fluid}
+  >
+    <Popover.Element>{children}</Popover.Element>
+    <Popover.Content>
+      <Box
+        width="204px"
+        style={{
+          borderRadius: '3px',
+          overflow: 'hidden',
+          lineHeight: 0,
+        }}
+      >
+        <MediaImage
+          src={mediaURItoImageURL(src, ThumbnailSize.L)}
+          alt=""
+          fit="contain"
+          transparent
+          size={ThumbnailSize.L}
+        />
+      </Box>
+    </Popover.Content>
+  </Popover>
+);
+
+ImagePreviewPopover.displayName = 'ImagePreviewPopover';

package/src/components/image/image-thumbnail.tsx

@@ -20,6 +20,9 @@ export interface ImageThumbnailProps {
   dataHook?: string;
   showVideoIndicator?: boolean;
   size?: number;
+  width?: string;
+  height?: string;
+  borderRadius?: string;
 }
 
 export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
@@ -31,20 +34,22 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
   dataHook,
   showVideoIndicator = true,
   size = 36,
+  width = `${size}px`,
+  height = `${size}px`,
+  borderRadius = '3px',
 }) => {
   const value = getImageSource(imageValue);
   const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;
   const overlaySize = size <= 24 ? 'tiny' : 'small';
-  const px = `${size}px`;
 
   return (
     <div
       data-hook={dataHook}
       data-empty={!value || undefined}
       style={{
-        width: px,
-        height: px,
-        borderRadius: '3px',
+        width,
+        height,
+        borderRadius,
         flexShrink: 0,
         position: 'relative',
       }}
@@ -53,11 +58,11 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
         src={src}
         alt=""
         suspended
-        borderRadius="3px"
+        borderRadius={borderRadius}
         transparent
         size={ThumbnailSize.S}
-        width={px}
-        height={px}
+        width={width}
+        height={height}
         onLoad={onLoad}
         onError={onError}
         onMouseEnter={onMouseEnter}

package/src/components/image/image-view.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { Box, Popover } from '@wix/design-system';
-import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import { Box } from '@wix/design-system';
 import { getImageSource, type ImageSource } from '../../utils/get-image-source';
-import { MediaImage } from '../media-image';
+import { ImagePreviewPopover } from './image-preview-popover';
 import { ImageThumbnail } from './image-thumbnail';
 
 export interface ImageViewProps {
@@ -32,46 +31,21 @@ export const ImageView: React.FC<ImageViewProps> = ({
     >
       <Box minWidth="0" style={{ flex: 1 }}>
         {value ? (
-          <Popover
-            showArrow={false}
-            shown={isPreviewShown}
-            appendTo="viewport"
-            placement="bottom-start"
-            showDelay={300}
-            moveBy={{ y: 4, x: 0 }}
-            zIndex={9999}
-            fluid
-          >
-            <Popover.Element>
-              <ImageThumbnail
-                value={value}
-                size={size}
-                dataHook="image-thumbnail"
-                onMouseEnter={showPreview}
-                onMouseLeave={hidePreview}
-              />
-            </Popover.Element>
-            <Popover.Content>
-              <Box
-                width="204px"
-                style={{
-                  borderRadius: '3px',
-                  overflow: 'hidden',
-                  lineHeight: 0,
-                }}
-              >
-                <MediaImage
-                  src={mediaURItoImageURL(value, ThumbnailSize.L)}
-                  alt=""
-                  fit="contain"
-                  transparent
-                  size={ThumbnailSize.L}
-                />
-              </Box>
-            </Popover.Content>
-          </Popover>
+          <ImagePreviewPopover src={value} shown={isPreviewShown} fluid>
+            <ImageThumbnail
+              value={value}
+              size={size}
+              dataHook="image-thumbnail"
+              onMouseEnter={showPreview}
+              onMouseLeave={hidePreview}
+            />
+          </ImagePreviewPopover>
         ) : (
-          <ImageThumbnail value={value} size={size} dataHook="image-thumbnail" />
+          <ImageThumbnail
+            value={value}
+            size={size}
+            dataHook="image-thumbnail"
+          />
         )}
       </Box>
     </Box>

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2137226672";
+var _namespace_ = "thumbnailreplaceoverlay1457233069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay2137226672__root","icon":"thumbnailreplaceoverlay2137226672__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1457233069__root","icon":"thumbnailreplaceoverlay1457233069__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -23,5 +23,6 @@ export * from './boolean';
 export * from './number-input';
 export * from './url';
 export * from './image';
+export * from './media-image-field';
 export * from './reference';
 export * from './field-validation-settings';

package/src/components/media-control/cell-media-edit-shell.st.css.ts

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