@alfalab/core-components-gallery 7.1.1 → 7.1.2-alfasans

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

@@ -7,22 +7,22 @@
     --border-radius-0: 0;
     --border-radius-24: var(--border-radius-3xl);
 }
-.gallery__videoWrapper_rrxe4 {
+.gallery__videoWrapper_1md53 {
     display: flex;
     justify-content: center;
     height: 100%;
     width: auto;
     position: relative;
 }
-.gallery__video_rrxe4 {
+.gallery__video_1md53 {
     max-width: 100%;
     max-height: 100%;
     border-radius: var(--border-radius-24);
 }
-.gallery__mobile_rrxe4 {
+.gallery__mobile_1md53 {
     border-radius: var(--border-radius-0);
 }
-.gallery__videoButton_rrxe4 {
+.gallery__videoButton_1md53 {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -30,13 +30,13 @@
     z-index: 1;
     color: green;
 }
-.gallery__icon_rrxe4 {
+.gallery__icon_1md53 {
     color: var(--color-static-neutral-0);
 }
-.gallery__iconShape_rrxe4 {
+.gallery__iconShape_1md53 {
     fill: var(--color-static-neutral-translucent-700);
 }
-.gallery__bottomButton_rrxe4 {
+.gallery__bottomButton_1md53 {
     position: absolute;
     bottom: 48px;
     left: 32px;

package/modern/components/image-viewer/video/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"videoWrapper":"gallery__videoWrapper_rrxe4","video":"gallery__video_rrxe4","mobile":"gallery__mobile_rrxe4","videoButton":"gallery__videoButton_rrxe4","icon":"gallery__icon_rrxe4","iconShape":"gallery__iconShape_rrxe4","bottomButton":"gallery__bottomButton_rrxe4"};
+const styles = {"videoWrapper":"gallery__videoWrapper_1md53","video":"gallery__video_1md53","mobile":"gallery__mobile_1md53","videoButton":"gallery__videoButton_1md53","icon":"gallery__icon_1md53","iconShape":"gallery__iconShape_1md53","bottomButton":"gallery__bottomButton_1md53"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -7,10 +7,10 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 }
-.gallery__description_16ykd {
+.gallery__description_znsly {
     text-align: center;
 }
-.gallery__infoWrapper_16ykd {
+.gallery__infoWrapper_znsly {
     background-color: var(--color-static-neutral-0-inverted);
     display: flex;
     align-items: center;
@@ -19,7 +19,7 @@
     position: relative;
     height: 48px;
 }
-.gallery__infoWrapper_16ykd.gallery__video_16ykd {
+.gallery__infoWrapper_znsly.gallery__video_znsly {
         padding: 0 var(--gap-4) var(--gap-4);
         justify-content: space-between;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"description":"gallery__description_16ykd","infoWrapper":"gallery__infoWrapper_16ykd","video":"gallery__video_16ykd"};
+const styles = {"description":"gallery__description_znsly","infoWrapper":"gallery__infoWrapper_znsly","video":"gallery__video_znsly"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -13,7 +13,7 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
 }
-.gallery__component_uzlb9 {
+.gallery__component_1cybw {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -25,25 +25,25 @@
     scrollbar-width: none;
     background-color: var(--color-static-neutral-0-inverted);
 }
-.gallery__component_uzlb9.gallery__mobile_uzlb9 {
+.gallery__component_1cybw.gallery__mobile_1cybw {
         padding: var(--gap-8) var(--gap-24);
     }
-.gallery__component_uzlb9::-webkit-scrollbar {
+.gallery__component_1cybw::-webkit-scrollbar {
         display: none;
     }
-.gallery__previews_uzlb9 {
+.gallery__previews_1cybw {
     display: flex;
 }
-.gallery__preview_uzlb9 {
+.gallery__preview_1cybw {
     flex-shrink: 0;
     margin-right: var(--gap-4);
 }
-.gallery__preview_uzlb9.gallery__mobile_uzlb9 {
+.gallery__preview_1cybw.gallery__mobile_1cybw {
         margin-right: var(--gap-2);
     }
-.gallery__preview_uzlb9:first-child {
+.gallery__preview_1cybw:first-child {
         margin-left: auto;
     }
-.gallery__preview_uzlb9:last-child {
+.gallery__preview_1cybw:last-child {
         margin-right: auto;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_uzlb9","mobile":"gallery__mobile_uzlb9","preview":"gallery__preview_uzlb9"};
+const styles = {"component":"gallery__component_1cybw","mobile":"gallery__mobile_1cybw","preview":"gallery__preview_1cybw"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/subtitles/index.css

@@ -5,7 +5,7 @@
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
 }
-.gallery__subtitles_12ysr {
+.gallery__subtitles_8qn9e {
     position: absolute;
     align-self: flex-end;
     padding: var(--gap-0) var(--gap-32);
@@ -18,10 +18,10 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__subtitles_12ysr.gallery__mobile_12ysr {
+.gallery__subtitles_8qn9e.gallery__mobile_8qn9e {
         position: static;
         position: initial;
     }
-.gallery__hideSubtitles_12ysr {
+.gallery__hideSubtitles_8qn9e {
     opacity: 0;
 }

package/modern/components/subtitles/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"subtitles":"gallery__subtitles_12ysr","mobile":"gallery__mobile_12ysr","hideSubtitles":"gallery__hideSubtitles_12ysr"};
+const styles = {"subtitles":"gallery__subtitles_8qn9e","mobile":"gallery__mobile_8qn9e","hideSubtitles":"gallery__hideSubtitles_8qn9e"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.css

@@ -13,7 +13,7 @@
     --sat: env(safe-area-inset-top, var(--gap-0));
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
-.gallery__container_13kqg {
+.gallery__container_qgt61 {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -26,16 +26,16 @@
     padding-top: var(--sat);
     padding-bottom: var(--sab);
 }
-.gallery__container_13kqg.gallery__mobile_13kqg {
+.gallery__container_qgt61.gallery__mobile_qgt61 {
         overflow: hidden;
     }
-.gallery__modal_13kqg {
+.gallery__modal_qgt61 {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     background: transparent;
 }
-.gallery__navigationVideo_13kqg {
+.gallery__navigationVideo_qgt61 {
     z-index: 3;
     width: 100%;
     position: absolute;
@@ -44,18 +44,18 @@
     transition: transform 0.3s ease-in-out;
     text-align: center;
 }
-.gallery__hide_13kqg {
+.gallery__hide_qgt61 {
     transform: translateY(114px);
 }
-.gallery__hideInfo_13kqg {
+.gallery__hideInfo_qgt61 {
     transform: translateY(48px);
 }
-.gallery__bottomButton_13kqg {
+.gallery__bottomButton_qgt61 {
     width: calc(100% - var(--gap-32));
     margin: var(--gap-16);
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__subtitles_13kqg {
+.gallery__subtitles_qgt61 {
     padding: var(--gap-0) var(--gap-32);
     margin-bottom: var(--gap-16);
     width: 100%;
@@ -66,6 +66,6 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__hideSubtitles_13kqg {
+.gallery__hideSubtitles_qgt61 {
     opacity: 0;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"container":"gallery__container_13kqg","mobile":"gallery__mobile_13kqg","modal":"gallery__modal_13kqg","navigationVideo":"gallery__navigationVideo_13kqg","hide":"gallery__hide_13kqg","hideInfo":"gallery__hideInfo_13kqg","bottomButton":"gallery__bottomButton_13kqg"};
+const styles = {"container":"gallery__container_qgt61","mobile":"gallery__mobile_qgt61","modal":"gallery__modal_qgt61","navigationVideo":"gallery__navigationVideo_qgt61","hide":"gallery__hide_qgt61","hideInfo":"gallery__hideInfo_qgt61","bottomButton":"gallery__bottomButton_qgt61"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1,3 +1,2 @@
 import { type FC } from 'react';
-import 'swiper/swiper.min.css';
 export declare const ImageViewer: FC;

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

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback, useMemo } from 'react';
 import cn from 'classnames';
-import SwiperCore, { EffectFade, A11y, Controller } from 'swiper';
+import { A11y, Controller } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { useFocus } from '@alfalab/hooks';
 import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
@@ -10,10 +10,8 @@ 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 { images, imagesMeta, fullScreen, currentSlideIndex, initialSlide, setCurrentSlideIndex, getSwiper, setSwiper, slidePrev, slideNext, getCurrentImage, } = useContext(GalleryContext);
     const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();
@@ -49,6 +47,7 @@ const ImageViewer = () => {
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }),
+        modules: [A11y, Controller],
         controller: { control: swiper },
         a11y: {
             slideRole: 'img',

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport SwiperCore, { A11y, Controller, EffectFade } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport 'swiper/swiper.min.css';\nimport styles from './index.module.css';\n\nSwiperCore.use([EffectFade, A11y, Controller]);\n\nexport const ImageViewer: FC = () => {\n    const {\n        images,\n        imagesMeta,\n        fullScreen,\n        currentSlideIndex,\n        initialSlide,\n        setCurrentSlideIndex,\n        getSwiper,\n        setSwiper,\n        slidePrev,\n        slideNext,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n    const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n    const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n    const swiper = getSwiper();\n    const currentImage = getCurrentImage();\n\n    const handleSlideChange = useCallback(() => {\n        setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n    }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n    const handlePrevClick = () => {\n        slidePrev();\n    };\n\n    const handleNextClick = () => {\n        slideNext();\n    };\n\n    const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slidePrev();\n        }\n    };\n\n    const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slideNext();\n        }\n    };\n\n    const swiperProps = useMemo<Swiper>(\n        () => ({\n            slidesPerView: 1,\n            effect: 'slide',\n            className: cn(styles.swiper, {\n                [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n                [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            }),\n            controller: { control: swiper },\n            a11y: {\n                slideRole: 'img',\n            },\n            initialSlide,\n            simulateTouch: false,\n            zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n            onSwiper: setSwiper,\n            onSlideChange: handleSlideChange,\n            lazy: { loadPrevNext: true },\n        }),\n        [\n            fullScreen,\n            currentImage?.src,\n            isMobile,\n            swiper,\n            initialSlide,\n            setSwiper,\n            handleSlideChange,\n        ],\n    );\n\n    const showControls = !fullScreen && !isMobile && !!images.length;\n\n    const swiperWidth = swiper?.width || 1;\n    const swiperHeight = swiper?.height || swiper?.width || 1;\n\n    const swiperAspectRatio = swiperWidth / swiperHeight;\n\n    return (\n        <div\n            className={cn(styles.component, {\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            })}\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n        >\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: leftArrowFocused,\n                    })}\n                    onClick={handlePrevClick}\n                    role='button'\n                    onKeyDown={handleArrowLeftKeyDown}\n                    tabIndex={0}\n                    ref={leftArrowRef}\n                    aria-label='Предыдущее изображение'\n                    data-test-id={TestIds.PREV_SLIDE_BUTTON}\n                >\n                    <ChevronBackHeavyMIcon />\n                </div>\n            )}\n\n            {fullScreen && !isVideo(currentImage?.src) && (\n                <img\n                    src={currentImage?.src}\n                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n                    className={styles.fullScreenImage}\n                />\n            )}\n\n            <Swiper {...swiperProps}>\n                {images.map((image, index) => {\n                    const meta = imagesMeta[index];\n\n                    const imageWidth = meta?.width || 1;\n                    const imageHeight = meta?.height || 1;\n\n                    const imageAspectRatio = imageWidth / imageHeight;\n\n                    const slideVisible = index === currentSlideIndex;\n\n                    return (\n                        <SwiperSlide\n                            key={getImageKey(image, index)}\n                            style={{\n                                pointerEvents: slideVisible ? 'auto' : 'none',\n                                transitionProperty: 'opacity',\n                            }}\n                        >\n                            {({ isActive }) => (\n                                <Slide\n                                    isActive={isActive}\n                                    containerAspectRatio={swiperAspectRatio}\n                                    image={image}\n                                    containerHeight={swiperHeight}\n                                    meta={meta}\n                                    index={index}\n                                    imageAspectRatio={imageAspectRatio}\n                                    slideVisible={slideVisible}\n                                />\n                            )}\n                        </SwiperSlide>\n                    );\n                })}\n            </Swiper>\n\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: rightArrowFocused,\n                    })}\n                    onClick={handleNextClick}\n                    role='button'\n                    onKeyDown={handleArrowRightKeyDown}\n                    tabIndex={0}\n                    ref={rightArrowRef}\n                    aria-label='Следующее изображение'\n                    data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n                >\n                    <ChevronForwardHeavyMIcon />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport { A11y, Controller } from 'swiper/modules';\nimport { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const ImageViewer: FC = () => {\n    const {\n        images,\n        imagesMeta,\n        fullScreen,\n        currentSlideIndex,\n        initialSlide,\n        setCurrentSlideIndex,\n        getSwiper,\n        setSwiper,\n        slidePrev,\n        slideNext,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n    const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n    const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n    const swiper = getSwiper();\n    const currentImage = getCurrentImage();\n\n    const handleSlideChange = useCallback(() => {\n        setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n    }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n    const handlePrevClick = () => {\n        slidePrev();\n    };\n\n    const handleNextClick = () => {\n        slideNext();\n    };\n\n    const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slidePrev();\n        }\n    };\n\n    const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slideNext();\n        }\n    };\n\n    const swiperProps = useMemo<SwiperProps>(\n        () => ({\n            slidesPerView: 1,\n            effect: 'slide',\n            className: cn(styles.swiper, {\n                [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n                [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            }),\n            modules: [A11y, Controller],\n            controller: { control: swiper },\n            a11y: {\n                slideRole: 'img',\n            },\n            initialSlide,\n            simulateTouch: false,\n            zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n            onSwiper: setSwiper,\n            onSlideChange: handleSlideChange,\n            lazy: { loadPrevNext: true },\n        }),\n        [\n            fullScreen,\n            currentImage?.src,\n            isMobile,\n            swiper,\n            initialSlide,\n            setSwiper,\n            handleSlideChange,\n        ],\n    );\n\n    const showControls = !fullScreen && !isMobile && !!images.length;\n\n    const swiperWidth = swiper?.width || 1;\n    const swiperHeight = swiper?.height || swiper?.width || 1;\n\n    const swiperAspectRatio = swiperWidth / swiperHeight;\n\n    return (\n        <div\n            className={cn(styles.component, {\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            })}\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n        >\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: leftArrowFocused,\n                    })}\n                    onClick={handlePrevClick}\n                    role='button'\n                    onKeyDown={handleArrowLeftKeyDown}\n                    tabIndex={0}\n                    ref={leftArrowRef}\n                    aria-label='Предыдущее изображение'\n                    data-test-id={TestIds.PREV_SLIDE_BUTTON}\n                >\n                    <ChevronBackHeavyMIcon />\n                </div>\n            )}\n\n            {fullScreen && !isVideo(currentImage?.src) && (\n                <img\n                    src={currentImage?.src}\n                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n                    className={styles.fullScreenImage}\n                />\n            )}\n\n            <Swiper {...swiperProps}>\n                {images.map((image, index) => {\n                    const meta = imagesMeta[index];\n\n                    const imageWidth = meta?.width || 1;\n                    const imageHeight = meta?.height || 1;\n\n                    const imageAspectRatio = imageWidth / imageHeight;\n\n                    const slideVisible = index === currentSlideIndex;\n\n                    return (\n                        <SwiperSlide\n                            key={getImageKey(image, index)}\n                            style={{\n                                pointerEvents: slideVisible ? 'auto' : 'none',\n                                transitionProperty: 'opacity',\n                            }}\n                        >\n                            {({ isActive }) => (\n                                <Slide\n                                    isActive={isActive}\n                                    containerAspectRatio={swiperAspectRatio}\n                                    image={image}\n                                    containerHeight={swiperHeight}\n                                    meta={meta}\n                                    index={index}\n                                    imageAspectRatio={imageAspectRatio}\n                                    slideVisible={slideVisible}\n                                />\n                            )}\n                        </SwiperSlide>\n                    );\n                })}\n            </Swiper>\n\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: rightArrowFocused,\n                    })}\n                    onClick={handleNextClick}\n                    role='button'\n                    onKeyDown={handleArrowRightKeyDown}\n                    tabIndex={0}\n                    ref={rightArrowRef}\n                    aria-label='Следующее изображение'\n                    data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n                >\n                    <ChevronForwardHeavyMIcon />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -5,6 +5,67 @@
     flex-grow: 1;
     justify-content: center;
     background-color: var(--color-static-neutral-0-inverted);
+    :global(.swiper) {
+        margin-left: auto;
+        margin-right: auto;
+        position: relative;
+        overflow: hidden;
+        list-style: none;
+        padding: 0;
+        z-index: 1;
+        display: block;
+    }
+    :global(.swiper-wrapper) {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        display: flex;
+        transition-property: transform;
+        transition-timing-function: var(--swiper-wrapper-transition-timing-function, ease);
+        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+        box-sizing: content-box;
+    }
+    :global(.swiper-android) :global(.swiper-slide),
+    :global(.swiper-ios) :global(.swiper-slide),
+    :global(.swiper-wrapper) {
+        transform: translate3d(0, 0, 0);
+    }
+    :global(.swiper-horizontal) {
+        touch-action: pan-y;
+    }
+    :global(.swiper-slide) {
+        flex-shrink: 0;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transition-property: transform;
+        display: block;
+    }
+    :global(.swiper-slide-invisible-blank) {
+        visibility: hidden;
+    }
+    :global(.swiper-autoheight),
+    :global(.swiper-autoheight) :global(.swiper-slide) {
+        height: auto;
+    }
+    :global(.swiper-autoheight) :global(.swiper-wrapper) {
+        align-items: flex-start;
+        transition-property: transform, height;
+    }
+    :global(.swiper-backface-hidden) :global(.swiper-slide) {
+        transform: translateZ(0);
+        -webkit-backface-visibility: hidden;
+                backface-visibility: hidden;
+    }
+    :global(.swiper) :global(.swiper-notification) {
+        position: absolute;
+        left: 0;
+        top: 0;
+        pointer-events: none;
+        opacity: 0;
+        z-index: -1000;
+    }
 }
 
 .swiper {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-gallery",
-    "version": "7.1.1",
+    "version": "7.1.2-alfasans",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,21 +10,21 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.2",
-        "@alfalab/core-components-button": "^13.1.1",
-        "@alfalab/core-components-icon-button": "^8.0.4",
-        "@alfalab/core-components-icon-view": "^5.0.2",
-        "@alfalab/core-components-mq": "^6.0.3",
-        "@alfalab/core-components-spinner": "^6.0.3",
-        "@alfalab/core-components-tooltip": "^9.0.7",
-        "@alfalab/core-components-typography": "^6.0.3",
+        "@alfalab/core-components-base-modal": "7.1.2-alfasans",
+        "@alfalab/core-components-button": "13.1.1-alfasans",
+        "@alfalab/core-components-icon-button": "8.0.4-alfasans",
+        "@alfalab/core-components-icon-view": "5.0.2-alfasans",
+        "@alfalab/core-components-mq": "6.0.3-alfasans",
+        "@alfalab/core-components-spinner": "6.0.3-alfasans",
+        "@alfalab/core-components-tooltip": "9.0.7-alfasans",
+        "@alfalab/core-components-typography": "6.0.3-alfasans",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.260.0",
         "classnames": "^2.5.1",
         "element-closest": "^3.0.2",
         "hls.js": "^1.5.13",
         "lodash": "^4.17.21",
-        "swiper": "^6.8.2",
+        "swiper": "^12.1.3",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
@@ -35,6 +35,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.2",
-    "varsVersion": "11.0.2"
+    "themesVersion": "15.0.2-alfasans",
+    "varsVersion": "11.0.2-alfasans"
 }

package/src/components/image-viewer/component.tsx

@@ -1,7 +1,7 @@
 import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';
 import cn from 'classnames';
-import SwiperCore, { A11y, Controller, EffectFade } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { A11y, Controller } from 'swiper/modules';
+import { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react';
 
 import { useFocus } from '@alfalab/hooks';
 import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
@@ -13,11 +13,8 @@ import { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';
 import { useHandleImageViewer } from './hooks';
 import { Slide } from './slide';
 
-import 'swiper/swiper.min.css';
 import styles from './index.module.css';
 
-SwiperCore.use([EffectFade, A11y, Controller]);
-
 export const ImageViewer: FC = () => {
     const {
         images,
@@ -65,7 +62,7 @@ export const ImageViewer: FC = () => {
         }
     };
 
-    const swiperProps = useMemo<Swiper>(
+    const swiperProps = useMemo<SwiperProps>(
         () => ({
             slidesPerView: 1,
             effect: 'slide',
@@ -75,6 +72,7 @@ export const ImageViewer: FC = () => {
                 [styles.mobile]: isMobile,
                 [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
             }),
+            modules: [A11y, Controller],
             controller: { control: swiper },
             a11y: {
                 slideRole: 'img',

package/src/components/image-viewer/index.module.css

@@ -5,6 +5,69 @@
     flex-grow: 1;
     justify-content: center;
     background-color: var(--color-static-neutral-0-inverted);
+
+    /* swiper/swiper.css; */
+    :global(.swiper) {
+        margin-left: auto;
+        margin-right: auto;
+        position: relative;
+        overflow: hidden;
+        list-style: none;
+        padding: 0;
+        z-index: 1;
+        display: block;
+    }
+    :global(.swiper-wrapper) {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        display: flex;
+        transition-property: transform;
+        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+        box-sizing: content-box;
+    }
+    :global(.swiper-android) :global(.swiper-slide),
+    :global(.swiper-ios) :global(.swiper-slide),
+    :global(.swiper-wrapper) {
+        transform: translate3d(0, 0, 0);
+    }
+    :global(.swiper-horizontal) {
+        touch-action: pan-y;
+    }
+    :global(.swiper-slide) {
+        flex-shrink: 0;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transition-property: transform;
+        display: block;
+    }
+    :global(.swiper-slide-invisible-blank) {
+        visibility: hidden;
+    }
+    :global(.swiper-autoheight),
+    :global(.swiper-autoheight) :global(.swiper-slide) {
+        height: auto;
+    }
+    :global(.swiper-autoheight) :global(.swiper-wrapper) {
+        align-items: flex-start;
+        transition-property: transform, height;
+    }
+    :global(.swiper-backface-hidden) :global(.swiper-slide) {
+        transform: translateZ(0);
+        backface-visibility: hidden;
+    }
+
+    /* swiper/modules/a11y.css */
+    :global(.swiper) :global(.swiper-notification) {
+        position: absolute;
+        left: 0;
+        top: 0;
+        pointer-events: none;
+        opacity: 0;
+        z-index: -1000;
+    }
 }
 
 .swiper {