@wix/patterns-fields 1.17.0 → 1.20.0

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import {
   Box,
   IconButton,
@@ -15,7 +15,7 @@ import {
   Delete,
 } from '@wix/wix-ui-icons-common';
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useTranslations } from '../../hooks';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
 import {
   useMediaControl,
   usePasteURLForm,
@@ -23,6 +23,7 @@ import {
   MediaFieldType,
 } from '../media-control';
 import { ImageThumbnail } from './image-thumbnail';
+import { ThumbnailReplaceOverlay } from './thumbnail-replace-overlay';
 
 export interface CellImageEditProps {
   value: string | null | undefined;
@@ -49,14 +50,9 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
 }) => {
   const { t } = useTranslations();
   const containerRef = useRef<HTMLDivElement | null>(null);
-  // Tracks whether onMediaChange fired during the current callMedia() invocation.
-  // Reset to false before each call; checked after the promise resolves to detect
-  // "dismissed without selection" so the in-progress edit can be cancelled.
-  const mediaCommittedRef = useRef(false);
 
   const onMediaChange = useCallback(
     (uri: string) => {
-      mediaCommittedRef.current = true;
       onChange(uri);
       onCommit();
     },
@@ -71,12 +67,8 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
 
   const handleCallMedia = useCallback(async () => {
     onStartEdit?.();
-    mediaCommittedRef.current = false;
-    await callMedia();
-    // If the picker was dismissed without a selection, neither onCommit nor
-    // onCancel ran — call onCancel now so isEditing resets to false and
-    // useClearFocusOnBlur is unblocked.
-    if (!mediaCommittedRef.current) {
+    const committed = await callMedia();
+    if (!committed) {
       onCancel?.();
     }
   }, [onStartEdit, callMedia, onCancel]);
@@ -106,93 +98,11 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
     onCommit();
   }, [onChange, onCommit]);
 
-  // Wire inputRef so the cell-level useEffect can focus the first button when
-  // the user presses Enter on a focused image cell (inner focus activation).
-  useEffect(() => {
-    if (!inputRef) return;
-    inputRef.current = {
-      focus: () => {
-        const first =
-          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];
-        first?.focus();
-      },
-    };
-    return () => {
-      inputRef.current = null;
-    };
-  }, [inputRef]);
-
-  const handleContainerFocus = useCallback(() => {
-    containerRef.current?.setAttribute('data-inner-focused', '');
-  }, []);
-
-  const handleContainerBlur = useCallback((e: React.FocusEvent) => {
-    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
-      containerRef.current?.removeAttribute('data-inner-focused');
-    }
-  }, []);
-
-  const focusCell = useCallback(() => {
-    const cellDiv = containerRef.current?.closest(
-      '[role="gridcell"]',
-    ) as HTMLElement | null;
-    cellDiv?.focus({ preventScroll: true });
-  }, []);
-
-  // Native keydown listener — must be native (not React onKeyDown) so that
-  // e.stopPropagation() fires during the native bubble phase, before the event
-  // reaches the React root where useKeyboardNavigation's onKeyDown would
-  // otherwise intercept Tab and move to the next cell.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        e.stopPropagation();
-        // Cancel any in-progress edit (e.g. if isEditing was set before opening
-        // a modal that then got dismissed via keyboard), then return focus to the
-        // cell div. The useCellFocusAndEditing useEffect will also refocus the
-        // cell div if isEditing transitions false→false is a no-op, so we also
-        // call focusCell() directly as a reliable fallback.
-        onCancel?.();
-        focusCell();
-        return;
-      }
-
-      // Tab while a button in this component is focused: cycle through the
-      // interactive elements. Tab off the last (or Shift+Tab off the first)
-      // returns focus to the cell div for normal cell-level navigation.
-      if (e.key === 'Tab') {
-        const buttons = Array.from(el.querySelectorAll<HTMLElement>('button'));
-        const currentIdx = buttons.indexOf(
-          document.activeElement as HTMLElement,
-        );
-        if (currentIdx === -1) return; // focus is not on one of our buttons — pass through
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (!e.shiftKey) {
-          if (currentIdx >= buttons.length - 1) {
-            focusCell();
-          } else {
-            buttons[currentIdx + 1]?.focus();
-          }
-        } else {
-          if (currentIdx <= 0) {
-            focusCell();
-          } else {
-            buttons[currentIdx - 1]?.focus();
-          }
-        }
-      }
-    };
-
-    el.addEventListener('keydown', handleKeyDown);
-    return () => el.removeEventListener('keydown', handleKeyDown);
-  }, [focusCell, onCancel]);
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
 
   if (loading) {
     return (
@@ -241,21 +151,7 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
                 }}
               >
                 <ImageThumbnail value={value} />
