@alfalab/core-components 48.11.0 → 48.12.0-beta.0

package/gallery/modern/components/image-viewer/component.js

@@ -8,11 +8,11 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-a03bb3f0.js';
+import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
+import { s as styles } from '../../index.module-68655d26.js';
 import 'element-closest';
-import '../../../../spinner/modern';
 import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';
@@ -23,7 +23,7 @@ import '@alfalab/icons-glyph/PlayCompactMIcon';
 SwiperCore.use([EffectFade, A11y, Controller]);
 const ImageViewer = () => {
     const { images, imagesMeta, fullScreen, currentSlideIndex, initialSlide, setCurrentSlideIndex, getSwiper, setSwiper, slidePrev, slideNext, getCurrentImage, } = useContext(GalleryContext);
-    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile, rightArrowRef, leftArrowRef, } = useHandleImageViewer();
     const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');
     const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');
     const swiper = getSwiper();
@@ -101,7 +101,7 @@ const ImageViewer = () => {
             return (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
                     pointerEvents: slideVisible ? 'auto' : 'none',
                     transitionProperty: 'opacity',
-                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible }))));
+                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible, handleLoad: handleLoad, handleLoadError: handleLoadError }))));
         })),
         showControls && (React.createElement("div", { className: cn(styles.arrow, {
                 [styles.focused]: rightArrowFocused,

package/gallery/modern/components/image-viewer/hooks.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MouseEventHandler, SyntheticEvent } from 'react';
+declare const useHandleImageViewer: () => {
+    handleLoad: (event: SyntheticEvent<HTMLImageElement>, index: number) => void;
+    handleLoadError: (index: number) => void;
+    handleWrapperClick: MouseEventHandler<Element>;
+    isMobile: boolean;
+    leftArrowRef: import("react").RefObject<HTMLDivElement>;
+    rightArrowRef: import("react").RefObject<HTMLDivElement>;
+};
+export { useHandleImageViewer };

package/gallery/modern/components/image-viewer/hooks.js

@@ -1,4 +1,42 @@
-import 'react';
-import 'element-closest';
-import '../../context.js';
-export { u as useHandleImageViewer } from '../../hooks-a03bb3f0.js';
+import { useContext, useRef, useCallback, useEffect } from 'react';
+import elementClosest from 'element-closest';
+import { GalleryContext } from '../../context.js';
+import { s as styles } from '../../index.module-68655d26.js';
+
+const useHandleImageViewer = () => {
+    const { view, onClose, setImageMeta } = useContext(GalleryContext);
+    const leftArrowRef = useRef(null);
+    const rightArrowRef = useRef(null);
+    const isMobile = view === 'mobile';
+    const handleLoad = (event, index) => {
+        const target = event.currentTarget;
+        const { naturalWidth, naturalHeight } = target;
+        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);
+    };
+    const handleLoadError = (index) => {
+        setImageMeta({ width: 0, height: 0, broken: true }, index);
+    };
+    const handleWrapperClick = useCallback((event) => {
+        const eventTarget = event.target;
+        const isArrow = leftArrowRef.current?.contains(eventTarget) ||
+            rightArrowRef.current?.contains(eventTarget);
+        const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));
+        const isImg = eventTarget.tagName === 'IMG';
+        if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
+            onClose();
+        }
+    }, [isMobile, onClose]);
+    useEffect(() => {
+        elementClosest(window);
+    }, []);
+    return {
+        handleLoad,
+        handleLoadError,
+        handleWrapperClick,
+        isMobile,
+        leftArrowRef,
+        rightArrowRef,
+    };
+};
+
+export { useHandleImageViewer };

package/gallery/modern/components/image-viewer/index.css

@@ -6,8 +6,8 @@
     --color-static-neutral-0-inverted: #262629;
     --color-static-neutral-0-inverted-hover: #2f2f32;
     --color-static-neutral-0-inverted-press: #353539;
+    --color-static-neutral-100-inverted: #1c1c1e;
     --color-static-neutral-300-inverted: #29292c;
