@wix/patterns-fields 1.129.0 → 1.131.0

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_ = "cellcolorview861088178";
+var _namespace_ = "cellcolorview1563096989";
 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":"cellcolorview861088178__root","hashPrefix":"cellcolorview861088178__hashPrefix"};
+export var classes = {"root":"cellcolorview1563096989__root","hashPrefix":"cellcolorview1563096989__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_ = "colorview2712650742";
+var _namespace_ = "colorview3077445419";
 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":"colorview2712650742__root","view":"colorview2712650742__view","fillPreview":"colorview2712650742__fillPreview"};
+export var classes = {"root":"colorview3077445419__root","view":"colorview3077445419__view","fillPreview":"colorview3077445419__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_ = "deletedialog3955526227";
+var _namespace_ = "deletedialog3748627912";
 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":"deletedialog3955526227__root","layout":"deletedialog3955526227__layout"};
+export var classes = {"root":"deletedialog3748627912__root","layout":"deletedialog3748627912__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_ = "formdocumentfield298333274";
+var _namespace_ = "formdocumentfield447512979";
 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":"formdocumentfield298333274__root","viewWrapper":"formdocumentfield298333274__viewWrapper","textWidth":"formdocumentfield298333274__textWidth","documentLoader":"formdocumentfield298333274__documentLoader","addDocument":"formdocumentfield298333274__addDocument","addItemWrapper":"formdocumentfield298333274__addItemWrapper"};
+export var classes = {"root":"formdocumentfield447512979__root","viewWrapper":"formdocumentfield447512979__viewWrapper","textWidth":"formdocumentfield447512979__textWidth","documentLoader":"formdocumentfield447512979__documentLoader","addDocument":"formdocumentfield447512979__addDocument","addItemWrapper":"formdocumentfield447512979__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_ = "exclamation828590501";
+var _namespace_ = "exclamation966184230";
 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":"exclamation828590501__root","exclamation":"exclamation828590501__exclamation","actions":"exclamation828590501__actions","action":"exclamation828590501__action"};
+export var classes = {"root":"exclamation966184230__root","exclamation":"exclamation966184230__exclamation","actions":"exclamation966184230__actions","action":"exclamation966184230__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_ = "fieldvalidationsettingsinput958265652";
+var _namespace_ = "fieldvalidationsettingsinput2538315580";
 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":"fieldvalidationsettingsinput958265652__root","specificValuesInput":"fieldvalidationsettingsinput958265652__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput2538315580__root","specificValuesInput":"fieldvalidationsettingsinput2538315580__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_ = "highlightedtext81865613";
+var _namespace_ = "highlightedtext3288484327";
 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":"highlightedtext81865613__root","substring":"highlightedtext81865613__substring"};
-export var keyframes = {"highlighted":"highlightedtext81865613__highlighted","highlighted-match":"highlightedtext81865613__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3288484327__root","substring":"highlightedtext3288484327__substring"};
+export var keyframes = {"highlighted":"highlightedtext3288484327__highlighted","highlighted-match":"highlightedtext3288484327__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_ = "thumbnailreplaceoverlay1059582872";
+var _namespace_ = "thumbnailreplaceoverlay430353344";
 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":"thumbnailreplaceoverlay1059582872__root","icon":"thumbnailreplaceoverlay1059582872__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay430353344__root","icon":"thumbnailreplaceoverlay430353344__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellmediaeditshell1502754874";
+var _namespace_ = "cellmediaeditshell4093020949";
 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":"cellmediaeditshell1502754874__root"};
+export var classes = {"root":"cellmediaeditshell4093020949__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_ = "pasteurlbutton62085348";
+var _namespace_ = "pasteurlbutton1342349293";
 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":"pasteurlbutton62085348__root","iconButtonTooltip":"pasteurlbutton62085348__iconButtonTooltip","iconButton":"pasteurlbutton62085348__iconButton"};
+export var classes = {"root":"pasteurlbutton1342349293__root","iconButtonTooltip":"pasteurlbutton1342349293__iconButtonTooltip","iconButton":"pasteurlbutton1342349293__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-cell-media-edit.ts

@@ -24,8 +24,8 @@ export interface UseCellMediaEditParams<V = string> {
 export interface CellMediaValueOptions<V> {
   /** The value for a media manager pick. `null` ignores the pick. */
   fromPick: (uri: string, current: V | null) => V | null;
-  /** The value for a URL saved in the paste-URL form. */
-  fromUrl: (url: string, current: V | null) => V;
+  /** The value for a URL saved in the paste-URL form. Required with that form; without it the URL is saved raw. */
+  fromUrl?: (url: string, current: V | null) => V;
   /**
    * When `false`, a pick only changes the value and the cell commits later.
    * Closing the media manager or the URL form without a value then cancels

package/src/components/media-control/use-media-control.ts

@@ -61,6 +61,7 @@ const MEDIA_TYPE_TO_CATEGORY: Partial<Record<MEDIA_TYPES, string>> = {
   [MEDIA_TYPES.IMAGE]: 'IMAGE',
   [MEDIA_TYPES.VIDEO]: 'VIDEO',
   [MEDIA_TYPES.AUDIO]: 'MUSIC',
+  [MEDIA_TYPES.VECTOR_ART]: 'VECTOR_ART',
 };
 
 /**
@@ -104,6 +105,8 @@ const extractMediaUri = (mediaItem: any): string => {
       (typeof media.video === 'string' && media.video) ||
       media.document?.document ||
       (typeof media.document === 'string' && media.document) ||
+      media.vector?.vector ||
+      (typeof media.vector === 'string' && media.vector) ||
       extractAudioUrl(media.audio) ||
       ''
     );

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_ = "formmediagalleryfield1626967962";
+var _namespace_ = "formmediagalleryfield3518412376";
 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":"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 classes = {"root":"formmediagalleryfield3518412376__root","container":"formmediagalleryfield3518412376__container","viewBox":"formmediagalleryfield3518412376__viewBox","addItemWrapper":"formmediagalleryfield3518412376__addItemWrapper","addItem":"formmediagalleryfield3518412376__addItem","overlay":"formmediagalleryfield3518412376__overlay","image":"formmediagalleryfield3518412376__image","previewImage":"formmediagalleryfield3518412376__previewImage","previewVideo":"formmediagalleryfield3518412376__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_ = "mediaimage4072982184";
+var _namespace_ = "mediaimage3884357760";
 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":"mediaimage4072982184__root"};
+export var classes = {"root":"mediaimage3884357760__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":"--mediaimage4072982184-from","to":"--mediaimage4072982184-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":"--mediaimage3884357760-from","to":"--mediaimage3884357760-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_ = "overlay3172753237";
+var _namespace_ = "overlay1342506184";
 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":"overlay3172753237__root","iconOverlay":"overlay3172753237__iconOverlay"};
+export var classes = {"root":"overlay1342506184__root","iconOverlay":"overlay1342506184__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_ = "cellmediaimageedit906118710";
+var _namespace_ = "cellmediaimageedit3201982401";
 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":"cellmediaimageedit906118710__root","view":"cellmediaimageedit906118710__view","anchor":"cellmediaimageedit906118710__anchor","anchorBox":"cellmediaimageedit906118710__anchorBox","popoverContent":"cellmediaimageedit906118710__popoverContent","image":"cellmediaimageedit906118710__image","imageActions":"cellmediaimageedit906118710__imageActions"};
+export var classes = {"root":"cellmediaimageedit3201982401__root","view":"cellmediaimageedit3201982401__view","anchor":"cellmediaimageedit3201982401__anchor","anchorBox":"cellmediaimageedit3201982401__anchorBox","popoverContent":"cellmediaimageedit3201982401__popoverContent","image":"cellmediaimageedit3201982401__image","imageActions":"cellmediaimageedit3201982401__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_ = "mediaimageview1913181924";
+var _namespace_ = "mediaimageview1432632342";
 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":"mediaimageview1913181924__root","altTextPlaceholder":"mediaimageview1913181924__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview1432632342__root","altTextPlaceholder":"mediaimageview1432632342__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_ = "mediatag2747949493";
+var _namespace_ = "mediatag1026054763";
 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":"mediatag2747949493__root"};
+export var classes = {"root":"mediatag1026054763__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-vector-art-field/cell-media-vector-art-edit.st.css

@@ -0,0 +1,8 @@
+.thumbnailButton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellmediavectorartedit4192672435";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"cellmediavectorartedit4192672435__root","thumbnailButton":"cellmediavectorartedit4192672435__thumbnailButton"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/media-vector-art-field/cell-media-vector-art-edit.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { IconButton, Tooltip } from '@wix/design-system';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import {
+  fromVectorArtPick,
+  toMediaVectorArtValue,
+} from '../../utils/media-vector-art-value';
+import { ImageThumbnail } from '../image/image-thumbnail';
+import { ThumbnailReplaceOverlay } from '../image/thumbnail-replace-overlay';
+import {
+  CellMediaEditShell,
+  MediaFieldType,
+  useCellMediaEdit,
+} from '../media-control';
+import {
+  MediaVectorArtActions,
+  MediaVectorArtPreviewModal,
+} from './media-vector-art-actions';
+import { classes } from './cell-media-vector-art-edit.st.css.js';
+
+export interface CellMediaVectorArtEditProps {
+  value: unknown;
+  onChange: (value: MediaVectorArtValue | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellMediaVectorArtEdit: React.FC<CellMediaVectorArtEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const vectorArt = toMediaVectorArtValue(value);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const deletedFromPreview = useRef(false);
+
+  const mediaEdit = useCellMediaEdit({
+    mediaType: MEDIA_TYPES.VECTOR_ART,
+    value: vectorArt,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+    fromPick: fromVectorArtPick,
+  });
+  const { handleCallMedia, handleDelete, downloadMedia } = mediaEdit;
+
+  const handleDownload = useCallback(() => {
+    if (vectorArt) {
+      downloadMedia(vectorArt.uri);
+    }
+  }, [vectorArt, downloadMedia]);
+
+  const openPreview = useCallback(() => {
+    onStartEdit?.();
+    setIsPreviewOpen(true);
+  }, [onStartEdit]);
+
+  const closePreview = useCallback(() => {
+    setIsPreviewOpen(false);
+    if (!deletedFromPreview.current) {
+      onCancel?.();
+    }
+    deletedFromPreview.current = false;
+  }, [onCancel]);
+
+  const deleteFromPreview = useCallback(() => {
+    deletedFromPreview.current = true;
+    handleDelete();
+  }, [handleDelete]);
+
+  const replaceFromPreview = useCallback(() => {
+    setIsPreviewOpen(false);
+    handleCallMedia();
+  }, [handleCallMedia]);
+
+  return (
+    <CellMediaEditShell
+      dataHook={dataHook}
+      mediaEdit={mediaEdit}
+      fieldType={MediaFieldType.image}
+    >
+      {vectorArt ? (
+        <>
+          <Tooltip content={t('CMS.vectorArt.replace')} appendTo="window">
+            <button
+              type="button"
+              data-hook="media-vector-art-edit-thumbnail"
+              aria-label={t('CMS.vectorArt.replace')}
+              className={classes.thumbnailButton}
+              onClick={handleCallMedia}
+            >
+              <ImageThumbnail
+                value={vectorArt}
+                width="36px"
+                height="24px"
+                borderRadius="0"
+              />
+              <ThumbnailReplaceOverlay />
+            </button>
+          </Tooltip>
+          <MediaVectorArtActions
+            dataHook="media-vector-art-edit"
+            placement="cell"
+            onReplace={handleCallMedia}
+            onPreview={openPreview}
+            onDownload={handleDownload}
+            onDelete={handleDelete}
+          />
+          <MediaVectorArtPreviewModal
+            isOpen={isPreviewOpen}
+            vectorArt={vectorArt}
+            onClose={closePreview}
+            onReplace={replaceFromPreview}
+            onDelete={deleteFromPreview}
+            onDownload={handleDownload}
+          />
+        </>
+      ) : (
+        <Tooltip content={t('CMS.vectorArt.add')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="secondary"
+            dataHook="media-vector-art-edit-add-button"
+            ariaLabel={t('CMS.vectorArt.add')}
+            onClick={handleCallMedia}
+          >
+            <Add />
+          </IconButton>
+        </Tooltip>
+      )}
+    </CellMediaEditShell>
+  );
+};
+
+CellMediaVectorArtEdit.displayName = 'CellMediaVectorArtEdit';