@hhgtech/hhg-components 1.29.500 → 1.29.502

package/build/{index-d236d045.js → index-3b068aa7.js}

@@ -1,55 +1,57 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
+var tslib_es6 = require('./tslib.es6-33927d18.js');
 var React = require('react');
-var index$5 = require('./index-248ff166.js');
+var index$5 = require('./index-5f1ad61b.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-03e1d5fd.js');
-require('./index-1d68a820.js');
-var index$b = require('./index-25007710.js');
-require('./index-65bc602a.js');
-var index$3 = require('./index-51229c6c.js');
-var index$f = require('./index-fef96902.js');
-require('./index-ebaf2c19.js');
-require('./index.styles-2fc37e7a.js');
-require('./translationsContext-a5de37cf.js');
+var index$7 = require('./index-260b6596.js');
+require('./index-81160195.js');
+var index$b = require('./index-d10cca70.js');
+require('./index-b77191cd.js');
+var index$3 = require('./index-ffe45709.js');
+var index$f = require('./index-2f51eb3a.js');
+require('./index-730dffaa.js');
+require('./index.styles-9f250b36.js');
+require('./translationsContext-bd9c3805.js');
 require('@mantine/hooks');
-var utils = require('./utils-053ed913.js');
-require('./index-93151a6e.js');
-var index$2 = require('./index-c70e131d.js');
+var utils = require('./utils-a5e4055f.js');
+require('./index-e5b33a17.js');
+var index$2 = require('./index-1513f9a2.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-789d20a1.js');
+var index$4 = require('./index-574c3435.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$6 = require('./index-08a9bfca.js');
+var index$6 = require('./index-be3038f7.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-d0f8fc88.js');
+var useOutsideClick = require('./useOutsideClick-0249ce83.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-3e3c4e5c.js');
-var index$8 = require('./index-c14c419b.js');
-var index$9 = require('./index-6c650ac4.js');
+var index$a = require('./index-38daffc4.js');
+var index$8 = require('./index-67e6647d.js');
+var index$9 = require('./index-da67cbe4.js');
 var classNames = require('classnames');
-var index$c = require('./index-93755791.js');
+var index$c = require('./index-29078700.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$e = require('./index-51161bde.js');
-var index$d = require('./index-05dd4e43.js');
+var index$e = require('./index-d2bb7dff.js');
+var index$d = require('./index-3f4e93c7.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-a4854278.js');
+var Locale = require('./Locale-e922eed5.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
-var index$g = require('./index-97074c90.js');
-var index$h = require('./index-43eb9a8f.js');
+var index$g = require('./index-4d88cf77.js');
+var index$h = require('./index-9055f682.js');
 var get = require('lodash/get');
 var debounce = require('lodash/debounce');
+var Close = require('./Close-dda07159.js');
+var carousel = require('@mantine/carousel');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -4902,10 +4904,10 @@ function Item({ render, }) {
 
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_DEBOUNCE = 300;
-function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, debounceSearch = DEFAULT_DEBOUNCE, defaultLoading, }) {
-    const [items, setItems] = React.useState([]);
-    const [total, setTotal] = React.useState(0);
-    const [page, setPage] = React.useState(1);
+function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, debounceSearch = DEFAULT_DEBOUNCE, defaultLoading, defaultItems, defaultTotal, defaultPage, }) {
+    const [items, setItems] = React.useState(defaultItems || []);
+    const [total, setTotal] = React.useState(defaultTotal !== null && defaultTotal !== void 0 ? defaultTotal : 0);
+    const [page, setPage] = React.useState(defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1);
     const [searchSession, setSearchSession] = React.useState('');
     const [search, setSearch] = React.useState(defaultSearch);
     const [loading, setLoading] = React.useState(defaultLoading);
@@ -5027,7 +5029,7 @@ function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', de
     };
 }
 
-function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, debounceSearch, defaultLoading, }) {
+function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, debounceSearch, defaultLoading, defaultItems, defaultTotal, defaultPage, }) {
     const listState = useList({
         fetcher,
         defaultFilters,
@@ -5035,6 +5037,9 @@ function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSi
         pageSize,
         debounceSearch,
         defaultLoading,
+        defaultItems,
+        defaultTotal,
+        defaultPage,
     });
     const value = React.useMemo(() => (Object.assign({}, listState)), [
         listState.items,
@@ -5336,7 +5341,7 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
                 React__namespace["default"].createElement(index$3.Text, { size: isMobile ? 'p2' : 'title2', color: 'gray700', weight: "regular", lineClamp: 2, as: as }, description))) : (description),
             contentInfo),
         React__namespace["default"].createElement(LinkComponent, { href: href },
-            React__namespace["default"].createElement(core.AspectRatio, { ratio: 1, bg: "#EFF4FF", className: "logo" },
+            React__namespace["default"].createElement(core.AspectRatio, { ratio: 1, className: "logo" },
                 React__namespace["default"].createElement(StyledImageWrap, { src: logo || defaultImage, width: isMobile ? 84 : 148, height: isMobile ? 84 : 148, alt: altText || title, backupSrc: defaultImage }))),
         children));
 }