-    --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
     --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -76,11 +76,8 @@
     width: 100%;
     height: 100%;
 } .gallery__slideLoading_qvwfw {
-    background-color: var(--color-static-neutral-translucent-100-inverted);
+    background-color: var(--color-static-neutral-100-inverted);
     border-radius: var(--border-radius-8);
-} .gallery__spinner_qvwfw {
-    position: absolute;
-    color: var(--color-static-neutral-translucent-1300-inverted);
 } .gallery__image_qvwfw {
     width: 0;
     height: 0;
@@ -124,8 +121,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
+    width: 400px;
+    height: 300px;
     border-radius: var(--border-radius-8);
     background-color: var(--color-static-neutral-300-inverted);
 } .gallery__brokenImgWrapper_qvwfw {

package/gallery/modern/components/image-viewer/index.js

@@ -9,10 +9,10 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../hooks-a03bb3f0.js';
+import './hooks.js';
 import 'element-closest';
+import '../../index.module-68655d26.js';
 import './slide.js';
-import '../../../../spinner/modern';
 import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';

package/gallery/modern/components/image-viewer/single.js

@@ -2,10 +2,10 @@ import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-a03bb3f0.js';
+import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
+import { s as styles } from '../../index.module-68655d26.js';
 import 'element-closest';
-import '../../../../spinner/modern';
 import '../../../../typography/modern';
 import '../../utils/constants.js';
 import './paths.js';
@@ -16,7 +16,7 @@ import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 const Single = () => {
     const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } = useContext(GalleryContext);
-    const { handleWrapperClick, isMobile } = useHandleImageViewer();
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile } = useHandleImageViewer();
     const wrapperRef = useRef(null);
     const currentImage = getCurrentImage();
     const currentImageMeta = getCurrentImageMeta();
@@ -33,7 +33,7 @@ const Single = () => {
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }), ref: wrapperRef },
-        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true })))));
+        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true, handleLoad: handleLoad, handleLoadError: handleLoadError })))));
 };
 
 export { Single };

package/gallery/modern/components/image-viewer/slide.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, SyntheticEvent } from 'react';
 import { GalleryImage, ImageMeta } from "../../types";
 type SlideProps = {
     isActive: boolean;
@@ -9,6 +9,8 @@ type SlideProps = {
     index: number;
     containerHeight: number;
     slideVisible: boolean;
+    handleLoad: (event: SyntheticEvent<HTMLImageElement>, index: number) => void;
+    handleLoadError: (index: number) => void;
 };
 declare const Slide: FC<SlideProps>;
 export { Slide };

package/gallery/modern/components/image-viewer/slide.js

@@ -1,19 +1,17 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
-import { Spinner } from '../../../../spinner/modern';
 import { Text } from '../../../../typography/modern';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-a03bb3f0.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
-import 'element-closest';
+import { s as styles } from '../../index.module-68655d26.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
-const SlideInner = ({ children, broken, loading, isVideoView }) => {
+const SlideInner = ({ children, broken, loading, withPlaceholder, isVideoView, }) => {
     const content = broken ? (React.createElement("div", { className: styles.brokenImgWrapper },
         React.createElement("div", { className: styles.brokenImgIcon },
             React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '80', height: '80', viewBox: '0 0 80 80', fill: 'none' },
@@ -23,22 +21,19 @@ const SlideInner = ({ children, broken, loading, isVideoView }) => {
         React.createElement(Text, { view: 'primary-small', color: 'static-secondary-light' },
             "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C ",
             isVideoView ? 'видео' : 'изображение'))) : (children);
-    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) },
-        broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
-        React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
+    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) }, withPlaceholder ? React.createElement("div", { className: styles.placeholder }, content) : content));
 };
-const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, }) => {
+const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, handleLoad, handleLoadError, }) => {
     const { view } = useContext(GalleryContext);
-    const { handleLoad, handleLoadError } = useHandleImageViewer();
     const broken = Boolean(meta?.broken);
     const small = isSmallImage(meta);
     const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
     if (isVideo(image.src)) {
-        return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, loading: !meta },
+        return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, withPlaceholder: broken, loading: !meta },
             React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
     }
-    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta },
+    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta, withPlaceholder: small || broken },
         React.createElement("img", { src: image.src, alt: getImageAlt(image, index), className: cn({
                 [styles.smallImage]: small,
                 [styles.image]: !small && meta,

package/gallery/modern/components/index.js

@@ -30,10 +30,10 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../hooks-a03bb3f0.js';
+import './image-viewer/hooks.js';
 import 'element-closest';
+import '../index.module-68655d26.js';
 import './image-viewer/slide.js';
-import '../../../spinner/modern';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';

package/gallery/modern/components/info-bar/Component.js

@@ -44,7 +44,7 @@ const InfoBar = () => {
     }, [playingVideo, setPlayingVideo]);
     return isVideo(image?.src) ? (React.createElement("section", { className: styles.videoButtons },
         playingVideo ? (React.createElement(Pause, { onClick: handlePlayVideo, className: styles.center })) : (React.createElement(Play, { onClick: handlePlayVideo, className: styles.center })),
-        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'static-primary-light' }, image?.name));
+        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'primary-inverted' }, image?.name));
 };
 
 export { InfoBar };

