@alfalab/core-components-gallery 5.10.0 → 5.10.2

package/modern/components/info-bar/index.css

@@ -1,4 +1,4 @@
-/* hash: 4oho0 */
+/* hash: 9nggj */
 :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 */ :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -20,18 +20,18 @@
     --gap-8: var(--gap-xs);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__description_y2txk {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__description_wnn0j {
     text-align: center;
     margin-bottom: var(--gap-8);
-} .gallery__videoButtons_y2txk {
+} .gallery__videoButtons_wnn0j {
     padding: 0 var(--gap-8);
     position: relative;
     height: 48px;
-} .gallery__center_y2txk {
+} .gallery__center_wnn0j {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-} .gallery__right_y2txk {
+} .gallery__right_wnn0j {
     position: absolute;
     right: 0;
 }

package/modern/components/navigation-bar/Component.js

@@ -4,7 +4,7 @@ import { getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { ImagePreview } from '../image-preview/Component.js';
 
-const styles = {"component":"gallery__component_11b9j","previews":"gallery__previews_11b9j","preview":"gallery__preview_11b9j"};
+const styles = {"component":"gallery__component_1a8dz","previews":"gallery__previews_1a8dz","preview":"gallery__preview_1a8dz"};
 require('./index.css')
 
 const MIN_SCROLL_STEP = 24;

package/modern/components/navigation-bar/index.css

@@ -1,4 +1,4 @@
-/* hash: 61fsx */
+/* hash: 1cj6m */
 :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 */ :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -23,7 +23,7 @@
     --gap-24: var(--gap-xl);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__component_11b9j {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__component_1a8dz {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -33,15 +33,15 @@
     box-sizing: border-box;
     padding: 10px var(--gap-24);
     scrollbar-width: none
-} .gallery__component_11b9j::-webkit-scrollbar {
+} .gallery__component_1a8dz::-webkit-scrollbar {
         display: none;
-    } .gallery__previews_11b9j {
+    } .gallery__previews_1a8dz {
     display: flex;
-} .gallery__preview_11b9j {
+} .gallery__preview_1a8dz {
     flex-shrink: 0;
     margin: var(--gap-0) var(--gap-2)
-} .gallery__preview_11b9j:first-child {
+} .gallery__preview_1a8dz:first-child {
         margin-left: auto;
-    } .gallery__preview_11b9j:last-child {
+    } .gallery__preview_1a8dz:last-child {
         margin-right: auto;
     }

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: hjbxz */
+/* hash: 1wgkt */
 :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 */ :root {
     --color-static-neutral-0-inverted: #262629; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,7 +19,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__container_1ayy3 {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__container_ndtku {
     position: relative;
     overflow: hidden;
     display: flex;
@@ -28,12 +28,12 @@
     height: 100%;
     width: 100%;
     background-color: var(--color-static-neutral-0-inverted);
-} .gallery__modal_1ayy3 {
+} .gallery__modal_ndtku {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     background: transparent;
-} .gallery__navigationVideo_1ayy3 {
+} .gallery__navigationVideo_ndtku {
     background-color: var(--color-static-neutral-0-inverted);
     z-index: 3;
     width: 100%;
@@ -41,6 +41,6 @@
     bottom: 0;
     left: 0;
     transition: transform 0.3s ease-in-out;
-} .gallery__hideNavigation_1ayy3 {
+} .gallery__hideNavigation_ndtku {
     transform: translateY(106px);
 }

package/modern/index.module-74d34a11.js

@@ -0,0 +1,4 @@
+const styles = {"component":"gallery__component_52rek","swiper":"gallery__swiper_52rek","mobile":"gallery__mobile_52rek","mobileVideo":"gallery__mobileVideo_52rek","singleSlideContainer":"gallery__singleSlideContainer_52rek","hidden":"gallery__hidden_52rek","slide":"gallery__slide_52rek","slideLoading":"gallery__slideLoading_52rek","image":"gallery__image_52rek","smallImage":"gallery__smallImage_52rek","verticalImageFit":"gallery__verticalImageFit_52rek","horizontalImageFit":"gallery__horizontalImageFit_52rek","arrow":"gallery__arrow_52rek","focused":"gallery__focused_52rek","placeholder":"gallery__placeholder_52rek","brokenImgWrapper":"gallery__brokenImgWrapper_52rek","brokenImgIcon":"gallery__brokenImgIcon_52rek","fullScreenImage":"gallery__fullScreenImage_52rek","fullScreenVideo":"gallery__fullScreenVideo_52rek"};
+require('./components/image-viewer/index.css')
+
+export { styles as s };

package/moderncssm/Component.js

@@ -1,9 +1,11 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
-import { useMedia } from '@alfalab/hooks';
+import { useIsDesktop } from '@alfalab/core-components-mq/moderncssm';
+import { Single } from './components/image-viewer/single.js';
 import { NavigationBar } from './components/navigation-bar/Component.js';
 import { Header } from './components/header/Component.js';
+import '@alfalab/hooks';
 import { GalleryContext } from './context.js';
 import './components/image-preview/index.module.css';
 import { ImageViewer } from './components/image-viewer/component.js';
@@ -28,11 +30,7 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     const [mutedVideo, setMutedVideo] = useState(DEFAULT_MUTED_VIDEO);
     const [playingVideo, setPlayingVideo] = useState(DEFAULT_PLAYING_VIDEO);
     const [hideNavigation, setHideNavigation] = useState(DEFAULT_HIDE_NAVIGATION);
-    const [view] = useMedia([
-        ['mobile', '(max-width: 1023px)'],
-        ['desktop', '(min-width: 1024px)'],
-    ], 'desktop');
-    const isMobile = view === 'mobile';
+    const isDesktop = useIsDesktop();
     const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
     const slideTo = useCallback((index) => {
         if (images[index]) {
@@ -110,7 +108,7 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     const showNavigationBar = !singleSlide && !fullScreen;
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const galleryContext = {
-        view,
+        view: isDesktop ? 'desktop' : 'mobile',
         singleSlide,
         currentSlideIndex,
         images,
@@ -138,14 +136,14 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     return (React.createElement(GalleryContext.Provider, { value: galleryContext },
         React.createElement(BaseModal, { open: open, className: cn(styles.modal, popupClassName), onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop, onUnmount: onUnmount },
             React.createElement("div", { className: styles.container },
-                view === 'desktop' ? React.createElement(Header, null) : React.createElement(HeaderMobile, null),
-                React.createElement(ImageViewer, null),
+                isDesktop ? React.createElement(Header, null) : React.createElement(HeaderMobile, null),
+                images.length === 1 ? React.createElement(Single, null) : React.createElement(ImageViewer, null),
                 React.createElement("nav", { className: cn({
-                        [styles.navigationVideo]: isCurrentVideo && isMobile,
-                        [styles.hideNavigation]: hideNavigation && isMobile,
+                        [styles.navigationVideo]: isCurrentVideo && !isDesktop,
+                        [styles.hideNavigation]: hideNavigation && !isDesktop,
                     }) },
                     showNavigationBar && React.createElement(NavigationBar, null),
-                    view === 'mobile' && React.createElement(InfoBar, null))))));
+                    !isDesktop && React.createElement(InfoBar, null))))));
 };
 
 export { Gallery };

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

@@ -1,6 +1,5 @@
-import React, { useContext, useRef, useCallback, useEffect, useMemo } from 'react';
+import React, { useContext, useCallback, useMemo } from 'react';
 import cn from 'classnames';
-import elementClosest from 'element-closest';
 import SwiperCore, { EffectFade, A11y, Controller } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { useFocus } from '@alfalab/hooks';
@@ -9,16 +8,15 @@ 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 { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
 import styles from './index.module.css';
 
 SwiperCore.use([EffectFade, A11y, Controller]);
 const ImageViewer = () => {
-    const { singleSlide, images, imagesMeta, fullScreen, currentSlideIndex, initialSlide, onClose, setImageMeta, setCurrentSlideIndex, getSwiper, setSwiper, slidePrev, slideNext, getCurrentImage, view, } = useContext(GalleryContext);
-    const isMobile = view === 'mobile';
-    const leftArrowRef = useRef(null);
-    const rightArrowRef = useRef(null);
+    const { images, imagesMeta, fullScreen, currentSlideIndex, initialSlide, setCurrentSlideIndex, getSwiper, setSwiper, slidePrev, slideNext, getCurrentImage, } = useContext(GalleryContext);
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile, rightArrowRef, leftArrowRef, } = useHandleImageViewer();
     const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');
     const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');
     const swiper = getSwiper();
@@ -42,27 +40,6 @@ const ImageViewer = () => {
             slideNext();
         }
     };
-    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);
-    }, []);
     const swiperProps = useMemo(() => ({
         slidesPerView: 1,
         effect: 'fade',
@@ -71,7 +48,7 @@ const ImageViewer = () => {
         },
         className: cn(styles.swiper, {
             [styles.hidden]: fullScreen && !isVideo(currentImage?.src),
-            [styles.fullScreenVideo]: fullScreen && !singleSlide && isVideo(currentImage?.src),
+            [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }),
@@ -87,21 +64,19 @@ const ImageViewer = () => {
     }), [
         fullScreen,
         currentImage?.src,
-        singleSlide,
         isMobile,
         swiper,
         initialSlide,
         setSwiper,
         handleSlideChange,
     ]);
-    const showControls = !singleSlide && !fullScreen && !isMobile && !!images.length;
+    const showControls = !fullScreen && !isMobile && !!images.length;
     const swiperWidth = swiper?.width || 1;
     const swiperHeight = swiper?.height || swiper?.width || 1;
     const swiperAspectRatio = swiperWidth / swiperHeight;
     return (
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
     React.createElement("div", { className: cn(styles.component, {
-            [styles.singleSlide]: singleSlide,
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }), onClick: handleWrapperClick },
@@ -119,7 +94,7 @@ const ImageViewer = () => {
             return (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
                     pointerEvents: slideVisible ? 'auto' : 'none',
                     transitionProperty: 'opacity',
-                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, swiperAspectRatio: swiperAspectRatio, image: image, swiperHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible, handleLoad: handleLoad, handleLoadError: handleLoadError }))));
+                } }, ({ 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/moderncssm/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/moderncssm/components/image-viewer/hooks.js

@@ -0,0 +1,42 @@
+import { useContext, useRef, useCallback, useEffect } from 'react';
+import elementClosest from 'element-closest';
+import { GalleryContext } from '../../context.js';
+import styles from './index.module.css';
+
+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/moderncssm/components/image-viewer/index.module.css

@@ -26,17 +26,22 @@
         max-height: 100vh;
     }
 
-.singleSlide .swiper {
+.singleSlideContainer {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
     max-height: calc(100vh - 80px);
-    padding: var(--gap-32)
+    padding: var(--gap-32);
+    box-sizing: border-box
 }
 
-.singleSlide .swiper.mobile {
+.singleSlideContainer.mobile {
         max-height: calc(100vh - 174px);
         padding: 0;
     }
 
-.singleSlide .swiper.mobileVideo {
+.singleSlideContainer.mobileVideo {
         max-height: 100vh;
     }
 

package/moderncssm/components/image-viewer/single.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const Single: FC;
+export { Single };

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

@@ -0,0 +1,31 @@
+import React, { useContext, useRef } from 'react';
+import cn from 'classnames';
+import { GalleryContext } from '../../context.js';
+import { isVideo, getImageAlt } from '../../utils/utils.js';
+import { useHandleImageViewer } from './hooks.js';
+import { Slide } from './slide.js';
+import styles from './index.module.css';
+
+const Single = () => {
+    const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } = useContext(GalleryContext);
+    const { handleLoad, handleLoadError, handleWrapperClick, isMobile } = useHandleImageViewer();
+    const wrapperRef = useRef(null);
+    const currentImage = getCurrentImage();
+    const currentImageMeta = getCurrentImageMeta();
+    if (!currentImage)
+        return null;
+    const imageWidth = currentImageMeta?.width || 1;
+    const imageHeight = currentImageMeta?.height || 1;
+    const imageAspectRatio = imageWidth / imageHeight;
+    const wrapperRect = wrapperRef.current?.getBoundingClientRect();
+    const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);
+    return (
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+    React.createElement("div", { className: styles.component, onClick: handleWrapperClick }, fullScreen && !isVideo(currentImage?.src) ? (React.createElement("img", { src: currentImage?.src, alt: currentImage ? getImageAlt(currentImage, currentSlideIndex) : '', className: styles.fullScreenImage })) : (React.createElement("div", { className: cn(styles.singleSlideContainer, {
+            [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, handleLoad: handleLoad, handleLoadError: handleLoadError })))));
+};
+
+export { Single };

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

@@ -4,10 +4,10 @@ type SlideProps = {
     isActive: boolean;
     image: GalleryImage;
     meta?: ImageMeta;
-    swiperAspectRatio: number;
+    containerAspectRatio: number;
     imageAspectRatio: number;
     index: number;
-    swiperHeight: number;
+    containerHeight: number;
     slideVisible: boolean;
     handleLoad: (event: SyntheticEvent<HTMLImageElement>, index: number) => void;
     handleLoadError: (index: number) => void;

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

@@ -20,12 +20,12 @@ const SlideInner = ({ children, broken, loading, withPlaceholder, isVideoView, }
             isVideoView ? 'видео' : 'изображение'))) : (children);
     return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) }, withPlaceholder ? React.createElement("div", { className: styles.placeholder }, content) : content));
 };
-const Slide = ({ isActive, meta, swiperAspectRatio, imageAspectRatio, image, index, swiperHeight, slideVisible, handleLoad, handleLoadError, }) => {
+const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, handleLoad, handleLoadError, }) => {
     const { view } = useContext(GalleryContext);
     const broken = Boolean(meta?.broken);
     const small = isSmallImage(meta);
-    const verticalImageFit = !small && swiperAspectRatio > imageAspectRatio;
-    const horizontalImageFit = !small && swiperAspectRatio <= imageAspectRatio;
+    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
+    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
     if (isVideo(image.src)) {
         return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, withPlaceholder: broken, loading: !meta },
             React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
@@ -38,7 +38,7 @@ const Slide = ({ isActive, meta, swiperAspectRatio, imageAspectRatio, image, ind
                 [styles.verticalImageFit]: verticalImageFit,
                 [styles.horizontalImageFit]: horizontalImageFit,
             }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: {
-                maxHeight: `${swiperHeight}px`,
+                maxHeight: `${containerHeight}px`,
             }, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-gallery",
-    "version": "5.10.0",
+    "version": "5.10.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,10 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.8.3",
-        "@alfalab/core-components-icon-button": "^6.11.0",
-        "@alfalab/core-components-tooltip": "^7.7.1",
+        "@alfalab/core-components-base-modal": "^5.8.4",
+        "@alfalab/core-components-icon-button": "^6.11.1",
+        "@alfalab/core-components-mq": "^4.3.0",
+        "@alfalab/core-components-tooltip": "^7.7.2",
         "@alfalab/core-components-typography": "^4.10.2",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",

package/src/Component.tsx

@@ -3,8 +3,9 @@ import cn from 'classnames';
 import SwiperCore from 'swiper';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
-import { useMedia } from '@alfalab/hooks';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
+import { Single } from './components/image-viewer/single';
 import { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';
 import { GalleryContext } from './context';
 import { GalleryImage, ImageMeta } from './types';
@@ -85,15 +86,7 @@ export const Gallery: FC<GalleryProps> = ({
     const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);
     const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);
 
-    const [view] = useMedia<'desktop' | 'mobile'>(
-        [
-            ['mobile', '(max-width: 1023px)'],
-            ['desktop', '(min-width: 1024px)'],
-        ],
-        'desktop',
-    );
-
-    const isMobile = view === 'mobile';
+    const isDesktop = useIsDesktop();
 
     const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
 
@@ -205,7 +198,7 @@ export const Gallery: FC<GalleryProps> = ({
 
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const galleryContext: GalleryContext = {
-        view,
+        view: isDesktop ? 'desktop' : 'mobile',
         singleSlide,
         currentSlideIndex,
         images,
@@ -241,16 +234,16 @@ export const Gallery: FC<GalleryProps> = ({
                 onUnmount={onUnmount}
             >
                 <div className={styles.container}>
-                    {view === 'desktop' ? <Header /> : <HeaderMobile />}
-                    <ImageViewer />
+                    {isDesktop ? <Header /> : <HeaderMobile />}
+                    {images.length === 1 ? <Single /> : <ImageViewer />}
                     <nav
                         className={cn({
-                            [styles.navigationVideo]: isCurrentVideo && isMobile,
-                            [styles.hideNavigation]: hideNavigation && isMobile,
+                            [styles.navigationVideo]: isCurrentVideo && !isDesktop,
+                            [styles.hideNavigation]: hideNavigation && !isDesktop,
                         })}
                     >
                         {showNavigationBar && <NavigationBar />}
-                        {view === 'mobile' && <InfoBar />}
+                        {!isDesktop && <InfoBar />}
                     </nav>
                 </div>
             </BaseModal>