@wix/patterns-fields 1.127.0 → 1.129.0

package/src/assets/locale/messages_zh.json

@@ -26,6 +26,7 @@
   "CMS.richTextEditor.toolbar.headerDropdown.button.info": "Learn more",
   "CMS.video.change": "Change Video",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle": "Paragraph 3",
+  "CMS.vectorArt.replace": "Replace vector art",
   "CMS.mediaGallery.dialog.itemDescriptionPlaceholder": "Description",
   "CMS.cellDateTime.placeholder.month": "MM",
   "CMS.document.action.open": "Open file",
@@ -118,6 +119,7 @@
   "CMS.mediaGallery.dialog.selectionDelete": "Delete",
   "CMS.cellReference.placeholder": "Choose a reference",
   "CMS.mediaControl.pasteUrl.button.save": "Save",
+  "CMS.vectorArt.add": "Add vector art",
   "CMS.mediaGallery.addLink.save": "Save",
   "CMS.mediaGallery.dialog.modalTitle": "Manage gallery media",
   "CMS.cellDateTime.ariaLabel.time": "Time",

package/src/assets/locale/version_file

@@ -1 +1 @@
-1791878449
+1793106155

package/src/auto-field-types/media-manager.ts

@@ -124,7 +124,7 @@ const getAudioTitle = (uri: string) => audio.getTitle(uri);
 
 // --- Vector ---
 
-const isWixVectorURI = (uri: string) =>
+export const isWixVectorURI = (uri: string) =>
   isDecodable(uri) && vector.isWixVectorUri(uri);
 
 const getVectorTitle = (uri: string) => vector.getTitle(uri);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2324210136";
+var _namespace_ = "addressinput1480037485";
 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":"addressinput2324210136__root","tableAddressInput":"addressinput2324210136__tableAddressInput"};
+export var classes = {"root":"addressinput1480037485__root","tableAddressInput":"addressinput1480037485__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_ = "actionsmenu1538214303";
+var _namespace_ = "actionsmenu381627215";
 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":"actionsmenu1538214303__root","action":"actionsmenu1538214303__action"};
+export var classes = {"root":"actionsmenu381627215__root","action":"actionsmenu381627215__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_ = "formaudiofield2336682729";
+var _namespace_ = "formaudiofield1407790939";
 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":"formaudiofield2336682729__root","addItem":"formaudiofield2336682729__addItem","mediaTitle":"formaudiofield2336682729__mediaTitle"};
+export var classes = {"root":"formaudiofield1407790939__root","addItem":"formaudiofield1407790939__addItem","mediaTitle":"formaudiofield1407790939__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_ = "audioplayer3138525910";
+var _namespace_ = "audioplayer911726347";
 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":"audioplayer3138525910__root"};
+export var classes = {"root":"audioplayer911726347__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellcolorview1821910319";
+var _namespace_ = "cellcolorview861088178";
 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":"cellcolorview1821910319__root","hashPrefix":"cellcolorview1821910319__hashPrefix"};
+export var classes = {"root":"cellcolorview861088178__root","hashPrefix":"cellcolorview861088178__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_ = "colorview1138728117";
+var _namespace_ = "colorview2712650742";
 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":"colorview1138728117__root","view":"colorview1138728117__view","fillPreview":"colorview1138728117__fillPreview"};
+export var classes = {"root":"colorview2712650742__root","view":"colorview2712650742__view","fillPreview":"colorview2712650742__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_ = "deletedialog3119007567";
+var _namespace_ = "deletedialog3955526227";
 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":"deletedialog3119007567__root","layout":"deletedialog3119007567__layout"};
+export var classes = {"root":"deletedialog3955526227__root","layout":"deletedialog3955526227__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield1306456496";
+var _namespace_ = "formdocumentfield298333274";
 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":"formdocumentfield1306456496__root","viewWrapper":"formdocumentfield1306456496__viewWrapper","textWidth":"formdocumentfield1306456496__textWidth","documentLoader":"formdocumentfield1306456496__documentLoader","addDocument":"formdocumentfield1306456496__addDocument","addItemWrapper":"formdocumentfield1306456496__addItemWrapper"};
+export var classes = {"root":"formdocumentfield298333274__root","viewWrapper":"formdocumentfield298333274__viewWrapper","textWidth":"formdocumentfield298333274__textWidth","documentLoader":"formdocumentfield298333274__documentLoader","addDocument":"formdocumentfield298333274__addDocument","addItemWrapper":"formdocumentfield298333274__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_ = "exclamation4146262930";
+var _namespace_ = "exclamation828590501";
 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":"exclamation4146262930__root","exclamation":"exclamation4146262930__exclamation","actions":"exclamation4146262930__actions","action":"exclamation4146262930__action"};
+export var classes = {"root":"exclamation828590501__root","exclamation":"exclamation828590501__exclamation","actions":"exclamation828590501__actions","action":"exclamation828590501__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_ = "fieldvalidationsettingsinput1610682981";
+var _namespace_ = "fieldvalidationsettingsinput958265652";
 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":"fieldvalidationsettingsinput1610682981__root","specificValuesInput":"fieldvalidationsettingsinput1610682981__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput958265652__root","specificValuesInput":"fieldvalidationsettingsinput958265652__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_ = "highlightedtext1099165912";
+var _namespace_ = "highlightedtext81865613";
 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":"highlightedtext1099165912__root","substring":"highlightedtext1099165912__substring"};
-export var keyframes = {"highlighted":"highlightedtext1099165912__highlighted","highlighted-match":"highlightedtext1099165912__highlighted-match"}; 
+export var classes = {"root":"highlightedtext81865613__root","substring":"highlightedtext81865613__substring"};
+export var keyframes = {"highlighted":"highlightedtext81865613__highlighted","highlighted-match":"highlightedtext81865613__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1534026877";
+var _namespace_ = "thumbnailreplaceoverlay1059582872";
 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":"thumbnailreplaceoverlay1534026877__root","icon":"thumbnailreplaceoverlay1534026877__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1059582872__root","icon":"thumbnailreplaceoverlay1059582872__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -24,5 +24,6 @@ export * from './number-input';
 export * from './url';
 export * from './image';
 export * from './media-image-field';
+export * from './media-vector-art-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_ = "cellmediaeditshell1442054937";
+var _namespace_ = "cellmediaeditshell1502754874";
 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":"cellmediaeditshell1442054937__root"};
+export var classes = {"root":"cellmediaeditshell1502754874__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton638648382";
+var _namespace_ = "pasteurlbutton62085348";
 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":"pasteurlbutton638648382__root","iconButtonTooltip":"pasteurlbutton638648382__iconButtonTooltip","iconButton":"pasteurlbutton638648382__iconButton"};
+export var classes = {"root":"pasteurlbutton62085348__root","iconButtonTooltip":"pasteurlbutton62085348__iconButtonTooltip","iconButton":"pasteurlbutton62085348__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield1874123851";
+var _namespace_ = "formmediagalleryfield1626967962";
 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":"formmediagalleryfield1874123851__root","container":"formmediagalleryfield1874123851__container","viewBox":"formmediagalleryfield1874123851__viewBox","addItemWrapper":"formmediagalleryfield1874123851__addItemWrapper","addItem":"formmediagalleryfield1874123851__addItem","overlay":"formmediagalleryfield1874123851__overlay","image":"formmediagalleryfield1874123851__image","previewImage":"formmediagalleryfield1874123851__previewImage","previewVideo":"formmediagalleryfield1874123851__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1626967962__root","container":"formmediagalleryfield1626967962__container","viewBox":"formmediagalleryfield1626967962__viewBox","addItemWrapper":"formmediagalleryfield1626967962__addItemWrapper","addItem":"formmediagalleryfield1626967962__addItem","overlay":"formmediagalleryfield1626967962__overlay","image":"formmediagalleryfield1626967962__image","previewImage":"formmediagalleryfield1626967962__previewImage","previewVideo":"formmediagalleryfield1626967962__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage1458830342";
+var _namespace_ = "mediaimage4072982184";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage1458830342__root"};
+export var classes = {"root":"mediaimage4072982184__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage1458830342-from","to":"--mediaimage1458830342-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage4072982184-from","to":"--mediaimage4072982184-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay1640738509";
+var _namespace_ = "overlay3172753237";
 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":"overlay1640738509__root","iconOverlay":"overlay1640738509__iconOverlay"};
+export var classes = {"root":"overlay3172753237__root","iconOverlay":"overlay3172753237__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit1963576233";
+var _namespace_ = "cellmediaimageedit906118710";
 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":"cellmediaimageedit1963576233__root","view":"cellmediaimageedit1963576233__view","anchor":"cellmediaimageedit1963576233__anchor","anchorBox":"cellmediaimageedit1963576233__anchorBox","popoverContent":"cellmediaimageedit1963576233__popoverContent","image":"cellmediaimageedit1963576233__image","imageActions":"cellmediaimageedit1963576233__imageActions"};
+export var classes = {"root":"cellmediaimageedit906118710__root","view":"cellmediaimageedit906118710__view","anchor":"cellmediaimageedit906118710__anchor","anchorBox":"cellmediaimageedit906118710__anchorBox","popoverContent":"cellmediaimageedit906118710__popoverContent","image":"cellmediaimageedit906118710__image","imageActions":"cellmediaimageedit906118710__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/media-image-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview423060582";
+var _namespace_ = "mediaimageview1913181924";
 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":"mediaimageview423060582__root","altTextPlaceholder":"mediaimageview423060582__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview1913181924__root","altTextPlaceholder":"mediaimageview1913181924__altTextPlaceholder"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

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

package/src/components/media-vector-art-field/index.ts

@@ -0,0 +1 @@
+export * from './media-vector-art-view';

package/src/components/media-vector-art-field/media-vector-art-view.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Box } from '@wix/design-system';
+import { toMediaVectorArtValue } from '../../utils/media-vector-art-value';
+import { ImagePreviewPopover } from '../image/image-preview-popover';
+import { ImageThumbnail } from '../image/image-thumbnail';
+
+export interface MediaVectorArtViewProps {
+  value: unknown;
+  dataHook?: string;
+}
+
+export const MediaVectorArtView: React.FC<MediaVectorArtViewProps> = ({
+  value,
+  dataHook,
+}) => {
+  const vectorArt = toMediaVectorArtValue(value);
+  const [isPreviewShown, setIsPreviewShown] = useState(false);
+
+  const showPreview = () => setIsPreviewShown(true);
+  const hidePreview = () => setIsPreviewShown(false);
+
+  const thumbnail = (
+    <ImageThumbnail
+      value={vectorArt}
+      dataHook="media-vector-art-view-thumbnail"
+      width="36px"
+      height="24px"
+      borderRadius="0"
+      onMouseEnter={vectorArt ? showPreview : undefined}
+      onMouseLeave={vectorArt ? hidePreview : undefined}
+    />
+  );
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+    >
+      {vectorArt ? (
+        <ImagePreviewPopover src={vectorArt.uri} shown={isPreviewShown}>
+          {thumbnail}
+        </ImagePreviewPopover>
+      ) : (
+        thumbnail
+      )}
+    </Box>
+  );
+};
+
+MediaVectorArtView.displayName = 'MediaVectorArtView';

package/src/components/media-vector-art-field/media-vector-art-view.uni.driver.ts

@@ -0,0 +1,11 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function MediaVectorArtViewUniDriver(base: UniDriver, _body: UniDriver) {
+  const thumbnail = base.$('[data-hook="media-vector-art-view-thumbnail"]');
+  return {
+    ...baseUniDriverFactory(base),
+    isEmpty: async () => (await thumbnail.attr('data-empty')) === 'true',
+    getImageSrc: () => thumbnail.$('img').attr('src'),
+  };
+}

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1314898709";
+var _namespace_ = "cellmultidocumentedit585147998";
 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":"cellmultidocumentedit1314898709__root","chipTrigger":"cellmultidocumentedit1314898709__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit585147998__root","chipTrigger":"cellmultidocumentedit585147998__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument3675931403";
+var _namespace_ = "formmultidocument1256370858";
 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":"formmultidocument3675931403__root","viewRoot":"formmultidocument3675931403__viewRoot","singleViewWrapper":"formmultidocument3675931403__singleViewWrapper","addDocumentButton":"formmultidocument3675931403__addDocumentButton"};
+export var classes = {"root":"formmultidocument1256370858__root","viewRoot":"formmultidocument1256370858__viewRoot","singleViewWrapper":"formmultidocument1256370858__singleViewWrapper","addDocumentButton":"formmultidocument1256370858__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css.ts

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

package/src/components/reference/cell-multi-reference-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceview786852382";
+var _namespace_ = "cellmultireferenceview4037548890";
 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":"cellmultireferenceview786852382__root","expanded":"cellmultireferenceview786852382__expanded"};
+export var classes = {"root":"cellmultireferenceview4037548890__root","expanded":"cellmultireferenceview4037548890__expanded"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-view.tsx

@@ -7,7 +7,7 @@ import { classes } from './cell-multi-reference-view.st.css.js';
 export interface CellMultiReferenceItem {
   id: string;
   name: string;
-  image?: string;
+  image?: unknown;
 }
 
 export interface CellMultiReferenceViewProps {

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput984648833";
+var _namespace_ = "cellreferenceinput1313473246";
 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":"cellreferenceinput984648833__root","autocomplete":"cellreferenceinput984648833__autocomplete"};
+export var classes = {"root":"cellreferenceinput1313473246__root","autocomplete":"cellreferenceinput1313473246__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.tsx

@@ -8,7 +8,7 @@ import { st, classes } from './cell-reference-input.st.css.js';
 export interface CellReferenceItem {
   id: string;
   name: string;
-  image?: string;
+  image?: unknown;
 }
 
 export interface CellReferenceInputHandle {