@hhgtech/hhg-components 1.29.500 → 1.29.501

package/build/esm/{index-01f1e3bc.js → index-155bfe60.js}

@@ -1,54 +1,56 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-b5ec78ee.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-3951d926.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-14a92066.js';
-import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
+import { R as Radio, a as Carousel } from './index-0b05de86.js';
+import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-99b321ef.js';
-import './index-abd28b8a.js';
-import { C as CommonGAssets } from './index-d8f59b87.js';
-import './index-7aedbf1b.js';
-import { T as Text } from './index-a9b01bfd.js';
-import { B as Button$1 } from './index-845a806a.js';
-import './index-9b31987c.js';
-import './index.styles-2575877c.js';
-import './translationsContext-eaa23cd9.js';
+import { L as LOCALE_SPECS, F as FAVICONS, Z as ZINDEX_SSO } from './index-d7e91e70.js';
+import './index-10e886ab.js';
+import { C as CommonGAssets } from './index-de7197f0.js';
+import './index-5b8fe088.js';
+import { T as Text } from './index-096e6319.js';
+import { B as Button$1 } from './index-54b75124.js';
+import './index-94bafefe.js';
+import './index.styles-aec3504c.js';
+import './translationsContext-8d12d201.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-c5a1f614.js';
-import './index-269b0fd2.js';
-import { i as isInternalLink } from './index-78ddd518.js';
+import { M as MediaQueries } from './utils-1666f74c.js';
+import './index-e97a9574.js';
+import { i as isInternalLink } from './index-3c674a3d.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-7fd14ad5.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-935abc48.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-7d44c495.js';
+import { L as Logo } from './index-526270bc.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-795bffea.js';
+import { a as useOutsideClick } from './useOutsideClick-414faeb9.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-d1f910f8.js';
-import { u as useScreenSize, I as ImageWrap } from './index-d1f1934d.js';
-import { u as useTranslations } from './index-880a8911.js';
+import { B as Button } from './index-8ac2f866.js';
+import { u as useScreenSize, I as ImageWrap } from './index-9bce48f0.js';
+import { u as useTranslations } from './index-dfa05053.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-7963fa7d.js';
+import { D as Dropdown } from './index-bae14b22.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-aad9135a.js';
-import { D as Drawer } from './index-b92a6dee.js';
+import { I as Input } from './index-254048e4.js';
+import { D as Drawer } from './index-1ce8a64d.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-c0ccb529.js';
+import { L as LOCALE } from './Locale-0ff0c442.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-f4cfa393.js';
-import { L as Loading } from './index-6668f0bb.js';
+import { A as ArrowRightBlue } from './index-6d684a3f.js';
+import { L as Loading } from './index-8ba06146.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
+import { C as Close } from './Close-c2c60fd5.js';
+import { useAnimationOffsetEffect } from '@mantine/carousel';
 
 const StarFull = (_a) => {
     var { color, stroke } = _a, props = __rest(_a, ["color", "stroke"]);
@@ -4867,10 +4869,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] = useState([]);
-    const [total, setTotal] = useState(0);
-    const [page, setPage] = useState(1);
+function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, debounceSearch = DEFAULT_DEBOUNCE, defaultLoading, defaultItems, defaultTotal, defaultPage, }) {
+    const [items, setItems] = useState(defaultItems || []);
+    const [total, setTotal] = useState(defaultTotal !== null && defaultTotal !== void 0 ? defaultTotal : 0);
+    const [page, setPage] = useState(defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1);
     const [searchSession, setSearchSession] = useState('');
     const [search, setSearch] = useState(defaultSearch);
     const [loading, setLoading] = useState(defaultLoading);
@@ -4992,7 +4994,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,
@@ -5000,6 +5002,9 @@ function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSi
         pageSize,
         debounceSearch,
         defaultLoading,
+        defaultItems,
+        defaultTotal,
+        defaultPage,
     });
     const value = useMemo(() => (Object.assign({}, listState)), [
         listState.items,
@@ -5301,7 +5306,7 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
                 React__default.createElement(Text, { size: isMobile ? 'p2' : 'title2', color: 'gray700', weight: "regular", lineClamp: 2, as: as }, description))) : (description),
             contentInfo),
         React__default.createElement(LinkComponent, { href: href },
-            React__default.createElement(AspectRatio, { ratio: 1, bg: "#EFF4FF", className: "logo" },
+            React__default.createElement(AspectRatio, { ratio: 1, className: "logo" },
                 React__default.createElement(StyledImageWrap, { src: logo || defaultImage, width: isMobile ? 84 : 148, height: isMobile ? 84 : 148, alt: altText || title, backupSrc: defaultImage }))),
         children));
 }
@@ -5399,14 +5404,119 @@ const ProductContent = styled.div `
     flex-direction: column;
     gap: 8px;
   }
+`;
+const ImageCarouselContainer = styled.div `
+  margin-top: 0.75rem;
+  width: 100%;
+
+  ${MediaQueries.mbUp} {
+    margin-top: 12px;
+  }
+`;
+const StyledImageCarousel = styled(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: ${theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${theme.colors.black};
+    }
+  }
+`;
+const CarouselImageItemWrapper = styled.div `
+  width: 76px;
+  height: 76px;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  border: 1px solid ${theme.colors.gray300};
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+
+  &:hover {
+    border-color: ${theme.colors.primaryBase};
+  }
+`;
+const CarouselImageItemWrapperMobile = styled.div `
+  width: 100%;
+  aspect-ratio: 375/190;
+  border-radius: 0;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+`;
+const CarouselImageItem = styled(ImageWrapV2) `
+  background-color: ${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 } = 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__default.createElement(GeneralInfoContainer, { className: className },
-        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
-                (typeof generalInfo.name === 'string'
-                    ? generalInfo.name
-                    : 'product') }, bannerProps)))),
+        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(React__default.Fragment, null, isMobile ? (React__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__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+            React__default.createElement(CarouselImageItemWrapperMobile, { onClick: () => onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index) },
+                React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))) : (React__default.createElement(React__default.Fragment, null,
+            React__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__default.createElement(ImageCarouselContainer, null,
+                React__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__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+                    React__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__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))))))))),
         React__default.createElement(ProductContent, { className: contentClassName },
             React__default.createElement("div", { className: "product-info" },
                 typeof generalInfo.name === 'string' ? (React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :
@@ -5418,6 +5528,374 @@ GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
 GeneralInfo.Content = ProductContent;
 
+const GalleryLayout = styled.div `
+  max-width: 1128px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+
+  ${MediaQueries.mbUp} {
+    flex-direction: row;
+    /* height: auto; */
+    height: 100%;
+  }
+`;
+const GalleryMain = styled.div `
+  min-width: 0;
+  height: calc(100% - 108px);
+  width: 100%;
+  ${MediaQueries.mbUp} {
+    height: auto;
+    max-height: calc(100dvh - 10dvh);
+  }
+`;
+const GallerySidebar = styled.div `
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 412px;
+  padding: 64px 36px 24px 40px;
+`;
+const ThumbnailsGrid = styled.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;
+
+  ${MediaQueries.mbUp} {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    overflow: visible;
+    scroll-snap-type: none;
+    padding: 0;
+  }
+`;
+const ThumbnailButton = styled.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;
+
+  ${MediaQueries.mbUp} {
+    scroll-snap-align: unset;
+  }
+
+  &[data-active='true'] {
+    outline: 2px solid ${theme.colors.primaryBase};
+    outline-offset: -2px;
+  }
+
+  &:hover {
+    outline: 2px solid ${theme.colors.primaryBase};
+    outline-offset: -2px;
+  }
+`;
+const LargeImageWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${theme.colors.neutral50};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${MediaQueries.mbUp} {
+    height: 100%;
+    aspect-ratio: 716 / 720;
+  }
+`;
+const MainGalleryImage = styled(ImageWrapV2) `
+  background-color: ${theme.colors.neutral50};
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+`;
+const EmptyState = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  text-align: center;
+`;
+const StyledModal = styled(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 {
+    ${MediaQueries.mbDown} {
+      display: grid;
+      grid-template-rows: 48px calc(100% - 48px);
+      grid-template-columns: 100%;
+      height: 100dvh;
+    }
+
+    ${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(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: ${theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${theme.colors.black};
+    }
+  }
+`;
+
+const ModalGalleryContext = createContext(null);
+function useModalGalleryContext() {
+    const ctx = 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();
+    useAnimationOffsetEffect(embla, TRANSITION_DURATION$1);
+    const handleEmblaReady = (emblaApi) => {
+        setEmbla(emblaApi);
+    };
+    const handleSlideChange = (index) => {
+        setActiveIndex(index);
+    };
+    return (React__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__default.createElement(Carousel.Slide, { key: `${imageUrl}-${index}` },
+        React__default.createElement(LargeImageWrapper, null,
+            React__default.createElement(MainGalleryImage, { src: imageUrl, alt: `${altPrefix} - ${index + 1}`, backupSrc: backupSrc })))))));
+}
+
+function GalleryThumbnails({ isMobile }) {
+    const { galleryImages, altPrefix, backupSrc, activeIndex, handleThumbnailClick, } = useModalGalleryContext();
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        const activeItem = itemRefs.current[activeIndex];
+        if (activeItem && isMobile) {
+            activeItem.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [activeIndex, isMobile]);
+    return (React__default.createElement(ThumbnailsGrid, null, galleryImages.map((imageUrl, index) => (React__default.createElement(ThumbnailButton, { key: `${imageUrl}-${index}`, type: "button", "data-active": activeIndex === index, onClick: () => handleThumbnailClick(index), ref: (el) => (itemRefs.current[index] = el) },
+        React__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__default.createElement(Text, { size: "h5", fw: 600, color: "gray1000", as: "h2" }, generalInfo.name));
+    }
+    return React__default.createElement(React__default.Fragment, null, generalInfo.name);
+}
+
+function ModalGalleryContent() {
+    const { galleryImages, isMobile } = useModalGalleryContext();
+    const hasImages = galleryImages.length > 0;
+    if (!hasImages) {
+        return (React__default.createElement(EmptyState, null,
+            React__default.createElement(GalleryTitle, { isMobile: isMobile }),
+            React__default.createElement(Text, { size: "p2", color: "gray600" }, "No images available.")));
+    }
+    return (React__default.createElement(GalleryLayout, null,
+        React__default.createElement(GalleryMain, null,
+            React__default.createElement(GalleryCarousel, null)),
+        !isMobile && (React__default.createElement(GallerySidebar, null,
+            React__default.createElement(GalleryTitle, { isMobile: isMobile }),
+            React__default.createElement(GalleryThumbnails, { isMobile: isMobile }))),
+        isMobile && React__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 = 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] = useState(() => clampIndex(initialSlide, galleryImages.length));
+    const [embla, setEmbla] = useState(null);
+    useEffect(() => {
+        setActiveIndex(clampIndex(initialSlide, galleryImages.length));
+    }, [galleryImages.length, initialSlide]);
+    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 = 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 = 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__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__default.createElement(StyledModal, Object.assign({ opened: isOpen, onClose: handleClose, zIndex: 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__default.createElement(Close, { onClick: handleClose, className: "closeModal", width: 24, height: 24, fill: "#212121" })),
+        React__default.createElement(ModalGalleryProvider, { generalInfo: generalInfo, imageCarousel: imageCarousel, backupSrc: backupSrc, initialSlide: initialSlide, isMobile: isMobile },
+            React__default.createElement(ModalGalleryContent, null))));
+}
+
 const StyledContainer$2 = styled.div `
   border-radius: 12px;
   padding: 0.875rem 0.75rem;
@@ -5624,4 +6102,4 @@ const AnsweredByDoctor = (props) => {
             React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray800 }, doctorName))));
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, MAX_RATING as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, CertificateItem as q, RatingStars as r, RatingStarsInput as s, AnsweredByDoctor as t, useListContext as u, StarFull as v, StarHalf as w };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, ModalGallery as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, useModalGalleryContext as q, ModalGalleryProvider as r, CertificateItem as s, RatingStars as t, useListContext as u, RatingStarsInput as v, MAX_RATING as w, AnsweredByDoctor as x, StarFull as y, StarHalf as z };

package/build/esm/{index-b7c4b6fd.js → index-16bfc963.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-c5a1f614.js';
+import { M as MediaQueries } from './utils-1666f74c.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-b92a6dee.js → index-1ce8a64d.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-c5a1f614.js';
+import { t as toggleNoScroll } from './utils-1666f74c.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-88bb70fe.js';
-import { T as Text } from './index-a9b01bfd.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-c7681a8a.js';
+import { T as Text } from './index-096e6319.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {