@wix/patterns-fields 1.38.0 → 1.40.0

package/src/components/audio/audio-player/audio-player-store.tsx

@@ -0,0 +1,61 @@
+import React, { Suspense, useEffect, useState } from 'react';
+
+const FloatingAudioPlayer = React.lazy(() =>
+  import('./audio-player').then((m) => ({ default: m.FloatingAudioPlayer })),
+);
+
+type Listener = () => void;
+
+let currentSrc: string | null = null;
+const listeners = new Set<Listener>();
+
+const subscribe = (listener: Listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+const emit = () => {
+  listeners.forEach((l) => l());
+};
+
+/**
+ * Reads the current floating audio source. Subscribes the calling component
+ * to store updates so it re-renders when the source changes.
+ */
+export const useAudioPlayerSrc = (): string | null => {
+  const [src, setSrc] = useState<string | null>(currentSrc);
+  useEffect(() => subscribe(() => setSrc(currentSrc)), []);
+  return src;
+};
+
+/**
+ * Sets (or clears) the global floating audio source. Cells call this with
+ * the wix:audio:// URI when the user hits "Play"; the mounted
+ * <GlobalAudioPlayer/> picks the change up and renders the floating card.
+ */
+export const setAudioPlayerSrc = (src: string | null): void => {
+  currentSrc = src;
+  emit();
+};
+
+/**
+ * Subscribes to the audio-player store and renders the floating card. Mount
+ * once at a stable parent (e.g., once per EditableTable) so playback survives
+ * cell focus changes — matches CMS-web's pattern where the player is global.
+ */
+export const GlobalAudioPlayer: React.FC = () => {
+  const src = useAudioPlayerSrc();
+  if (!src) {
+    return null;
+  }
+  return (
+    <Suspense fallback={null}>
+      <FloatingAudioPlayer
+        source={src}
+        onClose={() => setAudioPlayerSrc(null)}
+      />
+    </Suspense>
+  );
+};

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_ = "audioplayer1489254281";
+var _namespace_ = "audioplayer1282513900";
 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":"audioplayer1489254281__root"};
+export var classes = {"root":"audioplayer1282513900__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { getMediaURL } from '../../../auto-field-types';
 import { Box, AudioPlayer, Card, Text, CloseButton } from '@wix/design-system';
@@ -7,22 +7,16 @@ import { Box, AudioPlayer, Card, Text, CloseButton } from '@wix/design-system';
 import { getMediaTitle } from '../../../utils';
 import { classes } from './audio-player.st.css.js';
 
-interface FloatingAudioPlayerProps {
+export interface FloatingAudioPlayerProps {
   source: string | null;
   onClose: () => void;
 }
+
 export const FloatingAudioPlayer: FC<FloatingAudioPlayerProps> = ({
   source,
   onClose,
 }) => {
-  const [audioSrc, setAudioSrc] = useState(source);
-
-  useEffect(() => {
-    setAudioSrc(null);
-    onClose?.();
-  }, [onClose]);
-
-  if (!audioSrc) {
+  if (!source) {
     return null;
   }
 
@@ -41,8 +35,8 @@ export const FloatingAudioPlayer: FC<FloatingAudioPlayerProps> = ({
         width="369px"
         gap="SP3"
       >
-        <Text secondary>{getMediaTitle(audioSrc)}</Text>
-        <AudioPlayer autoplay src={getMediaURL(audioSrc)} />
+        <Text secondary>{getMediaTitle(source)}</Text>
+        <AudioPlayer autoplay src={getMediaURL(source)} />
       </Box>
     </Card>
   );

package/src/components/audio/audio-player/index.ts

@@ -1 +1,2 @@
 export * from './audio-player';
+export * from './audio-player-store';

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

@@ -0,0 +1,132 @@
+import React, { useCallback } from 'react';
+import { Box, IconButton, Tag, Tooltip } from '@wix/design-system';
+import { Add, MoreSmall, MusicSmall } from '@wix/wix-ui-icons-common';
+
+import { MEDIA_TYPES, getMediaTitle } from '../../utils';
+import { useTranslations } from '../../hooks';
+import {
+  useCellMediaEdit,
+  CellMediaEditShell,
+  MediaFieldType,
+} from '../media-control';
+import { ActionsMenu } from './actions/actions-menu';
+import { buildAudioActions } from './actions/audio-actions';
+import { setAudioPlayerSrc } from './audio-player';
+
+export interface CellAudioEditProps {
+  value: string | null;
+  onChange: (value: string | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  /**
+   * Called before opening external UI (media manager) so the table can set
+   * isEditing=true and protect cell focus while the modal is open.
+   */
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellAudioEdit: React.FC<CellAudioEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+
+  const mediaEdit = useCellMediaEdit({
+    mediaType: MEDIA_TYPES.AUDIO,
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+  });
+
+  const handlePlay = useCallback(() => {
+    if (value) {
+      setAudioPlayerSrc(value);
+    }
+  }, [value]);
+
+  const actions = buildAudioActions({
+    labels: {
+      replace: t('CMS.audio.button.replace'),
+      download: t('CMS.audio.button.download'),
+      delete: t('CMS.audio.button.delete'),
+    },
+    dataHooks: {
+      replace: 'audio-edit-action-replace',
+      download: 'audio-edit-action-download',
+      delete: 'audio-edit-action-delete',
+    },
+    onReplace: mediaEdit.handleCallMedia,
+    onDownload: () => value && mediaEdit.downloadMedia(value),
+    onDelete: mediaEdit.handleDelete,
+    play: {
+      label: t('CMS.audio.button.play'),
+      dataHook: 'audio-edit-action-play',
+      onClick: handlePlay,
+    },
+  });
+
+  return (
+    <CellMediaEditShell
+      dataHook={dataHook}
+      mediaEdit={mediaEdit}
+      value={value}
+      fieldType={MediaFieldType.document}
+      gap="SP1"
+    >
+      {value ? (
+        <Box minWidth="0" style={{ flex: '1 1 auto' }}>
+          <Tag
+            id="audio-edit-tag"
+            dataHook="audio-edit-tag"
+            removable={false}
+            thumb={<MusicSmall />}
+            size="small"
+            maxWidth="100%"
+          >
+            {getMediaTitle(value)}
+          </Tag>
+        </Box>
+      ) : (
+        <Tooltip content={t('CMS.audio.button.add')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="secondary"
+            dataHook="audio-edit-add-button"
+            onClick={mediaEdit.handleCallMedia}
+          >
+            <Add />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      {value ? (
+        <ActionsMenu actions={actions} appendTo="window" textSize="small">
+          <Tooltip
+            content={t('CMS.audio.more_actions_tooltip')}
+            appendTo="window"
+          >
+            <IconButton
+              size="tiny"
+              priority="tertiary"
+              dataHook="audio-edit-more-button"
+            >
+              <MoreSmall />
+            </IconButton>
+          </Tooltip>
+        </ActionsMenu>
+      ) : null}
+    </CellMediaEditShell>
+  );
+};
+
+CellAudioEdit.displayName = 'CellAudioEdit';

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Tag } from '@wix/design-system';
+import { MusicSmall } from '@wix/wix-ui-icons-common';
+import { getMediaTitle } from '../../utils';
+
+export interface CellAudioViewProps {
+  value: string | null;
+  dataHook?: string;
+}
+
+export const CellAudioView: React.FC<CellAudioViewProps> = ({
+  value,
+  dataHook,
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      width="100%"
+      height="100%"
+      padding="0 8px"
+      minWidth="0"
+      boxSizing="border-box"
+    >
+      <Tag
+        id="audio-cell-tag"
+        dataHook="audio-cell-tag"
+        removable={false}
+        thumb={<MusicSmall />}
+        size="small"
+        maxWidth="100%"
+      >
+        {getMediaTitle(value)}
+      </Tag>
+    </Box>
+  );
+};
+
+CellAudioView.displayName = 'CellAudioView';

package/src/components/audio/index.ts

@@ -1,2 +1,4 @@
 export * from './audio-player';
 export * from './audio-field';
+export * from './cell-audio-view';
+export * from './cell-audio-edit';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview4112651844";
+var _namespace_ = "colorview2799601068";
 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":"colorview4112651844__root","view":"colorview4112651844__view","fillPreview":"colorview4112651844__fillPreview"};
+export var classes = {"root":"colorview2799601068__root","view":"colorview2799601068__view","fillPreview":"colorview2799601068__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_ = "deletedialog3317896481";
+var _namespace_ = "deletedialog1666449724";
 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":"deletedialog3317896481__root","layout":"deletedialog3317896481__layout"};
+export var classes = {"root":"deletedialog1666449724__root","layout":"deletedialog1666449724__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_ = "formdocumentfield556670286";
+var _namespace_ = "formdocumentfield3954791883";
 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":"formdocumentfield556670286__root","viewWrapper":"formdocumentfield556670286__viewWrapper","textWidth":"formdocumentfield556670286__textWidth","documentLoader":"formdocumentfield556670286__documentLoader","addDocument":"formdocumentfield556670286__addDocument","addItemWrapper":"formdocumentfield556670286__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3954791883__root","viewWrapper":"formdocumentfield3954791883__viewWrapper","textWidth":"formdocumentfield3954791883__textWidth","documentLoader":"formdocumentfield3954791883__documentLoader","addDocument":"formdocumentfield3954791883__addDocument","addItemWrapper":"formdocumentfield3954791883__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_ = "exclamation3624090198";
+var _namespace_ = "exclamation759924886";
 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":"exclamation3624090198__root","exclamation":"exclamation3624090198__exclamation","actions":"exclamation3624090198__actions","action":"exclamation3624090198__action"};
+export var classes = {"root":"exclamation759924886__root","exclamation":"exclamation759924886__exclamation","actions":"exclamation759924886__actions","action":"exclamation759924886__action"};
 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_ = "highlightedtext1956286532";
+var _namespace_ = "highlightedtext4235751675";
 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":"highlightedtext1956286532__root","substring":"highlightedtext1956286532__substring"};
-export var keyframes = {"highlighted":"highlightedtext1956286532__highlighted","highlighted-match":"highlightedtext1956286532__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4235751675__root","substring":"highlightedtext4235751675__substring"};
+export var keyframes = {"highlighted":"highlightedtext4235751675__highlighted","highlighted-match":"highlightedtext4235751675__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_ = "thumbnailreplaceoverlay1906651930";
+var _namespace_ = "thumbnailreplaceoverlay1224436687";
 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":"thumbnailreplaceoverlay1906651930__root","icon":"thumbnailreplaceoverlay1906651930__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1224436687__root","icon":"thumbnailreplaceoverlay1224436687__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_ = "cellmediaeditshell2607537795";
+var _namespace_ = "cellmediaeditshell3700849137";
 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":"cellmediaeditshell2607537795__root"};
+export var classes = {"root":"cellmediaeditshell3700849137__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,4 +5,5 @@ export * from './use-document-delete';
 export * from './paste-url-button';
 export * from './paste-url-form';
 export * from './use-cell-media-edit';
+export * from './use-media-handlers';
 export * from './cell-media-edit-shell';

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_ = "pasteurlbutton310768866";
+var _namespace_ = "pasteurlbutton3831057513";
 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":"pasteurlbutton310768866__root","iconButtonTooltip":"pasteurlbutton310768866__iconButtonTooltip","iconButton":"pasteurlbutton310768866__iconButton"};
+export var classes = {"root":"pasteurlbutton3831057513__root","iconButtonTooltip":"pasteurlbutton3831057513__iconButtonTooltip","iconButton":"pasteurlbutton3831057513__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,6 +5,7 @@ import { MEDIA_TYPES } from '../../utils/media-utils';
 import { useCellEditKeyboard } from '../../hooks';
 
 import { useMediaControl } from './use-media-control';
+import { useMediaHandlers } from './use-media-handlers';
 import { usePasteURLForm } from './use-paste-url-form';
 
 export interface UseCellMediaEditParams {
@@ -82,13 +83,15 @@ export function useCellMediaEdit({
     onChange: onMediaChange,
   });
 
-  const handleCallMedia = useCallback(async () => {
-    onStartEdit?.();
-    const committed = await callMedia();
-    if (!committed) {
-      onCancel?.();
-    }
-  }, [onStartEdit, callMedia, onCancel]);
+  const { handleReplace: handleCallMedia, handleDelete } = useMediaHandlers({
+    value,
+    callMedia,
+    downloadMedia,
+    onChange,
+    onCommit,
+    onStartEdit,
+    onCancel,
+  });
 
   const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
     onChange: onMediaChange,
@@ -100,19 +103,13 @@ export function useCellMediaEdit({
   }, [onClose, onCancel]);
 
   const startEditAndOpenPasteUrl = useCallback(
-    (params: { title: string; value?: string }) =>
-      () => {
-        onStartEdit?.();
-        onOpen(params)();
-      },
+    (params: { title: string; value?: string }) => () => {
+      onStartEdit?.();
+      onOpen(params)();
+    },
     [onStartEdit, onOpen],
   );
 
-  const handleDelete = useCallback(() => {
-    onChange(null);
-    onCommit();
-  }, [onChange, onCommit]);
-
   const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
     containerRef,
     onCancel,

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

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+
+export interface UseMediaHandlersOptions {
+  value: string | null;
+  callMedia: () => Promise<boolean>;
+  downloadMedia: (uri?: string) => void;
+  onChange: (value: string | null) => void;
+  /** Cell-only: commits the new value after onChange. */
+  onCommit?: () => void;
+  /** Cell-only: fires before the media manager opens so the table can lock focus. */
+  onStartEdit?: () => void;
+  /** Cell-only: fires when the media manager is dismissed without a pick. */
+  onCancel?: () => void;
+}
+
+export interface MediaHandlers {
+  handleReplace: () => Promise<void>;
+  handleDownload: () => void;
+  handleDelete: () => void;
+}
+
+/**
+ * Shared wrapping for the three audio/document/image/video actions so cell and
+ * form callers pass identical handler shapes when building their action menus.
+ * Optional cell-only callbacks no-op in the form path.
+ */
+export function useMediaHandlers({
+  value,
+  callMedia,
+  downloadMedia,
+  onChange,
+  onCommit,
+  onStartEdit,
+  onCancel,
+}: UseMediaHandlersOptions): MediaHandlers {
+  const handleReplace = useCallback(async () => {
+    onStartEdit?.();
+    const committed = await callMedia();
+    if (!committed) {
+      onCancel?.();
+    }
+  }, [onStartEdit, callMedia, onCancel]);
+
+  const handleDownload = useCallback(() => {
+    if (value) {
+      downloadMedia(value);
+    }
+  }, [value, downloadMedia]);
+
+  const handleDelete = useCallback(() => {
+    onChange(null);
+    onCommit?.();
+  }, [onChange, onCommit]);
+
+  return { handleReplace, handleDownload, handleDelete };
+}

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_ = "formmediagalleryfield4220744262";
+var _namespace_ = "formmediagalleryfield299044212";
 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":"formmediagalleryfield4220744262__root","container":"formmediagalleryfield4220744262__container","viewBox":"formmediagalleryfield4220744262__viewBox","addItemWrapper":"formmediagalleryfield4220744262__addItemWrapper","addItem":"formmediagalleryfield4220744262__addItem","overlay":"formmediagalleryfield4220744262__overlay","image":"formmediagalleryfield4220744262__image","previewImage":"formmediagalleryfield4220744262__previewImage","previewVideo":"formmediagalleryfield4220744262__previewVideo"};
+export var classes = {"root":"formmediagalleryfield299044212__root","container":"formmediagalleryfield299044212__container","viewBox":"formmediagalleryfield299044212__viewBox","addItemWrapper":"formmediagalleryfield299044212__addItemWrapper","addItem":"formmediagalleryfield299044212__addItem","overlay":"formmediagalleryfield299044212__overlay","image":"formmediagalleryfield299044212__image","previewImage":"formmediagalleryfield299044212__previewImage","previewVideo":"formmediagalleryfield299044212__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_ = "mediaimage4014780765";
+var _namespace_ = "mediaimage3603088629";
 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":"mediaimage4014780765__root"};
+export var classes = {"root":"mediaimage3603088629__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":"--mediaimage4014780765-from","to":"--mediaimage4014780765-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":"--mediaimage3603088629-from","to":"--mediaimage3603088629-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_ = "overlay2083186616";
+var _namespace_ = "overlay3561604361";
 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":"overlay2083186616__root","iconOverlay":"overlay2083186616__iconOverlay"};
+export var classes = {"root":"overlay3561604361__root","iconOverlay":"overlay3561604361__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader2739525698";
+var _namespace_ = "medialoader3999422864";
 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":"medialoader2739525698__root","loader":"medialoader2739525698__loader"};
+export var classes = {"root":"medialoader3999422864__root","loader":"medialoader3999422864__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};