-                <div
-                  style={{
-                    position: 'absolute',
-                    inset: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: 'rgba(0, 0, 0, 0.4)',
-                    borderRadius: '3px',
-                  }}
-                >
-                  <Replace
-                    style={{ color: 'white', width: '18px', height: '18px' }}
-                  />
-                </div>
+                <ThumbnailReplaceOverlay />
               </button>
             </Box>
           </Tooltip>

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

@@ -17,6 +17,7 @@ export interface ImageThumbnailProps {
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   dataHook?: string;
+  showVideoIndicator?: boolean;
 }
 
 export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
@@ -26,6 +27,7 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
   onMouseEnter,
   onMouseLeave,
   dataHook,
+  showVideoIndicator = true,
 }) => {
   const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;
 
@@ -33,7 +35,13 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
     <div
       data-hook={dataHook}
       data-empty={!value || undefined}
-      style={{ width: '36px', height: '36px', borderRadius: '3px', flexShrink: 0, position: 'relative' }}
+      style={{
+        width: '36px',
+        height: '36px',
+        borderRadius: '3px',
+        flexShrink: 0,
+        position: 'relative',
+      }}
     >
       <MediaImage
         src={src}
@@ -49,7 +57,7 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         overlay={
-          value && isMediaVideoURI(value) ? (
+          value && showVideoIndicator && isMediaVideoURI(value) ? (
             <VideoIndicatorOverlay src={value} size="small" />
           ) : (
             <CustomUrlOverlay src={value} size="small" />

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

@@ -0,0 +1,15 @@
+.root {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+}
+
+.icon {
+    color: white;
+    width: 18px;
+    height: 18px;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "thumbnailreplaceoverlay3138302508";
+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":"thumbnailreplaceoverlay3138302508__root","icon":"thumbnailreplaceoverlay3138302508__icon"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Replace } from '@wix/wix-ui-icons-common';
+import { classes } from './thumbnail-replace-overlay.st.css.js';
+
+export const ThumbnailReplaceOverlay: React.FC = () => (
+  <div className={classes.root}>
+    <Replace className={classes.icon} />
+  </div>
+);
+
+ThumbnailReplaceOverlay.displayName = 'ThumbnailReplaceOverlay';

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_ = "pasteurlbutton2793897208";
+var _namespace_ = "pasteurlbutton1583106728";
 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":"pasteurlbutton2793897208__root","iconButtonTooltip":"pasteurlbutton2793897208__iconButtonTooltip","iconButton":"pasteurlbutton2793897208__iconButton"};
+export var classes = {"root":"pasteurlbutton1583106728__root","iconButtonTooltip":"pasteurlbutton1583106728__iconButtonTooltip","iconButton":"pasteurlbutton1583106728__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -2,7 +2,7 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 import { dashboard } from '@wix/dashboard';
 import { files } from '@wix/media';
 
-import type { MEDIA_TYPES } from '../../utils/media-utils';
+import { MEDIA_TYPES } from '../../utils/media-utils';
 import { executeDownloading } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 
@@ -45,12 +45,12 @@ interface UseMediaControlBaseReturnType {
 
 interface UseSingleMediaControlReturnType
   extends UseMediaControlBaseReturnType {
-  callMedia(): Promise<void>;
+  callMedia(): Promise<boolean>;
   downloadMedia(mediaUri?: string): Promise<void>;
 }
 
 interface UseMultiMediaControlReturnType extends UseMediaControlBaseReturnType {
-  callMedia(index?: number): Promise<void>;
+  callMedia(index?: number): Promise<boolean>;
   downloadMedia(mediaUri?: string): Promise<void>;
 }
 
@@ -58,12 +58,10 @@ export type UseMediaControlReturnType =
   | UseSingleMediaControlReturnType
   | UseMultiMediaControlReturnType;
 
-const MEDIA_TYPE_TO_CATEGORY: Record<string, string | undefined> = {
-  IMAGE: 'IMAGE',
-  VIDEO: 'VIDEO',
-  MUSIC: 'MUSIC', // MEDIA_TYPES.AUDIO = 'MUSIC'
-  DOCUMENT: 'DOCUMENT',
-  ALL_MEDIA: undefined,
+const MEDIA_TYPE_TO_CATEGORY: Partial<Record<MEDIA_TYPES, string>> = {
+  [MEDIA_TYPES.IMAGE]: 'IMAGE',
+  [MEDIA_TYPES.VIDEO]: 'VIDEO',
+  [MEDIA_TYPES.AUDIO]: 'MUSIC',
 };
 
 /**
@@ -157,13 +155,13 @@ export function useMediaControl({
   const onMediaLoad = useCallback(() => setLoading(false), []);
 
   const callMedia = useCallback(
-    async (index?: number) => {
+    async (index?: number): Promise<boolean> => {
       if (mediaRequested.current || readOnly) {
-        return;
+        return false;
       }
 
       if (!params.onChange) {
-        return;
+        return false;
       }
 
       mediaRequested.current = true;
@@ -190,7 +188,7 @@ export function useMediaControl({
           mediaManagerData?.items || (mediaManagerData as any)?.files;
 
         if (!items?.length) {
-          return;
+          return false;
         }
 
         if (params.multiSelect) {
@@ -212,10 +210,12 @@ export function useMediaControl({
         } else {
           params.onChange(extractMediaUri(items[0]));
         }
+        return true;
       } catch (e) {
         setLoading(false);
         mediaRequested.current = false;
         console.error(`Media Control Error:`, e);
+        return false;
       }
     },
     [

package/src/components/media-gallery/cell-media-gallery-edit.tsx

@@ -0,0 +1,219 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  AvatarGroup,
+  Box,
+  IconButton,
+  PopoverMenu,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  MoreSmall,
+  Refresh,
+  Delete,
+  Maximize,
+} from '@wix/wix-ui-icons-common';
+import { files } from '@wix/media';
+import { mediaURItoImageURL, ThumbnailSize, getMediaURL } from '../../auto-field-types';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
+import { executeDownloading } from '../../utils/media-utils';
+import { useMediaGalleryDialog } from './media-gallery-dialog/hooks';
+import { MediaGalleryDialog } from './media-gallery-dialog/media-gallery-dialog';
+import { MediaPreviewModal } from './media-preview-modal';
+
+const mediaGalleryPreviewTextKeys = {
+  replace: 'CMS.mediaGallery.preview.replace',
+  download: 'CMS.mediaGallery.preview.download',
+  delete: 'CMS.mediaGallery.preview.delete',
+} as const;
+
+export interface CellMediaGalleryEditProps {
+  value: WixCodeGalleryItem[] | null;
+  onChange: (value: WixCodeGalleryItem[] | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const hasValue = Boolean(value?.length);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  // Tracks whether a commit happened during the current external-UI session.
+  // Prevents calling onCancel() after the user already committed (e.g., clear
+  // in the preview modal fires onClear then onClose, but we should not cancel).
+  const didCommitRef = useRef(false);
+
+  const avatarItems = (value ?? []).map((item) => ({
+    imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
+  }));
+
+  const { openMediaGalleryDialog, ...dialogProps } = useMediaGalleryDialog({
+    initialOpen: false,
+    items: value ?? [],
+    onChange: (items: WixCodeGalleryItem[]) => {
+      didCommitRef.current = true;
+      onChange(items.length > 0 ? items : null);
+      onCommit();
+    },
+  });
+
+  const handleOpenGallery = useCallback(() => {
+    didCommitRef.current = false;
+    onStartEdit?.();
+    openMediaGalleryDialog();
+  }, [onStartEdit, openMediaGalleryDialog]);
+
+  const handleOpenPreview = useCallback(() => {
+    didCommitRef.current = false;
+    onStartEdit?.();
+    setIsPreviewOpen(true);
+  }, [onStartEdit]);
+
+  const handlePreviewClose = useCallback(() => {
+    setIsPreviewOpen(false);
+    if (!didCommitRef.current) {
+      onCancel?.();
+    }
+    didCommitRef.current = false;
+  }, [onCancel]);
+
+  const handlePreviewRequestMedia = useCallback(() => {
+    setIsPreviewOpen(false);
+    openMediaGalleryDialog();
+  }, [openMediaGalleryDialog]);
+
+  const handlePreviewClear = useCallback(() => {
+    didCommitRef.current = true;
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const handleClearAll = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const onDownloadMedia = useCallback(
+    async (mediaUri?: string) => {
+      const uri = mediaUri ?? value?.[0]?.src;
+      if (!uri) return;
+      try {
+        const result = await files.generateFileDownloadUrl(uri);
+        const downloadUrl = result.downloadUrls?.[0]?.url;
+        if (!downloadUrl) throw new Error('No download URL returned');
+        executeDownloading(downloadUrl);
+      } catch {
+        executeDownloading(getMediaURL(uri));
+      }
+    },
+    [value],
+  );
+
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      style={{ width: '100%', height: '100%' }}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        style={{ boxSizing: 'border-box' }}
+      >
+        {hasValue ? (
+          <AvatarGroup items={avatarItems} size="tiny" type="condensed" />
+        ) : (
+          <Tooltip content={t('CMS.mediaGallery.addGallery')} appendTo="window">
+            <IconButton
+              size="tiny"
+              priority="secondary"
+              dataHook="gallery-edit-add-button"
+              onClick={handleOpenGallery}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {hasValue ? (
+          <PopoverMenu
+            textSize="small"
+            appendTo="window"
+            triggerElement={
+              <Tooltip
+                content={t('auto-patterns.fields.more_actions_tooltip')}
+                appendTo="window"
+              >
+                <IconButton
+                  size="tiny"
+                  priority="tertiary"
+                  dataHook="gallery-edit-more-button"
+                >
+                  <MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-manage"
+              text={t('CMS.mediaGallery.manageGallery')}
+              prefixIcon={<Refresh />}
+              onClick={handleOpenGallery}
+            />
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-preview"
+              text={t('CMS.mediaGallery.preview')}
+              prefixIcon={<Maximize />}
+              onClick={handleOpenPreview}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-clear"
+              text={t('CMS.mediaGallery.clear')}
+              skin="destructive"
+              prefixIcon={<Delete />}
+              onClick={handleClearAll}
+            />
+          </PopoverMenu>
+        ) : null}
+      </Box>
+
+      {dialogProps.isOpen && <MediaGalleryDialog {...dialogProps} />}
+
+      <MediaPreviewModal
+        isOpen={isPreviewOpen}
+        onClose={handlePreviewClose}
+        value={(value ?? []).map((item) => item.src)}
+        onRequestMedia={handlePreviewRequestMedia}
+        onClearMedia={handlePreviewClear}
+        onDownloadMedia={onDownloadMedia}
+        textKeys={mediaGalleryPreviewTextKeys}
+      />
+    </div>
+  );
+};
+
+CellMediaGalleryEdit.displayName = 'CellMediaGalleryEdit';

package/src/components/media-gallery/cell-media-gallery-view.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AvatarGroup, Box } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+
+export interface CellMediaGalleryViewProps {
+  data: WixCodeGalleryItem[] | null;
+  dataHook?: string;
+}
+
+export function CellMediaGalleryView({ data, dataHook }: CellMediaGalleryViewProps) {
+  const items = (data ?? []).map((item) => ({
+    imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
+  }));
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      height="100%"
+      width="100%"
+      padding="0 8px"
+      overflow="hidden"
+    >
+      {items.length > 0 ? (
+        <AvatarGroup items={items} size="tiny" type="condensed" />
+      ) : null}
+    </Box>
+  );
+}
+
+CellMediaGalleryView.displayName = 'CellMediaGalleryView';

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_ = "formmediagalleryfield1817893524";
+var _namespace_ = "formmediagalleryfield896548020";
 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":"formmediagalleryfield1817893524__root","container":"formmediagalleryfield1817893524__container","viewBox":"formmediagalleryfield1817893524__viewBox","addItemWrapper":"formmediagalleryfield1817893524__addItemWrapper","addItem":"formmediagalleryfield1817893524__addItem","overlay":"formmediagalleryfield1817893524__overlay","image":"formmediagalleryfield1817893524__image","previewImage":"formmediagalleryfield1817893524__previewImage","previewVideo":"formmediagalleryfield1817893524__previewVideo"};
+export var classes = {"root":"formmediagalleryfield896548020__root","container":"formmediagalleryfield896548020__container","viewBox":"formmediagalleryfield896548020__viewBox","addItemWrapper":"formmediagalleryfield896548020__addItemWrapper","addItem":"formmediagalleryfield896548020__addItem","overlay":"formmediagalleryfield896548020__overlay","image":"formmediagalleryfield896548020__image","previewImage":"formmediagalleryfield896548020__previewImage","previewVideo":"formmediagalleryfield896548020__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/index.ts

@@ -1 +1,3 @@
 export * from './media-gallery-view';
+export * from './cell-media-gallery-view';
+export * from './cell-media-gallery-edit';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage216154035";
+var _namespace_ = "mediaimage3815000853";
 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":"mediaimage216154035__root"};
+export var classes = {"root":"mediaimage3815000853__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":"--mediaimage216154035-from","to":"--mediaimage216154035-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":"--mediaimage3815000853-from","to":"--mediaimage3815000853-to"};