@@ -5434,14 +5439,119 @@ const ProductContent = styled__default["default"].div `
     flex-direction: column;
     gap: 8px;
   }
+`;
+const ImageCarouselContainer = styled__default["default"].div `
+  margin-top: 0.75rem;
+  width: 100%;
+
+  ${utils.MediaQueries.mbUp} {
+    margin-top: 12px;
+  }
+`;
+const StyledImageCarousel = styled__default["default"](index$5.Carousel) `
+  height: 100%;
+  flex: 1;
+
+  .mantine-Carousel-controls {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .mantine-Carousel-control {
+    background-color: #fff;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    width: auto;
+
+    &:hover {
+      background-color: #fff;
+    }
+
+    &:active {
+      background-color: #fff;
+    }
+
+    &[data-inactive] {
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  .mantine-Carousel-indicators {
+    gap: 0.375rem;
+    bottom: 0.5rem;
+  }
+
+  .mantine-Carousel-indicator {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: ${miscTheme.theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${miscTheme.theme.colors.black};
+    }
+  }
+`;
+const CarouselImageItemWrapper = styled__default["default"].div `
+  width: 76px;
+  height: 76px;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  border: 1px solid ${miscTheme.theme.colors.gray300};
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+
+  &:hover {
+    border-color: ${miscTheme.theme.colors.primaryBase};
+  }
+`;
+const CarouselImageItemWrapperMobile = styled__default["default"].div `
+  width: 100%;
+  aspect-ratio: 375/190;
+  border-radius: 0;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+`;
+const CarouselImageItem = styled__default["default"](index$4.ImageWrapV2) `
+  background-color: ${miscTheme.theme.colors.neutral50};
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 `;
 
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
+function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile: isMobileProp = false, imageCarousel = [], carouselSlotProps, onCarouselImageClick, }) {
+    const { isMobile: isMobileFromHook } = index$8.useScreenSize();
+    // Use isMobile prop first, fallback to breakpoint detection (secondary priority)
+    const isMobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileFromHook;
+    const showCarousel = imageCarousel.length > 1;
+    const showCarouselControls = imageCarousel.length > 4 && !isMobile;
+    const showCarouselIndicators = imageCarousel.length > 1 && isMobile;
+    const { imageCarousel: imageCarouselSlotProps, slide: carouselSlideSlotProps, imageItemWrapper: carouselImageItemWrapperSlotProps, imageItem: carouselImageItemSlotProps, } = carouselSlotProps !== null && carouselSlotProps !== void 0 ? carouselSlotProps : {};
     return (React__namespace["default"].createElement(GeneralInfoContainer, { className: className },
-        React__namespace["default"].createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__namespace["default"].createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
-                (typeof generalInfo.name === 'string'
-                    ? generalInfo.name
-                    : 'product') }, bannerProps)))),
+        React__namespace["default"].createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, isMobile ? (React__namespace["default"].createElement(StyledImageCarousel, Object.assign({ slidesToShow: 1, align: "start", withControls: false, withIndicators: showCarouselIndicators, dragFree: false, slideSize: "100%", slideGap: 0, draggable: showCarouselIndicators }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__namespace["default"].createElement(index$5.Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+            React__namespace["default"].createElement(CarouselImageItemWrapperMobile, { onClick: () => onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index) },
+                React__namespace["default"].createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+            React__namespace["default"].createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
+                    (typeof generalInfo.name === 'string'
+                        ? generalInfo.name
+                        : 'product') }, bannerProps)),
+            showCarousel && (React__namespace["default"].createElement(ImageCarouselContainer, null,
+                React__namespace["default"].createElement(StyledImageCarousel, Object.assign({ slidesToShow: 4, align: "start", withControls: showCarouselControls, withIndicators: false, dragFree: true, controlSize: 24, slideSize: 76, slideGap: 10 }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__namespace["default"].createElement(index$5.Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+                    React__namespace["default"].createElement(CarouselImageItemWrapper, Object.assign({}, carouselImageItemWrapperSlotProps, { onClick: (event) => {
+                            var _a;
+                            (_a = carouselImageItemWrapperSlotProps === null || carouselImageItemWrapperSlotProps === void 0 ? void 0 : carouselImageItemWrapperSlotProps.onClick) === null || _a === void 0 ? void 0 : _a.call(carouselImageItemWrapperSlotProps, event);
+                            onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index);
+                        } }),
+                        React__namespace["default"].createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))))))))),
         React__namespace["default"].createElement(ProductContent, { className: contentClassName },
             React__namespace["default"].createElement("div", { className: "product-info" },
                 typeof generalInfo.name === 'string' ? (React__namespace["default"].createElement(index$3.Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :
@@ -5453,6 +5563,374 @@ GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
 GeneralInfo.Content = ProductContent;
 
+const GalleryLayout = styled__default["default"].div `
+  max-width: 1128px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+
+  ${utils.MediaQueries.mbUp} {
+    flex-direction: row;
+    /* height: auto; */
+    height: 100%;
+  }
+`;
+const GalleryMain = styled__default["default"].div `
+  min-width: 0;
+  height: calc(100% - 108px);
+  width: 100%;
+  ${utils.MediaQueries.mbUp} {
+    height: auto;
+    max-height: calc(100dvh - 10dvh);
+  }
+`;
+const GallerySidebar = styled__default["default"].div `
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 412px;
+  padding: 64px 36px 24px 40px;
+`;
+const ThumbnailsGrid = styled__default["default"].div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px;
+
+  scroll-padding: 0px 16px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+
+  ${utils.MediaQueries.mbUp} {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    overflow: visible;
+    scroll-snap-type: none;
+    padding: 0;
+  }
+`;
+const ThumbnailButton = styled__default["default"].button `
+  border-radius: 0.5rem;
+  padding: 0;
+  background-color: transparent;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
+  overflow: hidden;
+  cursor: pointer;
+
+  scroll-snap-align: start;
+
+  ${utils.MediaQueries.mbUp} {
+    scroll-snap-align: unset;
+  }
+
+  &[data-active='true'] {
+    outline: 2px solid ${miscTheme.theme.colors.primaryBase};
+    outline-offset: -2px;
+  }
+
+  &:hover {
+    outline: 2px solid ${miscTheme.theme.colors.primaryBase};
+    outline-offset: -2px;
+  }
+`;
+const LargeImageWrapper = styled__default["default"].div `
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${miscTheme.theme.colors.neutral50};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${utils.MediaQueries.mbUp} {
+    height: 100%;
+    aspect-ratio: 716 / 720;
+  }
+`;
+const MainGalleryImage = styled__default["default"](index$4.ImageWrapV2) `
+  background-color: ${miscTheme.theme.colors.neutral50};
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+`;
+const EmptyState = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  text-align: center;
+`;
+const StyledModal = styled__default["default"](core.Modal) `
+  .mantine-Modal-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #0000001a;
+  }
+
+  .mantine-Modal-close {
+    width: 24px;
+    height: 24px;
+    & > svg {
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+  .mantine-Modal-title {
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+  }
+  .mantine-Modal-inner {
+    left: 0;
+  }
+
+  .mantine-Modal-content {
+    ${utils.MediaQueries.mbDown} {
+      display: grid;
+      grid-template-rows: 48px calc(100% - 48px);
+      grid-template-columns: 100%;
+      height: 100dvh;
+    }
+
+    ${utils.MediaQueries.mbUp} {
+      border-radius: 12px;
+    }
+  }
+
+  .mantine-Modal-body {
+    height: 100%;
+    max-height: 100%;
+    padding: 0;
+  }
+
+  .closeModal {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+  }
+`;
+const StyledCarousel = styled__default["default"](index$5.Carousel) `
+  height: 100%;
+
+  .mantine-Carousel-controls {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .mantine-Carousel-control {
+    background-color: #fff;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    width: auto;
+
+    &:hover {
+      background-color: #fff;
+    }
+
+    &:active {
+      background-color: #fff;
+    }
+
+    &[data-inactive] {
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  .mantine-Carousel-indicators {
+    gap: 0.375rem;
+    bottom: 0.5rem;
+  }
+
+  .mantine-Carousel-indicator {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: ${miscTheme.theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${miscTheme.theme.colors.black};
+    }
+  }
+`;
+
+const ModalGalleryContext = React.createContext(null);
+function useModalGalleryContext() {
+    const ctx = React.useContext(ModalGalleryContext);
+    if (!ctx)
+        throw new Error('useModalGalleryContext must be used within ModalGalleryProvider');
+    return ctx;
+}
+
+const TRANSITION_DURATION$1 = 200;
+function GalleryCarousel() {
+    const { galleryImages, altPrefix, backupSrc, isMobile, setActiveIndex, setEmbla, embla, initialSlide, } = useModalGalleryContext();
+    carousel.useAnimationOffsetEffect(embla, TRANSITION_DURATION$1);
+    const handleEmblaReady = (emblaApi) => {
+        setEmbla(emblaApi);
+    };
+    const handleSlideChange = (index) => {
+        setActiveIndex(index);
+    };
+    return (React__namespace["default"].createElement(StyledCarousel, { align: "center", slideSize: "100%", withControls: galleryImages.length > 1 && !isMobile, withIndicators: false, dragFree: false, slideGap: 0, draggable: galleryImages.length > 1 && isMobile, getEmblaApi: handleEmblaReady, onSlideChange: handleSlideChange, loop: false, height: "100%", controlSize: 32, initialSlide: initialSlide }, galleryImages.map((imageUrl, index) => (React__namespace["default"].createElement(index$5.Carousel.Slide, { key: `${imageUrl}-${index}` },
+        React__namespace["default"].createElement(LargeImageWrapper, null,
+            React__namespace["default"].createElement(MainGalleryImage, { src: imageUrl, alt: `${altPrefix} - ${index + 1}`, backupSrc: backupSrc })))))));
+}
+
+function GalleryThumbnails({ isMobile }) {
+    const { galleryImages, altPrefix, backupSrc, activeIndex, handleThumbnailClick, } = useModalGalleryContext();
+    const itemRefs = React.useRef([]);
+    React.useEffect(() => {
+        const activeItem = itemRefs.current[activeIndex];
+        if (activeItem && isMobile) {
+            activeItem.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [activeIndex, isMobile]);
+    return (React__namespace["default"].createElement(ThumbnailsGrid, null, galleryImages.map((imageUrl, index) => (React__namespace["default"].createElement(ThumbnailButton, { key: `${imageUrl}-${index}`, type: "button", "data-active": activeIndex === index, onClick: () => handleThumbnailClick(index), ref: (el) => (itemRefs.current[index] = el) },
+        React__namespace["default"].createElement(CarouselImageItem, { src: imageUrl, alt: `${altPrefix} thumbnail - ${index + 1}`, backupSrc: backupSrc, width: 72 }))))));
+}
+
+function GalleryTitle({ isMobile }) {
+    const { generalInfo } = useModalGalleryContext();
+    // Mobile title is handled by Modal title prop
+    if (isMobile) {
+        return null;
+    }
+    if (typeof generalInfo.name === 'string') {
+        return (React__namespace["default"].createElement(index$3.Text, { size: "h5", fw: 600, color: "gray1000", as: "h2" }, generalInfo.name));
+    }
+    return React__namespace["default"].createElement(React__namespace["default"].Fragment, null, generalInfo.name);
+}
+
+function ModalGalleryContent() {
+    const { galleryImages, isMobile } = useModalGalleryContext();
+    const hasImages = galleryImages.length > 0;
+    if (!hasImages) {
+        return (React__namespace["default"].createElement(EmptyState, null,
+            React__namespace["default"].createElement(GalleryTitle, { isMobile: isMobile }),
+            React__namespace["default"].createElement(index$3.Text, { size: "p2", color: "gray600" }, "No images available.")));
+    }
+    return (React__namespace["default"].createElement(GalleryLayout, null,
+        React__namespace["default"].createElement(GalleryMain, null,
+            React__namespace["default"].createElement(GalleryCarousel, null)),
+        !isMobile && (React__namespace["default"].createElement(GallerySidebar, null,
+            React__namespace["default"].createElement(GalleryTitle, { isMobile: isMobile }),
+            React__namespace["default"].createElement(GalleryThumbnails, { isMobile: isMobile }))),
+        isMobile && React__namespace["default"].createElement(GalleryThumbnails, { isMobile: isMobile })));
+}
+
+const clampIndex = (index, length) => {
+    if (!length || typeof index !== 'number')
+        return 0;
+    if (index < 0)
+        return 0;
+    if (index >= length)
+        return length - 1;
+    return index;
+};
+function useModalGallery({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, }) {
+    const galleryImages = React.useMemo(() => {
+        if (imageCarousel === null || imageCarousel === void 0 ? void 0 : imageCarousel.length)
+            return imageCarousel;
+        const fallbackImages = [generalInfo.banner, generalInfo.logo].filter((src) => Boolean(src));
+        return fallbackImages;
+    }, [generalInfo.banner, generalInfo.logo, imageCarousel]);
+    const [activeIndex, setActiveIndex] = React.useState(() => clampIndex(initialSlide, galleryImages.length));
+    const [embla, setEmbla] = React.useState(null);
+    React.useEffect(() => {
+        setActiveIndex(clampIndex(initialSlide, galleryImages.length));
+    }, [galleryImages.length, initialSlide]);
+    React.useEffect(() => {
+        if (!embla || !galleryImages.length)
+            return;
+        const current = embla.selectedScrollSnap();
+        if (current !== activeIndex) {
+            embla.scrollTo(activeIndex);
+        }
+    }, [activeIndex, embla, galleryImages.length]);
+    const altPrefix = generalInfo.altText ||
+        (typeof generalInfo.name === 'string' ? generalInfo.name : 'product image');
+    const handleThumbnailClick = React.useCallback((index) => {
+        setActiveIndex(index);
+        embla === null || embla === void 0 ? void 0 : embla.scrollTo(index);
+    }, [embla]);
+    return {
+        generalInfo,
+        imageCarousel,
+        backupSrc,
+        isMobile,
+        activeIndex,
+        embla,
+        altPrefix,
+        galleryImages,
+        setActiveIndex,
+        setEmbla,
+        handleThumbnailClick,
+    };
+}
+
+function ModalGalleryProvider({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, children, }) {
+    const galleryState = useModalGallery({
+        generalInfo,
+        imageCarousel,
+        backupSrc,
+        isMobile,
+        initialSlide,
+    });
+    const value = React.useMemo(() => (Object.assign(Object.assign({}, galleryState), { initialSlide })), [
+        galleryState.generalInfo,
+        galleryState.imageCarousel,
+        galleryState.backupSrc,
+        galleryState.isMobile,
+        galleryState.activeIndex,
+        galleryState.embla,
+        galleryState.altPrefix,
+        galleryState.galleryImages,
+        galleryState.handleThumbnailClick,
+    ]);
+    return (React__namespace["default"].createElement(ModalGalleryContext.Provider, { value: value }, children));
+}
+
+const TRANSITION_DURATION = 200;
+function ModalGallery({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, isOpen = false, onOpenChange, modalProps = {}, title = 'Product gallery', }) {
+    const handleClose = () => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    };
+    const modalTitle = isMobile ? title : undefined;
+    return (React__namespace["default"].createElement(StyledModal, Object.assign({ opened: isOpen, onClose: handleClose, zIndex: index$7.ZINDEX_SSO, withCloseButton: isMobile, centered: true, size: "auto", fullScreen: isMobile, title: modalTitle, autoFocus: false }, modalProps, { transitionProps: Object.assign({ duration: TRANSITION_DURATION }, modalProps.transitionProps) }),
+        !isMobile && (React__namespace["default"].createElement(Close.Close, { onClick: handleClose, className: "closeModal", width: 24, height: 24, fill: "#212121" })),
+        React__namespace["default"].createElement(ModalGalleryProvider, { generalInfo: generalInfo, imageCarousel: imageCarousel, backupSrc: backupSrc, initialSlide: initialSlide, isMobile: isMobile },
+            React__namespace["default"].createElement(ModalGalleryContent, null))));
+}
+
 const StyledContainer$2 = styled__default["default"].div `
   border-radius: 12px;
   padding: 0.875rem 0.75rem;
@@ -5490,7 +5968,7 @@ const Center = styled__default["default"].div `
 `;
 
 const VoucherItem = ({ image, title, description, onClick, className, dataTracking = {}, }) => {
-    return (React__namespace["default"].createElement(StyledContainer$2, Object.assign({}, dataTracking, { className: className, onClick: onClick }),
+    return (React__namespace["default"].createElement(StyledContainer$2, Object.assign({}, dataTracking, { className: classNames__default["default"]('voucher-item', className), onClick: onClick }),
         React__namespace["default"].createElement(core.Grid, { gutter: "8px" },
             React__namespace["default"].createElement(core.Grid.Col, { span: "content" },
                 React__namespace["default"].createElement(Center, null,
@@ -5502,8 +5980,8 @@ const VoucherItem = ({ image, title, description, onClick, className, dataTracki
                         } }))),
             React__namespace["default"].createElement(core.Grid.Col, { span: "auto" },
                 React__namespace["default"].createElement(StyledFlex, null,
-                    React__namespace["default"].createElement(StyledTitle, { size: "p3", weight: "halfBold", color: "#111111" }, title),
-                    React__namespace["default"].createElement(StyledDescription, { size: "c2", weight: "halfBold" }, description))))));
+                    typeof title === 'string' ? (React__namespace["default"].createElement(StyledTitle, { size: "p3", weight: "halfBold", color: "#111111" }, title)) : (title),
+                    typeof description === 'string' ? (React__namespace["default"].createElement(StyledDescription, { size: "c2", weight: "halfBold" }, description)) : (description))))));
 };
 
 const StyledContainer$1 = styled__default["default"].div `
@@ -5678,6 +6156,8 @@ exports.IconText = IconText;
 exports.List = List;
 exports.ListContext = ListContext;
 exports.MAX_RATING = MAX_RATING;
+exports.ModalGallery = ModalGallery;
+exports.ModalGalleryProvider = ModalGalleryProvider;
 exports.QuickFilter = QuickFilter;
 exports.QuickFilterWrapLine = QuickFilterWrapLine;
 exports.RadioGroup = RadioGroup;
@@ -5698,3 +6178,4 @@ exports.index = index$1;
 exports.index$1 = index;
 exports.useList = useList;
 exports.useListContext = useListContext;
+exports.useModalGalleryContext = useModalGalleryContext;

package/build/{index-a24b8ff4.js → index-3b45d264.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
+var tslib_es6 = require('./tslib.es6-33927d18.js');
 var React = require('react');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');

package/build/{index-6b3023a4.js → index-3cbab1a9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-fef96902.js');
+var index = require('./index-2f51eb3a.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }