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

package/gallery/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1xr66 */
+/* hash: 1janq */
 :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_15asg {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__container_1ybwj {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -29,14 +29,14 @@
     height: 100%;
     width: 100%;
     background-color: var(--color-static-neutral-0-inverted)
-} .gallery__container_15asg.gallery__mobile_15asg {
+} .gallery__container_1ybwj.gallery__mobile_1ybwj {
         overflow: hidden;
-    } .gallery__modal_15asg {
+    } .gallery__modal_1ybwj {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     background: transparent;
-} .gallery__navigationVideo_15asg {
+} .gallery__navigationVideo_1ybwj {
     background-color: var(--color-static-neutral-0-inverted);
     z-index: 3;
     width: 100%;
@@ -44,6 +44,6 @@
     bottom: 0;
     left: 0;
     transition: transform 0.3s ease-in-out;
-} .gallery__hideNavigation_15asg {
+} .gallery__hideNavigation_1ybwj {
     transform: translateY(106px);
 }

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 './components/image-viewer/hooks.js';
+import './hooks-0af83ab0.js';
 import 'element-closest';
-import './index.module-c20c9def.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/utils/constants.d.ts

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

package/gallery/moderncssm/Component.js

@@ -17,6 +17,7 @@ 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, 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) }));
+    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) }));
 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, 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 })));
+    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 })));
 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, colors: 'inverted', "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, "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, colors: 'inverted', "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, "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, 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 }));
+    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 }));
 
 export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, UnmuteVideo };

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

@@ -9,7 +9,9 @@
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
 
-/* TODO: применять static цвет через prop IconButton'а */
+.iconButton path {
+        color: var(--color-static-neutral-100);
+    }
 
 .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: 36px;
+        width: 46px;
         height: 46px;
         border-radius: var(--border-radius-8);
     }

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

@@ -13,6 +13,7 @@ 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';
@@ -24,7 +25,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 { handleLoad, handleLoadError, handleWrapperClick, isMobile, rightArrowRef, leftArrowRef, } = useHandleImageViewer();
+    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();
     const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');
     const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');
     const swiper = getSwiper();
@@ -102,7 +103,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, handleLoad: handleLoad, handleLoadError: handleLoadError }))));
+                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible }))));
         })),
         showControls && (React.createElement("div", { className: cn(styles.arrow, {
                 [styles.focused]: rightArrowFocused,

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

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

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

@@ -6,6 +6,7 @@ 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';
@@ -17,7 +18,7 @@ import './video/index.module.css';
 
 const Single = () => {
     const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } = useContext(GalleryContext);
-    const { handleLoad, handleLoadError, handleWrapperClick, isMobile } = useHandleImageViewer();
+    const { handleWrapperClick, isMobile } = useHandleImageViewer();
     const wrapperRef = useRef(null);
     const currentImage = getCurrentImage();
     const currentImageMeta = getCurrentImageMeta();
@@ -34,7 +35,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, handleLoad: handleLoad, handleLoadError: handleLoadError })))));
+        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true })))));
 };
 
 export { Single };

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

@@ -1,4 +1,4 @@
-import { FC, SyntheticEvent } from 'react';
+import { FC } from 'react';
 import { GalleryImage, ImageMeta } from "../../types";
 type SlideProps = {
     isActive: boolean;
@@ -9,8 +9,6 @@ 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,18 +1,21 @@
 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, withPlaceholder, isVideoView, }) => {
+const SlideInner = ({ children, broken, loading, 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' },
@@ -22,19 +25,22 @@ const SlideInner = ({ children, broken, loading, withPlaceholder, 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 }) }, withPlaceholder ? React.createElement("div", { className: styles.placeholder }, content) : content));
+    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 })));
 };
-const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, handleLoad, handleLoadError, }) => {
+const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, }) => {
     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, withPlaceholder: broken, loading: !meta },
+        return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, loading: !meta },
             React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
     }
-    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta, withPlaceholder: small || broken },
+    return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta },
         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,6 +39,7 @@ 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: 'primary-inverted' }, 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: 'static-primary-light' }, image?.name));
 };
 
 export { InfoBar };

package/gallery/moderncssm/index.js

@@ -11,6 +11,7 @@ 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 = 36;
+declare const PREVIEW_WIDTH_MOBILE = 46;
 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 = 36;
+const PREVIEW_WIDTH_MOBILE = 46;
 const PREVIEW_HEIGHT_MOBILE = 46;
 const PREVIEW_WIDTH_DESKTOP = 56;
 const PREVIEW_HEIGHT_DESKTOP = 56;

package/gallery/utils/constants.d.ts

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

package/gallery/utils/constants.js

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

package/gap/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"grid-gap":"gap__gap_1a695","gap":"gap__gap_1a695","vertical":"gap__vertical_1a695","horizontal":"gap__horizontal_1a695"};
+var styles = {"grid-gap":"gap__gap_1thue","gap":"gap__gap_1thue","vertical":"gap__vertical_1thue","horizontal":"gap__horizontal_1thue"};
 require('./index.css');
 
 var SIZE_TO_CLASSNAME_MAP = {

package/gap/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"grid-gap":"gap__gap_1a695","gap":"gap__gap_1a695","vertical":"gap__vertical_1a695","horizontal":"gap__horizontal_1a695"};
+var styles = {"grid-gap":"gap__gap_1thue","gap":"gap__gap_1thue","vertical":"gap__vertical_1thue","horizontal":"gap__horizontal_1thue"};
 require('./index.css');
 
 var SIZE_TO_CLASSNAME_MAP = {

package/gap/esm/index.css

@@ -18,88 +18,88 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gap__gap_1a695 {
+} /* сбрасывает синюю подсветку при нажатии */ .gap__gap_1thue {
     flex-shrink: 0;
-} .gap__vertical_1a695 {
+} .gap__vertical_1thue {
     overflow: hidden;
     display: block;
-} .gap__horizontal_1a695 {
+} .gap__horizontal_1thue {
     display: inline-block;
     overflow: hidden;
-} /* prettier-ignore */ .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-0'] {
+} /* prettier-ignore */ .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-0'] {
         height: 0px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-1'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-1'] {
         height: 1px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-2'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-2'] {
         height: 2px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-4'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-4'] {
         height: 4px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-8'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-8'] {
         height: 8px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-12'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-12'] {
         height: 12px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-16'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-16'] {
         height: 16px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-20'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-20'] {
         height: 20px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-24'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-24'] {
         height: 24px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-26'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-26'] {
         height: 26px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-28'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-28'] {
         height: 28px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-32'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-32'] {
         height: 32px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-40'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-40'] {
         height: 40px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-48'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-48'] {
         height: 48px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-64'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-64'] {
         height: 64px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-72'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-72'] {
         height: 72px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-96'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-96'] {
         height: 96px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-128'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-128'] {
         height: 128px;
-    } .gap__vertical_1a695.gap__gap_1a695[data-gap-size='size-256'] {
+    } .gap__vertical_1thue.gap__gap_1thue[data-gap-size='size-256'] {
         height: 256px;
-    } /* prettier-ignore */ .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-0'] {
+    } /* prettier-ignore */ .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-0'] {
         width: 0px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-1'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-1'] {
         width: 1px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-2'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-2'] {
         width: 2px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-4'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-4'] {
         width: 4px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-8'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-8'] {
         width: 8px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-12'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-12'] {
         width: 12px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-16'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-16'] {
         width: 16px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-20'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-20'] {
         width: 20px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-24'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-24'] {
         width: 24px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-26'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-26'] {
         width: 26px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-28'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-28'] {
         width: 28px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-32'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-32'] {
         width: 32px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-40'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-40'] {
         width: 40px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-48'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-48'] {
         width: 48px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-64'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-64'] {
         width: 64px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-72'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-72'] {
         width: 72px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-96'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-96'] {
         width: 96px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-128'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-128'] {
         width: 128px;
-    } .gap__horizontal_1a695.gap__gap_1a695[data-gap-size='size-256'] {
+    } .gap__horizontal_1thue.gap__gap_1thue[data-gap-size='size-256'] {
         width: 256px;
     }