package/gallery/modern/index.js

@@ -7,10 +7,10 @@ import '../../mq/modern';
 import './components/image-viewer/single.js';
 import './context.js';
 import './utils/utils.js';
-import './hooks-a03bb3f0.js';
+import './components/image-viewer/hooks.js';
 import 'element-closest';
+import './index.module-68655d26.js';
 import './components/image-viewer/slide.js';
-import '../../spinner/modern';
 import '../../typography/modern';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';

package/gallery/modern/index.module-68655d26.js

@@ -0,0 +1,4 @@
+const styles = {"component":"gallery__component_qvwfw","swiper":"gallery__swiper_qvwfw","mobile":"gallery__mobile_qvwfw","mobileVideo":"gallery__mobileVideo_qvwfw","singleSlideContainer":"gallery__singleSlideContainer_qvwfw","hidden":"gallery__hidden_qvwfw","slide":"gallery__slide_qvwfw","slideLoading":"gallery__slideLoading_qvwfw","image":"gallery__image_qvwfw","smallImage":"gallery__smallImage_qvwfw","verticalImageFit":"gallery__verticalImageFit_qvwfw","horizontalImageFit":"gallery__horizontalImageFit_qvwfw","arrow":"gallery__arrow_qvwfw","focused":"gallery__focused_qvwfw","placeholder":"gallery__placeholder_qvwfw","brokenImgWrapper":"gallery__brokenImgWrapper_qvwfw","brokenImgIcon":"gallery__brokenImgIcon_qvwfw","fullScreenImage":"gallery__fullScreenImage_qvwfw","fullScreenVideo":"gallery__fullScreenVideo_qvwfw"};
+require('./components/image-viewer/index.css');
+
+export { styles as s };

package/gallery/modern/utils/constants.d.ts

@@ -10,7 +10,7 @@ declare const TestIds: {
     MUTE_BUTTON: string;
     UNMUTE_BUTTON: string;
 };
-declare const PREVIEW_WIDTH_MOBILE = 46;
+declare const PREVIEW_WIDTH_MOBILE = 36;
 declare const PREVIEW_HEIGHT_MOBILE = 46;
 declare const PREVIEW_WIDTH_DESKTOP = 56;
 declare const PREVIEW_HEIGHT_DESKTOP = 56;

package/gallery/modern/utils/constants.js

@@ -10,7 +10,7 @@ const TestIds = {
     MUTE_BUTTON: 'mute-button',
     UNMUTE_BUTTON: 'unmute-button',
 };
-const PREVIEW_WIDTH_MOBILE = 46;
+const PREVIEW_WIDTH_MOBILE = 36;
 const PREVIEW_HEIGHT_MOBILE = 46;
 const PREVIEW_WIDTH_DESKTOP = 56;
 const PREVIEW_HEIGHT_DESKTOP = 56;

package/gallery/moderncssm/Component.js

@@ -17,7 +17,6 @@ import './components/image-viewer/hooks.js';
 import 'element-closest';
 import './components/image-viewer/index.module.css';
 import './components/image-viewer/slide.js';
-import '../../spinner/moderncssm';
 import '../../typography/moderncssm';
 import './utils/constants.js';
 import './components/image-viewer/paths.js';

package/gallery/moderncssm/components/buttons/index.js

@@ -14,18 +14,18 @@ import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
 import styles from './index.module.css';
 
 const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
-const BackArrow = ({ buttonRef, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowLeftMIcon, "aria-label": '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434', className: styles.iconButton }));
-const Play = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PlayCompactMIcon, "aria-label": '\u041F\u0440\u043E\u0438\u0433\u0440\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
-const Pause = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PauseCompactMIcon, "aria-label": '\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0443\u0437\u0443 \u043D\u0430 \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
+const BackArrow = ({ buttonRef, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowLeftMIcon, colors: 'inverted', "aria-label": '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434', className: styles.iconButton }));
+const Play = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PlayCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u0440\u043E\u0438\u0433\u0440\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
+const Pause = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PauseCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0443\u0437\u0443 \u043D\u0430 \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
 const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
 const MuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundMIcon, "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
 const UnmuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, colors: 'inverted', "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
 const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
-const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
+    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
+const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
 
 export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, UnmuteVideo };

package/gallery/moderncssm/components/buttons/index.module.css

@@ -9,9 +9,7 @@
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
 
-.iconButton path {
-        color: var(--color-static-neutral-100);
-    }
+/* TODO: применять static цвет через prop IconButton'а */
 
 .iconButton:hover path {
         color: var(--color-static-neutral-100-hover);

package/gallery/moderncssm/components/image-preview/index.module.css

@@ -32,7 +32,7 @@
 }
 
 .preview.mobile {
-        width: 46px;
+        width: 36px;
         height: 46px;
         border-radius: var(--border-radius-8);
     }

package/gallery/moderncssm/components/image-viewer/component.js

@@ -13,7 +13,6 @@ import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
 import styles from './index.module.css';
 import 'element-closest';
-import '../../../../spinner/moderncssm';
 import '../../../../typography/moderncssm';
 import './paths.js';
 import './video/index.js';
@@ -25,7 +24,7 @@ import './video/index.module.css';
 SwiperCore.use([EffectFade, A11y, Controller]);
 const ImageViewer = () => {
     const { images, imagesMeta, fullScreen, currentSlideIndex, initialSlide, setCurrentSlideIndex, getSwiper, setSwiper, slidePrev, slideNext, getCurrentImage, } = useContext(GalleryContext);
-    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile, rightArrowRef, leftArrowRef, } = useHandleImageViewer();
     const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');
     const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');
     const swiper = getSwiper();
@@ -103,7 +102,7 @@ const ImageViewer = () => {
             return (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
                     pointerEvents: slideVisible ? 'auto' : 'none',
                     transitionProperty: 'opacity',
-                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible }))));
+                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible, handleLoad: handleLoad, handleLoadError: handleLoadError }))));
         })),
         showControls && (React.createElement("div", { className: cn(styles.arrow, {
                 [styles.focused]: rightArrowFocused,

package/gallery/moderncssm/components/image-viewer/index.js

@@ -13,7 +13,6 @@ import './hooks.js';
 import 'element-closest';
 import './index.module.css';
 import './slide.js';
-import '../../../../spinner/moderncssm';
 import '../../../../typography/moderncssm';
 import './paths.js';
 import './video/index.js';

package/gallery/moderncssm/components/image-viewer/index.module.css

@@ -59,15 +59,10 @@
 }
 
 .slideLoading {
-    background-color: var(--color-static-neutral-translucent-100-inverted);
+    background-color: var(--color-static-neutral-100-inverted);
     border-radius: var(--border-radius-8);
 }
 
-.spinner {
-    position: absolute;
-    color: var(--color-static-neutral-translucent-1300-inverted);
-}
-
 .image {
     width: 0;
     height: 0;
@@ -129,8 +124,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
+    width: 400px;
+    height: 300px;
     border-radius: var(--border-radius-8);
     background-color: var(--color-static-neutral-300-inverted);
 }

package/gallery/moderncssm/components/image-viewer/single.js

@@ -6,7 +6,6 @@ import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import styles from './index.module.css';
 import 'element-closest';
-import '../../../../spinner/moderncssm';
 import '../../../../typography/moderncssm';
 import '../../utils/constants.js';
 import './paths.js';
@@ -18,7 +17,7 @@ import './video/index.module.css';
 
 const Single = () => {
     const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } = useContext(GalleryContext);
-    const { handleWrapperClick, isMobile } = useHandleImageViewer();
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile } = useHandleImageViewer();
     const wrapperRef = useRef(null);
     const currentImage = getCurrentImage();
     const currentImageMeta = getCurrentImageMeta();
@@ -35,7 +34,7 @@ const Single = () => {
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }), ref: wrapperRef },
-        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true })))));
+        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true, handleLoad: handleLoad, handleLoadError: handleLoadError })))));
 };
 
 export { Single };

package/gallery/moderncssm/components/image-viewer/slide.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, SyntheticEvent } from 'react';
 import { GalleryImage, ImageMeta } from "../../types";
 type SlideProps = {
     isActive: boolean;
@@ -9,6 +9,8 @@ type SlideProps = {
     index: number;
     containerHeight: number;
     slideVisible: boolean;
+    handleLoad: (event: SyntheticEvent<HTMLImageElement>, index: number) => void;
+    handleLoadError: (index: number) => void;
 };
 declare const Slide: FC<SlideProps>;
 export { Slide };

package/gallery/moderncssm/components/image-viewer/slide.js

@@ -1,21 +1,18 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
-import { Spinner } from '../../../../spinner/moderncssm';
 import { Text } from '../../../../typography/moderncssm';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { useHandleImageViewer } from './hooks.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
 import styles from './index.module.css';
-import 'element-closest';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './video/index.module.css';
 
-const SlideInner = ({ children, broken, loading, isVideoView }) => {
+const SlideInner = ({ children, broken, loading, withPlaceholder, isVideoView, }) => {
     const content = broken ? (React.createElement("div", { className: styles.brokenImgWrapper },
         React.createElement("div", { className: styles.brokenImgIcon },
             React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '80', height: '80', viewBox: '0 0 80 80', fill: 'none' },
@@ -25,22 +22,19 @@ const SlideInner = ({ children, broken, loading, isVideoView }) => {
         React.createElement(Text, { view: 'primary-small', color: 'static-secondary-light' },
             "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C ",
             isVideoView ? 'видео' : 'изображение'))) : (children);
-    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) },
-        broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
-        React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
+    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) }, withPlaceholder ? React.createElement("div", { className: styles.placeholder }, content) : content));
 };
-const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, }) => {
+const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, handleLoad, handleLoadError, }) => {
     const { view } = useContext(GalleryContext);
-    const { handleLoad, handleLoadError } = useHandleImageViewer();
     const broken = Boolean(meta?.broken);
     const small = isSmallImage(meta);
     const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
     if (isVideo(image.src)) {
-        return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, loading: !meta },
+        return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, withPlaceholder: broken, loading: !meta },
             React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
     }
-    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta },
+    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta, withPlaceholder: small || broken },
         React.createElement("img", { src: image.src, alt: getImageAlt(image, index), className: cn({
                 [styles.smallImage]: small,
                 [styles.image]: !small && meta,

package/gallery/moderncssm/components/index.js

@@ -39,7 +39,6 @@ import './image-viewer/hooks.js';
 import 'element-closest';
 import './image-viewer/index.module.css';
 import './image-viewer/slide.js';
-import '../../../spinner/moderncssm';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';

package/gallery/moderncssm/components/info-bar/Component.js

@@ -43,7 +43,7 @@ const InfoBar = () => {
     }, [playingVideo, setPlayingVideo]);
     return isVideo(image?.src) ? (React.createElement("section", { className: styles.videoButtons },
         playingVideo ? (React.createElement(Pause, { onClick: handlePlayVideo, className: styles.center })) : (React.createElement(Play, { onClick: handlePlayVideo, className: styles.center })),
-        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'static-primary-light' }, image?.name));
+        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'primary-inverted' }, image?.name));
 };
 
 export { InfoBar };

package/gallery/moderncssm/index.js

@@ -11,7 +11,6 @@ import './components/image-viewer/hooks.js';
 import 'element-closest';
 import './components/image-viewer/index.module.css';
 import './components/image-viewer/slide.js';
-import '../../spinner/moderncssm';
 import '../../typography/moderncssm';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';

package/gallery/moderncssm/utils/constants.d.ts

@@ -10,7 +10,7 @@ declare const TestIds: {
     MUTE_BUTTON: string;
     UNMUTE_BUTTON: string;
 };
-declare const PREVIEW_WIDTH_MOBILE = 46;
+declare const PREVIEW_WIDTH_MOBILE = 36;
 declare const PREVIEW_HEIGHT_MOBILE = 46;
 declare const PREVIEW_WIDTH_DESKTOP = 56;
 declare const PREVIEW_HEIGHT_DESKTOP = 56;

package/gallery/moderncssm/utils/constants.js

@@ -10,7 +10,7 @@ const TestIds = {
     MUTE_BUTTON: 'mute-button',
     UNMUTE_BUTTON: 'unmute-button',
 };
-const PREVIEW_WIDTH_MOBILE = 46;
+const PREVIEW_WIDTH_MOBILE = 36;
 const PREVIEW_HEIGHT_MOBILE = 46;
 const PREVIEW_WIDTH_DESKTOP = 56;
 const PREVIEW_HEIGHT_DESKTOP = 56;