@sonic-equipment/ui 0.0.117 → 0.0.118

package/dist/index.js

@@ -4469,9 +4469,9 @@ function Modal({ children, className, hasCloseButton, isDismissable, isFullScree
                 e.preventDefault();
                 e.stopPropagation();
             });
-        }, className: clsx(styles$V['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$V.modal, {
+        }, className: clsx(styles$V['modal-overlay'], typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, UNSTABLE_portalContainer: document.body, children: jsxs(Modal$1, { className: clsx(styles$V.modal, {
                 [styles$V['is-full-screen']]: isFullScreen,
-            }), children: [hasCloseButton && (jsx("div", { className: styles$V.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange?.(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$V.content, children: children })] }) }));
+            }, typeof className === 'string' ? undefined : className?.modal), children: [hasCloseButton && (jsx("div", { className: clsx(styles$V.close, typeof className === 'string' ? className : className?.close), children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange?.(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: clsx(styles$V.content, typeof className === 'string' ? className : className?.content), children: children })] }) }));
 }
 
 var styles$U = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
@@ -4479,12 +4479,16 @@ var styles$U = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","c
 function Footer({ cancelLabel, close, submitLabel }) {
     return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
-function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles$U['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$U.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$U.form, onSubmit: e => {
+function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles$U['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$U.dialog, typeof className === 'string' ? undefined : className?.dialog), children: ({ close }) => (jsxs(Form, { className: clsx(styles$U.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
                     e.preventDefault();
                     e.stopPropagation();
                     onSubmit?.(e);
-                }, validationErrors: validationErrors, children: [jsxs("header", { className: styles$U.header, children: [!hideTitle && (jsx(Heading, { className: styles$U.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$U.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$U.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$U.footer, children: footer instanceof Function
+                }, validationErrors: validationErrors, children: [jsxs("header", { className: clsx(styles$U.header, typeof className === 'string' ? undefined : className?.header), children: [!hideTitle && (jsx(Heading, { className: clsx(styles$U.heading, typeof className === 'string'
+                                    ? undefined
+                                    : className?.heading), size: "xs", children: title })), hasCloseButton && (jsx("div", { className: clsx(styles$U.close, typeof className === 'string'
+                                    ? undefined
+                                    : className?.close), children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: clsx(styles$U.content, typeof className === 'string' ? undefined : className?.content), children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: clsx(styles$U.footer, typeof className === 'string' ? undefined : className?.footer), children: footer instanceof Function
                             ? footer({ cancelLabel, close, submitLabel })
                             : footer })] })) }) }));
 }
@@ -4494,7 +4498,7 @@ var styles$T = {"sign-in-dialog":"sign-in-dialog-module-P-AHV"};
 function SignInDialog({ isOpen, onOpenChange }) {
     const { signInUrl } = useFavorite();
     const t = useFormattedMessage();
-    return (jsx(Dialog, { isDismissable: true, dialogClassName: styles$T['sign-in-dialog'], footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(List, { children: [jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
+    return (jsx(Dialog, { isDismissable: true, className: { dialog: styles$T['sign-in-dialog'] }, footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(List, { children: [jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
 }
 
 function useAddWishListItemToCurrentWishList() {
@@ -4671,7 +4675,7 @@ var styles$P = {"confirmation-dialog":"confirmation-dialog-module-Up-BC"};
 
 function ConfirmationDialog({ cancelLabel = 'Cancel', isOpen, onCancel, onConfirm, submitLabel = 'Continue', title, }) {
     const t = useFormattedMessage();
-    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), dialogClassName: styles$P['confirmation-dialog'], isOpen: isOpen, onOpenChange: onCancel, onSubmit: onConfirm, submitLabel: t(submitLabel), title: title }));
+    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), className: { dialog: styles$P['confirmation-dialog'] }, isOpen: isOpen, onOpenChange: onCancel, onSubmit: onConfirm, submitLabel: t(submitLabel), title: title }));
 }
 
 function ConnectedRemoveButton({ onRemove: _onRemove, productId, }) {
@@ -10933,7 +10937,10 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
         setCurrentLanguage(fallbackLanguage);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentCountry]);
-    return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: styles$z.modal, dialogClassName: styles$z['country-selector-dialog'], footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
+    return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
+            dialog: styles$z['country-selector-dialog'],
+            modal: styles$z.modal,
+        }, footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
             onSubmit({ country: currentCountry, language: currentLanguage });
             e.preventDefault();
             e.stopPropagation();
@@ -11639,16 +11646,14 @@ function ImagesGrid({ images, onSelectImage }) {
             }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles$h.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
 }
 
-var styles$g = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp","zoomed-overlay":"image-lightbox-module-UVzAg","zoomed-container":"image-lightbox-module-sBtWE","zoomed-image":"image-lightbox-module-aehw-"};
+var styles$g = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp","zoomed-overlay":"image-lightbox-module-UVzAg","modal":"image-lightbox-module-MMYzc","zoomed-container":"image-lightbox-module-sBtWE","zoomed-image":"image-lightbox-module-aehw-"};
 
-function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
+function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
     const [thumbsSwiper, setThumbsSwiper] = useState();
     const [currentIndex, setCurrentIndex] = useState(initialSelectedIndex);
     const nextEl = useRef(null);
     const prevEl = useRef(null);
     const mainSwiperRef = useRef(null);
-    const [scrollFromTopPercentage, setScrollFromTopPercentage] = useState(0.5);
-    const { close, isOpen, open } = useDisclosure(false);
     function handleZoom(e) {
         const target = e.target;
         const clientRect = target?.getBoundingClientRect();
@@ -11657,18 +11662,17 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
         const height = clientRect.height;
         const clientY = e.clientY - clientRect.top;
         const scrollPercentage = clientY / height;
-        setScrollFromTopPercentage(scrollPercentage);
-        open();
+        onZoom?.({ index: currentIndex, scrollPercentage });
     }
     return (jsxs("div", { className: clsx(styles$g['image-lightbox'], styles$g[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$g['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$g.slide, children: jsx("div", { className: styles$g.thumb, children: jsx(Image, { className: styles$g.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$g['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
                             nextEl: nextEl.current,
                             prevEl: prevEl.current,
-                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$g.slide, children: jsx("button", { className: styles$g['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$g.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$g.pagination, children: jsx(CarouselPagination, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$g['navigation-button'], styles$g['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$g['navigation-button'], styles$g['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isOpen, onClose: close, scrollFromTopPercentage: scrollFromTopPercentage })] }));
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$g.slide, children: jsx("button", { className: styles$g['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$g.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$g.pagination, children: jsx(CarouselPagination, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$g['navigation-button'], styles$g['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$g['navigation-button'], styles$g['navigation-button-next']), direction: "next" })] }))] })] }));
 }
 function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }) {
     if (!isZoomed || !currentImage)
         return null;
-    return (jsx(Modal, { className: styles$g['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: onClose, children: jsx("div", { ref: element => {
+    return (jsx(Modal, { className: { modal: styles$g.modal, overlay: styles$g['zoomed-overlay'] }, hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: onClose, children: jsx("div", { ref: element => {
                 setTimeout(() => {
                     if (!element)
                         return;
@@ -11998,19 +12002,24 @@ var styles$9 = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};
 const MAX_IMAGES = 5;
 function ProductDetailImages({ images }) {
     const [selectedImageIndex, setSelectedImageIndex] = useState(0);
-    const { isOpen, open, toggle } = useDisclosure();
+    const [selectedZoomImageIndex, setSelectedZoomImageIndex] = useState(0);
+    const [scrollPercentage, setScrollPercentage] = useState(0);
+    const { isOpen: isOpenModal, open: openModal, toggle: toggleModal, } = useDisclosure();
+    const { close: closeZoom, isOpen: isOpenZoom, open: openZoom, } = useDisclosure();
     const isXl = useIsBreakpoint('xl');
     if (images.length > MAX_IMAGES) {
         images = images.slice(0, MAX_IMAGES);
     }
     function handleOpenImage(image) {
         setSelectedImageIndex(images.indexOf(image));
-        open();
+        openModal();
     }
-    if (!isXl) {
-        return jsx(ImageLightbox, { images: images });
+    function onZoom({ index, scrollPercentage, }) {
+        setSelectedZoomImageIndex(index);
+        setScrollPercentage(scrollPercentage);
+        openZoom();
     }
-    return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles$9['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
+    return (jsxs(Fragment, { children: [!isXl ? (jsx(ImageLightbox, { images: images, onZoom: onZoom })) : (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpenModal, onOpenChange: toggleModal, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles$9['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, onZoom: onZoom, variant: "lg" }) }) })] })), isOpenZoom && (jsx(ZoomImage, { currentImage: images[selectedZoomImageIndex], isZoomed: isOpenZoom, onClose: closeZoom, scrollFromTopPercentage: scrollPercentage }))] }));
 }
 
 var styles$8 = {"product-details-panel":"product-details-panel-module-kfhpL","heading":"product-details-panel-module--1ODE","price-action-container":"product-details-panel-module-CCcmA","action-container":"product-details-panel-module-1vyDM","description":"product-details-panel-module-GfTab","feature-list":"product-details-panel-module-ze0my"};
@@ -12626,4 +12635,4 @@ console.log(`@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`);
 
-export { Accordion, AccordionItem, ActiveFilters, AddToCartButton, AddToFavoriteDialog, AlgoliaActiveCategories, AlgoliaActiveFilters, AlgoliaCategoriesFilters, AlgoliaDummyRefinementListConsumer, AlgoliaFilterPanel, AlgoliaHitsProvider, AlgoliaInsightInstantSearchProvider, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaInstantSearchStateProvider, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSearchProvider, AlgoliaSortBy, Animation, Announcement, AnnouncementProvider, AvailabilityMessageType, BackgroundOverlay, BadRequestError, Badge, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, BlankPageSpacer, Breadcrumb, Button, CardCarousel, Carousel, CarouselNavigationButton, CarouselPagination, CartProvider, CartTotals, CategoriesGrid, CategoryCard, CategoryCarousel, Checkbox, ColorCheckbox, ConfirmationDialog, ConnectedAddToCartButton, ConnectedAnnouncement, ConnectedCartIcon, ConnectedCountrySelector, ConnectedFavoriteButton, ConnectedOrderLineCard, ConnectedProductCard, ConnectedRemoveButton, ConnectedSearchInput, CountrySelectorDialog, CountrySelectorTrigger, CurrencyPositioningType, DeliveryTime, Dialog, DownloadDocumentList, ErrorPage, EventEmitter, FavoriteButton, FavoriteProvider, FeatureList, FieldError, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchContext, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, Heading, Highlight, IconButton, IconWithBadge, Image, ImageLightbox, ImagesGrid, Input, InternalServerErrorRequest, IntlContext, IntlProvider, Label, Link, List, ListItem, LoadingOverlay, LoadingPage, Modal, MultiSelect, NoResults, NoSearch, NoSearchResults, NotFoundRequestError, NumberField, OrderLineCard, OrderLineList, Page, PageContainer, Pagination, PaginationButton, PanelContent, PrintButton, ProductCard, ProductDetailImages, ProductDetailsPage, ProductDetailsPageLayout, ProductDetailsPanel, ProductListingPage, ProductListingPageCategoryCarousel, ProductListingPageContext, ProductListingPageProvider, ProductListingProductOverview, ProductOverviewGrid, ProductPrice, ProductSku, ProductTotalPrice, ProductUSPCarousel, ProductUsp, ProgressCircle, PromoBanner, PromoBanners, PromoCard, ReactQueryContainer, RequestError, RouteButton, RouteIconButton, RouteLink, RouteProvider, SIZES, SearchInput, SearchList, SearchListItem, SearchResultPanel, SearchResultProductOverview, SearchResultsPage, SearchResultsPageCategoryCarousel, SearchRoot, SearchSection, SectionContainer, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, SignInDialog, TAGS, TIME, Tag, TextArea, TextField, TimeoutRequestError, Toast, ToastProvider, ToggleSidebarButton, USPCarousel, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, WithResults, addProductToCurrentCart, addWishListItemToWishList, algoliaIndexesPerEnvironment, announcementSubTypes, announcementTypes, breakpoints$1 as breakpoints, categoriesPlugin, clone, config, configPerEnvironment, convertDateUnitToPluralOrSingle, createGuestAccount, createQueryStringRouting, createSession, createSonicSearchClient, createUUID, createWishList, deepMerge, deleteCartLineById, deleteCurrentCart, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchAnnouncements, fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, fetchProductDetailsPageData, fetchProductListingPageData, fetchSession, fetchSettings, fetchTranslations, formatPrice, getAlgoliaIndex, getCurrentBreakpoints, getDateUnitObject, getLanguageCodeFromCultureCode, getTokenKeyValue, getTokenValue, getWishList, getWishListItemsByWishListId, getWishLists, isAlgoliaProductHit, isAnnouncementSubtype, isAnnouncementType, isCountryCode, isCultureCode, isLanguageCode, isPlainObject, isProductHit, isRequestError, isResponsiveImage, main, merge, now, offlineSearchClient, patchCart, patchSession, placeOrder, popularCategoriesPlugin, popularSearchesPlugin, querySuggestionsPlugin, quickAccessPlugin, recentSearchesPlugin, request, saveCartForLater, scrollToTop, searchClientLogger, signIn, signOut, spireTranslateAdapter, transformAlgoliaCategoryData, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit, updateCartLineById, updateLocale, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaHits, useAlgoliaHitsItems, useAlgoliaHitsLoading, useAlgoliaInsights, useAlgoliaInsightsGlobalState, useAlgoliaInstantSearchState, useAlgoliaInstantSearchStateIndex, useAlgoliaInstantSearchStateOnline, useAlgoliaInstantSearchStateQueryId, useAlgoliaInstantSearchStateStatus, useAlgoliaSearch, useBreakpoint, useCartEvents, useCookie, useCountriesLanguages, useCreateWishList, useCultureCode, useDebouncedCallback, useDeleteCartLineById, useDeleteCurrentCart, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchAnnouncements, useFetchCountries, useFetchCountriesLanguages, useFetchCountriesWithLanguages, useFetchCurrentCart, useFetchCurrentCartCount, useFetchCurrentCartLines, useFetchCurrentCartProductAtp, useFetchCurrentCartPromotions, useFetchCurrentCheckoutAtp, useFetchProductDetailsPageData, useFetchProductListingPageData, useFetchSession, useFetchSettings, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useInvalidateCurrentCart, useInvalidateSession, useIsAuthenticated, useIsBreakpoint, useLanguageCode, useLocalStorage, useNavigate, useOnNavigate, usePatchCart, usePlaceOrder, useProductListingPageProvider, useResizeObserver, useSaveCartForLater, useScrollLock, useScrollTo, useSessionStorage, useSidebar, useSidebarActions, useSignIn, useSignOut, useSubcatagories, useToast, useUpdateCartLineById, useUpdateCultureCode, useUpdateLocale, userToken, wait, withRouting };
+export { Accordion, AccordionItem, ActiveFilters, AddToCartButton, AddToFavoriteDialog, AlgoliaActiveCategories, AlgoliaActiveFilters, AlgoliaCategoriesFilters, AlgoliaDummyRefinementListConsumer, AlgoliaFilterPanel, AlgoliaHitsProvider, AlgoliaInsightInstantSearchProvider, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaInstantSearchStateProvider, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSearchProvider, AlgoliaSortBy, Animation, Announcement, AnnouncementProvider, AvailabilityMessageType, BackgroundOverlay, BadRequestError, Badge, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, BlankPageSpacer, Breadcrumb, Button, CardCarousel, Carousel, CarouselNavigationButton, CarouselPagination, CartProvider, CartTotals, CategoriesGrid, CategoryCard, CategoryCarousel, Checkbox, ColorCheckbox, ConfirmationDialog, ConnectedAddToCartButton, ConnectedAnnouncement, ConnectedCartIcon, ConnectedCountrySelector, ConnectedFavoriteButton, ConnectedOrderLineCard, ConnectedProductCard, ConnectedRemoveButton, ConnectedSearchInput, CountrySelectorDialog, CountrySelectorTrigger, CurrencyPositioningType, DeliveryTime, Dialog, DownloadDocumentList, ErrorPage, EventEmitter, FavoriteButton, FavoriteProvider, FeatureList, FieldError, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchContext, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, Heading, Highlight, IconButton, IconWithBadge, Image, ImageLightbox, ImagesGrid, Input, InternalServerErrorRequest, IntlContext, IntlProvider, Label, Link, List, ListItem, LoadingOverlay, LoadingPage, Modal, MultiSelect, NoResults, NoSearch, NoSearchResults, NotFoundRequestError, NumberField, OrderLineCard, OrderLineList, Page, PageContainer, Pagination, PaginationButton, PanelContent, PrintButton, ProductCard, ProductDetailImages, ProductDetailsPage, ProductDetailsPageLayout, ProductDetailsPanel, ProductListingPage, ProductListingPageCategoryCarousel, ProductListingPageContext, ProductListingPageProvider, ProductListingProductOverview, ProductOverviewGrid, ProductPrice, ProductSku, ProductTotalPrice, ProductUSPCarousel, ProductUsp, ProgressCircle, PromoBanner, PromoBanners, PromoCard, ReactQueryContainer, RequestError, RouteButton, RouteIconButton, RouteLink, RouteProvider, SIZES, SearchInput, SearchList, SearchListItem, SearchResultPanel, SearchResultProductOverview, SearchResultsPage, SearchResultsPageCategoryCarousel, SearchRoot, SearchSection, SectionContainer, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, SignInDialog, TAGS, TIME, Tag, TextArea, TextField, TimeoutRequestError, Toast, ToastProvider, ToggleSidebarButton, USPCarousel, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, WithResults, ZoomImage, addProductToCurrentCart, addWishListItemToWishList, algoliaIndexesPerEnvironment, announcementSubTypes, announcementTypes, breakpoints$1 as breakpoints, categoriesPlugin, clone, config, configPerEnvironment, convertDateUnitToPluralOrSingle, createGuestAccount, createQueryStringRouting, createSession, createSonicSearchClient, createUUID, createWishList, deepMerge, deleteCartLineById, deleteCurrentCart, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchAnnouncements, fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, fetchProductDetailsPageData, fetchProductListingPageData, fetchSession, fetchSettings, fetchTranslations, formatPrice, getAlgoliaIndex, getCurrentBreakpoints, getDateUnitObject, getLanguageCodeFromCultureCode, getTokenKeyValue, getTokenValue, getWishList, getWishListItemsByWishListId, getWishLists, isAlgoliaProductHit, isAnnouncementSubtype, isAnnouncementType, isCountryCode, isCultureCode, isLanguageCode, isPlainObject, isProductHit, isRequestError, isResponsiveImage, main, merge, now, offlineSearchClient, patchCart, patchSession, placeOrder, popularCategoriesPlugin, popularSearchesPlugin, querySuggestionsPlugin, quickAccessPlugin, recentSearchesPlugin, request, saveCartForLater, scrollToTop, searchClientLogger, signIn, signOut, spireTranslateAdapter, transformAlgoliaCategoryData, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit, updateCartLineById, updateLocale, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaHits, useAlgoliaHitsItems, useAlgoliaHitsLoading, useAlgoliaInsights, useAlgoliaInsightsGlobalState, useAlgoliaInstantSearchState, useAlgoliaInstantSearchStateIndex, useAlgoliaInstantSearchStateOnline, useAlgoliaInstantSearchStateQueryId, useAlgoliaInstantSearchStateStatus, useAlgoliaSearch, useBreakpoint, useCartEvents, useCookie, useCountriesLanguages, useCreateWishList, useCultureCode, useDebouncedCallback, useDeleteCartLineById, useDeleteCurrentCart, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchAnnouncements, useFetchCountries, useFetchCountriesLanguages, useFetchCountriesWithLanguages, useFetchCurrentCart, useFetchCurrentCartCount, useFetchCurrentCartLines, useFetchCurrentCartProductAtp, useFetchCurrentCartPromotions, useFetchCurrentCheckoutAtp, useFetchProductDetailsPageData, useFetchProductListingPageData, useFetchSession, useFetchSettings, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useInvalidateCurrentCart, useInvalidateSession, useIsAuthenticated, useIsBreakpoint, useLanguageCode, useLocalStorage, useNavigate, useOnNavigate, usePatchCart, usePlaceOrder, useProductListingPageProvider, useResizeObserver, useSaveCartForLater, useScrollLock, useScrollTo, useSessionStorage, useSidebar, useSidebarActions, useSignIn, useSignOut, useSubcatagories, useToast, useUpdateCartLineById, useUpdateCultureCode, useUpdateLocale, userToken, wait, withRouting };

package/dist/media/image-lightbox/image-lightbox.d.ts

@@ -3,6 +3,16 @@ import { ImageType } from '../../shared/model/image';
 export interface ImageLightboxProps {
     images: ImageType[];
     initialSelectedIndex?: number;
+    onZoom?: (args: {
+        index: number;
+        scrollPercentage: number;
+    }) => void;
     variant?: 'sm' | 'lg';
 }
-export declare function ImageLightbox({ images, initialSelectedIndex, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageLightbox({ images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }: {
+    currentImage: ImageType | undefined;
+    isZoomed: boolean;
+    onClose: () => void;
+    scrollFromTopPercentage: number;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/modals/dialog/dialog.d.ts

@@ -1,13 +1,22 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Form as AriaForm } from 'react-aria-components';
 import { ModalProps } from '../modal/modal';
-interface DialogProps extends Omit<ModalProps, 'children'> {
+interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
     allowClose?: boolean;
     cancelLabel?: string;
     children?: ReactNode | ((props: {
         close: VoidFunction;
     }) => ReactNode);
-    dialogClassName?: string;
+    className?: string | {
+        close?: string;
+        content?: string;
+        dialog?: string;
+        footer?: string;
+        form?: string;
+        header?: string;
+        heading?: string;
+        modal?: string;
+    };
     footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
     hideTitle?: boolean;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -20,5 +29,5 @@ interface DialogFooterProps {
     close: VoidFunction;
     submitLabel: string;
 }
-export declare function Dialog({ allowClose, cancelLabel, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ allowClose, cancelLabel, children, className, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modals/modal/modal.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
 export interface ModalProps {
     children: ReactNode;
-    className?: string;
+    className?: string | {
+        close?: string;
+        content?: string;
+        modal?: string;
+        overlay?: string;
+    };
     hasCloseButton?: boolean;
     isDismissable?: boolean;
     isFullScreen?: boolean;

package/dist/styles.css

@@ -4392,6 +4392,10 @@ button.swiper-pagination-bullet {
   cursor: zoom-out;
 }
 
+.image-lightbox-module-UVzAg .image-lightbox-module-MMYzc {
+    z-index: var(--zoom-image-layer);
+  }
+
 .image-lightbox-module-UVzAg .image-lightbox-module-sBtWE {
     display: grid;
     overflow: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "type": "module",
   "license": "MIT",
   "engines": {