@wix/patterns-fields 1.130.0 → 1.133.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1868399206";
+var _namespace_ = "highlightedtext1158161717";
 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":"highlightedtext1868399206__root","substring":"highlightedtext1868399206__substring"};
-export var keyframes = {"highlighted":"highlightedtext1868399206__highlighted","highlighted-match":"highlightedtext1868399206__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1158161717__root","substring":"highlightedtext1158161717__substring"};
+export var keyframes = {"highlighted":"highlightedtext1158161717__highlighted","highlighted-match":"highlightedtext1158161717__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_ = "thumbnailreplaceoverlay2386984036";
+var _namespace_ = "thumbnailreplaceoverlay1298050572";
 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":"thumbnailreplaceoverlay2386984036__root","icon":"thumbnailreplaceoverlay2386984036__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1298050572__root","icon":"thumbnailreplaceoverlay1298050572__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_ = "cellmediaeditshell3214709962";
+var _namespace_ = "cellmediaeditshell160534787";
 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":"cellmediaeditshell3214709962__root"};
+export var classes = {"root":"cellmediaeditshell160534787__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_ = "pasteurlbutton1165054346";
+var _namespace_ = "pasteurlbutton3549739789";
 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":"pasteurlbutton1165054346__root","iconButtonTooltip":"pasteurlbutton1165054346__iconButtonTooltip","iconButton":"pasteurlbutton1165054346__iconButton"};
+export var classes = {"root":"pasteurlbutton3549739789__root","iconButtonTooltip":"pasteurlbutton3549739789__iconButtonTooltip","iconButton":"pasteurlbutton3549739789__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_ = "formmediagalleryfield2838615203";
+var _namespace_ = "formmediagalleryfield3447066800";
 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":"formmediagalleryfield2838615203__root","container":"formmediagalleryfield2838615203__container","viewBox":"formmediagalleryfield2838615203__viewBox","addItemWrapper":"formmediagalleryfield2838615203__addItemWrapper","addItem":"formmediagalleryfield2838615203__addItem","overlay":"formmediagalleryfield2838615203__overlay","image":"formmediagalleryfield2838615203__image","previewImage":"formmediagalleryfield2838615203__previewImage","previewVideo":"formmediagalleryfield2838615203__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3447066800__root","container":"formmediagalleryfield3447066800__container","viewBox":"formmediagalleryfield3447066800__viewBox","addItemWrapper":"formmediagalleryfield3447066800__addItemWrapper","addItem":"formmediagalleryfield3447066800__addItem","overlay":"formmediagalleryfield3447066800__overlay","image":"formmediagalleryfield3447066800__image","previewImage":"formmediagalleryfield3447066800__previewImage","previewVideo":"formmediagalleryfield3447066800__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_ = "mediaimage3464380621";
+var _namespace_ = "mediaimage3053367053";
 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":"mediaimage3464380621__root"};
+export var classes = {"root":"mediaimage3053367053__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":"--mediaimage3464380621-from","to":"--mediaimage3464380621-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":"--mediaimage3053367053-from","to":"--mediaimage3053367053-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_ = "overlay2756427413";
+var _namespace_ = "overlay465846288";
 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":"overlay2756427413__root","iconOverlay":"overlay2756427413__iconOverlay"};
+export var classes = {"root":"overlay465846288__root","iconOverlay":"overlay465846288__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_ = "cellmediaimageedit4001045693";
+var _namespace_ = "cellmediaimageedit2170668941";
 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":"cellmediaimageedit4001045693__root","view":"cellmediaimageedit4001045693__view","anchor":"cellmediaimageedit4001045693__anchor","anchorBox":"cellmediaimageedit4001045693__anchorBox","popoverContent":"cellmediaimageedit4001045693__popoverContent","image":"cellmediaimageedit4001045693__image","imageActions":"cellmediaimageedit4001045693__imageActions"};
+export var classes = {"root":"cellmediaimageedit2170668941__root","view":"cellmediaimageedit2170668941__view","anchor":"cellmediaimageedit2170668941__anchor","anchorBox":"cellmediaimageedit2170668941__anchorBox","popoverContent":"cellmediaimageedit2170668941__popoverContent","image":"cellmediaimageedit2170668941__image","imageActions":"cellmediaimageedit2170668941__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_ = "mediaimageview3838155923";
+var _namespace_ = "mediaimageview729209575";
 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":"mediaimageview3838155923__root","altTextPlaceholder":"mediaimageview3838155923__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview729209575__root","altTextPlaceholder":"mediaimageview729209575__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_ = "mediatag86628212";
+var _namespace_ = "mediatag1044918006";
 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":"mediatag86628212__root"};
+export var classes = {"root":"mediatag1044918006__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_ = "cellmediavectorartedit3733046411";
+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":"cellmediavectorartedit3733046411__root","thumbnailButton":"cellmediavectorartedit3733046411__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';

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

@@ -0,0 +1,189 @@
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { FormFieldProps } from '@wix/design-system';
+import {
+  Box,
+  FormField,
+  Image,
+  ImageViewer,
+  MediaOverlay,
+} from '@wix/design-system';
+import { useIsMobile } from '@wix/bex-core/react';
+
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import type { ControlledInputProps } from '../../types/controlled-input';
+import type { MediaVectorArtValue } from '../../types/media-vector-art';
+import { useMergedRef, useTranslations } from '../../hooks';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import {
+  fromVectorArtPick,
+  toMediaVectorArtValue,
+} from '../../utils/media-vector-art-value';
+import { Z_INDEX_MODAL_POPOVER } from '../common';
+import { useMediaControl } from '../media-control';
+import {
+  MediaVectorArtActions,
+  MediaVectorArtPreviewModal,
+} from './media-vector-art-actions';
+
+interface ImageViewerActions {
+  focus: () => void;
+}
+
+export interface FormMediaVectorArtFieldProps {
+  data?: unknown;
+  onChange: (value: MediaVectorArtValue | null) => void;
+  onBlur?: () => void;
+  readOnly?: boolean;
+  autoFocus?: boolean;
+  dataHook?: string;
+  inputRef?: React.Ref<ImageViewerActions>;
+  imageFormFieldProps?: Pick<
+    FormFieldProps,
+    'label' | 'required' | 'status' | 'statusMessage'
+  >;
+}
+
+export const FormMediaVectorArtField: FC<FormMediaVectorArtFieldProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  inputRef: forwardedRef,
+  imageFormFieldProps,
+}) => {
+  const { t } = useTranslations();
+  const isMobile = useIsMobile();
+  const vectorArt = toMediaVectorArtValue(data);
+  const [inputRef, setInputRef] =
+    useMergedRef<ImageViewerActions>(forwardedRef);
+
+  const handlePick = useCallback(
+    (uri: string) => {
+      const picked = fromVectorArtPick(uri);
+      if (picked) {
+        onChange(picked);
+      }
+    },
+    [onChange],
+  );
+
+  const { callMedia, downloadMedia } = useMediaControl({
+    mediaType: MEDIA_TYPES.VECTOR_ART,
+    value: vectorArt?.uri,
+    onChange: handlePick,
+    autoFocus,
+    readOnly,
+    onBlur,
+    inputRef,
+  });
+
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const canEdit = !isMobile && !readOnly;
+  const canDelete = !readOnly;
+
+  const handleDownload = useCallback(() => {
+    if (vectorArt) {
+      downloadMedia(vectorArt.uri);
+    }
+  }, [vectorArt, downloadMedia]);
+  const shouldFocusAddAfterDelete = useRef(false);
+  const handleDelete = useCallback(() => {
+    setIsPreviewOpen(false);
+    shouldFocusAddAfterDelete.current = true;
+    onChange(null);
+  }, [onChange]);
+  useEffect(() => {
+    if (!vectorArt && shouldFocusAddAfterDelete.current) {
+      shouldFocusAddAfterDelete.current = false;
+      inputRef.current?.focus();
+    }
+  }, [vectorArt, inputRef]);
+  const handlePreviewReplace = useCallback(() => {
+    setIsPreviewOpen(false);
+    callMedia();
+  }, [callMedia]);
+
+  return (
+    <Box dataHook={dataHook} width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+      <FormField
+        {...imageFormFieldProps}
+        dataHook="media-vector-art-field-image"
+      >
+        {vectorArt ? (
+          <MediaOverlay
+            dataHook="media-vector-art-field-overlay"
+            hoverSkin="dark"
+            media={
+              <Image
+                dataHook="media-vector-art-field-current-image"
+                src={mediaURItoImageURL(vectorArt.uri, ThumbnailSize.L)}
+                width="100%"
+                height={MEDIA_HEIGHT}
+                fit="contain"
+              />
+            }
+          >
+            <MediaOverlay.Content placement="middle" visible="hover">
+              <MediaVectorArtActions
+                dataHook="media-vector-art-field"
+                placement="overlay"
+                onReplace={canEdit ? callMedia : undefined}
+                onPreview={() => setIsPreviewOpen(true)}
+                onDownload={handleDownload}
+                onDelete={canDelete ? handleDelete : undefined}
+                menuZIndex={Z_INDEX_MODAL_POPOVER}
+              />
+            </MediaOverlay.Content>
+          </MediaOverlay>
+        ) : (
+          <ImageViewer
+            ref={setInputRef}
+            dataHook="media-vector-art-field-viewer"
+            onAddImage={canEdit ? callMedia : undefined}
+            disabled={!canEdit}
+            addImageInfo={t('CMS.vectorArt.add')}
+            height={MEDIA_HEIGHT}
+            width="100%"
+          />
+        )}
+      </FormField>
+      {vectorArt && (
+        <MediaVectorArtPreviewModal
+          isOpen={isPreviewOpen}
+          vectorArt={vectorArt}
+          onClose={() => setIsPreviewOpen(false)}
+          onReplace={handlePreviewReplace}
+          onDelete={canEdit ? handleDelete : undefined}
+          onDownload={handleDownload}
+          readOnly={!canEdit}
+        />
+      )}
+    </Box>
+  );
+};
+
+FormMediaVectorArtField.displayName = 'FormMediaVectorArtField';
+
+export type ControlledMediaVectorArtInputProps = Omit<
+  ControlledInputProps<MediaVectorArtValue | null>,
+  'invalid'
+>;
+
+export const ControlledMediaVectorArtInput: FC<
+  ControlledMediaVectorArtInputProps
+> = ({ data, onChange, onBlur, readOnly, autoFocus, dataHook }) => (
+  <FormMediaVectorArtField
+    data={data}
+    onChange={onChange}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    dataHook={dataHook}
+  />
+);
+
+ControlledMediaVectorArtInput.displayName = 'ControlledMediaVectorArtInput';

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

@@ -0,0 +1,56 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AddItemUniDriver,
+  ButtonUniDriver,
+  FormFieldUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormMediaVectorArtFieldUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const formField = FormFieldUniDriver(
+    base.$('[data-hook="media-vector-art-field-image"]'),
+    body,
+  );
+  const imageViewer = ImageViewerUniDriver(
+    base.$('[data-hook="media-vector-art-field-viewer"]'),
+    body,
+  );
+  const addItem = AddItemUniDriver(
+    base.$(
+      '[data-hook="media-vector-art-field-viewer"] [data-hook="add-image"]',
+    ),
+    body,
+  );
+  const menuItem = (action: string) =>
+    body.$(`[data-hook="media-vector-art-field-action-${action}"]`);
+  const clickMenuItem = async (action: string) => {
+    await base.$('[data-hook="media-vector-art-field-more-button"]').click();
+    await menuItem(action).click();
+  };
+
+  return {
+    ...baseUniDriverFactory(base),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    hasImage: () =>
+      base.$('[data-hook="media-vector-art-field-current-image"]').exists(),
+    clickAdd: () => imageViewer.clickAdd(),
+    isAddDisabled: () => imageViewer.isDisabled(),
+    isAddButtonFocused: () => addItem.isFocused(),
+    clickReplace: () => clickMenuItem('replace'),
+    openPreview: () => clickMenuItem('preview'),
+    clickDelete: () => clickMenuItem('delete'),
+    isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
+    clickPreviewReplace: () =>
+      ButtonUniDriver(
+        body.$('[data-hook="preview-modal-replace-button"]'),
+        body,
+      ).click(),
+  };
+}